Jak zrobić motyw do Wordpressa (5) - kolumna boczna

Sidebar czyli kolumna boczna

Kolumna boczna – jedna lub więcej – zawiera menu, liste kategorii, stron i różne elementy, które wstawiamy z reguły przy pomocy widgetów.  Poniżej jak stworzyć sidebar oraz jak wstawić do niego poszczególne elementy. Na koniec dowiesz się jak przystosować kolumnę do widgetów.

Kolumna boczna z listą kategorii

Po zamykającym znaczniku divu containter wstawiamy klasę sidebar, która zawiera wewnątrz listę oraz zageniżdząoną w niej drugą listę.

<div>
<ul>
<li><h2><?php _e(‘Categories’); ?></h2>
<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?>
</ul>
</li>
</ul>
</div>

Wyjaśnienie

  • <?php _e(‘Kategorie’); ?> – wyświetla po prostu tytuł, ja to tu przetłumaczyłam na polski
  • <?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0’); ?> – wyświetla linki do poszczególnych kategorii. Funkcja ta wpisuje znaczniki <li>, dlatego nie trzeba ich tutaj wpisywać.
  • sort_column=name – wyświetla kategorie według alfabetu
  • optioncount=1 – wyświetla ilość wpisów w danej kategorii
  • hierarchial=0 – wyświetla kategorie i podkategorie jednym ciągiem, czyli nie tworzy hierarchii
  • & – oddziela atrybuty

Lista stron statycznych

Dodaj kod <?php wp_list_pages(); ?> ponad kategoriami. Nie potrzeba dodawać zanczników listy, gdyż ta funkcja wpisze je sama. Teraz kod sidebaru powinien wyglądać następująco.

<div>
<ul>
<?php wp_list_pages(); ?>
<li><h2><?php _e(‘Kategorie’); ?></h2>
<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>
</li>
</ul>
</div>

Dopisz ten fragment kodu jak powyżej, wgraj plik index.php na serwer przy pomocy ftp i odśwież stronę. Wyświetla się teraz lista stron ponad kategoriami. Jednak tytuł Strony jest mniejszą czcionką. Trzeb mu nadać znacznik h2. Zmieniamy kod w następujący sposób:
<?php wp_list_pages(‘title_li=<h2>Strony</h2>’); ?>
Czyli pomiędzy nawiasami wstawiamy funkcję, która wyświetli słowo Strony w znacznikach h2.
Można jeszcze dodać atrybut depth=3& wraz z separatorem &, który ograniczy drzewo katalogów do 3 poziomów. Jest to przydatne jeśli mamy Strony w kategoriach i podkategoriach i podkategoriach.
<?php wp_list_pages(‘depth=3&title_li=<h2>Strony</h2>’); ?>

Archiwa

Aby wyświetlić kategorie dodaj poniższy kod pod kategoriami:
<li><h2><?php _e(‘Archiwum’); ?></h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</li>
Wyjaśnienie:

  • <?php _e(‘Archives’); ?> – funkcja która wyświetla tytuł, jest otoczony h2 aby nagłówki wyświetlały się tak samo. Nagłówek jest elementem listi i ma znacznik li
  • <?php wp_get_archives(‘type=monthly’); ?> – wyświetla listę miesięcznych archiwów wpisów. Lista miesięcznych archiwów bedzie zagnieżdzona w liście, pod  elementem Arichwa. Dlatego musi być otoczona znacznikami ul. Funkcja ta nie potrzebuje znaczników li, gdyż sama te tworzy.

Linki

Aby wyświetlić linki na bocznej kolumnie wstaw poniższy kod pod kodem archiwów, pod znacznikiem </li>
<?php get_links_list(); ?>
W tym przypadku funkcja ta wstawia wszystkie potrzebne znaczniki, dlatego nie trzeba ich dodawać.

Wyświetlanie zawartości kolumny bocznej musi być zrobione jako lista, a jej poszczególne elementy jako listy w liście. Nagłówki wszystkie muszą być otoczone znacznikami h2. Pewną trudność stanowi fakt, że niektóre funkcje już generują te znaczniki a inne nie. Dlatego musi być to wpisane tak jak podano wyżej.

Wyszukiwarka

Aby na blogu była wyszukiwarka musisz   dodatkowy plik searchform.php. Otwórz notatnik wstaw tam poniższy kod i zapisz go jako searchform.php.

<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>

<div>

<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”15″ /><br />

<input type=”submit” id=”searchsubmit” value=”Search” />

</div>

</form>

Natomiast w pliku index.php wstaw następujący kod nad kodem wyświetlającym strony:
<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

Prześlij plik na serwer, odśwież stronę i powinna pojawić się wyszukiwarka.
Z czego składa się ten kod:

  • <li id=”search”> – rozpoczyna element listy, który zawiera id, czyli można go osobne sformatować w stylach
  • include() – funkcja php która wstawia coś z zewnętrznego pliku. W tym przypadku wstawia zawartość pliku searhform.php.
  • TEMPLATEPATH – wstawia lokalizację folderu z templatkami, wp-content/themes/twojaskorka
  • ‘/searchform.php’ – ścieżka do pliku, /searchform.php
  • kropka łączy te 2 ścieżki aby uzyskać pełny adres: wp-content/themes/twojaskrorka/searchform.php
  • wyszukiwarka nie ma nagłówka, jest on raczej niepotrzebny i lepiej go nie wstawiać

Kalendarz

Wstaw kod wyświetlający kalendarz pod wyszukiwarkę lub tam gdzie chcesz, zwracając uwagę na znacznki listy.
<li id=”calendar”><h2><?php _e(‘Calendar’); ?></h2>
<?php get_calendar(); ?>
</li>
Z czego składa się ten kod:

  • <li id=”calendar”> – otwierajacy znacznik listy z id aby można go było sformatować w stylach
  • <?php _e(‘Calendar’); ?> – wyświetla wyraz Calendar
  • get_calendar() – funkcja wyświetlająca kalendarz

Logowanie

Wpisz poniżej nastepujący kod który wyświetli logowanie:
<li><h2><?php _e(‘Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

  • wp_register() tworzy własne znacznki listy i dodaje Zaloguj się gdy nie jesteś zalogowany.
  • wp_loginout() wyświetla Wyloguj się gdy jesteś zalogowany i nie tworzy własnych znaczników listy
  • wp_meta() – nic nie robi ale jest potrzebne do innych celów

 

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.