WordPress’te Bir Üst Sayfa İçin Alt Sayfaların Listesi Nasıl Görüntülenir?

Geçenlerde bir okuyucumuz bize bir WordPress sayfasının alt sayfalarının nasıl görüntüleneceğini sordu.

WordPress web sitenizi üst ve alt sayfalarla düzenliyorsanız, alt sayfalarınızı veya alt sayfalarınızı ana üst sayfada görüntülemek isteyebilirsiniz. Ayrıca, kolay gezinme için her alt sayfada ana sayfayı göstermek isteyebilirsiniz.

Bu makalede, WordPress’te bir üst sayfa için alt sayfaların listesini nasıl kolayca görüntüleyebileceğinizi göstereceğiz.

Çocuk Sayfalarının Listesini Göstermeniz Gerektiğinde?

WordPress, yazılar ve sayfalar adı verilen iki varsayılan yazı türüyle birlikte gelir. Yazılar blog içeriğidir ve genellikle kategoriler ve etiketlerle düzenlenirler.

Sayfalar, örneğin ‘Hakkımızda’ sayfası veya ‘Bize Ulaşın’ sayfası gibi her zaman yeşil kalan tek seferlik veya bağımsız içeriklerdir.

WordPress’te sayfalar hiyerarşik olabilir, bu da onları üst ve alt sayfalarla düzenleyebileceğiniz anlamına gelir.

Örneğin, Özellikler, Fiyatlandırma ve Destek için alt sayfaları olan bir Ürün sayfası oluşturmak isteyebilirsiniz.

Alt sayfa oluşturmak için WordPress‘te alt sayfa oluşturma hakkındaki kılavuzumuzu izleyin.

Üst ve alt sayfalarınızı oluşturduktan sonra, alt sayfaları ana üst sayfada listelemek isteyebilirsiniz.

Şimdi, bunu yapmanın kolay bir yolu, ana sayfayı manuel olarak düzenlemek ve bağlantıların bir listesini ayrı ayrı eklemektir.

Ancak, her alt sayfa eklediğinizde veya sildiğinizde üst sayfayı manuel olarak düzenlemeniz gerekecektir. Sadece bir alt sayfa oluşturabilseydiniz ve bu sayfa otomatik olarak ana sayfada bir bağlantı olarak görünseydi daha güzel olmaz mıydı?

Bununla birlikte, WordPress’te ana sayfada alt sayfaların listesini hızlı bir şekilde görüntülemenin diğer bazı dinamik yollarına bir göz atalım. Size üç yöntem göstereceğiz, böylece sizin için en iyi olanı seçebilirsiniz:

Yöntem 1. Bir Eklenti Kullanarak Alt Sayfaları Üst Sayfada Görüntüleme

Bu yöntem daha kolaydır ve tüm kullanıcılar için önerilir.

Öncelikle Page-list eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, ana sayfayı düzenlemeniz ve alt sayfaların listesini görüntülemek istediğiniz yere aşağıdaki kısa kodu eklemeniz yeterlidir.

[alt sayfalar]

Artık sayfanızı kaydedebilir ve yeni bir tarayıcı sekmesinde önizleyebilirsiniz. Tüm alt sayfaların basit bir madde işaretli listesini görüntülediğini fark edeceksiniz.

İsterseniz, listenin görünümünü değiştirmek için bazı özel CSS ‘ler ekleyebilirsiniz. İşte başlangıç noktası olarak kullanabileceğiniz bazı örnek CSS’ler.

ul.page-list.subpages-page-list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Özel CSS’nizi uyguladıktan sonra ana sayfayı önizleyebilirsiniz. Test WordPress web sitemizde bu şekilde görünüyordu.

Eklenti, derinliği ayarlamanıza, sayfaları hariç tutmanıza, öğe sayısına ve daha fazlasına olanak tanıyan bir dizi kısa kod parametresi sağlar. Ayrıntılar için lütfen ayrıntılı dokümantasyon için eklentinin sayfasına bakın.

Yöntem 2. Kod Kullanarak Bir Üst Sayfa İçin Alt Sayfaları Listeleme

Bu yöntem biraz gelişmiş bir yöntemdir ve WordPress web sitenize kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, lütfen WordPress’te kod kopyalama ve yapıştırma hakkındaki kılavuzumuza bir göz atın.

Alt sayfaları bir üst sayfa altında listelemek için aşağıdaki kodu bir kod parçacıkları eklentisine veya temanızın functions.php dosyasına eklemeniz gerekir:

