1 września 2019
Aktualizacja: 24 sierpnia 2020

Tworzenie szablonu (motywu) WordPress

Kategoria: Programowanie
Tagi: dla profesjonalistów, WordPress,
Autor: Paweł Mansfeld

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 tego samego w GTMetrix. 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.

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:

Szablon z wyłączonymi stylami CSS i kodem JS

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 bloginfo("template_url") ?>

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 bloginfo('template_url'); ?>/css/bootstrap.css">
<script src="<?php bloginfo('template_url'); ?>/js/script.js">

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

Szablon z włączonymi plikami CSS i JS

Istnieją też 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.

Jeżeli chcemy mieć możliwość umieszczenia w treści strony niestandardowej struktury HTML, lub bardzo skomplikowany layout (slajder, akordeon, bannery), którego nie można osiągnąć za pomocą bloków Gutenberga mamy kilka możliwości:

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 9: Listy artykułów

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'=>64);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

//Kod miniaturki posta

<?php endforeach;
wp_reset_postdata();?>

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.

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 
$categories = get_the_category();
$category_id = $categories[0]->cat_ID;
global $post;
 $args = array('category'=> $category_id, 'posts_per_page'=>64);
$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 
   $thistag_id = get_queried_object()->term_id;
   global $post;
   $args = array('tag_id'=> $thistag_id, 'posts_per_page'=>32);
   $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' => 16 );
$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:

Ustawienia czytania – strona główna i strona z wpisami.

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”.

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:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
$image_url = $image[0];

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

Pola niestandardowe to takie jakby osobne pola, 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'); ?>

Przy edycji artykułu ustawimy wtedy:

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. Do pliku functions.php naszego motywu wystarczy dodać instrukcję:

add_theme_support('woocommerce');

I od teraz nasz szablon będzie oficjalnie kompatybilny z wtyczką WooCommerce. Oczywiście to tylko deklaracja. Należy zainstalować najnowszą wersję wtyczki WooCommerce. Plik index.php, który stworzyliśmy wcześniej będzie odpowiadał teraz za wyświetlanie podstrony z produktem, koszyk, listę zamówień, logowanie itd… 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 mieć większą kontrolę nad tym jak wyglądają 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 teraz 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. Chcąc szczegółowo edytować szablon dla potrzeb WooCommerce należy zapoznać 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żesz wydrukować domyślny formularz do dodawania komentarzy za pomocą funkcji:

<?php comment_form(); ?>

Inny sposób to stworzenie własnego formularza – dzięki temu mamy możliwość swobodnego jego dopasowania w szablon:

<form action="<?php bloginfo('template_url'); ?>/wp-comments-post.php" method="post">
<input type="text" name="author" placeholder="Podpis:" value="" required>
<input type="text" name="email" placeholder="E-mail:" value="" required>
<input type="text" name="url" placeholder="Strona:" value="">
<textarea name="comment" rows="7" placeholder="Komentarz:" required></textarea>
<input type='hidden' name='comment_post_ID' value='<?php echo $thispost; ?>' id='comment_post_ID'  placeholder="ID artykułu:" />
<input name="submit" type="submit" value="Opublikuj">
</form>

Jeżeli chcemy wyświetlić dodane komentarze, możemy użyć następującej pętli:

<?php
//Pobieramy tylko zaakceptowane w panelu komentarze
$thispost = get_the_ID();
$args = array(
'status' => 'approve',
'post_id' => $thispost,
'orderby' => 'comment_date_gmt',
'order' => 'ASC',
);
$comments_query = new WP_Comment_Query;
$comments = $comments_query->query( $args );
if ( $comments ) {
foreach ( $comments as $comment ) {?>
   <div class="comment">
      <h4><a href="<?php echo comment_author_url(); ?>" rel="nofollow noopener noreferrer external" target="_blank"><?php comment_author(); ?></a></h4>
      <p><?php comment_date(); ?></p>
      <p class="comment-content"><?php echo $comment->comment_content; ?></p>
   </div>
<?php
}
} else {
echo 'Brak komentarzy.';
}
?>

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ą:

 <?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 spowalnia działanie strony.

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ć wtyczkę ACF, Elastyczną treść (ang. Flexible Content) i możliwość tworzenia własnych bloków w Gutenbergu za pomocą tej wtyczki. W Wersji PRO tej wtyczki można tworzyć pola powtarzalne a także coś w rodzaju PageBuildera. 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.

