Divi'de Dinamik HTML Site Haritası Sayfası Nasıl Oluşturulur

Bir HTML site haritası sayfası, Divi sitenizde panoramik bir görünümden gezinmek isteyen kullanıcılar için faydalı olabilir. Temel olarak, bir HTML site haritası (adından da anlaşılacağı gibi), sitenizin HTML'deki bir haritasıdır. Site haritası sayfası genellikle sitenizdeki tüm ilgili içeriğe giden düzenli bir bağlantı listesi içerir. Bir HTML Site Haritası sayfası manuel olarak oluşturulabilir, ancak sürekli güncellemeler konusunda endişelenmenize gerek kalmaması için site haritası sayfası içeriğini dinamik olarak oluşturabilmeniz yardımcı olur.

Bu öğreticide, Divi Design ve WP Site Haritası Sayfası eklentisinin bir kombinasyonunu kullanarak Divi'de dinamik bir HTML site haritası sayfa düzeninin nasıl oluşturulacağını göstereceğiz. Kurulum son derece kolaydır ve sonuç şaşırtıcı derecede etkilidir.

Başlayalım.

Gizlice Bakış

HTML Site Haritası Sayfa Düzenini ÜCRETSİZ indirin

Bu öğreticiden site haritası sayfa düzenine el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Youtube Kanalımıza Abone Olun

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

NOT: Bu düzen, WP Site Haritası Sayfası eklentisiyle birlikte kullanılan kısa kodlara dayanır. Sitenizde eklenti aktif değilse, modüllerin içindeki içeriği göremezsiniz.

Bu Eğitim İçin İhtiyacınız Olan Şeyler

Bu eğitim için aşağıdakilere ihtiyacınız olacak:

1. Divi Tema.
2. WordPress İçeriği. HTML site haritası sayfa içeriği oluşturmak için sitenizde gerçek sayfalar, gönderiler, kategoriler, ürünler vb.
3. WP Site Haritası Sayfası eklentisi. Buna, aşağıda nasıl yapacağınızı göstereceğimiz WordPress panosundan erişilebilir.

Hadi öğreticiye geçelim, olur mu?

XML ve HTML Site Haritaları Arasındaki Fark

Site haritalarında yeniyseniz, temel olarak iki tür vardır – XML ve HTML. XML site haritaları, arama motorlarına sitenizin ayrıntılı bir haritasını vermek için özel olarak oluşturulur. Çoğunlukla, XML site haritaları kesinlikle Google gibi arama motorlarının sitenizi taramasını kolaylaştırması için vardır ve bu da sıralamanızı yükseltmeye yardımcı olur. Bu nedenle, XML siteleri kullanıcı için değildir. Burası HTML site haritalarının devreye girdiği yerdir. HTML site haritaları, web sitenizdeki gerçek bir site haritası sayfasında yerleşik gerçek HTML'dir (ve Divi ve WordPress kullandığımızdan beri PHP). Buradaki fikir, kullanıcı için tüm ilgili web sitesi içeriğinin (yazılar, sayfalar, ürünler, kategoriler vb.) tek bir uygun yerde organize bir listesini oluşturmaktır. Temel olarak, bir HTML site haritası sayfası, tüm siteniz için bir mega menü gibidir.