function wpb_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('wpb_childpages', 'wpb_list_child_pages');

WPBeginner olarak, WordPress’e her zaman WPCode eklentisi ile kod eklemenizi öneririz.

WPCode, tema dosyalarınızı düzenlemeden kolayca özel kod eklemenize olanak tanır, böylece sitenizi bozma konusunda endişelenmenize gerek kalmaz.

Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Adım adım talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin bu kılavuza bakın.

Eklenti etkinleştirildikten sonra, WordPress panonuzdan Code Snippets ” Sn ippet Ekle bölümüne gidin. Buradan, farenizi ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin üzerine getirin ve ‘Snippet kullan’ düğmesine tıklayın.

Ardından, snippet’iniz için bir başlık ekleyin ve yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırın.

Sağdaki açılır menüden kod türü olarak ‘PHP Snippet’ seçmeyi unutmayın.

Bundan sonra, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve sayfanın üst kısmındaki ‘Snippet’i Kaydet’ düğmesine tıklayın.

Bu kod ilk olarak bir sayfanın bir ebeveyni olup olmadığını veya sayfanın kendisinin bir ebeveyn olup olmadığını kontrol eder.

Bir üst sayfaysa, kendisiyle ilişkili alt sayfaları görüntüler. Bir alt sayfaysa, üst sayfasının diğer tüm alt sayfalarını görüntüler.

Son olarak, bu sadece alt veya üst sayfası olmayan bir sayfaysa, kod hiçbir şey yapmayacaktır. Kodun son satırına bir kısa kod ekledik, böylece sayfa şablonlarınızı değiştirmeden alt sayfaları kolayca görüntüleyebilirsiniz.

Alt sayfaları görüntülemek için aşağıdaki kısa kodu kenar çubuğundaki bir sayfaya veya metin widget’ına eklemeniz yeterlidir:

[wpb_childpages]

Değişikliklerinizi kaydetmeyi ve bir tarayıcı sekmesinde önizlemeyi unutmayın. Test sitemizde bu şekilde görünmektedir.

Artık bazı özel CSS‘ler kullanarak bu sayfa listesine stil verebilirsiniz. İşte başlangıç noktası olarak kullanabileceğiniz bazı örnek CSS kodları.

ul.wpb_page_list {
    list-style: none;
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #CCC;
    padding: 20px;
}

Yöntem 3. Herhangi Bir Kısa Kod Olmadan Çocuk Sayfalarını Dinamik Olarak Görüntüleme

Kısa kodları kullanmak kullanışlıdır, ancak bunlarla ilgili sorun, üst veya alt sayfaları olan tüm sayfalara kısa kodlar eklemeniz gerekmesidir.

Birçok sayfada kısa kodlara sahip olabilirsiniz ve bazen eklemeyi bile unutabilirsiniz.

Daha iyi bir yaklaşım, alt sayfaları otomatik olarak görüntüleyebilmesi için temanızdaki sayfa şablonu dosyasını düzenlemek olacaktır.

Bunu yapmak için ana sayfa.php şablonunu düzenlemeniz veya temanızda özel bir sayfa şablonu oluşturmanız gerekir.

Ana temanızı düzenleyebilirsiniz, ancak temanızı değiştirir veya güncellerseniz bu değişiklikler kaybolacaktır. Bu nedenle bir alt tema oluşturmanız ve değişikliklerinizi alt temada yapmanız daha iyi olacaktır.

Sayfa şablonu dosyanızda, alt sayfaları görüntülemek istediğiniz yere bu kod satırını eklemeniz gerekir.

<?php wpb_list_child_pages(); ?>

Hepsi bu kadar. Temanız artık alt sayfaları otomatik olarak algılayacak ve bunları düz bir listede görüntüleyecektir.

Stilleri CSS ve biçimlendirme ile özelleştirebilirsiniz. İşte OptinMonster web sitesinin ana sayfayı ve alt sayfaları nasıl gösterdiğine dair bir örnek:

Umarız bu makale WordPress’te bir ana sayfa için alt sayfaları listelemenize yardımcı olmuştur. Ayrıca yeni bir WordPress web sitesinde oluşturulması gereken en önemli sayfalar hakkındaki kılavuzumuzu ve kod kullanmadan özel düzenler oluşturmak için en iyi sürükle ve bırak WordPress sayfa oluşturucuları karşılaştırmamızı görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.