Zabaw z Wordpressem ciąg dalszy

Dzięki poprzedniemu wpisowi mamy już z głowy podstawy instalacji i konfiguracji Wordpressa. Tym razem wgryziemy się znacznie głębiej w smakowitą tkankę naszego CMSa. Pokażę jak rozszerzać funkcjonalność Wordpressa poprzez wtyczki i tematy, oraz jak samodzielnie zbudować własny stronę w oparciu o tzw. tematy startowe.

Wtyczki i tematy

Dzięki systemowi wtyczek Wordpress posiada niemal nieograniczone możliwości poszerzania jego podstawowej funkcjonalności. Można bez większego problemu przekształcić go w forum, sklep internetowy czy nawet sieć społecznościową wzorowaną na facebooku. Podobne możliwości odnośnie wyglądu daje system tematów. Jedne i drugie możemy wgrywać na dwa sposoby. Jeżeli interesujący nas komponent znajduje się w repozytoriach Wordpressa (możemy je przeglądać na stronie wordpress.org), wystarczy zalogować się do naszej witryny, a następnie wybrać odpowiednią opcję w menu:

• W przypadku wtyczki wybieramy w menu "wtyczki->dodaj nową". Następnie możemy wyszukać wtyczkę która nas interesuje i ją zainstalować. Wtyczki, aby poprawnie działać często potrzebują dodatkowej konfiguracji. Menu konfiguracji wtyczek najczęściej dodawane jest automatycznie po zainstalowaniu rozszerzenia jako nowy segment w menu.
• Gdy chcemy zainstalować motyw wybieramy "wygląd->motywy". Następnie wybieramy zakładkę "zainstaluj motywy". Również mamy możliwość przeglądania i wyszukiwania dostępnych motywów oraz ich instalacji.

Wiele wtyczek i motywów nie jest jednak dostępnych z poziomu repozytorium Wordpressa. Wtedy musimy zainstalować je ręcznie. Pobieramy pliki interesującego nas rozszerzenia, najczęściej w postaci archiwum zip, i rozpakowujemy w wybranej lokalizacji. Następnie przenosimy folder z plikami do odpowiedniego katalogu Wordpressa. Wtyczki kopiujemy do "wp‑content/plugins", motywy do "wp‑content/themes". Następnie należy przejść do odpowiedniej sekcji w panelu administracyjnym aby włączyć rozszerzenie.

Samodzielna budowa tematu

Wordpress daje trzy podstawowe sposoby dostosowywania wyglądu witryny do naszych potrzeb. Możemy wgrać gotowy motyw, możemy również napisać własną skórkę od zera, co niestety jest bardzo pracochłonne i wymaga świetnej znajomości jego bebechów. Istnieje też trzecia droga, dla mnie najbardziej optymalna. Możemy użyć tematu startowego bądź frameworka. Taki temat jest szkieletem na który obudowujemy tkanką wedle naszych upodobań. Aby je wykorzystać mocno wskazana jest przynajmniej podstawowa znajomość HTML i CSS, PHP nie jest konieczne, aczkolwiek również mile widziane. Przykładami takich tematów są Bones, Roots, Whiteboard czy Carrington. Większość z nich korzysta z jakiegoś frameworka CSS jak 960.gs czy Bootstrap. W tym wpisie pokażę jak budować własny motyw na przykładzie tematu Bones. Korzysta on z dobrodziejstw HTML5 oraz frameworka 960.gs. Nie jest on dostępny w repozytorium Wordpressa, udajemy się więc na stronę http://themble.com/bones/, i pobieramy archiwum z tematem (dostępne są dwie wersje, klasyczna i responsywna, tu opisuję klasyczną). Instalujemy i uruchamiamy temat zgodnie z instrukcją z poprzedniego punktu. Rzućmy teraz okiem na zawartość katalogu naszego motywu. Znajduje się tam szereg plików .php odpowiadających za wyświetlanie różnych elementów strony. Nazwy są dosyć intuicyjne, więc nikt nie powienien mieć problemu aby się w tym połapać:

• header.php - nagłówek strony, sekcja oraz początek .
• footer.php - stopka strony.
• siedebar.php - odpowiada za wyświetlanie paska bocznego na którym możemy umieszczać widżety.Nazwa jest trochę myląca ponieważ równie dobrze takim sidebarem możemy uczynić stopkę.
• index.php - odpowiada za wyświetlanie strony głównej witryny.
• comments.php - odpowiada za wyświetlanie komentarzy i formularza ich dodawania.
• page.php - odpowiada za wyświetlanie pojedynczej strony.
• single.php - wyświetla pojedynczy wpis.
• style.css - jak łatwo się domyśleć, przechowuje style CSS strony.

To są podstawowe pliki, którymi będziemy się zajmować, pozostałe będę przywoływać w miarę potrzeb. Jest jeszcze katalog "library" w którym umieszczamy skrypty js czy grafiki strony. Pozostałe pliki będę opisywał w miarę potrzeb.

Zmiana loga

Aby na naszej stronie ustawić logo w postaci pliku graficznego zaglądamy do pliku header.php i edytujemy następujący fragment:

[code=php]

[/code]

Zastpęujemy tagiem i voila.

Formatowanie wyglądu witryny

Moim skromnym zdaniem zdecydowanie najwygodniejszym sposobem na formatowanie styli CSS poszczgólnych elementów jest wykorzystanie narzędzi Dragonfly w Operze bądź Firebug w Firefoksie. Pozwalają one w szybki sposób zlokalizować położenie wybranych styli w pliku style.css. Nie będę opisywał jak dokładnie działają, bo nie jest to celem tego wpisu, a jestem przekonany że w internecie informacji na ten temat jest w bród.

