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

750 425 KreatifAjans

Son zamanlarda okuyucularımızdan biri bize bir WordPress sayfasının alt sayfalarını nasıl görüntüleyeceğimizi sordu?

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

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

Displaying a list of child pages for a parent page in WordPress

Alt Sayfaların Bir Listesini Ne Zaman Göstermeniz Gerekir?

WordPress, yazılar ve sayfalar adı verilen iki varsayılan gönderi türü ile birlikte gelir. Gönderiler blog içeriğidir ve genellikle kategoriler ve etiketlerle düzenlenirler.

Sayfalar, ‘Hakkımızda’ sayfası veya ‘Bize ulaşın’ sayfası gibi eskimeyen, tek seferlik veya bağımsız içeriklerdir.

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

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

Bir alt sayfa oluşturmak için, WordPress’te bir alt sayfanın nasıl oluşturulacağına ilişkin kılavuzumuzu izleyin.

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

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

Manually add child page links

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

Bununla birlikte, WordPress’teki ana sayfada alt sayfaların bir listesini hızlı bir şekilde görüntülemenin diğer bazı dinamik yollarına bir göz atalım.

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

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

Öncelikle, Sayfa listesi eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

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

[subpages]

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.

Plain list of child page links

İ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 böyle görünüyordu.

Child pages list with CSS

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

Yöntem 2. Kodu Kullanarak Üst Sayfanın Alt Sayfalarını Listeleme

Bu yöntem biraz gelişmiştir ve WordPress web sitenize kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, lütfen WordPress’te kodun nasıl kopyalanıp yapıştırılacağına ilişkin kılavuzumuza bir göz atın.

Alt sayfaları bir üst sayfanın altında listelemek için, aşağıdaki kodu siteye özel bir eklentiye 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');

Yukarıdaki kod önce bir sayfanın bir üst öğesinin olup olmadığını veya sayfanın kendisinin bir üst öğe olup olmadığını kontrol eder.

Bir üst sayfaysa, onunla 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 yalnızca alt sayfası veya üst sayfası olmayan bir sayfaysa, kod hiçbir şey yapmaz. Kodun son satırında, biz bir ekledikshortcode kolayca sayfa şablonları değiştirmeden alt sayfaları görüntüleyebilir, böylece.

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

[wpb_childpages]

Değişikliklerinizi kaydetmeyi ve bir tarayıcı sekmesinde önizlemeyi unutmayın. Test sitemizde böyle görünüyor.

Plain link list

Artık bu sayfa listesini bazı özel CSS kullanarak biçimlendirebilirsiniz. İş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. Alt Sayfaları Kısa Kod Olmadan Dinamik Olarak Görüntüleme

Kısa kodların kullanılması uygundur, ancak bunlarla ilgili sorun, ana veya alt sayfalara sahip tüm sayfalara kısa kodlar eklemeniz gerekmesidir.

Pek çok sayfada kısa kodlara sahip olabilirsiniz ve hatta bazen eklemeyi unutabilirsiniz.

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

Bunu yapmak için, main page.php şablonunu düzenlemeniz veya page.php ö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 kaybolur. Bu nedenle, bir çocuk teması oluşturup ardından değişikliklerinizi alt temada yaparsanız daha iyi olur.

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(); ?>

Bu kadar. Temanız artık alt sayfaları otomatik olarak algılayacak ve bunları düz bir listede gösterecektir.

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

OptinMonster Sub Pages Example

Bu makalenin, WordPress’teki bir ana sayfa için alt sayfaları listelemenize yardımcı olacağını umuyoruz. Ayrıca, yeni bir WordPress web sitesinde oluşturulacak en önemli sayfalardaki kılavuzumuzu ve herhangi bir kod olmadan ö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.