WebToProste

Gdy strona posiada wielopoziomową strukturę kategorii, to zazwyczaj kategorii tych jest sporo. Z tego też powodu być może chcielibyśmy ukryć część z nich. Jednym z rozwiązań może być chowanie podkategorii, dopóki użytkownik nie wybierze kategorii nadrzędnej. Pokażę Ci, jak osiągnąć taki efekt przy wykorzystaniu tylko arkuszy stylów CSS (przy pewnych dodatkowych założeniach).

Co chcemy osiągnąć?

Chcemy sprawić, aby w liście kategorii widoczne były tylko kategorie nadrzędne oraz ewentualne podkategorie kategorii wybranej.

Dodatkowe założenia

Przyjmijmy, że struktura kategorii jest dwupoziomowa (używamy tylko kategorii głównych i ich bezpośrednich podkategorii). Na pierwszy rzut oka założenie to może wydawać się bardzo wielkim ograniczeniem, jednak w praktyce bardzo często 2 poziomy powinny być wystarczające.

Załóżmy ponadto, że kategorie naprawdę są kategoriami, a nie tagami, czyli że każdy wpis jest przyporządkowany do dokładnie jednej kategorii (wpisy bez kategorii przyporządkowane są do kategorii „Bez kategorii”).

Rozwiązanie

Tym razem naprawdę nie będziesz musiał się napracować. Wystarczy bowiem, że dodasz do arkusza stylów wybranej przez siebie skórki dwie następujące linijki:

li.cat-item li {display: none;}
li.current-cat-parent li, li.current-cat li {display: list-item;}

I jeszcze parę słów wyjaśnienia. Pierwsza linijka odpowiedzialna jest za ukrycie wszystkich podkategorii. Druga natomiast, pokazuje z powrotem podkategorie wybranej kategorii głównej lub też podkategorie rodzica wybranej kategorii.

Co jeszcze jest nie tak?

Jeśli korzystasz z widgeta kategorii w sidebarze, napotkasz niestety pewien problem. Otóż po rozwinięciu danej kategorii i wybraniu jednego z wpisów do niej przypisanych, drzewo kategorii zwinie się. Na szczęście problem ten można dość łatwo naprawić.

W tym celu zrezygnuj z widgeta kategorii, a następnie umieść w odpowiednim miejscu plików swojej skórki ręczne wypisywanie drzewa kategorii:

<?php
if (is_single()) {
    $cats = get_the_category();
    wp_list_categories("current_category={$cats[0]->term_id}");
} else
    wp_list_categories();
?>

Powyższy fragment kodu pobiera pierwszą z kategorii, do których przypisany jest bieżący wpis, a następnie wypisuje drzewo kategorii, zaznaczając ją jako aktualną.

Co dalej?

Ponownie przypomnę o tym, abyś wykonał kopie bezpieczeństwa, przed dokonaniem jakichkolwiek zmian w plikach skórki Twojego WordPressa.

Jeśli masz jakieś pytania lub uwagi – śmiało – podziel się nimi w komentarzach.

Strony internetowe coraz częściej korzystają nie z jednego, lecz z dwóch niezależnych menu. Jest to czasem bardzo przydatne, szczególnie, gdy jesteś w stanie podzielić treść swojej strony na dwie części (na przykład strony „o nas”, „kontakt”, itp. oraz strony ofertowe). Niestety WordPress nie przewiduje na razie takiej możliwości (ma się ona pojawić w wersji 3.0). Nie oznacza to jednak, że nie jesteśmy w stanie osiągnąć takiego efektu sami.

Co chcemy osiągnąć?

Chcemy sprawić, aby nasz template (skórka) posiadała wbudowane dwa niezależne menu. Ważne jest także to, aby zmiana zawartości tych menu nie wymagała ponownych ingerencji w plikach template’u i była możliwa z poziomu panelu administracyjnego. Dodatkowo przyjmujemy, że jedno z menu zmienia się rzadko, natomiast nowe strony domyślnie przypisywane są do drugiego (nowe strony ofert powstają znacznie częściej niż strony typu „O nas” czy „Kontakt”). Menu rzadko się zmieniające będę dla uproszczenia nazywał „górnym”, a drugie – „bocznym”.

Pierwsze podejście

Pomysłem, który większości osób przychodzi do głowy jako pierwszy, jest wykorzystanie sidebara (panelu bocznego). Menu, do którego strony będą przydzielane domyślnie, można osiągnąć za pomocą standardowego widgeta Pages (Strony) oraz jego mechanizmu wykluczania. Niestety drugie menu, w którym wyświetlane będą tylko niektóre, wybrane strony, zmusi nas do kombinowania. Najłatwiej byłoby pewnie wykorzystać standardowy widget Text i wstawić w niego kod html menu. Edycja tego menu nie będzie wówczas jednak zbyt wygodna, a użytkownik byłby zmuszony do edytowania kodu html.

Proponowane rozwiązanie

Istnieje jednak nieco sprytniejsze rozwiązanie tego problemu niż omówione w poprzednim akapicie. Wykorzystam w tym celu mechanizm pól własnych (custom fields).

Krok 1. Dodanie pól do odpowiednich wpisów

Przede wszystkim należy zedytować wpisy/strony z menu górnego. Każdemu z nich dodam pole własne o nazwie „Menu” i wartości „1″. Aby tego dokonać należy przewinąć nieco w dół stronę edycji wpisu. Znajdziesz tam sekcję „Własne pola”. Za pierwszym razem w edit „Nazwa” wpisz nazwę własnego pola (w naszym przypadku „Menu”). W przypadku pozostałych stron będziesz już mógł wybrać tę wartość z listy. Nadaj polu odpowiednią wartość (w naszym przypadku „1″) i kliknij przycisk „Dodaj własne pole”.

Krok 2. Wykorzystanie pól w skórce.

Została do wykonania jeszcze bardziej zaawansowana część zadania (zmodyfikowanie plików skórki), ale spokojnie i ona wcale nie będzie taka trudna. Otwórz plik skórki odpowiedzialny za wyświetlanie części strony, którą chcesz edytować (np. menu górne z dużym prawdopodobieństwem chcesz umieścić w pliku header.php). W odpowiednim miejscu tego pliku umieść następujący fragment kodu:

<ul>
    <?php foreach (get_pages('meta_key=Menu&meta_value=1&sort_column=menu_order') as $page): ?>
        <li><a href="<?php echo get_page_link($page->ID); ?>"><?php echo $page->post_title; ?></a></li>
    <?php endforeach; ?>
</ul>

Powyższy kod jest odpowiedzialny za wypisanie menu górnego. Pozostało nam jeszcze obsłużenie menu bocznego. Po odnalezieniu odpowiedniego miejsca w plikach skórki, wstaw tam następujący fragment kodu:

<ul id="leftmenu">
    <?php foreach (get_pages('sort_column=menu_order&parent=0') as $page): ?>
        <?php if (get_post_meta($page->ID, 'Menu', true) != '1'): ?>
            <li><a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

Co dalej?

Może trudno Ci w to uwierzyć, ale to już wszystko, co trzeba zrobić, aby template umożliwiał korzystanie z dwóch niezależnych menu. Pamiętaj, aby przed jakimikolwiek zmianami w plikach template’u, zrobić kopię bezpieczeństwa.