Ekstra Ürün İnceleme Siteleri Oluşturma – Bölüm 4
Ekstra kullanarak ürün inceleme sitesinin nasıl geliştirileceğine dair bu bölümün 4 serisinin 4. bölümüne hoş geldiniz. Bir ürün inceleme sitesi geliştirmeye nasıl başlayacağınız konusunda beyninizi sıkarsanız, bu seri sizin için uygundur. Varsayılan inceleme ve akıllı yayınların kategorizasyonu işlevi ile Extra, birkaç dakika içinde harika bir görünüm, ürün sonrası şablon, mega menü ve kategori düzeni yapmak için özel olarak donatılmıştır. Ekstra gücü keşfettiğimizde bana katılın.
Bölüm 1’de tema seçeneklerini ve ayar ayarlarını ayarladık. Bölüm 2’de, ürün incelemelerimizi görüntülemek için gönderimizi ekledik ve yayınların bir gönderisi oluşturduk. Bu serinin 3. bölümünde, ürün inceleme sitemiz için biri ana sayfamız için, diğeri “Tüm Kategori” sayfası için iki kategori düzeni yaptık.
Bugün, varsayılan kategorilerimizi, menülerimizi ve altbilgi kategorilerimizi oluşturarak ürün inceleme sitemizi tamamlayacağız. Bugünkü gönderinin en önemli özelliği, uygun kategori sayfasının rengiyle eşleşen bir menü bağlantısı olan özel bir menüdür. Ayrıca ekstra bir mega menü seçeneğini nasıl uygulayacağınızı ve bazı ayarlamalarımızı ekleyeceğim. İşte ne inşa edeceğimizin bir gözü Başlayalım. Ekstra Ürün İnceleme Siteleri Oluşturma – Bölüm 4 YouTube Kanallarına Abone Olmak Ekstra Varsayılan Kategori sayfasını oluşturuyoruz. Varsayılan kategori sayfası, belirli bir kategori düzeni bulunmayan kategori sayfasını görüntülerken kullanılacak düzendir. Bu serinin 3. bölümünde, ana sayfamız için kategori düzenini belirledik ve “tüm kategorileri” özel kategoriye ayarladık. Diğer ürün incelemeleri kategorileri için varsayılan kategori düzenini kullanacağız. Varsayılan kategorimizin düzenini ayarlamak için WordPress kontrol panelini açın ve ekstra> kategori oluşturucuya gidin. Ardından imleci “Varsayılan kategori” na yönlendirin ve Düzenle bağlantısını tıklayın.
Varsayılan olarak, varsayılan kategorinizde standart bölümün bir sütununun bir sırtında birbirleriyle yığılmış iki modül bulunur. Düzende değişiklik yapmadan önce, “Bu düzeni varsayılan düzen olarak kullanın mı?” Sağ kenar çubuğundaki düzen kullanım kutusunda. İlk olarak, öne çıkan yayınlar kaydırıcısını karusel direk modülü ile değiştirin. Ardından, bu modül için bir kategori olarak “Geçerli Kategori/Tag/Taksonomi” ni kontrol ederek modül ayarlarını güncelleyin. Şimdi bu atlıkarınca gönderi modülü, yalnızca ziyaret edilen kategori sayfasından ürünleri görüntüler. Oldukça akıllı, ha? Kaydet ve Çıkış Masonry Bait Blog Modülünü varsayılan ayarlara izin verebilirsiniz. Gelecekte bu sayfaya eklediğiniz herhangi bir kategori modülünün üzerinde “Geçerli kategoriler/etiket/taksonomi” kategorisine sahip olduğundan emin olun. Şimdi H1 kategori sayfası başlığınızı düzenlemek için, tema ayarındaki ek CSS’ye aşağıdaki özel CSS eklemeniz gerekir. Minimum genişliği 980 piksel olan bir medya sorgusuna koyduğunuzdan emin olun. .
yazı tipi boyutu: 48px;
Çizgi yüksekliği: 1.3em;
}
Hepsi varsayılan kategorinin düzeni için. Mutfak kategorim sayfamda varsayılan düzenimizin nasıl bir şey olduğunu görelim.
Artık varsayılan kategori düzenine sahip olduğumuza göre, web sitemizin en önemli kısımlarından birine dikkat edelim – gezinme menüsü. Temel gölgelik stilimizi bu serinin 1. Bölümünde hazırladık. Ancak bugün ana navigasyon menümüzü yapıp düzenleyeceğiz. WordPress kontrol panelinizden görünüm> menülere gidin ve ardından menüleri seçin. Sayfanın üst kısmındaki “Yeni Menü Oluştur” bağlantısını seçin ve menü adı olarak “Kategori Menüsü” adını girin. Ardından Menü Ayarları bölümünün altındaki ekranın konumu olarak “Ana Menü” seçeneğini seçin.
Şimdi menü öğelerimizi menümüze eklemeye başlayabiliriz. Sayfanın solundaki kategori anahtarını tıklayın. Görünen seçenekte, mevcut tüm kategorileri görebildiğinizden emin olmak için “Tümüne bakın” seçeneğini seçin. Oluşturduğunuz 5 kategoriyi kontrol edin (kategorize edilmemiş değil) ve sayfanın sağındaki menü yapısı bölümüne eklemek için Menü Ekle düğmesini tıklayın. Şimdi aşağıdaki sırayla görüntülenecek her menü öğesini tıklayabilir ve sürükleyebilirsiniz: Elektronikler Çamaşırlar Mutfak
Sağlık ve Fitness
Tüm Kategoriler
Menü öğesini düzenlemeden önce, sayfanın üst kısmındaki ekran seçeneği bağlantısını seçin. Gelişmiş menünün açık olan mülk bölümünde, “CSS sınıfı” nın yanındaki kutuyu kontrol ettiğinizden emin olun. Bu, menü öğelerimizin her birine özel CSS sınıfları eklememizi sağlayacaktır.
Menünüze geri dön. Elektronik kategori menü öğesinden başlayarak yapılandırma seçeneğini açmak için tıklayın. CSS sınıfı kutusuna “Green” adlı bir sınıf ekleyin. Ekstra Mega Menü seçeneği için “Mega Menü 3 Öne Çıkan” ı seçin. Bu iki şey elde edecek. İlk olarak, “Yeşil” sınıf, imleci yönlendirirken menü öğesini yeşil olarak değiştirmek için kullanılacaktır. İkincisi, Mega Menü 3 Özellik seçeneği, imleci menü öğesine yönlendirirken mega menü olarak üç mükemmel öğe ekleyecektir.
Giyim kategorisi menü öğesi için “Mavi” sınıfını ekleyin ve “Mega 3 Öne Çıkan” seçeneğini seçin. Mutfak kategorisi menü öğeleri için “Pembe” sınıfını ekleyin ve “Mega Menü 3 Öne Çıkan” seçeneğini seçin. Sağlık ve Fitness kategorisi menü öğesi için “Mor” sınıfını ekleyin ve “Mega 3 Öne Çıkan” seçeneğini seçin. “Tüm kategori” menü öğesi biraz farklı olacaktır. Lütfen ve CSS sınıfı metin kutusunu boş bırakın. Mega Menü seçeneği için “Mega Menü Listesi” ni seçin. Bu tür mega menü, alt menü öğelerinin bir listesini yapan daha geleneksel bir mega menüdür. Bu mega menü bağlantısının amacı, altındaki ürün listesi ile tüm kategorileri görüntülemek ve kategori kutusunu açmak ve aynı dört kategoriyi (elektronik, giyim, mutfak ve sağlık ve fitness) seçmek ve menüye eklemek. Ardından, “Tüm Kategoriler” mega menü öğesinin altına bir seviye eklediğiniz her kategoriyi sürükleyin. Kategori menü öğelerinin her biri için yapılandırma seçeneklerini yönlendirin ve her birinize daha önce yaptığınız gibi aynı CSS sınıfını ekleyin. İşte eklemeniz gereken bir sınıfa sahip bir kategori: Elektronik – Yeşil Giyim – Mavi Mutfak – Pembe Sağlık ve Fitness – Mor O zaman Mega Menüdeki her kategori için üstün bir kategori görüntüsü olarak kullanılacak kendi özel görüntülerimizi ekleyeceğiz .
500 piksel genişliğe ve 300 piksel yüksekliğe sahip olmak için her görüntüyü küçültmek ve kesmek için bir fotoğraf editörü kullanın. WordPress Medya Kütüphanesi’ne ekleyin/sürükleyin. Şimdi WordPress Yöneticisi’ndeki menü sayfasına geri dönün. Bu örnekte, mega menümdeki en iyi kategori bağlantısı “Elektronik” dır. “Elektronik” öğesinin sağındaki oku tıklayın. Gezinme etiket kutusuna, “elektronik” metinden hemen önce HTML IMG etiketini kullanarak istediğiniz görüntüyü ekleyin. Görüntü etiketi aşağıdaki gibi görülecektir: Görüntüye URL’yi bulmak için Medya → Kütüphaneyi açın. Eklemek istediğiniz resmi tıklayın. Detaylı açılır pencere ekranında, sağdaki URL’yi bulun, vurgulayın, ardından panonuza kopyalamak için CTRL+C kullanın. Şimdi menü sayfasındaki “Elektronik” menü öğesi yapılandırmasına geri dönün ve CTRL+V kullanarak görüntü URL’nizi ekleyerek “URL görüntüsünü yapıştır” metnini değiştirin. Sonraki 3 kategori menü öğesi için aynı işlemi tekrarlayın. Kategori menü öğelerinizin her birine dört resim etiketinin tamamını ekledikten sonra, her kategorinin altına tek yazı menü öğenizi (ürün incelemenize bağlantı) ekleme zamanı. Soldaki posta kutusunu açmak için geçiş yapmak için tıklayın ve ” Hepsine bakın “sekmesi. Ardından 12 ürününüzün tamamını seçin ve menüye Ekle’yi tıklayın. Ardından, her bir öğe menüsünü her kategorinin altına bir seviye yayınlayarak sürükleyin.
Menüyü kaydedin Yeni menümüzü kontrol etmeden önce, menümüze son bir dokunuş sağlamak için bazı özel CSS eklememiz gerekir. Tema Ayarını Aç> Ek CSS ve aşağıdaki CSS’ye girin: /********************************* Stil Menüsü
*************************
#Et-menu li.green A: Hover, #et-menu li.current-menu-item.green a {
Renk: #5bd999! Önemli;
Li.green A: Önce {
Arka Plan Renk: #5BD999! Önemli;
}
#Et-menu li.pink A: Hover, #et-menu li.current-menu-item.pink a {
Renk: #E6567A! Önemli;
}
Li.Pink A: Önce {
Arka Plan Renk: #E6567A! Önemli;
}
#Et-menu li.blue a: hover, #et-menu li.current-menu-item.blue a {
Renk: #00C0E4! Önemli;
}
Li.Blue A: Önce {
Arka Plan-Renk: #00C0E4! Önemli;
}
#Et-menu li.purple A: Hover, #et-menu li.current-menu-item.purple a {color: #7658f8! Önemli;
}
Li.purple A: Önce {
Arka Plan rengi: #7658F8! Önemli;
}
/*****************************
Hover’daki NAV bağlantıları altındaki hat yüksekliğini artırın
************************
#et-navigation & amp; amp; amp; amp; amp; gt; amp; amp; amp; a: önce {önce {
Yükseklik: 8px;
}
Ayarlarınızı kaydedin ve yayınlayın. Şimdi yeni menümüze bakalım. İmleci ona yönlendirdiğinizde menü öğesinin rengine dikkat edin. Renk, uygun kategori rengiyle eşleşir.
Ürün inceleme sitemiz için bir altbilgi oluşturmak için bir altbilgi oluştururken, en son ürün incelemelerini ve kategorilerin bir listesini görüntülemek için varsayılan ekstra widget’ı kullanacağız. Önce özelleştirici temasına gitmeliyiz> altbilgi ayarları. Ardından, düzeni tıklayın ve 2 sütun düzenini seçin.
Döndürün ve aşağıdaki tipografiyi seçin ve güncelleme: Başlık Metin Boyutu: 32 Gövde Metin Boyutu/Bağlantı: 16 Renk Widget Metin: RGBA (255,255,255,0.6) Renk Widget Link: #fffff Renk Widget Başlık: #fffffff
Özelleştirici temasının ana menüsüne kaydedin ve yayınlayın ve widget’ları seçin. Ardından solun soluncu kenar çubuğu seçin ve Widget Ekle düğmesini tıklayın. Ekstra Widget’ı seçin – Son İncelemeler
Widget menüsüne geri dönün ve alt çubuğu sağda seçin ve kategori widget’ı ekleyin.
Ek CSS bölümünü açın ve altbilginiz için aşağıdaki özel CSS’yi ekleyin. /*****************************
Altbilgi ************************* #footer .et_pb_widget li { Sınır alt kısımları: yok; Renk: #fff; }
.et_pb_widget
Arka plan: RGBA (255,255,255, .1);
}
Temaları ayarlama ayarlarını kaydedin ve yayınlayın ve dipnotlarınızı görün. Bölüm 4’ü başarıyla tamamladınız ve ekstra kullanarak bir ürün inceleme sitesi oluşturmak için diziyi tamamladınız. Son CSS, diziye nereye girdiğinize bağlıdır, her şeyi doğru girdiğinizden emin olmak için özel CSS’nizi kontrol etmeniz gerekebilir. İşte özelleştirici temasına girilecek son CSS kodu. .et_pb_extra_module, .posts-blog-fed-todule.masonry. Hentry {
Kutu -Shadow: -1px 0 2px 0 RGBA (0.0,0,0.0.12), 1px 0 2px 0 RGBA (0.0,0,0.0.12), 0 1px 1px 0 RGBA (0.0,0,0.24);
Sınır üstü: 10 piksel katı;
}
/*****************************
Stil Menüsü
************************* #Et-menu li.green A: Hover, #et-menu li.current-menu-item.green a {
Renk: #5bd999! Önemli;
}
Li.green A: Önce {
Arka Plan Renk: #5BD999! Önemli;
}
#Et-menu li.pink A: Hover, #et-menu li.current-menu-item.pink a {
Renk: #E6567A! Önemli;
}
Li.Pink A: Önce {
Arka Plan Renk: #E6567A! Önemli;
}
#Et-menu li.blue a: hover, #et-menu li.current-menu-item.blue a {
Renk: #00C0E4! Önemli;
}
Li.Blue A: Önce {
Arka Plan-Renk: #00C0E4! Önemli;
}
#Et-menu li.
Renk: #7658F8! Önemli;
}
Li.purple A: Önce {
Arka Plan rengi: #7658F8! Önemli;
}
/*****************************
Hover’daki NAV bağlantıları altındaki hat yüksekliğini artırın
************************
#et-navigation> ul> Li> A: Önce {
Yükseklik: 8px;
}
/*****************************
Yorum kutusu arka planı
*************************
#Yorum-wrap {
Dolgu: 75px 40px;
Arka plan: #fff;
Border-Radius: 3px;
Kutu -shadow: -1px 0 2px 0 RGBA (0.0,0,0.0.12), 1px 0 2px 0 rgba (0.0,0.0.0.12), 0 1px 1px 0 rgba (0.0,0,0.24);}
@Media (min-width: 980px) {
.jin-cta {
Ekran bloğu;
Metin-align: merkez;
Sınır: 3px katı #333;
Renk: #333;
Dolgu: 20px 15px;
Metin-Transform: büyük harf;
yazı tipi-ağırlık: 600;
yazı tipi boyutu: 30px;
}
/*****************************
Başlık Gönderme Boyutu
************************
H1.Entry-Title {
yazı tipi boyutu: 48px;
}
/*****************************
Süslü altyazılar
************************
.ALT YAZI {
Marj: 1em 0! Önemli;
yazı tipi boyutu: 48px;
}
.Fance {
Metin-align: merkez;
Dolgu Alt: 0px;
}
.Fance Span {
Ekran: satır içi blok;
Pozisyon: göreceli;
Çizgi yüksekliği: 1.3em;
}
. Fantezi Span: Önceden,
.Fancy Span: Sonra {
İçerik: “”;
Pozisyon: Mutlak;
Yükseklik: 5 piksel;
Sınır dip: 4px katı #333;
Sınır üstü: 4px katı #333;
EN İYİ 40%;
Genişlik:%100;
Max-Width: 200px;
}
. Fantezi Span: Önce {
Doğru:%100;
Marj-sağ: 15px;
}
.Fancy Span: Sonra {
Sol:%100;
Marj-sol: 15px;
}
/*****************************
Yıldız Derecelendirme ve Sosyal İkonlar Stili
************************
.Post-footer .ting-stars .ting-star {
Genişlik: 50px;
Yükseklik: 50px;
}
.et_extra_layout .et_pb_column. Modül-baş H1,. Modül-kaf. Modül-filtre {
yazı tipi boyutu: 28px;
}
.Post-Faother .Ting-Stars #Hız Titmleri, .Post-Footer .social-icons .Share-Titles {
Ekran bloğu;
yazı tipi boyutu: 20px;
}
.Post-Footer .ting-Stars, .Post-footer. Social-icons {
Genişlik:%100;
Marj: 0 otomatik;
Dolgu: 30px 0;
}
.post-footer .ocial-icons {
Sınır dip: 4px katı #dddddd;
}
}
/*****************************
Altbilgi
*************************
#footer .et_pb_widget li {
Sınır alt kısımları: yok;
Renk: #fff;
}
.et_pb_widget.widget_et_recent_reviews .Review-breakdowns .score-bar-bg {arka plan: rgba (255,255,255, .1);
}
/*****************************
Mobil Ayarlamalar
************************
@Media (Max-Width: 980px) {
.ALT YAZI {
yazı tipi boyutu: 30px;
Metin-align: merkez;
}
}
Umarım benimle bir ürün inceleme sitesi oluşturmada ekstra güç keşfetmekten hoşlanırsınız. Eğer varsa, en azından bu olağanüstü tema için yeni bir takdir ve onunla daha fazlasını yapmak için biraz ilham alacağınızdan eminim. Doğal inceleme sistemi, akıllı kategorinin düzeni ve Divi Builder’ın gücü, ürün inceleme siteleri için çok uygun hale getirir. Tartışmadığım bir konu (gelecekteki yayınlar için kaydetmek) ekstra kullanarak bağlı kuruluş bağlantılarının nasıl ele alınacağıdır. Sonuçta, çoğu insan için, ürün inceleme sitesinin nihai amacı para kazanmaktır. Yorumlarda aşağıdaki bu sorun hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin. Sizden haberleri duymayı umuyorum.
