WordPress to najpopularniejszy system CMS na świecie. Stworzenie strony internetowej przy jego użyciu jest naprawdę proste. Zazwyczaj opiera się na instalacji gotowego motywu (szablonu) i wypełnieniu go treścią z poziomu panelu administratora. Na oficjalnej stronie projektu można znaleźć setki darmowych motywów do pobrania. Wiele serwisów oferuje też płatne, ale za to bardzo profesjonalne szablony, np. themeforest.net/category/wordpress.
ZALETY I WADY GOTOWYCH MOTYWÓW
Zalety to głównie niskie koszty oraz czas realizacji.
Cena profesjonalnego motywu waha się pomiędzy 200 zł a 500 zł. Czyli można rzec, że na każdą kieszeń. Ale są oczywiście droższe. To zależy też od tego, czy chcemy kupić motyw na wyłączność, wtedy cena wzrośnie nawet o parę tysięcy złotych. A jeśli nie chcemy ponieść żadnych kosztów, to pozostają oczywiście darmowe „skórki” :).
Uruchomienie strony internetowej opartej o silnik WordPressa (przy minimalnej wiedzy informatycznej) zajmie nam dosłownie kilka minut (zakładając, że mamy już skonfigurowany i działający hosting). Są również firmy, takie jak nazwa.pl, które oferują WordPress w pakiecie, a więc nie musimy nawet używać klienta FTP, żeby samemu wgrać pliki na serwer lub skonfigurować dostęp do bazy danych. Instalacja następuje automatycznie i można nią zarządzać w panelu Active.admin. Warto wspomnieć, że dzięki gwarantowanej mocy 20 GHz i 8 GB pamięci RAM, które nazwa.pl przydziela dla każdej pojedynczej usługi CloudHosting WordPress, możemy być pewni, że nasza strona będzie działała błyskawicznie.
Wracając do kwestii motywów – większość darmowych „gotowców” może nie przypaść nam do gustu ze względu na „szablonową” strukturę. Zazwyczaj wymagają sporo korekt wizualnych, więc trzeba je samemu dostosować lub zlecić to komuś innemu. Posiadają też wiele wad dotyczących słabej optymalizacji pod kątem wydajności, nieaktualnych bibliotek JS, a w konsekwencji luk w bezpieczeństwie. Z kolei płatne, o ile są zrobione na wysokim poziomie, to ich CMS-y wyposażone są w potężne kreatory stron (tzw. buildery), które działają wolno i topornie. Z jednej strony można konfigurować praktycznie wszystko: kolorystykę, style czcionek, edytować poszczególne bloki i rozmieszczać je w layoucie metodą „przeciągnij i upuść” (drag & drop), a z drugiej strony narzędzia te są tak monolityczne, że edycja źródła jest wręcz niemożliwa. Zazwyczaj blokują też możliwość przełączenia się na „edytor kodu”. Na pewno nie są to przyjazne środowiska dla programistów :), za to przyjazne dla użytkowników bez wiedzy informatycznej.
W świecie programowania znajomość tworzenia szablonów do WordPressa jest na pewno cenna i przydatna. Zazwyczaj do każdego projektu musimy podejść indywidualnie i dostosować go do oczekiwań klienta. Poza tym możemy dobrać odpowiedni stack technologiczny (komponenty, biblioteki etc.) i tym samym zbudować stronę lekką, zoptymalizowaną pod kątem wydajności i SEO.
TWORZENIE NOWEGO MOTYWU „OD ZERA”
1. ORGANIZOWANIE PLIKÓW I KATALOGÓW MOTYWU
Motywy w WordPressie przechowywane są w katalogu /wp-content/themes/. Jak widać na poniższym obrazku każdy motyw ma swój osobny katalog.
Budowę nowego motywu zaczniemy więc od utworzenia nowego katalogu z dowolną nazwą (np. geekster). W katalogu tym zapisz trzy podstawowe pliki, które definiują motyw:
- index.php – główny plik szablonu,
- screenshot.png – obrazek przedstawiający wygląd motywu,
- style.css – główny arkusz stylów, zawiera informacje o motywie, np.:
|
1 2 3 4 5 6 7 8 9 |
/* Theme Name: Geekster Theme URI: https://geekster.pl Author: Grzegorz Dachowski Author URI: https://geekster.pl Description: Starter theme for developers Version: 1.0 Text Domain: geekster */ |
To już wystarczy, aby nasz nowy motyw był widoczny w panelu admina w zakładce „Wygląd” -> „Motywy”.
Kiedy klikniesz w obrazek motywu, wyświetli się część informacyjna, która jest w pliku style.css (screen poniżej). Zaczyna się coś dziać ;). Włącz nowy motyw. Odśwież front strony i zobacz efekt. Nowy motyw jest aktywny, ale na razie pusty, bo plik index.php nie ma zawartości. Na początek możesz zapisać w nim krótką informację typu „Strona w budowie”.
W katalogu głównym motywu, oprócz plików wymaganych: index.php i style.css, istnieje jeszcze szereg innych podstron specjalnych i części szablonów, które odpowiadają za wyświetlanie specyficznych treści:
- 404.php – szablon wyświetlany, gdy post lub strona nie może zostać odnaleziona pod wskazanym adresem URL,
- archive.php – szablon archiwum z postami wyświetlanymi według kategorii, autora lub daty (zostanie nadpisany, jeśli pojawią się bardziej szczegółowe pliki szablonów: category.php, author.php i date.php),
- attachment.php – szablon z załącznikiem, np. plikiem PDF, obrazkiem lub innymi mediami,
- author.php – szablon strony autora (zazwyczaj z jego postami),
- category.php – szablon postów wyświetlanych według kategorii,
- comments.php – szablon z komentarzami do posta,
- date.php – szablon postów wyświetlanych według daty lub godziny, np. https://geekster.pl/blog/2021/01/15
- footer.php – szablon stopki strony,
- front-page.php – szablon strony głównej (niezależny od ustawień w menu „Ustawienia” => „Czytanie„) lub home.php (jeśli nie ustawisz statycznej strony głównej to szablon będzie wyświetlał najnowsze posty),
- functions.php – w pliku tym definiujemy własne funkcjonalności do nowego motywu lub możemy wywoływać wbudowane funkcje WordPressa,
- header.php – szablon nagłówka strony (zawiera metadane, łącza do arkuszy stylów lub innych bibliotek, np. jQuery, Bootstrap itp.),
- image.php – szablon pojedynczej strony z załącznikiem graficznym,
- page.php – szablon pojedynczej strony opisowej (np. „O firmie”),
- search.php – szablon z wynikami wyszukiwania,
- single.php – szablon pojedynczego wpisu z bloga,
- sidebar.php – szablon panelu bocznego (np. ze skrótami wpisów, reklamami, listą kategorii itp.),
- tag.php – szablon postów wyświetlanych według tagów.
Oczywiście nie zawsze zaistnieje potrzeba tworzenia tych wszystkich plików, więc nie musisz ich bezzasadnie kopiować z innego motywu. To zależy od charakteru strony. Być może będzie to tylko strona opisowa bez bloga lub landing page reklamujący produkt, wtedy może wystarczyć zaledwie plik index.php, style.css i szablony cząstkowe: header.php, footer.php.
Co do struktury katalogów motywu, to zalecana jest organizacja, jak na poniższym obrazku:
Jak widać, katalog zasobów (assets) zawiera podkatalog z arkuszami stylów (css), skryptami JavaScript (js) oraz obrazkami (images). Części szablonów zapisujemy w template-parts i są one również podzielone na fragmenty dotyczące: stopki strony (footer), nagłówka (header), statycznych stron (page) oraz wpisów blogowych (post). Podkatalog inc przechowuje podstawowe funkcjonalności systemowe (np. funkcje menu).
2. TAGI SZABLONÓW
Tagi szablonów to wbudowane funkcje WordPressa, które są używane do pobierania treści z bazy danych i wyświetlania ich w odpowiednich miejscach szablonów (np. tytuł strony, treść posta, wyszukiwarka itp). Bez tagów WordPressa byłoby nam ciężko cokolwiek zrobić, dlatego ta wiedza jest niezbędna do dalszej pracy ;).
Lista najczęściej używanych tagów:
- the_title() – wczytuje tytuł strony lub posta,
- bloginfo() – wczytuje informacje o witrynie np. bloginfo(’name’) – nazwę bloga, bloginfo(’version’) – wersję WordPressa, bloginfo(’charset’) – kodowanie strony, np. utf-8, bloginfo(’language’) – język WordPressa, np. pl,
- get_header() – wczytuje szablon nagłówka strony z pliku header.php do szablonu głównego, np. index.php,
- get_footer() – wczytuje stopkę strony z pliku footer.php,
- get_sidebar() – wczytuje panel boczny z pliku sidebar.php,
- single_post_title() – tytuł posta lub strony,
- the_post() – wpis z bloga,
- get_template_part() – wczytuje część szablonu, np. get_template_part(’header’) – załaduje plik header.php. Dobrą praktyką jest przechowywanie mniejszych fragmentów szablonów w katalogu „template-parts„, np. get_template_part(„template-parts/newsletter”) – załaduje plik newsletter.php z podkatalogu /template-parts,
- get_search_form() – wczytuje plik searchform.php. Jeśli nie istnieje, zostanie wyświetlony domyślny formularz wyszukiwania,
- get_stylesheet_uri() – pobiera identyfikator URI arkusza stylów (style.css) dla bieżącego motywu,
- get_stylesheet_directory_uri() – pobiera identyfikator URI katalogu arkusza stylów dla bieżącego motywu, np.
https://example.com/wp-content/themes/geekster, - get_template_directory_uri() – pobiera identyfikator URI katalogu bieżącego motywu.
Jeśli masz problemy ze zrozumieniem tej części artykułu, to nie przejmuj się, za chwilę wszystko się wyjaśni ;). Znasz już wszystkie niezbędne podstawy, a więc możemy przejść do clou i w końcu coś zakodować.
Użycie tagów jest naprawdę proste. Zaktualizuj plik szablonu index.php:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html lang="<?php bloginfo('language'); ?>"> <head> <meta charset="<?php bloginfo('charset'); ?>"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title> </head> <body> Under construction </body> </html> |
Jak widać, jest to standardowa struktura dokumentu HTML wymieszana z kodem PHP. Poszczególne tagi zostaną zastąpione w źródle strony przez odpowiednie wartości pobrane z CMSa:
- bloginfo(’language’) – język witryny: pl-PL,
- bloginfo(’charset’) – kodowanie dokumentu HTML w standardzie utf-8,
- wp_title(’|’, true, 'right’) – automatycznie dopasowuje tytuł strony (separator „|” wyświetli się po prawej stronie – right),
- bloginfo(’name’) – tytuł witryny.
3. AKCJE NAGŁÓWKA I STOPKI
Akcje nagłówka i stopki (wp_head(), wp_footer()) są niezwykle istotne. Bez nich Twój motyw nie wczyta do źródła strony wtyczek innych dostawców itp. Uzupełnij więc szablon, jak poniżej:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="<?php bloginfo('language'); ?>"> <head> <meta charset="<?php bloginfo('charset'); ?>"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title> <?php wp_head() ?> </head> <body> Under construction <?php wp_footer(); ?> </body> </html> |
4. PĘTLE
Pętla to pojęcie, które jest Ci zapewne znane z języków programowania :). W WordPressie pełni podobną funkcję. Jest to prosty mechanizm wczytujący posty, strony, komentarze lub inne niestandardowe treści.
Zaktualizuj zawartość sekcji <body> w szablonie index.php:
|
1 2 3 4 5 6 7 8 9 10 |
<body> <?php if ( have_posts() ) : // jeśli są posty while ( have_posts() ) : the_post(); // ppobiera posty dopóki warunek w nawiasie jest spełniony the_title(); // tytuł posta lub strony the_content(); // główna treść posta lub strony endwhile; endif; ?> </body> |
W tym momencie możesz już odświeżyć stronę i zobaczyć efekt swojej pracy. Na razie jest on dość mizerny, ale już coś widać ;). Jeśli nie dodawałeś jeszcze postów, to pojawi się domyślny wpis z powitaniem.
5. SZABLONY CZĄSTKOWE
Aby nie powielać kodu, który będzie powtarzał się na każdej podstronie (sekcje nagłówka i stopki), podzielmy go na części: header.php i footer.php.
Szablon header.php:
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="<?php bloginfo('language'); ?>"> <head> <meta charset="<?php bloginfo('charset'); ?>"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title> <?php wp_head() ?> </head> <body> |
Szablon footer.php:
|
1 2 3 |
<?php wp_footer(); ?> </body> </html> |
Zaktualizuj plik szablonu głównego index.php:
|
1 2 3 4 5 6 7 8 9 10 |
<?php get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); the_title(); the_content(); endwhile; endif; ?> <?php get_footer(); ?> |
Do wczytania szablonów cząstkowych wykorzystałem tagi get_header() i get_footer(). WordPress wie, że przypisane są do nich pliki header.php i footer.php. Możemy użyć również wersji precyzyjniejszej do wczytywania niestandardowych plików szablonów: get_template_part(’header’) i get_template_part(’footer’). W nawiasie podajemy ścieżkę do pliku bez rozszerzenia.
6. DOŁĄCZANIE ARKUSZY STYLÓW I SKRYPTÓW
Do budowy szablonów i ich stylowania użyjemy gotowych narzędzi Bootstrapa. Linkowanie do skryptów i stylów możemy wprowadzić bezpośrednio w pliku header.php w sekcji <head></head>, aczkolwiek właściwym i zalecanym sposobem jest umieszczenie tego w tzw. kolejce – w pliku functions.php.
Służą do tego dwie funkcje:
|
1 |
wp_enqueue_style($handle, $src, $deps, $ver, $media) |
- $handle – nazwa arkusza stylów,
- $src – ścieżka do pliku ze stylami,
- $deps (opcjonalny) – wskazuje style powiązane z tym arkuszem stylów (domyślnie tablica – array()),
- $ver (opcjonalny) – numer wersji (false – ustawi wersję WP, null – nie wyświetli numeru wersji),
- $media (opcjonalny) – typ mediów (’all’, ’screen’,’print’ lub ’handheld’).
|
1 |
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer) |
- $handle – nazwa skryptu,
- $src – ścieżka do skryptu,
- $deps (opcjonalny) – tablica, która może obsłużyć inne skrypty, od których zależny jest Twój nowy skrypt (np. jQuery),
- $ver (opcjonalny) – numer wersji,
- $in_footer (opcjonalny) – umożliwia umieszczenie skryptów w stopce dokumentu HTML (true lub false).
Utwórz plik functions.php (w katalogu głównym motywu) i zapisz w nim poniższą zawartość:
|
1 2 3 4 5 6 7 8 |
<?php // functions.php function add_theme_scripts() { wp_enqueue_style('bootstrap-style', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css', [], null, 'all'); wp_enqueue_script('bootstrap-script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js', [], null, true); } add_action('wp_enqueue_scripts', 'add_theme_scripts'); ?> |
Zakolejkowane style i skrypty umieszczone są w jednej funkcji add_theme_scripts(), która jest wywołana za pomocą akcji wp_enqueue_scripts. Biblioteki Bootstrapa zaciągane są z zewnętrznego serwera CDN. Oczywiście możesz je pobrać i zapisać w katalogu swojego motywu, np.:
|
1 2 |
wp_enqueue_style('bootstrap-style', get_template_directory_uri() . '/assets/css/bootstrap.min.css', [], null, 'all'); wp_enqueue_script('bootstrap-script', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', [], null, true); |
7. PRZYGOTOWANIE LAYOUTU STRONY
Korzystając z dobrodziejstw Bootstrapa, zakodujemy layout według wzoru:
7.1. DOSTOSOWANIE NAGŁÓWKA STRONY
W pierwszej kolejności edytujemy plik header.php, dodając po znaczniku <body> zapis: get_template_part(’template-parts/header/site-header’):
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html lang="<?php bloginfo('language'); ?>"> <head> <meta charset="<?php bloginfo('charset'); ?>"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title><?php wp_title( '|', true, 'right' ); ?> <?php bloginfo('name'); ?></title> <?php wp_head() ?> </head> <body> <?php get_template_part( 'template-parts/header/site-header' ); ?> |
W nowym szablonie (/template-parts/header/site-header.php) zawarte będą specyficzne elementy, takie jak nazwa witryny, menu i wyszukiwarka. Oczywiście nie musimy tego robić i cały kod nagłówka możemy umieścić bezpośrednio w pliku header.php, ale jak już wspominałem na początku takie podejście nie jest zalecane. Rozdzielenie tego na mniejsze fragmenty daje więcej swobody i elastyczności przy zarządzaniu poszczególnymi częściami szablonów.
Zawartość site-header.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- LOGO --> <a class="navbar-brand" href="<?php bloginfo("url"); ?>"> <span class="d-block"><?php bloginfo('name'); ?></span> <span class="badge bg-success"><?php bloginfo('description'); ?></span> </a> <!-- /END LOGO --> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <!-- MENU --> <div class="navbar-nav me-auto mb-2 mb-lg-0"> <?php wp_nav_menu(); ?> </div> <!-- /END MENU --> <!-- SEARCH --> <?php get_search_form(); ?> <!-- /END SEARCH --> </div> </div> </nav> |
Ten fragment zawiera gotowy kod paska nawigacyjnego ze strony getbootstrap.com/docs/5.1/components/navbar/. Bootstrap jest świetny, przyspiesza pracę jak mało co ;). Nie musimy kodować od zera całego mechanizmu belki i na dodatek jest już responsywny. Tagi wp_nav_menu() i get_search_form() wczytują domyślne szablony WP dla menu nawigacyjnego i wyszukiwarki. Tę część jeszcze zmodyfikujemy.
7.1.1. WYSZUKIWARKA
Formularz wyszukiwarki można wstawić za pomocą gotowego tagu get_search_form(), z tym że nie będzie posiadał klas Bootstrapa, dlatego nadpiszemy go. W tym celu zmień get_search_form() na:
|
1 |
<?php get_template_part( 'template-parts/header/site-search' ); ?> |
Szablon cząstkowy site-search.php zapisz (zgodnie z powyższym) w lokalizacji /template-parts/header/:
|
1 2 3 4 |
<form role="search" method="get" id="searchform" class="searchform d-flex" action="<?php bloginfo(" url");="" ?="">"> <input class="form-control me-2" type="search" value="" name="s" id="s" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit" id="searchsubmit" value="Szukaj">Search</button> </form> |
Efekt:
7.1.2. MENU
Tag wp_nav_menu() pozwala wstawić menu nawigacyjne do szablonu strony. Menu możesz dostosować w panelu CMS w sekcji: Wygląd -> Menu. Domyślnie menu pobiera linki do zwykłych stron i nie mamy nad tym kontroli. Możemy to zmienić, tworząc własne menu:
Jak widać, menu można dowolnie personalizować: dodawać własne odnośniki, dołączać konkretne strony, posty a nawet kategorie i tagi.
Aby dodać niestandardowe menu do szablonu, należy je wpierw zarejestrować za pomocą funkcji:
|
1 |
register_nav_menu(string $location, string $description); |
Parametr $location określa lokalizację (położenie) menu, a $description – krótki opis lokalizacji (np. „Menu główne”).
Nowe menu należy zdefiniować w pliku functions.php:
|
1 2 3 4 5 6 7 8 |
// ... function register_my_menu() { register_nav_menu('header-menu',__('Main menu')); } add_action('init', 'register_my_menu'); ?> |
Akcja add_action(’init’, 'register_my_menu’) inicjuje nowe menu. Teraz z łatwością możemy wstawić je do szablonu za pomocą instrukcji:
|
1 |
<?php wp_nav_menu(array('theme_location' => 'header-menu')); ?> |
Kiedy odświeżysz stronę w przeglądarce internetowej, zobaczysz, że menu wczytuje się poprawnie, niestety jego wygląd jest mizerny. Oczywiście możesz je ostylować w pliku style.css lub użyć filtrów, ale najlepszym sposobem będzie użycie gotowej klasy implementującej menu Bootstrapa.
7.1.3. IMPLEMENTACJA MENU BOOTSTRAPA
Skopiuj klasę z github.com/wp-bootstrap/wp-bootstrap-navwalker/blob/master/class-wp-bootstrap-navwalker.php do katalogu /classes:
Następnie zarejestruj klasę w pliku functions.php:
|
1 2 3 4 5 6 7 8 |
// ... function register_navwalker(){ require_once get_template_directory() . '/classes/class-wp-bootstrap-navwalker.php'; } add_action('after_setup_theme', 'register_navwalker'); ?> |
Zaktualizuj zapis menu w pliku site-header.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- LOGO --> <a class="navbar-brand" href="<?php bloginfo('url'); ?>"> <span class="d-block"><?php bloginfo('name'); ?></span> <span class="badge bg-success"><?php bloginfo('description'); ?></span> </a> <!-- /END LOGO --> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <!-- MENU --> <?php wp_nav_menu(array( 'theme_location' => 'header-menu', 'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns. 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'navbar-nav mr-auto', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), )); ?> <!-- /END MENU --> <!-- SEARCH --> <?php get_template_part( 'template-parts/header/site-search' ); ?> <!-- /END SEARCH --> </div> </div> </nav> |
Teraz menu będzie wyglądać elegancko ;).
W tym punkcie nauczyliśmy się korzystać z zewnętrznych bibliotek.
7.2 DOSTOSOWANIE ZAWARTOŚCI STRONY I PASKA BOCZNEGO
W tym punkcie przygotujemy zawartość strony, która jest chyba najistotniejsza dla odwiedzającego. Layout strony podzielimy na dwa obszary, jak na poniższym obrazku. W lewej kolumnie (posts) będą wyświetlane wpisy z bloga lub zwykłe strony, a w prawej kolumnie (sidebar) – treść poboczna (np. kategorie). Taki układ jest często spotykany w sieci Internet.
7.2.1. PERSONALIZACJA WPISÓW BLOGOWYCH
Edytuj szablon główny index.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php get_header(); ?> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-8"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part('template-parts/content/content-excerpt'); endwhile; endif; ?> </div> <div class="col-md-4"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?> |
W tym szablonie wyświetlane będą skróty wpisów z bloga. Domyślny szablon skrótu nadpisujemy, używając szablonu cząstkowego content-excerpt.php w katalogu /template-parts/content/:
|
1 |
get_template_part('template-parts/content/content-excerpt'); |
Zawartość szablonu cząstkowego content-excerpt.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<article class="card mb-3 border-0 border-bottom"> <div class="row g-0"> <div class="col-md-4"> <?php the_post_thumbnail('medium'); ?> </div> <div class="col-md-8"> <div class="card-body"> <?php the_title(sprintf('<h2 class="card-title"><a href="%s">', esc_url(get_permalink())), '</a></h2>'); ?> <div class="card-text"> <?php the_excerpt(); ?> </div> </div> </div> </div> </article> |
Tag the_post_thumbnail() wyświetla zdjęcie lub obrazek posta (rozmiary: „thumbnail” – 150 x 150, „medium” – 300 x 300, „medium_large” – 768, „large” – 1024 x 1024, „full” – oryginalny rozmiar, niestandardowy np. array(100,100)). Skrót posta the_excerpt() wyświetlany jest bez znaczników HTML i obcinany do 55 wyrazów.
Teraz musimy przygotować szablon główny dla całego posta – single.php, np.:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php get_header(); ?> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-8"> <?php get_template_part('template-parts/content/content-single'); ?> </div> <div class="col-md-4"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?> |
Szablon single.php ma podobny układ dwukolumnowy jak index.php. Szablon cząstkowy posta zapisujemy w pliku content-single.php w katalogu /template-parts/content/ (podobnie jak content-excerpt.php).
Zawartość szablonu cząstkowego content-single.php:
|
1 2 3 4 5 6 7 |
<article class="card mb-3 border-0"> <div class="card-body"> <?php the_post_thumbnail('full'); ?> <?php the_title('<h1 class="card-title">', '</h1>'); ?> <?php the_content(); ?> </div> </article> |
Analogicznie przygotuj pozostałe szablony główne (404.php, page.php, category.php itd.). Możesz wzorować się też na innych motywach, np. twentytwentyone.
7.2.2. INFORMACJE O AUTORZE I DATA PUBLIKACJI POSTA
Szablony z wpisami lub z widokiem całego posta możemy rozszerzyć o różne informacje o autorze posta:
W naszym przykładzie rozszerzymy szablon z widokiem całego posta, czyli content-single.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<article class="card mb-3 border-0"> <div class="card-body"> <?php the_post_thumbnail('full'); ?> <?php the_title('<h1 class="card-title">', '</h1>'); ?> <?php the_content(); ?> </div> <div class="card-footer small"> <span class="text-secondary"><?php _e('Published'); ?>:</span> <?php echo get_the_date(); ?> <?php the_post(); $author_id = get_the_author_meta('ID'); $author = get_user_by('ID', $author_id); rewind_posts(); ?> <br /> <span class="text-secondary"><?php _e('Author'); ?>:</span> <a href="<?php echo get_author_posts_url($author_id,$author->display_name); ?>"> <?php echo $author->display_name; ?> </a> </div> </article> |
Funkcje _e() tłumaczą frazy podane w nawiasach _e(’Published’) i _e(’Author’). Przydatne dla stron wielojęzycznych. Funkcja get_the_date() pobiera i wyświetla datę utworzenia posta. Aby wyświetlić informacje o autorze posta, korzystamy z zapisu, który wyciąga cały obiekt użytkownika Wp_user:
|
1 2 3 4 |
the_post(); $author_id = get_the_author_meta('ID'); $author = get_user_by('ID', $author_id); rewind_posts(); |
Dzięki temu możemy odczytać następujące dane:
|
1 2 3 4 5 6 7 |
$author->display_name // nazwa użytkownika $author->nickname; // pseudonim $author->first_name; // imię $author->last_name; // nazwisko $author->user_description; // biografia $author->user_email; // email $author->user_url; // witryna internetowa |
Z kolei aby wyświetlić obrazek awatara użytkownika, użyj:
|
1 |
get_avatar($author->user_email, '100'); |
Funkcja przyjmuje dwa parametry:
- $email – adres email użytkownika – $author->user_email (możemy również podać id użytkownika – $author_id),
- $size – rozmiar obrazka (w naszym przykładzie – 100 pikseli).
Aby wygenerować link do strony z postami autora, używamy funkcji:
|
1 |
get_author_posts_url($author_id, $author->display_name); |
7.2.3. SIDEBAR – ZAWARTOŚĆ POBOCZNA
Polecenie get_sidebar() dołącza szablon paska bocznego z widżetami. Domyślnie wczytuje elementy tak, jak na obrazku poniżej:
Aby nadpisać ten szablon, wystarczy utworzyć w katalogu głównym motywu plik sidebar.php lub sidebar-{name}.php – gdzie „name” to dowolna nazwa, np. sidebar-primary.php. W tym drugim przypadku musimy zmienić wywołanie szablonu w get_sidebar() na get_sidebar(„primary”). Jak widać, podajemy tylko drugi człon nazwy pliku, bez słowa kluczowego sidebar.
Zawartość szablonu możesz dostosować do swoich potrzeb, np.:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="primary" class="sidebar"> <?php do_action( 'before_sidebar' ); ?> <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?> <aside id="archives" class="widget card mb-3"> <h5 class="widget-title card-header"><?php _e( 'Archives', 'shape' ); ?></h5> <div class="card-body"> <ul> <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?> </ul> </div> </aside> <aside id="meta" class="widget card mb-3"> <h5 class="widget-title card-header"><?php _e( 'Meta', 'shape' ); ?></h5> <div class="card-body"> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </div> </aside> <?php endif; ?> </div> |
Wyświetli:
7.2.4. PAGINACJA
WordPress oferuje gotową funkcjonalność z numeracją stron oraz odnośnikami do kolejnych lub poprzednich postów. W ustawieniach czytania możemy określić liczbę wpisów na stronie.
Aby dodać paginację, edytuj szablon index.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php get_header(); ?> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-8"> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; new WP_Query(array('paged' => $paged)); if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part('template-parts/content/content-excerpt'); endwhile; the_posts_pagination(); endif; ?> </div> <div class="col-md-4"> <?php get_sidebar(); ?> </div> </div> </div> <?php get_footer(); ?> |
Obiekt WP_Query() zmienia działanie głównej pętli i ustawia tablicę z numerem strony (paged) pobranym za pomocą funkcji get_query_var(’paged’).
|
1 2 |
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; new WP_Query(array('paged' => $paged)); |
Do wyświetlenia szablonu z numeracją możemy użyć gotowej metody:
|
1 |
the_posts_pagination(); |
7.3. DOSTOSOWANIE STOPKI STRONY
Do stopki strony dodamy krótką informację o prawach autorskich.
Edytuj szablon footer.php:
|
1 2 3 4 5 6 |
<?php wp_footer(); ?> <footer class="bg-light p-3"> <?php get_template_part('template-parts/footer/copyright'); ?> </footer> </body> </html> |
Jak widać, potrzebny będzie szablon copyright.php (/template-parts/footer/copyright.php):
|
1 2 3 4 |
<div class="text-center small"> © <?php echo date_i18n(_x( 'Y', 'copyright date format', 'twentytwenty')); ?> <a href="<?php esc_url(home_url( '/' )); ?>"><?php bloginfo('name'); ?></a> </div> |
8. WGRYWANIE MOTYWU NA SERWER
Gotowy motyw możesz przenosić na różne środowiska WordPressa. Wystarczy spakować katalog z motywem za pomocą programu do archiwizacji, np. WinRAR. Koniecznie musi być to format ZIP, inaczej podczas uploadu zgłoszony zostanie wyjątek:
Paczka nie mogła zostać zainstalowana. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
Po zalogowaniu do panelu administracyjnego, w sekcji Wygląd -> Motywy możesz wgrać motyw na serwer. WordPress sam wypakuje pliki do odpowiedniego katalogu :).
Inny sposób to oczywiście przeniesienie plików na serwer metodą drag & drop. W tym celu musisz posiadać program zwany klientem FTP, np. WinSCP. Serwery są różne, ale zasada jest ta sama i odbywa się to praktycznie w ten sam sposób. Cały proces dokładnie opisany jest w samouczku nazwa.pl/pomoc/baza-wiedzy/jak-wgrac-pliki-na-serwer.
PODSUMOWANIE
Tym oto sposobem dotarliśmy do końca tego artykułu. Jak już wiesz, tworzenie szablonów w WordPressie nie jest zbyt skomplikowane :). Wystarczy trochę czasu i chęci, aby zbudować coś swojego i niekonwencjonalnego. Wiedza w tym artykule jest wystarczająca do rozpoczęcia pisania motywów. Więcej szczegółowych informacji można przeczytać w dokumentacji: developer.wordpress.org/themes/basics/.
Obrazek wyróżniający do posta: NajiHabib