Gdy pisałam o regularnym aktualizowaniu bloga, wspomniałam, że jednym z kolejnych wpisów będzie tutorial, jak stworzyć szablon dziecko (child theme, motyw potomny) do WordPressa. Właśnie nadszedł ten moment. Po co Ci właściwie taki szablon?

1. Zmiany na “żywym” – włączonym szablonie są spoko do momentu aktualizacji szablonu przez jego twórcę – klikając “aktualizuj” usuwasz wszystkie zmiany, które nadpisałeś. Jednym z prostych przykładów, dlaczego jest to bez sensu w przypadku zarabiania na blogach jest na przykład kod, który dodajesz z prolinka do sidebaru Twojego szablonu, by wyświetlały się linki. Potem z automatu aktualizujesz WordPressa, wtyczki, szablony… i czekasz na info od supportu, że nie dostaniesz wypłaty dopóki wszystkie linki nie będą się wyświetlać. A jak się mają wyświetlać, skoro kodu już dawno tam nie ma?

2. Trochę większy “lans”. Tworzysz szablon dziecko i nazywasz go np. swoją ksywą bądź adresem Twojego bloga. Dla osób mniej dociekliwych wygląda to na Twój autorski szablon (jeśli oczywiście zmodyfikujesz go wystarczająco mocno, a licencja twórcy autora pozwoli na usunięcie linka ze stopki – czego swoją drogą nie jestem fanką – to w końcu jedyny sposób na płatność za taki szablon).

3. Gdy tworzysz stronę dla klienta na bazie gotowego szablonu jest to właściwie niezbędne.

Co to jest szablon dziecko (child theme, motyw potomny)?

Basically, to szablon, który dziedziczy domyślnie wszystko z motywu rodzica, ale uwzględnia Twoje zmiany. Jest on również uzależniony od swojego rodzica i musi znajdować się na serwerze razem z nim. Jeśli na przykład chcemy zmienić w szablonie kolor tła i krój czcionki, plik stylu będzie zawierał tylko te linie. Ale to za chwilę.

Jak stworzyć szablon dziecko do WordPressa?

1. Tworzymy nowy katalog i nazywamy go jak tylko chcemy. Umieszczamy go na serwerze w katalogu wp-content/themes – obok głównego szablonu (nie wrzucamy go do niego).

2. Tworzymy plik style.css (i to jest jedyny niezbędny plik w szablonie-potomku). Cała reszta to opcja, ale to za chwilę. Plik style.css całkowicie zastępuje plik stylu szablonu rodzica. I przechodzimy do wypełnienia go. Na początku znajduje się nagłówek, który powinien zawierać najważniejsze informacje. Przykładowo:

/*
 Theme Name: 1000zlmiesiecznie
 Theme URL: http://1000zlmiesiecznie.pl
 Description: Szablon-dziecko motywu Twenty twelve wzbogacony o takie elementy jak...
 Author: Magdalena Brod
 Author URL: http://1000zlmiesiecznie.pl/o-projekcie
 Template: twentytwelve
 Version: 1.0.0
 */

Poszczególne niejednoznaczne linie oznaczają:

Theme name – nazwę naszego szablonu dzieciaka

Template – nazwę szablonu rodzica (wielkość liter ma znaczenie)

Tak naprawdę obowiązkowe są tylko pola theme name i template. Cała reszta jest opcjonalna, ale kto by nie chciał takich informacji zawierać w “swoim” stylu 😉

I teraz kolejna ważna sprawa związana z plikiem style.css. Jeśli chcemy wprowadzić jedynie kilka zmian (a nie zmienić cały styl), musimy wskazać plikowi drogę do jego rodzica, żeby wyświetlał wszystko to, czego nie zmienimy, “po staremu”. Do tego niezbędne jest dopisanie do niego ścieżki.

@import url("../twentyetwelve/style.css");

Linię tę wrzucamy zaraz po informacjach o nagłówku. Jeśli w pliku style.css będzie się znajdować tylko info o nagłówku i ta linia, nasz szablon będzie wyglądał dokładnie tak samo, jak szablon rodzic. Wszystkie zmiany wrzucamy po tej linii. Inaczej nie zadziała.

Każda zmiana wyglądu szablonu wymaga jedynie dopisania odpowiedniej lini. I tak dla przykładu, jeśli chcemy, aby krój czcionki dla nagłówków był inny, dopiszemy jedynie:

/* czcionki nagłówków */
h1, h2, h3, h4, h5, h6 {
    font-family: Calibri, cursive;
    color: #2f2f2f;
    font-weight: normal;
    clear: both;

Komentarz jest oczywiście opcjonalny, ale dzięki temu będziemy mieć porządek w pliku. Zastąpi to informacje o foncie szablonu rodzica.

Ja na przykład w szablonie na tym blogu zmieniłam tylko fonty i mój plik style.css w motywie-dziecku wygląda tak:

/*
Theme Name: 1000zlmiesiecznie
Theme URI: http://1000zlmiesiecznie.pl
Description: Szablon-potomek motywu contango
Author: Magdalena Brod
Author URI: http://1000zlmiesiecznie.pl
Template: contango
Version: 1.0.0
*/
@import url("../contango/style.css");

/* czcionka nagłówka */
#headimg #logo-text .site-name  {
    display: block;
    font-family: Arial, cursive;
    font-size: 28px;
    line-height: 34px;

/* czcionki nagłówków */
h1, h2, h3, h4, h5, h6 {
    font-family: Calibri, cursive;
    color: #2f2f2f;
    font-weight: normal;
    clear: both;

3. Pozostałe pliki

Plik functions.php

Kolejnym plikiem, który najczęściej znajduje się w szablonie-dziecku, jest plik functions.php. To właśnie on odpowiada za gros funkcji naszego blogaska. Funkcje w nim dopisane są wykonywane z pierwszeństwem. Czyli np. jeśli zdefiniujemy rozmiary ikony wpisu na 200×200 px, a w oryginalnym pliku będzie 150×150 px, to w szablonie potomku wyświetlą się większe obrazki.

Należy pamiętać o odpowiednich tagach php otwierających i zamykających –

<?php
zawartość pliku
?>

Inne pliki

Jeśli potrzebujemy wprowadzić zmiany w innych plikach, najczęściej single.php, page.php, header.php, footer.php, comments.php, sidebar.php, to po prostu kopiujemy go do szablonu-dziecka i wprowadzamy zmiany. Nie należy przerzucać plików, których nie będziemy zmieniać, bo wtedy nie zostaną one zaktualizowane.

Plik screenshot.png

Jeśli chcemy, aby w panelu administracyjnym wyświetlała się nam miniatura naszego szablonu, musimy do szablonu-dziecka wstawić ten plik. Wtedy zobaczymy coś takiego:

Et voila! Stworzyliśmy szablon-dziecko dla naszego bloga. Teraz możemy bez stresu aktualizować szablon-rodzica.

W razie jakichkolwiek pytań – jestem do Waszej dyspozycji 🙂

Grafika pochodzi ze strony: http://bestpremiumwordpressthemeshq.com