Ekstralarla Ürün İnceleme Sitesi Oluşturma - 4. Bölüm

Extra kullanarak bir ürün inceleme sitesinin nasıl geliştirileceğini anlatan bu 4 bölümlük dizinin 4. bölümüne hoş geldiniz. Bir ürün inceleme sitesi geliştirmeye nasıl başlayacağınız konusunda kafa yoruyorsanız, bu seri tam size göre. Dahili inceleme işlevi ve akıllı gönderi kategorizasyonu ile Extra, dakikalar içinde harika görünen incelemeler, ürün gönderi şablonları, mega menüler ve kategori düzenleri oluşturmak için özel olarak donatılmıştır. Extra'nın gücünü keşfederken bana katılın.

1. bölümde Tema Seçeneklerimizi ve özelleştirici ayarlarımızı belirledik. 2. bölümde, gönderilerimizi ekledik ve ürün incelemelerimizi görüntülemek için bir gönderi düzeni oluşturduk. Bu serinin 3. bölümünde, ürün inceleme sitemiz için biri ana sayfamız ve diğeri "Tüm Kategoriler" sayfası için olmak üzere iki kategori düzeni oluşturduk.

Bugün, varsayılan kategori düzenimizi, menümüzü ve alt bilgimizi oluşturarak ürün inceleme sitemizi bitireceğiz. Bugünün gönderisinin öne çıkan kısmı, ilgili kategori sayfalarının rengiyle eşleşen menü bağlantılarına sahip özel menü olacak. Ayrıca Extra'nın yerleşik mega menü seçeneklerini nasıl dağıtacağınızı ve kendi özelleştirmelerimizi nasıl ekleyeceğinizi göstereceğim.

İşte İnşa edeceğimiz Şeye Kısa Bir Bakış

Başlayalım.

Ekstralarla Ürün İnceleme Sitesi Oluşturma - 4. Bölüm

Youtube Kanalımıza Abone Olun

Varsayılan Kategori Sayfasını Oluşturma

Ekstra, önceden yüklenmiş bir varsayılan kategori sayfasıyla birlikte gelir. Varsayılan kategori sayfası, belirli bir kategori düzeni seçilmemiş bir kategori sayfasını görüntülerken kullanılacak olan düzendir. Bu serinin 3. bölümünde ana sayfamız için bir kategori düzeni belirledik ve "Tüm Kategoriler" sayfamızı "Tüm Kategoriler" özel kategorisine atadık. Ürün inceleme kategorisi sayfalarımızın geri kalanı için bu varsayılan kategori düzenini kullanacağız.

Varsayılan kategori düzenimizi özelleştirmek için wordpress panosuna gidin ve Ekstra > Kategori Oluşturucu'ya gidin. Ardından "Varsayılan Kategori"nin üzerine gelin ve düzenle bağlantısını tıklayın.

Varsayılan kategoriniz, standart bir bölümün tek sütunlu satırında üst üste yığılmış iki modüle sahiptir. Düzende herhangi bir değişiklik yapmadan önce, “Bu düzeni varsayılan düzen olarak kullan?” seçeneğini işaretlediğinizden emin olun. sağ kenar çubuğundaki Düzen Kullanımı kutusunda.

İlk olarak, en üstteki Öne Çıkan Gönderiler Kaydırıcısını bir Gönderi Döner Modülü ile değiştirin. Ardından, bu modül için Kategori olarak “Geçerli Kategori/Etiket/Tasonomi” seçeneğini işaretleyerek modül ayarlarını güncelleyin. Artık bu gönderiler atlıkarınca modülü yalnızca ziyaret edilen kategori sayfasının ürünlerini gösterecek. Oldukça akıllı, ha?

Kaydet çık

Blog Feed Masonry Module'ü varsayılan ayarlarında bırakabilirsiniz. Gelecekte bu sayfaya ekleyeceğiniz kategori modülünün kendisine atanan "Mevcut Kategori/Etiket/Tasonomi" kategorisine sahip olduğundan emin olun.

Şimdi kategori sayfanızın h1 başlığına stil vermek için Tema Özelleştiricideki Ek CSS'ye aşağıdaki Özel CSS'yi eklemeniz gerekir. Minimum genişliği 980 piksel olan bir medya sorgusunun içine yerleştirdiğinizden emin olun.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

Varsayılan kategori düzeni için bu kadar. Mutfak kategori sayfamda varsayılan düzenimizin nasıl göründüğüne bakalım.

Artık varsayılan kategori düzenimizi yerine getirdiğimize göre, dikkatimizi web sitemizin en önemli bölümlerinden birine, gezinme menüsüne getirelim.

Bu serinin 1. bölümünde temel başlık stilimizi zaten oluşturduk. Ancak bugün birincil gezinme menümüzü oluşturup biçimlendireceğiz.

