Tworzenie szablonu (motywu) WordPress

Ten artykuł to nic innego jak kurs tworzenia własnego motywu dla systemu WordPress. Artykuł przeznaczony dla osób które potrafią stworzyć prostą stronę statyczną za pomocą HTML, CSS i opcjonalnie JS oraz znają podstawy PHP (naprawdę podstawy nie wykraczające poza przypisanie, tworzenie i wywoływanie funkcji oraz pętla while). Opanowanie tworzenia szablonów pozwoli Ci oferować profesjonalne usługi tworzenia stron WordPress, czyli w pełni funkcjonalnych stron zintegrowanych z najpopularniejszym i cenionym wśród profesjonalistów CMSem na świecie.

Ktoś może zapytać: po co tworzyć własny motyw WordPress skoro jest tyle gotowych szablonów w marketach?

Gotowe szablony dla systemów CMS mają wiele wad i rozprawiłem się z tym w artykule zalety i wady i mity szablonów stron w śród nich można zaliczyć zbyt skomplikowaną i zawiłą konstrukcję, która opóźnia działanie strony zarówno po stronie serwera jak i przeglądarki. Fakt ten może utrudniać wprowadzanie własnych rozszerzeń i jak to mówi mój kolega sprawa z czyimś kodem jest „śliska”. W gotowych motywach WordPressa (które można kupić za kilkadziesiąt dolców) próbuje się pogodzić niemal wszystkie potrzeby jakie mogą się pojawić przy tworzeniu strony dla ogółu klientów. To powoduje, że OK, można łatwo dodać jakąś funkcjonalność ale jest to okupione dużym kosztem, właśnie tym przeładowaniem, które nie jest nam zazwyczaj potrzebne na stronie z blogiem.

Po drugie: nie wszyscy korzystają z szablonów. Korzystanie z gotowego motywu de facto pomija proces tworzenia strony WordPress. Profesjonalny proces produkcji i prawdziwe tworzenie strony WordPress wysokiej jakości polega najpierw na zebraniu wymagań, stworzeniu szablonu HTML5 a potem dostosowaniu go do bycia pełnoprawnym motywem WordPress.

Korzyści tworzenia strony WordPress od zera

Tworzenie własnego motywu pozwoli tworzyć strony dokładnie takie jak Ty chcesz a po drugie będą idealnie zoptymalizowane pod kątem wydajności i SEO. Wprowadzenie zmian i unowocześnień według Twojego pomysłu będzie zadaniem trywialnym. Twoja strona będzie dawała 100% satysfakcji i pozbędziesz się przy tym hamulca, który powoduje że Twoja strona nie osiąga 100 punktów w PageSpeed Insights czy w innych analizatorach jakości i wydajności. Poznasz jak dokładnie działa WordPress i modyfikacje nie będą sprawiać ci żadnego problemu. Gotowym wtyczkom podziękujesz a za to stworzysz też własną wtyczkę WordPress o dokładnie takiej funkcjonalności jaką chcesz osiągnąć.

Umiejętność tworzenia motywu WordPress sprawi, że z nieświadomego klikacza i de facto użytkownika WordPress (jakich jest już wielu) staniesz się przydatnym i cennym deweloperem, który będzie w stanie sprostać każdemu zadaniu z obszaru web designu i programowania w WordPress (oczywiście, o ile będziesz się rozwijać a nie poprzestaniesz na tym artykule).

To nie jest trudne ale z drugiej strony to nie jest kolejny przewodnik, który będzie cię uczył każdy problem rozwiązywać cudzymi motywami i wtyczkami. W skrócie: chcę Cię nauczyć czegoś wartościowego czego potrzebują wymagający klienci i dzisiejszy Internet. Kiedy opanujesz umiejętność opisaną w tym artykule, bez problemu stworzysz stronę WordPress na podstawie dowolnego projektu graficznego, mockupu czy prototypu.

Na czym polega tworzenie szablonu WordPress?

Kiedy zaopatrzysz się w książkę WordPress Bible autorstwa Aarona Brazella to w dziale poświęconym tworzeniu szablonów dla WordPressa (jak na ironię) praca polega na dostosowaniu i edycji kodu jednego z domyślnych motywów.

Doskonale rozumiem to podejście. To była książka „Biblia” a autor nie chciał pominąć jakiejkolwiek funkcji, przy okazji pokazał na gotowym przykładzie jak podchodzić do edycji szablonów i motywów. Nie jest to książka dla programistów, którzy tworzą strony dla klientów a bardziej dla osób które są redaktorami i rozwijają własną stronę WordPress.

My zrobimy coś całkiem innego – zaczniemy pracę od „czystej kartki”.

<?php

A właściwie gotowy i statyczny szablon HTML5, dostosujemy do współpracy z WordPressem. Jeżeli do tej pory nie tworzyłeś strony statycznej odpuść sobie ten kurs bo i tak nic z niego nie zrozumiesz. Naucz się tworzenia nieskomplikowanych stron statycznych a potem wracaj tutaj.

Krok -1: Utworzenie szablonu HTML strony WWW

To działanie (które w ogóle nie jest związane z WordPressem) jest konieczne by podejść do tworzenia motywu WordPress. To może być Twój poprzedni projekt, jakiś gotowy szablon HTML5 (który tutaj testowałem) lub na szybko stwórz sobie zwykłą stronę z menu. Całość możesz oprzeć na Bootstrapie lub innej gotowej bibliotece.

Wystarczy index.html i jakiś styl aby fajnie Ci się pracowało.

Krok 0: Instalacja WordPressa

Możesz zainstalować go na zewnętrznym serwerze lub lokalnie za pomocą XAMPP. ten artykuł znajduje się w dziale programowanie, dlatego zakładam, że już korzystałeś i instalowałeś WordPressa dlatego pominę ten punkt.

Krok 1: Formalne utworzenie motywu WordPress

Aby utworzyć własny motyw WordPress:

1. Zrób zrzut ekranu istniejącej strony statycznej. Dotnij ją do rozmiaru 1200px x 900px. Plikowi nadaj nazwę screenshot.png.
2. Zmień nazwę pliku index.html na index.php (czyli zmieniamy samo rozszerzenie).
3. Stwórz plik style.css (osobny w roocie) i dodaj do niego zawartość Listingu 1.
4. Dla porządku pliki .css, .js opcjonalne fonty i obrazki szablonu umieść w osobnych folderach. Cała struktura szablonu powinna wyglądać tak jak na obrazku 1.
5. To wszystko zapisujemy do folderu nazwa-szablonu i umieszczamy ten folder w wp-content/themes/

Listing 1:

/* 
 Theme Name: Pierwszy szablon
 Theme URI: https://mansfeld.pl
 Author: Paweł Mansfeld
 Author URI: https://mansfeld.pl 
 Description: Szablon testowy
 Version: 1.0 
 */

Obrazek 1:

Krok 2: Włączenie nowego motywu

Od tej pory możesz włączyć swój motyw w Wygląd >> Motywy:

Możemy sprawdzić jak wygląda teraz nasza witryna WordPress… Jak widać nie zgadzają się ścieżki do grafik i do plików ze stylami i skryptami dlatego widzimy jakby ktoś usunął wszystkie pliki CSS i JS wchodzące w skład naszego szablonu HTML5:

Krok 3: Dodanie CSS i kodu JavaScript do szablonu

Dodanie styli CSS i JS do szablonu można zrealizować w WordPress na wiele sposobów. Najszybszą pod kątem złożoności i łatwą w wykonaniu techniką jest parametryzacja ścieżek do zasobów. To spowoduje, że nasz motyw będzie w pełni przenośny. W WordPressie standardem jest umieszczanie odwołań i odnośników do zasobów w postaci bezwzględnej. Poniższa instrukcja drukuje ścieżkę do aktualnie wykorzystywanego motywu:

<?php echo get_stylesheet_directory_uri(); ?>

dlatego wszelkie odwołania do zasobów w stylu:

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/script.js">

przyjmą następującą postać:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/bootstrap.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js">

Po odświeżeniu strona powinna przyjąć właściwy wygląd:

W starszych poradnikach można się natknąć na funkcję:

bloginfo("template_url")

Tak naprawdę mamy dwie podobne funkcje:

• get_template_directory_uri();
• get_stylesheet_directory_uri();

Ta pierwsza zawsze zwraca ścieżkę motywu głównego natomiast druga motywu potomnego (jeżeli takowy istnieje i jest aktywowany). Taki sposób kodowania odwołań spowoduje, że możemy w ramach motywu potomnego tworzyć zmodyfikowane zasoby.

Najbardziej zaawansowana ale powszechna w motywach i wtyczkach technika dodawania stylów oraz skryptów do motywu polega na wykorzystaniu specjalnych funkcji:

• wp_enqueue_style();
• wp_enqueue_script();

W praktyce dodajemy taki kod do nagłówka lub pliku functions.php:

wp_enqueue_style( "custom-styles", get_template_directory_uri()."/css/theme-styles.css",false,'1.1','all');

Jak widać tutaj też korzystamy z get_template_directory_uri(). Trzeci argument może zawierać zależności, czwarta to wersja pliku a piąty argument to atrybut media np. media=”screen” lub media=”all”.

Skrypty JavaScript dodaje się bardzo podobnie z tym że ostatni boolowski argument pozwala nam umieścić skrypt w stopce. Wartość true oznacza, że skrypt zostanie dodany do stopki.

wp_enqueue_script( "custom-script", get_template_directory_uri()."/js/theme-scripts.js",array("jquery"),"1.1", true);

Jest to sposób, który wykorzystuje się w motywach przeznaczonych dla marketów lub wtedy kiedy chcemy aby za dołączanie i odłączanie poszczególnych zasobów CSS i JS był odpowiedzialny system WordPress. Korzyścią będzie możliwość wykorzystania specjalnych wtyczek do optymalizacji, minimalizacji i scalania takich jak Autoptimize. Jak wiadomo ta technika ma też swoje minusy. Szablon będzie działał o kilka taktów procesora wolniej bo zamiast wydrukować tekst, ścieżki w szablonie będą musiały być wygenerowane przez te funkcje.

Warto zapamiętać:

Dodawanie skryptów i stylów za pomocą metod wp_enqueue_style() i wp_enqueue_script(), pozwali zarządzać tymi zasobami za pomocą wtyczek lub własnych funkcji odwołujących się do akcji np. w functions.php. Najnowsze wersje Autoptimize potrafią optymalizować także pliki zapisane na sztywno do szablonu.

Krok 4: Dodanie akcji nagłówka i stopki

Kolejnym krokiem będzie dodanie akcji wp_head() i wp_footer(). Jest to konieczny krok jeżeli chcemy aby w naszym motywie działały wtyczki, które dodają do front-endu własny kod. Informujemy WordPressa gdzie dokładnie jest nagłówek i stopka, dzięki temu system będzie wiedział gdzie umieszczać kod JS i CSS.

Akcję wp_head(); najbezpieczniej dodać przed tagiem zamykającym head:

<?php wp_head(); ?>
</head>

A stopkę jak już część z was się domyśliła – przed tagiem zamykającym body:

<?php wp_footer(); ?>
</body>

Krok 5: Edycja treści

Nasza strona internetowa wygląda dokładnie tak jak sobie tego życzymy ale nie wykorzystujemy jeszcze najważniejszego – edytora. Aby na stronie pojawiało się to co napiszemy w edytorze WordPress lub wyklikamy układ z wszystkimi blokami Gutenberg, w pliku index.php musimy użyć komendy the_content() ale musi się ona znajdować w tzw. pętli WordPress:

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

Możemy też tworzyć unikalne szablony podstron różniących się między sobą układem za pomocą instrukcji:

/*
Template Name: Nazwa szablonu
*/

Tak stworzone pliki zapisujemy pod dowolną nazwą np. oferta.php, kontakt.php itp.

W przypadku niestandardowych szablonów radzę unikać zarezerwowanych nazw takich jak: archive, home, front-page, category, tag – o których możesz przeczytać w dalszych punktach.

Taki szablon można potem wybrać przy edycji strony w Dokument >> Atrybuty wpisu lub atrybuty strony.

W ramach ciekawostki wspomnę, że strony wykorzystujące dany szablon można pobrać w pętli za pomocą metadanych wp_page_template:

$query = new WP_Query( array( 'meta_key' => '_wp_page_template', 'meta_value' => 'szablon.php' ) );
 if ( have_posts() ) while ( have_posts() ) : the_post();
    <?php the_title(); ?>
 <?php endwhile; ?>

Edytor Gutenberg pozwala dodawać złożone struktury HTML w treści postów i Stron. Gdyby się jednak okazało, że dostępne bloki w jakiś sposób nas ograniczają (np. chcemy dodać slajder, akordeon, bannery), których nie można osiągnąć za pomocą istniejących bloków Gutenberga mamy kilka możliwości:

• stworzyć dodatkowe własne pola (ang. custom fields) – opisane w dalszej części artykułu,
• stworzyć własny blok Gutenberg,
• wykorzystać wtyczkę Advanced Custom Fields do dodania dodatkowych pól w edytorze a nawet własnego PageBuildera,
• stworzyć własny shortcode,
• dodać dodatkowe bloki za pomocą wtyczek np. Section Block, Bootstrap Blocks itp…

Bez obaw, techniki będą podlinkowane i opisane w następnych punktach.

Krok 6: Wsparcie dla menu

Aby można było utworzyć menu w zapleczu należy menu najpierw zarejestrować. Dobrą praktyką jest dodanie tego kodu do pliku functions.php:

function reg_mymenu() {
  register_nav_menu('header-menu',__( 'Menu główne' ));
}
add_action( 'init', 'reg_mymenu');

Kiedy już zaktualizujemy plik możemy przejść do edytowania menu w Wygląd >> Menu:

Następnie można to menu wydrukować w odpowiednim miejscu w szablonie:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Zmianę formatowania takiego menu można dokonać za pomocą:

• filtrów,
• rozszerzenia klasy walker,
• funkcji wp_get_nav_menu_object(); oraz wp_get_nav_menu_item()

Jeżeli chcesz więcej praktycznych przykładów programowania menu, tworzenia własnej struktury i dostosowywania kodu HTML zapraszam do artykułu/przewodnika: Tworzenie i programowanie menu od podstaw w szablonie WordPress.

Krok 7: Szablon wpisu single.php

Szablon pojedynczego wpisu czyli przykładowo artykułu blogowego (lub produktu z katalogu produktów) tworzymy podobnie do zwykłej podstrony. Plikowi nadajemy nazwę single.php – i od teraz ten plik będzie odpowiadał za wygląd strony ze wpisem. Tutaj także możemy tworzyć niestandardowe warianty szablonów, nazywając plik dowolnie i dodając specjalny komentarz:

 /*
*Template Name: Nazwa szablonu wpisu
*Template Post Type: post
*/

Krok 8: Obsługa podstron specjalnych

Koniecznym krokiem w celu pełnego wykorzystani możliwości WordPress będzie zakodowanie podstron specjalnych takich jak:

• author.php
• archive.php
• category.php
• tag.php
• search.php
• 404.php
• home.php
• front-page.php

Tworzymy je podobnie jak inne podstrony. W dokumentacji są odpowiednie instrukcje jak wybrać szukane słowo, aktualny tag czy kategorię. Za pomocą pętli zwracamy wyniki wyszukiwania, podstrony oznaczone konkretnymi kategoriami lub tagami. Przykłady takiego kodu są w dalszych punktach.

Krok 9a: Lista artykułów – kodowanie szablonu home.php

Częstą potrzebą jest zamieszczenie listy artykułów. Z taką sytuacją mamy do czynienia na podstronie blog, na stronie głównej, pod artykułem (np. artykuły powiązane), na stronach tagów, kategorii i wyszukiwarce. Aby wyświetlić listę interesujących nas artykułów, należy użyć następującej pętli – możemy ją umieścić w pliku home.php:

<?php
global $post;
$args = array( 'posts_per_page' => 16 );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

//Kod miniaturki posta

<?php endforeach;
wp_reset_postdata();?>

Wartość dla opcji posts_per_page determinuje ile postów znajdzie się na jednej podstronie. W tym przykładzie 16 – sztywną wartość liczbową możemy zamienić na:

get_option('posts_per_page')

Wówczas, postów będzie tyle ile podamy na podstronie „Czytanie” ustawień WordPressa.

Obsługę paginacji zamieściłem w Dodatku 15.

Kod miniaturki posta to po prostu kod HTML, który pokaże obrazek tytuł, link i przykładowo datę publikacji. W moim blogu wygląda to w dużym uproszczeniu tak:

<div class="col-md-6">
     <a href="<?php the_permalink(); ?>">
       <img src="<?php the_post_thumbnail_url('large'); ?>"/>
     </a>
         <div class="post-details">
             <h6><?php echo get_the_date('j F Y'); ?></h6>
             <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
             <p>
                 <?php the_excerpt(); ?>
             </p>
         </div>
     </div>
 </div>

Wytłumaczenie linijki the_post_thumbnail_url(„large”) jest zamieszczone poniżej w Dodatku nr 3.

W szablonie home.php czyli tym, który najczęściej przechowuje listę najnowszych wpisów, często pojawia się potrzeba zamieszczenia kategorii wpisu i linku do tej kategorii:

<a href="<?php echo get_category_link(get_the_category()[0]->term_id); ?>"><?php echo get_the_category()[0]->cat_name; ?></a>