Dzięki ACF a także kombinacji ACF z blokami Gutenberg, 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. Kod HTML oczywiście napiszemy samodzielnie dzięki czemu będziemy mieć nad wszystkim kontrolę i naprawdę wszystko osiągniemy od strony wizualnej we własnym szablonie. Sprawdź przewodnik dotyczący wtyczki ACF i tworzenia bloków.

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.

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

Oceń artykuł na temat: Tworzenie szablonu (motywu) WordPress
Średnia : 4.6 , Maksymalnie : 5 , Głosów : 36


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *




Komentarze

Saphira

20 września 2020

Czy po dodaniu szablonu do wordpress staje się on publiczny, jest własnością wordpressa i każdy może z niego skorzystać?

Paweł Mansfeld

20 września 2020

A skądże ;) Nikt nie jest w stanie pobrać naszego motywu ani modyfikacji (no chyba że zdobędzie dostęp do serwera i pobierze zawartość folderu w themes).

Jeżeli chcemy, dobrowolnie można opublikować własny motyw na stronie, w katalogu WordPressa lub w popularnym markecie. Polecam to ostatnie bo można się fajnie ustawić :) oczywiście zakładając, że motyw będzie chętnie wybierany.

Saphira

21 września 2020

Dzięki za informacje i za cały materiał. Sam fakt 100 na PSI świadczy o poziomie doświadczenia i wiedzy, pozdrawiam

Paweł Mansfeld

21 września 2020

Dziękuję za komentarz, bo z pewnością wiele osób mogło mieć podobne wątpliwości. Cieszę się, że wpis był chociaż odrobinę przydatny.

dev/null

22 września 2020

Zastanawiam się od pewnego czasu jak najrozsądniej będzie wdrożyć elastyczną obsługę Bootstrapa w przypadku Gutenberga. Oczywiście najlepiej napisać swoje natywne bloki z opcjami, ale ESNext itd. to całkowicie nie moja bajka, biorąc pod uwagę, że na co dzień siedzę w PHP

Rozważałem gotowe bloki w ACF, ale nie do końca się to nadaje pod kątem uniwersalności. Innerblocki w ostatniej wersji ACF dały mi pewną nadzieję, ale chyba trochę za wcześnie wyszło to z bety. Czytałem kilka issue na ich githubie, że przy większym dokumencie są problemy z requestami/pobieraniem danych.

Repeater w ACF'ie mogłby to rozwiązać, ale też jest jeden problem - w zadeklarowanej strukturze repeater'a nie wprowadzisz rażących zmian. Większa zmiana np. `id` dla pól, lub zmiana zagnieżdżeń w schemacie, spowoduje problem z widokiem. Przepisywanie potem zapytania SQL do tego odpada.

Gdyby dojść do takiego stanu, aby user mógł dowolnie deklarować `container`, potem `row`, a potem `col-*`, to bez problemu mógłby wyklikać całą podstronę, zgodnie z całym BS.

Czy masz może jakąś swoją koncepcje/propozycje?

Paweł Mansfeld

22 września 2020

Wykonałem już dwa takie projekty - nie ma lepszej kombinacji. Moja podpowiedź: Inner Blocks ACF, normalne bloki i customowe klasy w Gutenbergu. W praktyce mamy stronę z PageBuilderem i 100/100 w PSI.

Nie doświadczyłem problemów z Inner Blocks ACF. Dla mnie to jest mega przydatne rozwiązanie wydaje mi się, że mogę z tego korzystać do końca życia. Im bardziej skomplikowany layout tym więcej bloków trzeba stworzyć. Być może entuzjazm opadnie jak natrafię na jakieś problemy ale jak na razie śmiga wzorowo.

 

Wykryto brak połączenia z Internetem.