Web Design Blog / Programowanie:

Tworzenie szablonu (motywu) WordPress

Data publikacji: 1 września 2019

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.

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

Style można dodać za pomocą specjalnych funkcji:

  • wp_enqueue_style()
  • wp_enqueue_script()

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 innych funkcji umieszczanych w functions.php. Wtyczka Autoptimize kompresuje i scala pliki wykorzystując wspomniany mechanizm. W przypadku zakodowania odwołań bezpośrednio w kodzie szablonu takiej możliwości nie ma.

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(); ?>
</head>

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 ułatwić sobie zadanie i nie zaprzątać sobie głowy nieistotnymi na ten moment szczegółami, załóżmy że tworzymy szablon artykułu blogowego.

Treść wyświetlimy komendą 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
*/

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

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ą funkcji wp_get_nav_menu_object();

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. Tutaj take 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
  • category.php
  • tag.php
  • search.php
  • 404.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.

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:

<?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();?>

Kiedy przykładowo chcemy uzyskać listę artykułów z danej kategorii tworzymy plik catageory.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 ); ?>

// 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();?>

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.

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:

Można tworzyć całe podstrony za pomocą pól niestandardowych i rozszerzeń typu ACF Pro. Jest to o wiele bardziej wygodne rozwiązanie i daje nieporównywalnie więcej możliwości edycji i integracji z szablonem.

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

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'));

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. Chcąc 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 za pomocą funkcji lub stworzyć własny formularz do dodawania komentarzy:

<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ć komentarze, możemy uzyć 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.

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

Tworzenie szablonu (motywu) WordPress Tworzenie szablonu (motywu) WordPress 4.5 na 5 na podstawie 11 ocen Tworzenie szablonu (motywu) WordPress


Komentarze

Janusz Kamiński

4 września 2019

Świetny poradnik! Sam nauczyłem się kilka rzeczy. ;)



Dodaj swój komentarz