Jak wyświetlić listę podstron dla strony nadrzędnej w WordPress

Ostatnio jeden z naszych czytelników zapytał nas, jak wyświetlać podrzędne strony strony WordPress? Jest to pytanie, które dość często otrzymujemy w WPBeginner i podkreśla powszechną potrzebę poprawy nawigacji na stronie i doświadczenia użytkownika. 

Jeśli organizujesz swoją witrynę WordPress za pomocą stron nadrzędnych i podrzędnych, możesz chcieć wyświetlić swoje strony podrzędne lub podstrony na głównej stronie nadrzędnej. Pomaga to użytkownikom łatwo zobaczyć wszystkie informacje dostępne w określonej sekcji i szybko przejść do odpowiednich podtematów.

Możesz również chcieć wyświetlić link do głównej strony nadrzędnej na każdej podstronie, aby ułatwić przeglądanie, tworząc efekt podobny do okruszków chleba. Ta usprawniona nawigacja zapobiega zagubieniu się użytkowników w głębi Twojej witryny i poprawia ich ogólne wrażenia z przeglądania.

W tym artykule pokażemy Ci, jak łatwo wyświetlić listę stron potomnych dla strony nadrzędnej w WordPress.

Kiedy potrzebujesz pokazać listę stron potomnych?

WordPress posiada dwa domyślne typy wpisów: wpisy i strony. Wpisy to treść bloga i zazwyczaj są organizowane za pomocą kategorii i tagów.

Strony to jednorazowe lub samodzielne treści, które są ponadczasowe, takie jak na przykład strona „O nas” lub „Kontakt”.

W WordPressie strony mogą być hierarchiczne, co oznacza, że można je organizować za pomocą stron nadrzędnych i podrzędnych. Na przykład, możesz chcieć utworzyć stronę Produkt z podstronami Funkcje, Cennik i Wsparcie.

Aby utworzyć podstronę, postępuj zgodnie z naszym przewodnikiem jak utworzyć podstronę w WordPress.

Po utworzeniu stron nadrzędnych i podrzędnych możesz chcieć wyświetlić podrzędne strony na głównej stronie nadrzędnej.

Teraz łatwym sposobem jest ręczna edycja strony nadrzędnej i dodanie listy linków indywidualnie.

Jednak będziesz musiał ręcznie edytować stronę nadrzędną za każdym razem, gdy dodasz lub usuniesz podstronę.

Czy nie byłoby miło, gdybyś mógł po prostu utworzyć stronę potomną, a ona automatycznie pojawiłaby się jako link na stronie nadrzędnej?

Biorąc to pod uwagę, przyjrzyjmy się kilku innym dynamicznym sposobom szybkiego wyświetlania listy stron podrzędnych na stronie nadrzędnej w WordPressie. Pokażemy trzy metody, dzięki czemu możesz wybrać tę, która jest dla Ciebie najlepsza:

• Metoda 1. Wyświetlanie podstron na stronie nadrzędnej za pomocą wtyczki
• Metoda 2. Wyświetlanie podrzędnych stron dla strony nadrzędnej za pomocą kodu
• Metoda 3. Dynamiczne wyświetlanie podstron bez żadnego shortcode'u

Metoda 1. Wyświetlanie podstron na stronie nadrzędnej za pomocą wtyczki

Ta metoda jest najłatwiejszym sposobem wyświetlania podstron na stronie nadrzędnej i jest zalecana dla wszystkich użytkowników.

Najpierw musisz zainstalować i aktywować wtyczkę Page-list. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz edytować stronę nadrzędną i po prostu dodać następujący krótki kod tam, gdzie chcesz wyświetlić listę stron podrzędnych.

[podstrony]

Możesz teraz zapisać swoją stronę i wyświetlić jej podgląd w nowej karcie przeglądarki. Zauważysz, że wyświetla prostą listę punktowaną wszystkich podstron.

Jeśli chcesz, możesz dodać trochę niestandardowego CSS, aby zmienić wygląd listy.

Oto przykładowy kod CSS, którego możesz użyć jako punktu wyjścia.

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

Po zastosowaniu niestandardowego CSS możesz podglądnąć stronę nadrzędną.

Tak to wyglądało na naszej testowej stronie WordPress:

Wtyczka udostępnia wiele parametrów skróconego kodu, które pozwalają ustawić głębokość, wykluczyć strony, liczbę elementów i wiele więcej.