WordPress Panonuzdan Görünüm > Menüler'e gidin ve ardından Menüler'i seçin. Sayfanın üst kısmındaki “yeni menü oluştur” bağlantısını seçin ve menü adı olarak “Kategoriler Menüsü” adını girin. Ardından Menü Ayarları bölümünün altındaki görüntüleme konumu olarak “Birincil Menü”yü seçin.

Artık menü öğelerimizi menümüze eklemeye başlayabiliriz. Sayfanın solundaki Kategoriler geçiş düğmesine tıklayın. Görünen seçeneklerde, mevcut tüm kategorilerinizi görebildiğinizden emin olmak için "tümünü görüntüle"yi seçin. Oluşturduğunuz (kategorize edilmemiş) tüm 5 kategoriyi işaretleyin ve bunları sayfanın sağındaki menü yapısı bölümüne eklemek için Menüye Ekle düğmesini tıklayın. Şimdi, aşağıdaki sırayla görüntülenecek menü öğelerinin her birine tıklayıp sürükleyebilirsiniz:

• Elektronik
• Giyim
• Mutfak
• Sağlık ve Fitness
• Tüm Kategoriler

Menü öğelerini düzenlemeden önce sayfanın üst kısmındaki ekran seçenekleri bağlantısını seçin. Açılan gelişmiş menü özellikleri bölümünde, “CSS Sınıfları”nın yanındaki kutuyu işaretlediğinizden emin olun. Bu, menü öğelerimizin her birine özel bir CSS Sınıfı eklememize izin verecektir.

Menünüze geri dönün. Elektronik Kategorisi menü öğesinden başlayarak, yapılandırma seçeneklerini açıp kapatmak için tıklayın. CSS Sınıfları kutusuna “green” adında bir sınıf ekleyin. Ve Ekstra Mega Menü seçeneği için “Mega Menü 3 Öne Çıkanlar”ı seçin.

Bu iki şeyi başaracak. İlk olarak, fareyle üzerine gelindiğinde menü öğesini yeşile çevirmek için “green” sınıfı kullanılacaktır. İkincisi, mega menü 3 özellikli seçeneği, menü öğesinin üzerine gelindiğinde mega menü olarak üç özellikli öğe ekleyecektir.

Giyim Kategorisi Menüsü öğesi için “mavi” sınıfını ekleyin ve “Mega Menü 3 Öne Çıkanlar” seçeneğini seçin.

Mutfak Kategorisi Menüsü öğesi için “pembe” sınıfını ekleyin ve “Mega Menü 3 Öne Çıkanlar” seçeneğini seçin.

Sağlık ve Fitness Kategorisi Menüsü öğesi için “mor” sınıfını ekleyin ve “Mega Menü 3 Öne Çıkanlar” seçeneğini seçin.

"Tüm Kategoriler" menü öğesi biraz farklı olacak. Devam edin ve CSS Sınıfları metin kutusunu boş bırakın. Ve Mega Menü seçeneği için “Mega Menü Listesi”ni seçin. Bu mega menü türü, alt menü öğelerinin bir listesini oluşturan daha geleneksel bir mega menüdür. Bu mega menü bağlantısının amacı, tüm kategorileri altında ürünlerinin bir listesiyle birlikte göstermektir.

Geri dönün ve kategoriler kutusunu açın ve aynı dört kategoriyi (Elektronik, Giyim, Mutfak ve Sağlık ve Fitness) seçin ve bunları menüye ekleyin. Ardından, eklediğiniz kategorilerin her birini “Tüm Kategoriler” mega menü öğesinin altına bir seviye sürükleyin.

Bu kategori menü öğelerinin her biri için yapılandırma seçeneklerini değiştirin ve daha önce yaptığınız gibi her birine aynı CSS sınıflarını ekleyin. Eklemeniz gereken sınıfı içeren kategoriler şunlardır:

Elektronik – yeşil
Giyim – mavi
mutfak – pembe
Sağlık ve Fitness – mor

Ardından, mega menüdeki her kategori için öne çıkan kategori resmimiz olarak hizmet etmek üzere kendi özel resmimizi ekleyeceğiz.

Her görüntüyü 500 piksel genişliğe ve 300 piksel yüksekliğe sahip olacak şekilde küçültmek ve kırpmak için bir fotoğraf düzenleyici kullanın.

Bunları WordPress Medya kitaplığına ekleyin/sürükleyin.

Şimdi WordPress Admin'deki menüler sayfasına geri dönün.

Bu örnekte mega menümdeki en üst kategori bağlantısı “Elektronik”. “Elektronik” öğesinin sağındaki oka tıklayın. Gezinme Etiketi kutusuna, “Elektronik” metninin hemen önüne html img etiketini kullanarak istediğiniz resmi ekleyin. Resim etiketi aşağıdaki gibi görünmelidir:

<img src="Insert Image Url" width="100%" />