Dodawanie elementów z wtyczek

Wtyczki Wordpressa często pozwalają umieścić na stronie różne dodatkowe elementy, np. kalendarz. Elementy takie mogą być wstawianie jako widget, wtedy możemy umieścić je w sidebarze z poziomu panelu administracyjnego. Innym sposobem dostarczania i wstawiania takich elementów jest shortcode. Jest to specjalny znacznik ograniczony nawiasami kwadratowymi który wstawiamy bezpośrednio w treść wybranej strony lub wpisu. Przykładowy shortcode wstawiający na stronę kalendarz z wtyczki Event manager wygląda następująco:

[eo_fullcalendar]

Shortcode możemy również zaszyć bezpośrednio w wybranym przez nas pliku. Np. jeżeli chcielibyśmy wstawić wspomniany wcześniej kalendarz w stopce, możemy to zrobić umiejszczając w wybranym przez nas miejscu następujący kod:

<?php echo do_shortcode('[eo_fullcalendar]'); ?>

Czasami wtyczki udostępniają również bezpośrednio funkcje php które możemy wstawić w wybrane miejsce template'a. Jest to jednak zależne od wtyczek, i aby dowiedzieć się jakie możliwości oferuje dane rozszerzenie musimy zajrzeć do jego dokumentacji.

Dodawanie obszaru aktywanego (sidebara)

Nie jesteśmy ograniczeni do jednego paska bocznego w który domyślnie wyposażony jest Bones. Możemy ich dodać dowolną ilośc w dowolnym miejscu na stronie. Aby to zrobić otwieramy plik functions.php i odnajdujemy następujący fragment:

    
register_sidebar(array( 
'id' => 'sidebar1', 
'name' => 'Sidebar 1', 
'description' => 'The first (primary) sidebar.', 
'before_widget' => '<div id="%1$s" class="widget %2$s">', 
'after_widget' => '</div>', 
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>', 
));

Kopiujemy i wklejamy go pod spodem. Edytujemy wartość "id", np. zmieniając na "sidebar2". Analogicznie postępujemy z polami "name" i "description" i zapisujemy plik. Następnie otwieramy plik sidebar.php, podmieniamy wszystkie wystąpienia "sidebar1" naszym id i zapisujemy plik jako sidebar-nasze_id.php. Ostatnim krokiem jest wklejenie funkcji do wybranego template'a w miejscu w którym ma się pojawić kolejny pasek boczny:

[code=[/code]

Modyfikowanie listy wpisów

Domyślnie na stronie głównej Worpdress wyświetla listę wpisów posortowaną alfabetycznie. My w ustawieniach możemy jedynie określić liczbę wpisów na stronie. Jednak jeżeli pogrzebiemy trochę w plikach, zwłaszcza w index.php będziemy mogli osiągnąć znacznie więcej. Na początek kilka słów o tym w jaki sposób pobiera i wyświetla wpisy. Używany jest do tego mechanizm nazwany Pętlą (The Loop), wygląda on w następująco:

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
get_sidebar();
get_footer(); 
?>

Kluczowe są tu instrukcje

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>[/code]
 które pobierają kolejne posty i udostępniają je do wyświetlenia. Dopiero wewnątrz tej pętli możemy używać takich instrukcji jak 
[code=php]the_content(  );

odpowiadającej za wyświetlenie treści wpisu. Modyfikując Pętlę możemy zdecydować które wpisy pojawią się na stronie. Używa się do tego mechanizmu "WP_Query". Dla przykładu pokażemy jak przy jego pomocy wyświetlić tylko posty jednego autora:

<?php

// The Query
$the_query = new WP_Query( 'author_name=rami' );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
	echo '<li>';
	the_title();
	echo '</li>';
endwhile;

// Reset Post Data
wp_reset_postdata();

?>

Więcej na temat WP_Query tutaj.

W pętli decydujemy również o kształcie naszego postu. Zamiast całej treści wpisu możemy wyświetlać wypisy. Aby to osiągnąć zmieniamy instrukcję

the_content();

na

the_excerpt();

.

Statyczna strona główna

Możemy podmienić standardową listę wpisów na przygotowany przez siebie szablon, a newsy czy wpisy blogowe umieścić na wybranej przez siebie podstronie. Najpierw przygotujemy template dla strony głównej. Otwieramy plik page-custom.php, na samym początku zmieniamy "Template name" na wybrany przez nas np. page_home i pod taką nazwą zapisujemy plik. Przechodzimy do panelu administracyjnego. Tworzymy dwie nowe strony. Jedna posłuży jako strona domowa, druga jako lista wpisów. Przy tworzeniu strony domowej musimy zmienić szablon strony z domyślnego na ten który przed chwilą utworzyliśmy (page_home). Szablon dla listy zostawiamy domyślny. Przechodzimy do "Ustawienia->Czytanie". Zmieniamy "Strona główna wyświetla:" z "ostatnie wpisy" na "statyczną stronę". Następnie ustawiamy "Strona główna" oraz "Strona z wpisami" na stworzone przez nas do tych celów strony. Następnie możemy przejść do dostosowywania naszej strony głównej. Możemy to zrobić przez dodanie treści w panelu administracyjnym, bądź bardziej niskopoziomowe zmiany w pliku naszego szablonu.

To tyle na dzisiaj ;)