Szczegółowe informacje można znaleźć na stronie wtyczki, gdzie znajduje się szczegółowa dokumentacja.

Metoda 2. Wyświetlanie podrzędnych stron dla strony nadrzędnej za pomocą kodu

Ta metoda jest nieco zaawansowana i wymaga dodania kodu do Twojej strony WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat jak kopiować i wklejać kod w WordPressie.

Aby wyświetlić podstrony pod stroną nadrzędną, musisz dodać następujący kod do wtyczki fragmentów kodu lub do pliku functions.php swojego motywu:

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');

W WPBeginner zawsze zalecamy dodawanie kodu w WordPressie za pomocą wtyczki WPCode.

WPCode pozwala łatwo dodawać niestandardowy kod bez edycji plików motywu, dzięki czemu nie musisz się martwić o uszkodzenie swojej witryny.

Najpierw musisz zainstalować i aktywować bezpłatną wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w tym przewodniku jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do Fragmenty kodu » Dodaj fragment z panelu administracyjnego WordPress.

Stamtąd najedź kursorem myszy na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „Dodaj niestandardowy fragment”.

Następnie musisz wybrać „PHP Snippet” jako typ kodu z listy opcji, które pojawią się na ekranie.

Następnie dodaj tytuł dla swojego fragmentu, który może być czymkolwiek, co pomoże Ci zapamiętać, do czego służy kod.

Teraz po prostu wklej powyższy kod do pola „Podgląd kodu”.

Następnie po prostu przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment” u góry strony.

Ten kod najpierw sprawdza, czy strona ma rodzica, czy sama strona jest rodzicem.

Jeśli jest to strona nadrzędna, wyświetla powiązane z nią podrzędne strony. Jeśli jest to strona podrzędna, wyświetla wszystkie inne podrzędne strony swojej strony nadrzędnej.

Na koniec, jeśli jest to po prostu strona bez podrzędnej lub nadrzędnej strony, kod po prostu nic nie zrobi. W ostatniej linii kodu dodaliśmy skrót, dzięki czemu można łatwo wyświetlać podrzędne strony bez modyfikowania szablonów stron.

Aby wyświetlić podstrony, wystarczy dodać następujący shortcode do strony lub widżetu tekstowego w pasku bocznym:

[wpb_childpages]

Nie zapomnij zapisać zmian i wyświetlić ich podgląd w karcie przeglądarki. Tak to wygląda na naszej stronie testowej.

Możesz teraz stylizować tę listę stron za pomocą niestandardowego CSS.

Oto przykładowy kod CSS, którego możesz użyć jako punktu wyjścia:

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

Metoda 3. Dynamiczne wyświetlanie podstron bez żadnego shortcode'u

Używanie shortcode'ów jest wygodne, ale problem z nimi polega na tym, że będziesz musiał dodawać shortcode'y do wszystkich stron, które mają strony nadrzędne lub podrzędne.

Możesz mieć shortkody na wielu stronach, a czasem możesz nawet zapomnieć o ich dodaniu.

Lepszym podejściem byłoby edytowanie pliku szablonu strony w motywie, aby mógł automatycznie wyświetlać podrzędne strony.

Aby to zrobić, musisz edytować główny szablon page.php lub utworzyć niestandardowy szablon strony w swoim motywie.

Możesz edytować swój główny motyw, ale te zmiany znikną, jeśli zmienisz lub zaktualizujesz swój motyw. Dlatego lepiej byłoby, gdybyś utworzył motyw potomny, a następnie wprowadził zmiany w motywie potomnym.

W pliku szablonu strony musisz dodać tę linię kodu tam, gdzie chcesz wyświetlić podstrony.

<?php wpb_list_child_pages(); ?>

To wszystko. Twój motyw automatycznie wykryje strony podrzędne i wyświetli je w prostej liście.

Style można dostosować za pomocą CSS i formatowania.

Oto przykład, jak strona OptinMonster pokazuje stronę nadrzędną i podstrony:

Mamy nadzieję, że ten artykuł pomógł Ci w tworzeniu listy podstron dla strony nadrzędnej w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat najważniejszych stron do utworzenia na nowej stronie WordPress, oraz naszym porównaniem najlepszych kreatorów stron WordPress typu przeciągnij i upuść do tworzenia niestandardowych układów bez żadnego kodu.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.