Site haritaları hakkında daha fazla bilgi için (WordPress'te bir XML site haritasının nasıl oluşturulacağı gibi), WordPress siteniz için nasıl site haritası oluşturulacağına ilişkin yazımıza göz atın.

Eklentiyi Ayarlama

Bu eğitim için, kısa kodlar kullanarak bir Divi modülünde site haritası içeriğini dinamik olarak görüntülememize izin verecek WP Site Haritası Sayfası adlı ÜCRETSİZ ama etkili bir WordPress eklentisi kullanacağız.

Eklentiyi indirmek için WordPress Kontrol Panelinize gidin ve eklentiler > Yeni Ekle'ye gidin. Ardından arama çubuğunu kullanarak wp site haritası sayfası eklentisini arayın ve ardından eklentiyi kurun ve etkinleştirin.

WP Site Haritası Sayfası Eklenti Ayarlarını açmak için Ayarlar > WP Site Haritası Sayfası'na gidin. Orada mevcut ayarları göreceksiniz. Bu eğitim için, ayarlar sekmesinin altındaki seçenekleri yalnız bırakacağız, ancak bunları daha sonra görüntülemekten çekinmeyin.

Site haritası sayfa içeriğimizi görüntülemek için kullanabileceğimiz tüm mevcut kısa kod örneklerini görmek için Nasıl Kullanılır sekmesine tıklayın. Vurgulananlar, kullanacağımızlardır.

Divi'de HTML Site Haritası Sayfası Oluşturma

Eklentiler kurulduktan sonra Divi'de Site Haritası sayfa düzenini tasarlamaya başlamaya hazırız.

Yeni Sayfa Oluşturma

Başlamak için yeni bir sayfa oluşturun, ona "Site Haritası" adını verin ve ardından "Divi Builder'ı Kullan"ı tıklayın.

Sayfaya Hazır Düzeni Ekleme

Sayfanızı nasıl oluşturmak istediğinize dair üç seçenekle karşılaşacaksınız. “Önceden Yapılmış Bir Düzen Seçin”i seçin.

Ardından Dergi Düzeni Paketini arayın ve bulun ve Kategoriler Sayfa Düzenini kullanmak için tıklayın.

Gereksiz Öğeleri Silme

Bu hazır düzenin sadece üst bölümünü kullanacağımızdan, sayfaya yerleşim yüklendikten sonra ilk bölümün altındaki tüm bölümleri silin.

Ardından, üst bölümün altına yeni bir normal bölüm ekleyin.

Sayfaları Görüntülemek için 1. Satır Ekleme

İlk satırımız için sitedeki tüm sayfaları gösterecek HTML site haritası sayfa içeriği ekleyeceğiz. Tek sütunlu bir satır ekleyerek başlayalım.

Sayfaları Görüntülemek için Metin Modülü Ekleme

Satırın içine yeni bir metin modülü ekleyin.

Ardından, metin sekmesinin altındaki içerik kutusunun içine aşağıdakini yapıştırın:

<h2>Pages</h2>

[wp_sitemap_page only="page" display_title="false"]

Metin Tasarım Ayarları

Metin içeriğinin çoğu bir kısa kod tarafından oluşturulsa da, bu öğeleri yerleşik Divi tasarım ayarlarını kullanarak tasarlayabiliriz. Tasarım sekmesine geçin ve aşağıdakileri güncelleyin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Kalın

Ardından bağlantı ayarları sekmesini seçin ve aşağıdakileri güncelleyin:

• Bağlantı Metni Rengi: #333333

Ardından, sırasız liste ayarları sekmesini seçin ve aşağıdakileri güncelleyin:

• Sırasız Liste Metin Rengi: #c5e0dc
• Sırasız Liste Stil Türü: Kare
• Sırasız Liste Stili Konumu: İçeride
• Sırasız Liste Öğesi Girintisi: 5vw

NOT: Herhangi bir bağlantı stili, sırasız liste stillerini geçersiz kılar. Bu yüzden bu sırasız liste metin rengini ekleyebiliriz ve bu sadece küçük kare madde işaretleri için geçerli olacaktır.

Başlık 2 stilini aşağıdaki gibi güncelleyin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Boyutu: 3vw (masaüstü), 38 piksel (tablet)

Ardından, modülü biraz sola çekmek için boşluğu bir miktar sol negatif kenar boşluğu ile güncelleyin. Bu, başlığımız ve kutu gölgemizle güzel bir örtüşen tasarım ekleyecektir.

Son olarak, içeriği sütunlara bölmek için daha sonra bazı özel CSS'lerle hedefleyebilmemiz için modüle özel bir CSS Sınıfı ekleyin.

• CSS Sınıfı: sütun listesi

Satır Ayarları

Şimdi satır ayarlarını aşağıdaki gibi güncelleyin:

• Marj: 5vw alt

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Yatay Konumu: -5vw
• Kutu Gölge Dikey Konumu: 0px
• Gölge Rengi: #c5e0dc

Gönderileri ve Kategorileri Görüntülemek için 2. Satır Ekleme

Yenisini Oluşturmak için Satırı Çoğalt

İkinci satırımızda, blog yazılarımız için HTML site haritası sayfa içeriğini görüntüleyeceğiz. İkinci satırı oluşturmak için, sayfalarımızı içeren yeni oluşturduğumuz satırı çoğaltın.

Kategorileri Görüntülemek için Kısa Kodlu Metin Modülünü Güncelleyin

Ardından, yinelenen satırdaki metin modülünün ayarlarını açın ve içeriği aşağıdakiyle değiştirin:

<h2>Categories</h2>

[wp_sitemap_page only="category" display_title="false"]

Bu kısa kod, gönderi kategorilerini dinamik olarak görüntüler.

Kategoriye Göre Gönderiler için Ayrı Başlık Görüntülemek için Yinelenen Metin Modülü

Gönderileri kategoriye göre görüntülemek için gönderi kategorilerini içeren metin modülünü çoğaltın ve içeriği aşağıdakilerle güncelleyin:

<h2>Posts by Category</h2>

Gönderileri Kategoriye Göre Listelemek için Metin Modülünü Çoğalt ve İçeriği Kısa Kodla Güncelle

Tasarım nedenleriyle başlığı kısa koddan ayrı bir metin modülüne koyacağız.

Az önce çoğalttığınız metin modülünü bir kez daha çoğaltın.

Ardından yeni yinelenen metin modülünün içeriğini aşağıdaki gibi yeni bir kısa kodla güncelleyin:

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

Divi ile Kısa Kod İçerik Tasarımını Güncelleyin

Bu kısa kodun iç içe bir listesi olduğundan, onu biraz farklı şekilde optimize etmemiz gerekecek. Tasarım sekmesine tıklayın ve aşağıdakileri güncelleyin:

• Sırasız Liste Stili Pozisyonu: Dış
• Sırasız Liste Öğesi Girintisi: 0px

• Kenar boşluğu: 0 piksel kaldı
• Dolgu: 3.2vw kaldı

Ardından CSS Sınıfını aşağıdakiyle değiştirin:

• CSS Sınıfı: esnek sütunlar

Ürünler için Satır #3 Ekleme

Bu üçüncü ve son satırda, ürün kategorilerini ve tüm ürünleri görüntüleyen HTML site haritası sayfa içeriği ekleyeceğiz.

1. Satırı Çoğalt

Başlamak için en üstteki satırı (sayfaları gösteren) çoğaltalım.

Ürün Kategorilerini Görüntülemek için Metin Modülü Ayarlarını Güncelleyin

Ardından, kopyanın metin ayarlarını aşağıdaki içerikle güncelleyin:

<h2>Product Categories</h2>

[wp_sitemap_page only="product_cat" display_title="false"]

Bu kısa kod, ürün kategorilerini gösterecektir.

Ürünleri Görüntülemek için Metin Modülünü Çoğalt

Ardından, yeni oluşturulan metin modülünü çoğaltın.

Ardından, yinelenen metin ayarlarını aşağıdaki içerikle güncelleyin:

<h2>Products</h2>

[wp_sitemap_page only="product" display_title="false"]

Bu kısa kod, site genelindeki tüm ürünleri gösterecektir.

Satır Kutusu Gölge Rengini Güncelle

Bölümler arasında biraz ayrım yapmak için ürün kategorilerimizi ve ürünlerimizi içeren satır için kutu gölgesini değiştirebiliriz. Bunu yapmak için satır ayarlarını aşağıdaki gibi güncelleyin:

• Gölge Rengi: #ffc077

Sayfa Başlığını Güncelle

Unutmadan, en üst bölüme atlayın ve iki metin modülünü “Site Haritası” metni ile güncelleyin. Bu, site haritası sayfamız için doğru bir başlık verecektir.

Sonuç Şimdiye Kadar

İşte şimdiye kadarki sonuç.

Bu tek sütunlu tasarım, olduğu gibi gerçekten harika görünüyor, bu yüzden bir gün deyip onunla yuvarlanmaktan çekinmeyin. Ancak düzeni birden çok sütunla artırmak istiyorsanız aşağıya bakın.

Özel CSS ile Site Haritası Sayfa İçeriğine Birden Çok Sütun Ekleme

Şu anda, varsayılan düzen, site haritası sayfa içeriğini tek bir sütunda görüntüleyecektir. Bunu masaüstü ve tablette birden çok sütuna bölmek istiyorsanız Divi'deki bir kod modülüne özel CSS ekleyebilirsiniz.

İlk olarak kod modülünü sayfanın en altına ekleyin (nerede olduğu önemli değil).

Ardından aşağıdaki CSS kodunu kod kutusuna yapıştırın:

<style>
@media all and (min-width: 767px) {
  
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
  
}
</style>

Bu CSS snippet'i yalnızca büyük bir tablet ve üstü için geçerlidir. Kod, onlara daha önce eklediğimiz CSS sınıflarıyla metin modüllerini hedefler. “Flex-columns” sınıfına sahip metin modülü için, gönderileri kategoriye göre oluşturan kısa kod 300 piksel genişliğinde sütunlara bölünmüştür. “Column-list” sınıfına sahip metin modülleri, kısa kod site haritası sayfa içeriğini üç sütuna böler.

Son sonuç

Nihai sonucu kontrol edin!

Site Haritası İçeriği Eklemenin Diğer Yolları

WordPress Widget'ları, Divi modülleri ve WooCommerce kısa kodlarını kullanarak site haritası sayfasına site haritası içeriği de ekleyebiliriz.

WordPress Widget'larını kullanın

WordPress, sayfalar, kategoriler ve ürünler gibi şeyleri gösterecek bazı standart widget'lara sahiptir. Görünüm > Widget'lar altındaki WordPress panosunda bulunabilirler. Site haritası sayfasına bir şey eklemeniz gerekiyorsa, Divi'nin kenar çubuğu modülünü kullananlardan yararlanmaktan çekinmeyin.

Divi Blog Modülünü Kullanın

Divi'nin blog modülü, gönderileri, sayfaları, projeleri ve ürünleri görüntülemek için yerleşik ayarlarla birlikte gelir. Tasarıma minimalist bir yaklaşım getirirseniz, site haritası sayfaları için oldukça havalı, özelleştirilebilir bir liste elde edebilirsiniz.

Örneğin, yeni bir blog modülü ekleyebilir ve gönderi türü olarak ürünleri seçebilir ve artık sitemizde tüm ürünleri görüntüleyecek kadar büyük bir gönderi sayısı verebiliriz.

Ardından ürün bağlantısı/başlığı dışındaki tüm öğeleri gizleyebiliriz.

Aynı işlemi sayfalar için de yapabiliriz. Sadece gönderi türü için sayfaları seçin.

Ürün Kısa Kodu

WooCommerce ürünleri için, ürün listeleri veya ürün kategorisi listeleri oluşturmak için WooCommerce Ürün Kısa Kodunu kullanabiliriz. Ürün kısa kodu, ürünleri istediğiniz gibi görüntülemek için çok sağlam ve çok yönlüdür. Yerleşik ayarlardan yararlanmak için bir Divi Modülü içindeki kısa kodu bile kullanabilirsiniz.

Son düşünceler

Divi'nin gücüyle birleştirilmiş WP Site Haritası Sayfası eklentisini kullanmak, web siteniz için dinamik bir HTML Site Haritası sayfası oluşturmak için güzel ve basitleştirilmiş bir çözümdür. Ayrıca Divi modüllerinin ve WooCommerce kısa kodlarının herhangi bir kombinasyonunu kullanarak site haritası sayfanıza kolayca daha dinamik içerik ekleyebilirsiniz. İhtiyaçlarınıza uyan doğru tasarımı denemekten ve bulmaktan çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!