Resmin URL'sini bulmak için Medya → Kitaplık'a gidin. Eklemek istediğiniz resme tıklayın. Ek Ayrıntıları açılır ekranında, sağdaki bölümde url'yi bulun, vurgulayın ve ardından panonuza kopyalamak için ctrl+c tuşlarını kullanın.

Şimdi menü sayfasındaki "Elektronik" menü öğesi yapılandırmasına geri dönün ve ctrl+v kullanarak resminizin URL'sini yapıştırarak "Görüntü URL'si Ekle" metnini değiştirin.

Sonraki 3 kategori menü öğesi için aynı işlemi tekrarlayın.

Kategori menü öğelerinizin her birine dört resim etiketini de ekledikten sonra, tekil gönderiler menü öğelerinizi (ürün incelemelerinize bağlantılar) ilgili kategorilerin her birinin altına eklemenin zamanı geldi.

Soldaki Gönderiler kutusunu açmak için tıklayın ve “tümünü görüntüle” sekmesini seçin. Ardından 12 ürününüzün tümünü seçin ve Menüye Ekle'ye tıklayın. Ardından, gönderi menüsü öğelerinin her birini kategorilerinin her birinin bir seviye altına sürükleyin.

Menüyü Kaydet

Yeni menümüze göz atmadan önce, menümüze son dokunuşları yapmak için bazı özel CSS eklememiz gerekiyor.

Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdaki CSS'yi girin:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

Ayarlarınızı Kaydedin ve Yayınlayın.

Şimdi yeni menümüze bir göz atalım. Menü öğelerinin üzerine geldiğinizde renklerine dikkat edin. Renkler, ilgili kategori rengiyle eşleşir.

Altbilgiyi Oluşturma

Ürün inceleme sitemizin alt bilgisini oluşturmak için, en son ürün incelemelerini ve bir kategori listesini görüntülemek için Extra'nın yerleşik widget'larından yararlanacağız.

Öncelikle Tema Özelleştirici > Altbilgi Ayarlarına gitmemiz gerekiyor. Ardından Düzen'e tıklayın ve 2 sütunlu bir düzen seçin.

Geri dönün ve Tipografi'yi seçin ve aşağıdakileri güncelleyin:

Başlık Metni Boyutu: 32
Gövde/Bağlantı Metni Boyutu: 16
Widget Metin Rengi: rgba(255,255,255,0.6)
Widget Bağlantı Rengi: #ffffff
Widget Başlık Rengi: #ffffff

Kaydet ve Yayınla

Tema Özelleştiricinin ana menüsüne dönün ve Widget'ları seçin. Ardından Alt Bilgi Kenar Çubuğu Sol'u seçin ve Widget Ekle düğmesini tıklayın. Ekstra – Son İncelemeler widget'ını seçin

Widget menüsüne geri dönün ve Alt Bilgi Kenar Çubuğu Sağ'ı seçin ve Kategoriler widget'ını ekleyin.

Ek CSS bölümüne gidin ve alt bilginiz için aşağıdaki Özel CSS'yi ekleyin.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Tema Özelleştirici ayarlarını kaydedin ve yayınlayın ve alt bilginize bakın.

Bu kadar. 4. bölümü başarıyla bitirdiniz ve Extra kullanarak bir ürün inceleme sitesi oluşturma dizisini tamamladınız.

Son CSS

Seride nereden geldiğinize bağlı olarak, her şeyi doğru girdiğinizden emin olmak için özel CSS'nizi kontrol etmeniz gerekebilir. Tema Özelleştiriciye girilecek son CSS kodu burada.

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
comment box background
*****************************/
#comment-wrap {
padding: 75px 40px;
background: #fff;
border-radius: 3px;
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
}
@media (min-width: 980px) {

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

/***************************
Post Header Size
****************************/
h1.entry-title {
font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
text-align: center;
padding-bottom: 0px;
}
.fancy span {
display: inline-block;
position: relative;
line-height: 1.3em;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 4px solid #333;
border-top: 4px solid #333;
top: 40%;
width: 100%;
max-width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title {
display: block;
font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Toplama

Umarım benimle bir Ürün İnceleme sitesi oluştururken Ekstra'nın gücünü keşfetmekten keyif almışsınızdır. En azından bu olağanüstü tema için yeni bir takdir ve onunla daha fazlasını yapmak için biraz ilham alarak çekip gideceğinizden eminim. Yerleşik inceleme sistemi, akıllı kategori düzenleri ve Divi Builder'ın gücü, onu bir ürün inceleme sitesi için mükemmel bir seçim haline getirir.

Ele almadığım bir konu (gelecekteki bir gönderi için saklıyorum), Ekstra kullanarak bağlı kuruluş bağlantılarının nasıl ele alınacağı. Sonuçta, çoğu insan için ürün inceleme sitelerinin nihai hedefi para kazanmaktır. Bu konuyla ilgili düşüncelerinizi aşağıda yorumlarda paylaşmaktan çekinmeyin.

Cevabınızı sabırsızlıkla bekliyorum.