Podobnie sprawa wygląda z autorem artykułu. Tutaj możemy także umieścić jego avatar:

<?php echo get_avatar( get_the_author_meta( 'ID' ), 36,"","",["class" => "rounded-circle"] ); ?>
<?php echo get_the_author_meta('display_name', $post->post_author); ?>

Zdarza się, że miniaturka ma posiadać licznik komentarzy jeżeli mamy do czynienia z prawdziwym blogiem:

<?php echo get_comments_number($post->ID); ?>

Krok 9b: Kodowanie szablonów archive.php, category.php, tag.php i search.php

Kiedy przykładowo chcemy uzyskać listę artykułów z danej kategorii tworzymy plik archive.php lub category.php a w nim taki oto skrypt:

<?php 
global $post;
 $args = array(
    'category'       => get_queried_object()->term_id,
    'posts_per_page' => get_option( 'posts_per_page' ) );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

// Ten sam kod miniaturki posta który jest w przykładzie powyżej

<?php endforeach;
wp_reset_postdata();?>

Bardzo podobnie sprawa ma się w przypadku tagu w pliku tag.php:

<?php 
   global $post;
   $args = array(
      'tag_id'         => get_queried_object()->term_id,
      'posts_per_page' => get_option( 'posts_per_page' ));
   $myposts = get_posts( $args );
   foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

   // Kod miniaturki posta

<?php endforeach;
wp_reset_postdata(); ?>

Kiedy zaś chcemy zrobić wyszukiwarkę i szukamy artykułów zawierających dane słowo wystarczy stworzyć plik search.php z takim skryptem:

<?php
global $post;
$args = array( 
   's'              => esc_html( get_search_query( false ) ),
   'posts_per_page' => get_option( 'posts_per_page' )
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

// Kod miniaturki posta

<?php endforeach;
 wp_reset_postdata(); ?>

Zobacz jak wyświetlić i dostosować formularz w przewodniku: Wyszukiwarka WordPress.

Krok 10: Rejestracja i utworzenie pól na widgety

W naszym szablonie możemy też dodać pola, do których będziemy mogli wkładać widgety. Każdy widget trzeba najpierw zarejestrować w np. w functions.php:

function my_widget_init() {
     register_sidebar( array(
         'name'          => 'Przykładowy widget',
         'id'            => 'przykladowy-widget',
         'before_widget' => ' ',
         'after_widget'  => ' ',
         'before_title'  => '<h4>',
         'after_title'   => '</h4>',
     ) );
 }
 add_action( 'widgets_init', 'my_widget_init' );

Następne umieszczamy odwołanie do niego w kodzie szablonu (posługując się jego ID):

<?php dynamic_sidebar('przykladowy-widget'); ?>

Od tej pory w menu Wygląd pojawi się opcja „Widgety”:

Nasz „przykladowy-widget” będzie już tam czekał aby wstawić do niego czy to tekst, niestandardowy HTML czy inny widget, który będziemy chcieli w danym miejscu wykorzystać. To idealny mechanizm do tworzenia reklam, tymczasowych alertów, które mają się pokazywać na każdej podstronie lub dodatkowych elementów w takich sekcjach jak nagłówek, stopka czy sidebar.

Czytaj więcej jak stworzyć własny rodzaj widgetu od podstaw.

Hierarchia szablonu – nazwy plików domyślnych

Tworząc plik single.php i category.php skorzystaliśmy ze specjalnego mechanizmu szablonowania, który powoduje, że możemy wykorzystać kilkakrotnie jeden szablon lub stworzyć specjalne szablony dla konkretnych typów stron. WordPress szuka konkretnych szablonów w motywie i za pomocą specjalnej hierarchii zastosowuje je podczas generowania strony. Najlepiej to pokazać na przykładzie i rozpisać.

Teoretycznie, pełnoprawny motyw może się składać wyłącznie z pliku index.php. Wtedy, wszystkie typy stron takie jak: wpisy, strony, kategorie, autorzy, tag, dowolna taksonomia a nawet wszystkie funkcjonalności sklepu WooCommerce będzie generowana na podstawie index.php.

Możemy stworzyć specjalne pliki aby łatwo dostosować wygląd poszczególnych typów stron.

Jeżeli stworzymy wpis blogowy, i będziemy mieli tylko plik index.php to naturalnie, zostanie on wyświetlony za pomocą pliku index.php. Jeżeli utworzymy plik single.php to WordPress od tej pory będzie używał tego pliku (a także dla załącznika i własnych typów) zaś dla wszystkich innych przypadków nadal będzie korzystał z pliku index.php. Następnie możemy stworzyć single-post.php, który zadziała tylko we wpisach blogowych.

Kategoria jest jeszcze ciekawsza, tworząc kategorię „programowanie”, która będzie miała ID o numerze 16, WordPress będzie szukał po kolei takich plików:

1. category-programowanie.php
2. category-16.php
3. category.php
4. archive.php
5. index.php

Jeżeli stworzymy własny typ postu o nazwie portfolio:

1. single-portfolio.php
2. single.php
3. singular.php
4. index.php

Dokładną wizualizację tej hierarchii można zobaczyć tutaj: https://wphierarchy.com/

Warto jeszcze wspomnieć, że jeżeli korzystamy z ustawień czytania i wybierzemy takie opcje jak na tym zrzucie:

Niezależnie jaki szablon wybierzemy w edycji strony, WordPress będzie wczytywał plik:

• front-page.php do „strony głównej”,
• home.php do strony „blog”.

Na stronie „Blog” tytuł będzie stanowił tytuł pierwszego artykułu. Aby pokazać tytuł jaki nadaliśmy stronie „Blog” należy użyć takiej instrukcji:

<?php echo get_the_title( get_option( 'page_for_posts', true ) ); ?>

Link do tej strony można uzyskać za pomocą:

<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>

Link i nazwę Strony głównej można uzyskać w bardzo podobny sposób zamiast page_for_posts posługując się polem page_on_front.

Dodatkowe akcje i filtry

Choć w tym momencie może się wydawać, że o motywach wiemy już wszystko, niemożliwym do pominięcia elementem motywów w WordPressie są akcje. Pokazałem jak użyć wp_head i wp_footer. Jeżeli zajmujemy się edycją gotowych motywów pewnie nie raz mieliśmy okazję spotkać także inne akcje. Akcje razem z filtrami to haki (ang. hooks), które za pomocą wywołań zwrotnych (ang. callbacks) umieszczają lub modyfikują kod w danym miejscu lub modyfikują działanie rdzennych funkcji WordPressa.

Dzięki akcjom nasze motywy będą bardziej kompatybilne z różnego rodzaju wtyczkami i choć dla mnie osobiście nigdy nie było to szczególnym celem, będą umożliwiały innym deweloperom łatwiej edytować nasz motyw i dodawać funkcjonalności.

Przykładowo, dzięki temu, że w Kroku 4. użyliśmy akcji wp_head(), WordPress nie tylko wstawi istotne tagi HTML, ale pozwoli teraz także z poziomu wtyczki lub pliku functions.php dodać dodatkowy kod (np. ze stylem lub własne tagi html):

function kod(){
   return "<-- Jakiś kod -->";
}
add_action(wp_head, kod);

Są też inne akcje, które umożliwią nam dodać własne modyfikacje do szablonów. Przykładem takiej akcji może być wp_body_open().

Dodatki

Dodatek 1: Obsługa logo (w tożsamości witryny)

WordPress pozwala na wygodną aktualizację logo. Dołączenie tej funkjonalności do motywu powoduje, że może on być łatwo wykorzystywany w przypadku innych projektów. Dołączając instrukcję:

add_theme_support( 'custom-logo' );

Od tej pory pojawi się możliwość dostosowania brandingu w Wygląd >> Dostosuj >> Tożsamość witryny >> Logo

W szablonie, w dowolnym miejscu możemy wywołać adres URL logo za pomocą instrukcji:

$logo_id = get_theme_mod( 'custom_logo' );
echo wp_get_attachment_image( $logo_id , 'full' );

Od tej pory pojawi się dodatkowa opcja w Wygląd >> Dostosuj gdzie można wygodnie dodać logo z biblioteki zaktualizować je a nawet przyciąć przed właściwym umieszczeniem w aktualnym motywie.

Dodatek 2: Obsługa pól niestandardowych (własnych)

Własne pola to metadane, które możemy edytować w ramach artykułu lub podstrony. Pozwalają na łatwe umieszczenie opcjonalnej wartości w z góry ustalonym miejscu. Praktycznym wykorzystaniem może być możliwość edycji znacznika title lub meta description co umożliwi zmieniać podstawowe ustawienia SEO artykułu bez dodatkowych wtyczek lub stworzenie osobnego pola z ceną, kiedy używamy WordPressa do stworzenia strony z katalogiem produktów. Wystarczy dodać w kodzie szablonu taką instrukcję:

<?php get_post_custom_values('nazwa_pola'); ?>

Po włączeniu własnych pól w opcjach ekranu, przy edycji artykułu możemy ustawić wtedy klucz (nazwę) i wartość pola:

Mechanizm ten pozwala na tworzenie całych podstron za pomocą pól niestandardowych. Istnieje wiele wtyczek, które ułatwiają korzystanie z pól niestandardowych i przyspieszają proces produkcji, np. Advanced Custom Fields.

Dodatek 3: Obsługa obrazka wyróżniającego

Obrazek wyróżniający to grafika którą widać na początku wpisu i w miniaturce listingów artykułów. Domyślnie WordPress nie pozwoli załadować obrazka wyróżniającego ani dla postów ani dla zwykłych podstron. Aby włączyć tę funkcję CMS należy dodać do pliku functions.php taką instrukcję:

add_theme_support('post-thumbnails'); 

Jeżeli chcemy dodawać obrazki do postów i podstron wtedy trzeba dodać dodatkowy argument:

add_theme_support('post-thumbnails', array('post', 'page'));

Jeżeli chcemy potem ten obrazek gdziekolwiek wyświetlić możemy użyć następującej metody:

<img src="<?php the_post_thumbnail_url("large")); ?>">

W parametrze mamy wyrażenie „large” może tam być jeszcze

• thumbnail
• medium_large
• large
• original

Rozmiar oryginalny rzadko się wykorzystuje w szablonie, ale jeżeli chcemy mieć na froncie dokładnie ten plik, który wysyłamy do mediów WordPressa to jest możliwe jego użycie. Można też dodawać własne wielkości obrazów ale o tym będzie kiedyś osobny wpis. To jakie dokładnie wielkości mają poszczególne rozmiary można elegancko dostosować w ustawieniach WordPressa:

Dodatek 4: Wsparcie dla WooCommerce

Tworząc szablon dla systemu WordPress automatycznie potrafimy tworzyć szablony dla WooCommerce, czyli jakby nie było wtyczki odpowiedzialnej za funkcje typowo sklepowe. WooCommerce posłuży się plikiem index.php i z niego wygeneruje koszyk, zamówienie a nawet logowanie i prosty panel klienta. Wszystkie funkcje sklepowe będą działać.

Aby mieć większą kontrolę nad tym jak wyglądają poszczególne elementy WooCommece, możemy dodać do naszego functions.php instrukcję:

add_theme_support('woocommerce');

Najlepiej w formie takiej akcji:

function add_wc_support() {
   add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'add_wc_support' );

I od teraz nasz szablon będzie oficjalnie kompatybilny z wtyczką WooCommerce. Oczywiście to tylko deklaracja. Należy zainstalować najnowszą wersję wtyczki WooCommerce. Kiedy stworzymy szablon woocommerce.php, WordPress będzie za jego pomocą budował strony produktów, kategorii i taksonomii sklepowych. Aby użyć specjalnej pętli WooCommerce, należy usunąć standardową pętlę WordPress i zamiast niej wywołać funkcję:

woocommerce_content();

Tworzenie motywu i szablonów WooCommerce

Koszyk, listę zamówień, logowanie itd… nadal będzie obsługiwał index.php, to dlatego zalecam aby główny szablon index.php projektować jako możliwie najprostsza stronę w naszym serwisie, która będzie wypełniana dynamiczną treścią.

Aby edytować poszczególne przyciski formularze i opis produktu, wystarczy skopiować wszystkie szablony z wtyczki wp-content/plugins/woocommerce/templates do naszego folderu z motywem wp-content/themes/nazwa_motywu/woocommerce, od teraz:

• domyślny widok strony z produktem to dla nas już nie single.php a woocommerce/single-product.php
• Lista produktów to nie index.php a woocommerce/archive-product.php

Dzięki temu zabiegowi aktualizacje WordPressa ani wtyczki WooCommerce nie będą powodować problemów a w naszym motywie będą dostępne najnowsze opcje i rozwiązania.

Najlepiej jednak nie pisać wszystkiego od zera a kopiować i reorganizować sobie fragmenty plików, które znajdziemy w nowo utworzonym folderze nazwa-motywu/woocommerce.

Kiedy będziemy przeglądać poszczególne pliki z szablonami, zauważymy, że domyślny szablon single-product.php załącza nagłówek funkcją:

<? php get_header( 'shop' ); ?> 

Spodziewa się on w głównym folderze pliku header-shop.php. to bardzo fajne rozwiązanie, które pozwala w łatwy sposób lekko odróżnić nagłówek sklepu (zawierający koszyk i link do logowania) od innych podstron serwisu.

To jak wyglądają miniatury produktów oraz umieszczone w nich przyciski „dodaj do koszyka”, paginacja i ceny możemy sobie łatwo za pomocą HTML i PHP w plikach, które są umieszczone w folderze woocommerce/loop/.

Kod HTML przycisków, cen i formularzy z wariantami edytujemy w folderze woocommerce/global/. W tym folderze jest też wiele innych i często edytowanych plików takich jak form-login.php, który odpowiada za wygląd formularzy rejestracji i logownia czy breadcrumb.php i sidebar.php.

Wygląd e-maili zmieniamy w folderze /woocommerce/emails/. Treść e-maili dostosowujemy w panelu administracyjnym WooCommerce.

Zawartość strony z pojedynczym produktem to już pliki z przedrostkiem content-.

W tworzeniu motywów dla WooCommerce przydatną umiejętnością będzie panowanie nad często używanymi akcjami. Przykładowo, akcja: do_action(’woocommerce_single_product_summary’); Wygeneruje w naszym motywie przycisk „dodaj do koszyka” wraz z całym formularzem, który zawiera takie pola jak ilość czy warianty kupowanego produktu. Inna akcja: do_action(’woocommerce_after_single_product_summary’); Wygeneruje nam opis, zakładki z atrybutami oraz całą sekcję z formularzem i opiniami produktów. Dzięki temu nie będziemy musieli takich rzeczy kodować samodzielnie. Innym sposobem na obsługę natywnych elementów WooCommerce są specjalne funkcje np. opinie można też dodać za pomocą funkcji comments_template().

Obsługa galerii WooCommerce

Kiedy zakodujemy sobie szablon z pojedynczym produktem (single-product.php), okaże się że nie działa nam galeria WooCommerce. Na szczęście, możemy bardzo łatwo temu zaradzić, wystarczy poinformować wtyczkę WooCommerce, że chcemy skorzystać z tego gotowego rozwiązania:

add_action( 'after_setup_theme', 'yourtheme_setup' );
 function yourtheme_setup() {
     add_theme_support( 'wc-product-gallery-zoom' );
     add_theme_support( 'wc-product-gallery-lightbox' );
     add_theme_support( 'wc-product-gallery-slider' );
 }

Zobacz inne niuanse tworzenia i edytowania szablonów dla potrzeb WooCommerce. Zapoznaj się z osobną dokumentacją:

• https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/

Dodatek 5: Obsługa komentarzy

Jedną z głównych funkcji WordPressa są komentarze, warto je wykorzystać, tym bardziej jeżeli to będzie blog.

Można użyć wbudowanego w WordPress szablonu komentarzami za pomocą funkcji comments_template();

<?php 
if ( comments_open() || get_comments_number() ) :
     comments_template();
 endif;
?>

Kod powyżej dodajemy do szablonu z pojedynczym postem np. single.php.

Za pomocą CSS możemy dopasować wygląd formularza i samych komentarzy. Jeżeli chcemy mieć więcej kontroli nad kodem HTML tych elementów, wystarczy utworzyć plik comments.php

W tym pliku możesz wydrukować domyślny formularz do dodawania komentarzy za pomocą funkcji:

<?php comment_form(); ?>

Za pomocą argumentów można edytować praktycznie każdą linijkę. Zobacz jak można wykorzystać argumenty funkcji comment_form: https://developer.wordpress.org/reference/functions/comment_form/

Listę komentarzy możemy wyświetlić za pomocą funkcji wp_list_comments(); Tutaj też możemy dodawać własne argumenty. W przykładzie poniżej zmieniamy wielkość avatarów:

$args = array(
     'avatar_size' => 64,
 );
 wp_list_comments($args);

Jeżeli chcesz szczegółowo dostosować formularz do dodawania komentarzy i edytować wyświetlania się komentarzy przejdź do osobnego tutorialu: Programowanie komentarzy w motywie WordPress.

Dodatek 6: Dzielenie szablonu na fragmenty

Ciekawą i bardzo prostą funkcją, o której chciałbym wspomnieć na sam koniec jest get_template_part(); Funkcja ta umożliwia załadowanie fragmentu kodu szablonu podobnie do zwykłej funkcji require() dlatego można taki kod dodać wielokrotnie. Funkcji get_template_part() możemy użyć w dowolnym miejscu szablonu wstawiając jako parametr czytelną ścieżkę do fragmentu szablonu, przykładowo:

get_template_part("partials/newsletter");

To załaduje plik newsletter.php z folderu o nazwie partials.

Możemy użyć fragmentu specjalizowanego za pomocą:

get_template_part("partials/content", "page");

Z kolei takie wywołanie spowoduje załadowanie pliku content-page.php z folderu partials. W przypadku braku pliku z kodem fragmentu WordPress nie wyświetli błędu. Jeżeli do tej pory nie wiesz o co chodzi ze strzałkami i nawiasami w kodzie PHP to sprawdź kurs programowania obiektowego PHP.

Dodatek 7: Katalog produktów

Katalog produktów to pojęcie ogólnej funkcjonalności, którą WordPress może zapewnić na wiele sposobów. Często pojawia się potrzeba dodania jeszcze jednego rodzaju podstron. Czytaj więcej w artykule katalog produktów w WordPress i mechanizmie własnych typów postów (Post Type).

Dodatek 8: Wsparcie wielojęzyczności

WordPress nie posiada wbudowanego mechanizmu zarządzania wieloma wersjami językowymi. Można za to wykorzystać wiele gotowych wtyczek i różnych podejść, które w większości przypadków powinny całkowicie wystarczyć. Jeżeli już tworzysz własny szablon, możesz wprowadzić proste rozwiązanie bazujące na stworzeniu kilku menu i kilku widgetów. Szczegóły znajdziesz w przewodniku strona WordPress w kilku językach.

Dość popularną wtyczką do wspierania wielojęzyczności jest WPML. Aby w pełni wykorzystać potencjał tej wtyczki i dać możliwość edycji ciągów znaków „na sztywno” zapisanych do szablonu. Musimy przestrzegać paru dodatkowych reguł, które dokładnie opisano w dokumentacji WPML.

Przykładowo, wszelkie ciągi tekstu:

<?php echo 'Powiązane wpisy:'; ?> 

Trzeba otaczać specjalną funkcją (’my-textdomain’ można zamienić na własne oznaczenie):

 <?php _e('Powiązane wpisy:', 'my-textdomain') ?>

WPML potrafi wtedy wyciągnąć takie teksty i udostępnić użytkownikowi łatwe przetłumaczenie szablonu na dowolny język. Wyrażenia takie są widoczne w Tłumaczenie Wyrażeń (ang. String Translation) aby wtyczka je wtedy wykryła, należy wykorzystać funkcję „Szukaj fraz podczas renderowania stron”. Po odkryciu wszystkich wyrażeń należy te funkcję wyłączyć bo mocno może spowalniać działanie strony.

W przypadku tłumaczenia artykułów chcielibyśmy aby strona z wpisami prezentowała artykuły dla odpowiedniego języka. Aby to osiągnąć, do listy argumentów należy dodać opcję 'suppress_filters’=>0, np:

global $post;
$args = array(
   'posts_per_page'   => get_option( 'posts_per_page' ),
   'suppress_filters' => 0 
)
/* foreach... */

Dodatek 9: Budowanie skomplikowanego layoutu

Zapoznaj się z edytorem Gutenberg, posiada on dość duże możliwości pod kątem projektowania zasadniczej treści. Stworzenie kilku kolumn, czy dodanie galerii jest możliwe za pomocą kilku kliknięć. Kod wspierający edytor Gutenberg jest dodawany automatycznie w momencie kiedy dodaliśmy do nagłówka instrukcję wp_head().

Aby dać sobie (lub Twojemu klientowi) możliwość:

• edycji treści w zaawansowanych układach,
• dodawania zdjęć do przeróżnych sliderów,
• dodawaniu bannerów itd..

to tak jak już wspomniałem wcześniej, warto opanować kolekcje sprawdzonych bloków, tworzenie własnych bloków, lub wykorzystanie bloków powiązanych z jakimś frameworkiem np. Bootstrapem. Tworzenie bloków można uprościć za pomocą wtyczki ACF. Zachęcam do tworzenia własnych szablonów bloków i tworzenia własnych bloków, bo dzięki temu, że wszystko kodujemy samodzielnie i korzystamy z wewnętrznych mechanizmów WordPressa (mowa o blokach) szablon będzie wolny od nadmiarowego kodu a nasz workflow nie będzie spoczywał na łasce firm trzecich.

Dzięki blokom i kombinacji ich możliwości z ACF, własnymi blokami Gutenberg a nawet shortcodami, będzie można dodawać skomplikowane układy, dodawać powtarzalne elementy (np. kolumny) a edycja zawartości w panelu będzie dziecinnie prosta dla użytkownika. Sprawdź przewodnik dotyczący wtyczki ACF i tworzenia bloków.

Po utworzeniu własnego szablonu bloków można zarejestrować go we własnym motywie:

function mytheme_register_template() {
$template = array(
     array( 'core/columns', array(), array(
         array( 'core/column', array(), array(
             array( 'core/image', array() ),
         ) ),
         array( 'core/column', array(), array(
             array( 'core/paragraph', array(
                 'placeholder' => 'Dodaj paragraf'
             ) ),
         ) ),
     ) )
 );
$post_type_object = get_post_type_object( 'page' );
$post_type_object->template = $template;
add_action( 'init', 'mytheme_register_template');

W ten sposób zdefiniowany przez nas układ bloków będzie tworzony automatycznie chcąc stworzyć nową stronę lub post własnego typu.

Dodatek 10: SEO i nagłówki <head>

Przed nagłówkiem mamy deklarację doctype po której jest tag html z deklaracją języka. Tutaj też możemy oddać kontrolę specjalnej metodzie, która będzie współgrać z ustawieniami WordPressa i wtyczką WPML:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

Istnieje też metoda wp_title(), która automatycznie nadaje sensownie brzmiące tagi title oraz pozwala dostosować je przez wtyczki pozycjonujące takie jak Yoast SEO:

<title><?php wp_title(''); ?></title>

Tag ten nie będzie działał w przypadku strony głównej front-page.php dlatego idealnym rozwiązaniem jest taki kod:

<title><?php bloginfo('name'); ?> - <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>

Wcześniej posługiwaliśmy się tylko the_title(); ale metoda ta znowu działa tylko w przypadku zwykłych stron i postów. W przypadku stron specjalnych (np. archive, search, category) sztywne kodowanie tagu title z wykorzystaniem <?php the_title();?> nie zadziała.

W przypadku dodatkowych tagów SEO, danych strukturalnych i innych dodatków takich jak np. tag description lepiej zdać się na odpowiednie wtyczki lub napisać własne. To czy kodowanie ich na sztywno w szablonie jest opłacalne zostawiam każdemu do własnej refleksji.

Dodatek 11: Formularz kontaktowy

Nic nie stoi na przeszkodzie aby dodać formularz „na sztywno” w jednym z szablonów a jego obsługę zapewnić poprzez własny plik php. Istnieje ciekawa wtyczka WordPress, która daje 100% kontroli nad kodem formularza, zapewni łatwą edycję pól z poziomu panelu a przy tym zabezpieczy ją przed spamem i automatycznie dokona walidacji wysyłanych wiadomości. Sprawdź osobny artykuł o tym jak stworzyć formularz kontaktowy w WordPress.

Dodatek 12: Inne wtyczki

Nie musisz wszystkiego kodować od nowa. Jeżeli ktoś zrobił konkretną funkcjonalność i całkowicie pasują Ci wszystkie rozwiązania, możesz wykorzystać na swojej stronie istniejące wtyczki. Pamiętaj aby korzystać tylko z popularnych wtyczek, które zostały przetestowane na milionach czy setkach tysięcy witryn. Sprawdź listę najpopularniejszych wtyczek WordPress, które zautomatyzują pracę, rozszerzą możliwości panelu administracyjnego lub zintegrują go z serwisem zewnętrznym.

Dodatek 13: Przydatne instrukcje dla single.php

Pobieranie nazwy i adresu URL kategorii:

Kategoria: <a href="<?php echo get_category_link(get_the_category()[0]->term_id);"><?php echo get_the_category()[0]->cat_name; ?></a>

Pobieranie nazwy i adresu url tagów:

Tagi: <?php
$tags = wp_get_post_tags($post->ID);
$html = '';
foreach ( $tags as $tag ) {
   $tag_link = get_tag_link( $tag->term_id );
   $html .= " <a href='{$tag_link}' title='{$tag->name}'>";
   $html .= "{$tag->name}</a>, ";
}
$html .= '';
echo $html;
?>

Dodatek 14: Optymalizacja zdjęć

Tworząc własny szablon możesz perfekcyjnie zoptymalizować zdjęcia pod kątem wydajności strony. Sprawdź alternatywy i możliwe do wykorzystania argumenty funkcji wp_get_attachment_image() oraz add_image_size() w szczegółowym poradniku jak optymalizować zdjęcia w WordPress.

Dodatek 15: Obsługa paginacji

Aby strona z wpisami uwzględniała parametr page w adresach URL należy użyć argumentu paged:

<?php
global $post;
$args = array(
   'posts_per_page' => get_option( 'posts_per_page' ),
   'paged'          => ( get_query_var('paged') ? get_query_var('paged') : 1 )
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

   /* Kod miniaturki posta */

<?php endforeach;
      wp_reset_postdata(); ?>

Następnie pod listą możemy dynamicznie wydrukować listę potrzebnych przycisków za pomocą instrukcji:

echo paginate_links()

Funkcje te przyjmują argumenty, dzięki czemu przystosujemy paginację do naszych potrzeb. Możemy też pobrać tablicę i stworzyć własną pętlę jeżeli chcemy zmienić dodać klasę active bądź dokonać innych zaawansowanych zmian, np:

<?php 
$pagination = paginate_links(
   array( 
      'type'      => 'array',
      'prev_text' => '',
      'next_text' => '' )
   ); 
foreach( $pagination as $key => $value ): ?>
<li class="page-item <?php if ( strpos($value, "current" ) !== false) { echo "active"; } ?>"><?php echo str_replace( "page-numbers","page-numbers page-link", $value ); ?></li>
<?php endforeach; ?>

Czytaj więcej o podziale na strony i paginacji w WordPressie w osobnym artykule: Paginacja WordPress – programowanie i dostosowywanie.

Dodatek 16: Programowanie nawigacji okruszkowej breadcrumbs

Częstym elementem szablonu strony internetowej jest breadcrumbs czyli nawigacja okruszkowa. Jej kodowanie może być kłopotliwe, tym bardziej kiedy tworzony przez nas motyw będzie wykorzystywany w stosunkowo złożonej stronie WordPress. Zobacz jak stworzyć i dodać linki breadcrumbs i zapewnić sobie pełną kontrolę nad ich kodem HTML w osobnym artykule: dodawanie breadcrumbs (nawigacji okruszkowej) w WordPress.

Podsumowanie

Jak widać tworzenie szablonów a nawet całego motywu WordPress jest proste. Wystarczy podstawowa znajomość PHP, opanowanie kilku instrukcji i orientacja w dokumentacji, która jest pełna praktycznych przykładów. Taka strona będzie ultra-szybka, łatwa do przebudowy a przede wszystkim unikalna i bardziej dopasowana do personelu zajmującego się edycją treści. Więcej przykładów tego typu skryptów, które pozwolą na edytowanie każdego dowolnego elementu w tworzonym szablonie można znaleźć w dokumentacji Codex, do której link podałem poniżej w źródłach.

Źródła

• Brazell A., WordPress Bible, Wiley, Indianapolis 2010.
• https://codex.wordpress.org/Theme_Development