WORDPRESS tworzenie motywów Copyright 2013 INSIGO. Wszelkie prawa zastrzeżone. INSIGO ISBN: 978-83-62083-48-0 Kurs składa się z dwóch elementów: książki oraz płyty. Dołączona płyta stanowi część składową książki i nie może być przedmiotem odrębnej transakcji.
WORDPRESS - TWORZENIE MOTYWÓW 3 autor od wielu lat projektuje serwisy internetowe, dużą wagę przykładając do ich funkcjonalności a także skutecznych technik promocji. Swoje umiejętności praktyczne zdobył projektując grafikę oraz strony internetowe dla wiodących polskich i zagranicznych agencji reklamowych. Prowadzi serwis eduweb.pl, jest trenerem oraz certyfikowanym ekspertem Adobe.
WORDPRESS - TWORZENIE MOTYWÓW 4 Czym jest WordPress? WordPress to popularny system zarządzania treścią (CMS - Content Management System), który umożliwia tworzenie i utrzymywanie własnych stron WWW. WordPress został pierwotnie zaprojektowany do tworzenia systemów blogowych, jednak szybko okazało się, że jest to na tyle elastyczny system, że można z jego pomocą tworzyć praktycznie dowolne, nawet bardzo rozbudowane serwisy. Ze względu na łatwą obsługę, prosty i czytelny kod jak również częste aktualizacje oraz dobre indeksowanie w wyszukiwarkach, WordPress stał się niezwykle popularny i obecnie pracują na nim tysiące witryn. Bieżąca wersja WordPress System CMS WordPress jest na bieżąco uaktualniany przez jego twórców. Z tego powodu wersja, na której pracujemy w kursie nie jest to wersja najnowsza. Jednak nie przejmuj się - po pierwsze, WordPress to dojrzały system, którego twórcy nie wywracają wszystkiego do góry nogami co którąś wersję. Wszystkie elementy interfejsu zostają i zostaną jeszcze na długo niezmienione, natomiast do nowych wersji są po prostu dodawane nowe rzeczy, które na ogół są na tyle marginalne że i tak nie byłoby zbyt wiele miejsca na omówienie ich w kursie. To właśnie dlatego zapewniamy do
WORDPRESS - TWORZENIE MOTYWÓW 5 naszych kursów osobne aktualizacje, omawiające tylko te nowe, ciekawe funkcje. Aktualizacje zazwyczaj możesz znaleźć na http:///warsztaty Motywy do WordPress Wygląd Twojej strony w WordPress możesz dowolnie zmieniać korzystając z tak zwanych Motywów. Podstawowe motywy są domyślnie zainstalowane w WordPress, jednak możesz je zmienić lub doinstalować swoje własne. Co do zasady, Motywy dzielą się na darmowe i płatne (Premium Themes). Motywy darmowe znajdziesz na przykład na stronie: http://wordpress.org/extend/themes/ Polecam także korzystanie z płatnych Motywów, ponieważ zazwyczaj nie są one drogie, kosztują kilka czy kilkanaście dolarów, za to oferują zdecydowanie więcej funkcjonalności, niekiedy możliwość zmiany dużej ilości parametrów i dostosowanie motywu do swoich potrzeb, jak również wsparcie ze strony autorów. Przykładowo, szablony Premium możesz znaleźć na stronie: http://www.elegantthemes.com/ Kilka pytań, które warto zadać sobie przed wyborem motywu: Czy jest funkcjonalny? Czy wspiera nowe funkcje WordPress a takie jak własne Menu? Czy nawigacja odpowiada Twoim potrzebom? Czy jest łatwo rozszerzalny? Czy kod jest przejrzysty? Czy zawiera pliki źródłowe? Czy wspiera widgety? Czy posiada dodatkowe opcje? Czy jest responsywny?
WORDPRESS - TWORZENIE MOTYWÓW 6 Front-end i Back-end Strukturę WordPress można podzielić na core systemu, na który składają się pliki wczytywane zawsze z instalacji WordPress a, chociażby index.php. Funkcjonalność core WordPress a mogą ewentualnie modyfikować zainstalowane Pluginy. Druga warstwa to szablon, który jest aktywny i jego pliki znajdują się w folderze themes w katalogu wp-content. Te pliki również mogą dodawać lub nadpisywać funkcjonalności WordPress. To, co widzi użytkownik jest natomiast warstwą frontend, determinowaną przez pliki html oraz css zainstalowanego Motywu. Struktura Motywu WordPress Poniżej prezentujemy podstawową strukturę szablonu WordPress, do którego ładowane są odpowiednie pliki php. Nie przedstawiliśmy wszystkich plików PHP, a jedynie te najbardziej popularne, które wpływają na generowanie treści. W przypadku dokonywania zmian w HTML, należy zajrzeć właśnie do tych, odpowiednich plików PHP.
WORDPRESS - TWORZENIE MOTYWÓW 7
WORDPRESS - TWORZENIE MOTYWÓW 8 Struktura plików Motywu w WordPress header.php Sekcja z nagłówkiem index.php Główna strona sidebar.php - Sidebar single.php Szablon Wpisu page.php Szablon Strony comments.php Szablon Komentarza search.php - Wyszukiwarka searchform.php Formularz wyszukiwania archive.php Strona archiwum functions.php Funkcje Szablonu (PHP) 404.php Strona błędu 404 style.css Plik stylów Struktura plików WordPress Na tym diagramie znajdziesz informacje o tym, który plik (kolumna po prawej) zostaje załadowany w odpowiednim widoku (kolumna po lewej). Zwróć uwagę na to, że w momencie, gdy dany plik nie istnieje w Motywie, jest ładowany kolejny, a hierarchia kończy się na pliku index.html, który jest ładowany zawsze wtedy jeśli żadna strona w strukturze poziomej nie istnieje.
WORDPRESS - TWORZENIE MOTYWÓW 9 Pętla WordPress Pętla (The Loop) pozwala na wyświetlenie dowolnych treści, wyciągnięcie postów, stron, linków i innych elementów Twojej strony. Ważne jest aby tego typu wywołania tworzyć właśnie w obrębie pętli, której podstawowa struktura wygląda następująco: <?php if(have_posts());?> <?php while(have_posts()); the_post();?> // Kod do wywołania w pętli <?php else;?> <?php endif;?> Ważne funkcje wewnątrz pętli to: the_permalink() URL POSTA the_id() ID POSTA the_author() NAZWA AUTORA the_category() KATEGORIA POSTA the_title TYTUŁ POSTA the_excerpt SKRÓT POSTA the_content CAŁA ZAWARTOŚĆ POSTA the_date DATA POSTA Tagi wyświetlania treści w Motywie: <?php the_title()?> - pokazuje tytuł Wpisu/Strony <?php the_content()?> - wyświetla zawartość Wpisu/Strony <?php the_excerpt()?> - pokazuje skrót Wpisu - Excerpt <?php the_time()?> - pokazuje czas dodania Wpisu/Strony <?php the_date()?> - wyświetla datę dodania Wpisu/Strony <?php the_permalink()?> - pokazuje URL permalinku <?php the_category()?> - wyświetla kategorię Wpisu <?php the_author();?> - pokazuje autora wpisu <?php the_id();?> - pokazuje identyfikator Wpisu <?php wp_list_pages();?> - pokazuje wszystkie strony <?php wp_tag_cloud();?> - wyświetla chmurkę tagów <?php wp_list_cats();?> - listuje kategorie <?php get_calendar();?> - pokazuje kalendarz <?php wp_get_archives()?> - lista archiwów z bazy danych
WORDPRESS - TWORZENIE MOTYWÓW 10 <?php posts_nav_link();?> - wyświetla linki nawigacyjne do poprzedniej / następnej strony <?php next_post_link()?> - wyświetla link do najnowszych postów <?php previous_post_link()?> - link do poprzednich postów <?php edit_post_link( ( Edit Post ));?> - link edycji <?php wp_register();?> - link rejestracji <?php wp_loginout();?> - link logowania / wylogowania <?php wp_meta();?> - metadane dla admina <?php get_links_list();?> - wyświetla blogroll <?php comments_popup_link();?> - linkuje do komentarzy Motywy Potomne Tworzenie Motywów bazujących na innych, które dziedziczą po nich właściwości opiera się na stworzniu folderu z nowym motywem razem z plikiem CSS który zawiera deklarację: /* Theme Name: Motyw Potomny Theme URI: http://eduweb.pl Description: To jest motyw potomny Author: Author URI: http://eduweb.pl Template: nazwa folderu motywu rodzica Version: 1.0 */ @import url(../ twentytwelve /style.css ); Następnie można nadpisywać pliki w motywie rodzica przez tworzenie plików z identycznymi nazwami w katalogu Motywu Potomnego. Podstawowe typy stron w WordPress Strona główna wyświetlana jako indeks domeny Strona posta wyświetla widok całego posta Strona archiwum wyświetla widok z listą postów dla taksonomii Statyczne strony takie jak kontakt, o firmie etc. Strony wyszukiwania wyświetlają wyniki wyszukiwania
WORDPRESS - TWORZENIE MOTYWÓW 11 Informacje o stronie z Bloginfo Z pomocą funkcji bloginfo otrzymamy wiele przydatnych, dynamicznych danych o naszej działającej stronie w WordPress. Wykorzystanie bloginfo w kodzie wygląda następująco: <?php bloginfo( template_url );?> <?php bloginfo( name );?> TYTUŁ BLOGA <?php bloginfo( charset );?> KODOWANIE <?php bloginfo( description );?> META DESCRIPTION <?php bloginfo( url );?> ADRES BLOGA <?php bloginfo( rss2_url );?> URL DO RSS <?php bloginfo( template_url );?> ŚCIEŻKA SZABLONU <?php bloginfo( pingback_url );?> URL PINGBACK ÓW <?php bloginfo( stylesheet_url );?> URL PLIKU CSS <?php bloginfo( wpurl );?> URL INSTALACJI WP <?php bloginfo( version );?> WERSJA WP <?php bloginfo( html_type );?> WERSJA HTML STRONY Co jeszcze sprawdzimy z Bloginfo? Przykładowo, na której stronie się znajdujemy: is_home() STRONA GŁÓWNA BLOGA is_front_page() STRONA GŁÓWNA is_single() WIDOK POJEDYNCZEGO POSTA is_sticky() PRZYKLEJONY POST is_page() WIDOK STRONY is_category() WIDOK KATEGORII Definiowanie własnych pól Własne pola definiujemy z pomocą Kokpitu przy dodawaniu postów i stron, następnie funkcja get_post_meta przyjmuje wartości: $post_id identyfikator posta $key definiuje klucz własnego pola $single zwraca tablicę albo string <?php get_post_meta($post_id, $key, $single);?> W praktyce: <?php echo get_post_meta($post->id, nazwa-pola, true);?>
WORDPRESS - TWORZENIE MOTYWÓW 12 Tworzenie Szablonu Strony Szablon strony możemy stworzyć po to, aby nadać jej unikalny wygląd w WordPress. Do zadeklarowania szablonu w dowolnym pliku wystarczy nagłówek: /* Template Name: Mój własny szablon strony */ Rejestrowanie Szablonu odbywa się w prostych krokach: Rejestracja w komentarzu pliku.php Stworzenie strony w Kokpicie Podpięcie strony do Szablonu Rejestrowanie strony w Panelu WordPress Aby zarejestrować stronę z ustawieniami w Kokpicie, należy skorzystać z kodu deklaracji i następujących kroków: Rejestracja ustawień strony register_settings Action Hook add_action Formularz linkujący do options.php Rejestracja pól w formularzu ustawień settings_fields Przekazanie opcji z formularza z pomocą get_option Powiązanie opcji ze stroną.php Rejestrowanie własnego menu Rejestracja menu z pomocą register nav menus Stworzenie Menu w Kokpicie Pokazanie menu na stronie z pomocą wp_nav_menu
WORDPRESS - TWORZENIE MOTYWÓW 13 Rozwiązywanie problemów Jedną z genialnych cech WordPress jest fakt, że praktycznie wszystkie treści Twojej strony są przechowywane w bazie danych MySQL. Ponieważ baza jest zwykle backupowana oraz odporna na awarie, istnieje bardzo małe prawdopodobieństwo utraty jakichkolwiek danych. Zalecamy również tworzenie backupów bazy we własnym zakresie na przykład z pomocą pluginów do WordPress omawianych w kursach eduweb.pl. Poza bazą, drugim kluczowym składnikiem Twojej strony są pliki wgrane na serwer FTP. W razie awarii, proponujemy w pierwszej kolejności sprawdzić właśnie strukturę plików. Jeśli zainstalowałeś dodatek, który spowodował, że strona nie wyświetla się poprawnie - np. generuje białe tło w przeglądarce, nie panikuj! Po prostu wejdź do katalogu z dodatkami i usuń folder w którym znajduje się wadliwy plugin. Może i brzmi to brutalnie, ale tak właśnie trzeba zrobić. Baza WordPress jest praktycznie oderwana od plików i możesz bez problemu nawet wykasować wszystko z FTP, a następnie wgrać świeżą, nową wersję WordPress. Pamiętaj tylko o tym, że stworzone przez Ciebie motywy, czy nadpisane pliki.php lub.css powinny być wcześniej zapisane w bezpiecznym miejscu jako backup! Taksonomie Treści w WordPress są uporządkowane w tak zwane taksonomie. Podstawowe taksonomie to kategorie oraz tagi. Co do zasady posty powinny przynależeć do jednej lub więcej kategorii, choć zalecana jest jedna. Natomiast do postów możemy przyporządkować szereg tagów. Na przykład przepis na tiramisu może należeć do kategorii deser, natomiast przypisane do niego tagi to: ciasto, biszkopt, czekolada, kawa etc. Charakterystyczną cechą taksonomii jest możliwość filtrowania po nich treści, czyli wyświetlania tak zwanych archiwów. Polega to na możliwości wpisania np. w adresie: http://www.twojadomena.pl/nazwakategorii WordPress dba o to, aby automatycznie wygenerować dla takiego linku listę postów, które do tej kategorii zostały przyporządkowane. Własne taksonomie Taksonomie hierarchiczne i niehierarchiczne, takie jak kategorie i tagi można samodzielnie deklarować. Najlepiej zrobić to w osobnym pliku ponieważ ta deklaracja może być wówczas wykorzystana w różnych motywach. Deklaracja przykładowej taksonomii wygląda tak:
WORDPRESS - TWORZENIE MOTYWÓW 14 function stworz_taksonomie() { register_taxonomy( zwierzeta, post, array( hierarchical => false, label => Zwierzęta, query_var => true, rewrite => true)); register_taxonomy( Rośliny, post, array( hierarchical => false, label => Rośliny, query_var => true, rewrite => true)); } add_action( init, create_my_taxonomies, 0); Co nam dają taksonomie? Automatyczne generowanie stron Archiwów http://www.twojastrona.pl/zwierzeta/wiewiorka/ Możliwość wyciągnięcia postów z pomocą zapytania: <?php query_posts(array( zwierzeta => wiewiorka, showposts => 6));?> Wyświetlenie chmurki tagów dla taksonomii: <?php wp_tag_cloud(array( taxonomy => zwierzeta, number => 10));?>
WORDPRESS - TWORZENIE MOTYWÓW 15 Korzystanie z płyty dvd dołączonej do książki Na płycie DVD znajdziesz pełne szkolenie z zakresu WordPress, które jest dodatkiem do książki. Prosimy o pobranie licencji, która jednocześnie jest dowodem zakupu oraz lagalności kursu. Certyfikat jest dostępny na stronie http:// po zalogowaniu do Strefy Klienta. instrukcja obsługi płyty dvd Po włożeniu płyty DVD do napędu proszę wybrać opcję Eksploruj (wyświetlić zawartość płyty), a następnie uruchomić plik index.html W razie problemów z odtwarzaniem filmów należy: 1/ Pobrać najnowszy Flash Player (http://get.adobe.com/pl/flashplayer/) 2/ Zainstalować środowisko Java (http://www.java.com/pl/download/) 3/ Wyczyścić pliki tymczasowe i uruchomić ponownie przeglądarkę, a jeśli to nie zadziała, w miarę możliwości spróbować uruchomić plik pod inną przeglądarką (np. Firefox ) 4/ W ostateczności zmienić rozszerzenie pliku.flv w folderze video na.mov i sprawdzić, czy film będzie odtwarzał się w QuickTime Kurs jest w sposób elektroniczny powiązany z właścicielem licencji. Kurs przeznaczony jest do użytku osoby kupującej. Z wyjątkiem sytuacji dopuszczalnych przez prawo, jakiekolwiek powielanie, montaż, wypożyczanie czy inne rozpowszechnianie płyty lub jej zawartości czy fragmentów zawartości jest bezwzględnie zabronione. Książka wraz z płytą DVD nie mogą być przedmiotem odsprzedaży czy sprzedaży handlowej bez uzyskania odpowiedniej licencji.