WORDPRESS tWORzEniE mOtyWóW

Transkrypt

WORDPRESS
tworzenie motywów
Copyright © 2013 INSIGO Grzegorz Róg. Wszelkie prawa zastrzeżone.
INSIGO Grzegorz Róg
www.eduweb.pl
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
Grzegorz Róg
Grzegorz Róg 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.
www.eduweb.pl
Grzegorz Róg
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
www.eduweb.pl
Grzegorz Róg
naszych kursów osobne aktualizacje, omawiające tylko te nowe, ciekawe funkcje. Aktualizacje
zazwyczaj możesz znaleźć na http://www.eduweb.pl/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?
www.eduweb.pl
Grzegorz Róg
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.
www.eduweb.pl
Grzegorz Róg
www.eduweb.pl
Grzegorz Róg
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.
www.eduweb.pl
Grzegorz Róg
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() the_ID() the_author() the_category() the_title
the_excerpt
the_content
the_date
URL POSTA
ID POSTA
NAZWA AUTORA
KATEGORIA POSTA
TYTUŁ POSTA
SKRÓT POSTA
CAŁA ZAWARTOŚĆ POSTA
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
www.eduweb.pl
Grzegorz Róg
• <?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: Grzegorz Róg
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
www.eduweb.pl
Grzegorz Róg
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’); ?>
<?php bloginfo(‘charset’); ?> <?php bloginfo(‘description’); ?> <?php bloginfo(‘url’); ?> <?php bloginfo(‘rss2_url’); ?> <?php bloginfo(‘template_url’); ?> <?php bloginfo(‘pingback_url’); ?> <?php bloginfo(‘stylesheet_url’); ?> <?php bloginfo(‘wpurl’); ?> <?php bloginfo(‘version’); ?> <?php bloginfo(‘html_type’); ?> TYTUŁ BLOGA
KODOWANIE
META DESCRIPTION
ADRES BLOGA
URL DO RSS
ŚCIEŻKA SZABLONU
URL PINGBACK’ÓW
URL PLIKU CSS
URL INSTALACJI WP
WERSJA WP
WERSJA HTML STRONY
Co jeszcze sprawdzimy z Bloginfo? Przykładowo, na której stronie się znajdujemy:
•
•
•
•
•
•
is_home() is_front_page() is_single() is_sticky() is_page() is_category() STRONA GŁÓWNA BLOGA
STRONA GŁÓWNA
WIDOK POJEDYNCZEGO POSTA
PRZYKLEJONY POST
WIDOK STRONY
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); ?>
www.eduweb.pl
Grzegorz Róg
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
www.eduweb.pl
Grzegorz Róg
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:
www.eduweb.pl
Grzegorz Róg
function stworz_taksonomie() {
register_taxonomy(‘zwierzeta’, ‘post’, array( ‘hierarchical’ => false, ‘Zwierzęta’, ‘query_var’ => true, ‘rewrite’ => true));
register_taxonomy(‘Rośliny’, ‘post’, array( ‘hierarchical’ => false, query_var’ => true, ‘rewrite’ => true));
}
add_action(‘init’, ‘create_my_taxonomies’, 0);
‘label’ =>
‘label’ => ‘Rośliny’,
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)); ?>
www.eduweb.pl
Grzegorz Róg
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://www.eduweb.pl 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.
www.eduweb.pl
Grzegorz Róg

WORDPRESS tWORzEniE mOtyWóW

Transkrypt

Podobne dokumenty

Hauerpower

Podział strony html na części:

Wymagania serwera dla aplikacji trigoCMS!

Instalacja silnika WordPress na serwerze

O moim warsztacie - Projektowanie stron www

Nowoczesne technologie internetowe