Tworzenie własnego motywu do WordPressa – wstępna konfiguracja
Tak jak wspominałem wcześniej w poście chciałbym pokazać krok po kroku jak wykonywać własne motywy do WP. Zrobimy sobie motyw dokładnie taki jak jest teraz tutaj na stronie, najpierw najprościej, później stopniowo będziemy go rozwijać. Każda osoba, która jako system zarządzania treści wybiera właśnie WP staje przed wyborem czy wybrać bezpłatny motyw, motyw zakupić np. na themeforest.net czy stworzyć własny. Kiedyś napiszę oddzielny post na temat tego czym powinniśmy kierować się podejmując decyzję. Motywów zarówno płatnych jak i bezpłatnych są setki tysięcy, są szybkie i wolne, ładne i te mniej atrakcyjne, wybór jest na prawdę ogromny. Każdy z motywów ma swoje zalety i wady. Można także pracować na gotowym motywie i go rozwijać / edytować ( tworząc motyw potomny ), ale w żadnym wypadku nie polecam edycji kupionego bądź pobranego motywu na żywca (a dlaczego to wytłumaczę w oddzielnym poście, bo jest to długi temat).
Pokrótce powiem że jeśli chcemy mieć największe możliwości rozwoju naszej strony opartej na CMSie WP i chcemy żeby nasz motyw miał same zalety ( bo przecież wykonamy go perfect 🙂 ) to powinniśmy napisać własny motyw. Będziemy znać jego kod od podszewki, jeśli wykonamy go dobrze, sami możemy zadbać o jego bezpieczeństwo i wsparcie.
Sami zadecydujemy ile i jakie funkcjonalności będzie miał nasz serwis. Tworzenie własnego motywu do WP ( w zależności od ilości funkcjonalności jakie będziemy chcieli w nim zastosować) wcale nie jest takie trudne.
Czego potrzebujemy aby wykonać własny szablon do WP?
Myślę że potrzebujemy:
- podstawowej znajomości html, css, javascript i php,
- umiejętności współpracowania z oficjalną dokumentacją Wordressa,
- cierpliwości i chęci 🙂
I właśnie tych powyższych umiejętności ( prawie wszystkich, bo oprócz trzeciej) nauczymy się w tym kursie.
Przygotujmy strukturę plików i folderów na naszym serwerze:
W katalogu naszej domeny odszukujemy katalog wp-content/themes. Tutaj znajdują się foldery z naszymi zainstalowanymi motywami. Tworzymy nowy folder o dowolnej nazwie (będzie to nazwa naszego motywu).
Tak jak wspominałem w poście osobiście lubię jak w katalogach i plikach panuje porządek. W związku z tym tworzę następujące foldery:
- styles – tutaj będę wrzucał wszystkie pliki ze stylami dla mojego motywu,
- images – tutaj będą znajdować się wszystkie zdjęcia, które wykorzystam do stworzenia skórki takie jak np. logotyp,
- scripts – moje miejsce na pliki ze skryptami,
- includes -tutaj robię sobie miejsce na moje zewnętrzne biblioteki.
Tak wygląda moja struktura plików WP:
Oprócz tego, żeby w ogóle nasz motyw pojawił się w panelu WordPressa potrzebujemy utworzyć dwa pliki w głównym katalogu skórki tj. index.php oraz style.css. Odpowiadając na pytanie, które samo się tutaj nasuwa czy jednak lepiej trzymać style w głównym katalogu skórki czy w folderze styles odpowiedź jest taka, że plik style.css w głównym katalogu skórki jest wymagany do jej działania.
Jeśli zajrzymy teraz do panelu administracyjnego naszego WordPressa widzimy, że nasza skórka została przez niego wykryta:
Jednak po kliknięciu w szczegóły motywu mamy tylko informację kto jest jego autorem. Napiszmy więc kilka słów o naszym motywie w pliku style.css. Jeśli takie dane jak poniżej umieścimy w komentarzu w naszym głównym pliku ze stylami motywu to dane te zostanę wyświetlone w panelu WP:
/* Theme Name: Nasz-motyw Author: Webdevmaster Author URI: https://webdevmaster.pl/ Description: Tutaj wpisujemy dowolny tekst, który będzie opisem naszego motywu. Version: 1.0 */
Wrzućmy jeszcze do naszego katalogu skórki zdjęcie, które jeśli będzie posiadało nazwę screenshot.png to będzie ono również miniaturką naszej skórki w panelu administracyjnym.
Efekt:
Włączamy nasz motyw w panelu i następuje boom. Strona się wyświetla i jest kompletnie pusta. Teraz weźmy się za wstępną konfigurację.
Z jakich plików będzie składał się nasz własny motyw WP?
- pliki header.php i footer.php jak sama nazwa wskazuje będzie tam kod odpowiedzialny za nasz nagłówek i stopkę,
- plik index.php odpowiadający za wylistowanie wszystkich naszych postów ( blog),
- plik single.php odpowiadający za wygląd pojedynczego wpisu i plik page.php odpowiadający za wygląd pojedynczej strony,
- plik sidebar.php odpowiadający za nasz sidebar,
- plik functions.php w którym będą wszystkie funkcje naszego motywu (np.shortcody),
- plik 404.php który odpowie za stronę, która pojawi się użytkownikowi, gdy wpisze zły adres,
- plik front-page.php odpowiadający za struktura naszej strony głównej.
Dlaczego skoro WordPress to blog to wyżej wymieniłem plik index.php służący do listowania postów i oddzielnie plik front-page.php jako plik strony głównej?
Otóż stworzymy sobie motyw taki jak widzisz teraz na stronie webdevmaster.pl. Stroną główną będzie statyczna strona z własną templatką, natomiast typowy blog z listowaniem postów będzie wyświetlał się na podstronie bloga. Nasza strona główna będzie nie tylko pokazywała najnowsze i najpopularniejsze wpisy, ale także będzie zawierała części statyczne. Wszystkie wpisy będą występować w zakładce blog. W związku z tym, że WordPress jest system nie tylko do tworzenia blogów, ale do tworzenia kompletnych serwisów internetowych jest to bardzo częste rozwiązanie.
Rozpoczynając pracę z własną skórką proponuje włączyć sobie tryb debugowania. Wręcz uważam to za konieczne, jeśli chcemy, aby nasz motyw nie zawierał błędów.
Jak i w jakim celu włączyć tryb debugowania WordPress?
Tryb debugowania jak sama nazwa wskazuje pokaże nam nasze błędy, m.in. ostrzeże nas przed użyciem funkcji, która nie jest już wspierana, pokaże czemu nasza strona nagle wybuchła i jest biały ekran, uprzedzi gdy zapomnimy czegoś domknąć. Generalizując na ekranie naszej strony pojawią się komunikaty, które zarówno pomogą nam dopracować nasz motyw jak i zlokalizują miejsce gdzie popełniliśmy błędy. Tryb debugowania nie jest używany wyłącznie przy tworzeniu skórek i nie pokazuje tylko naszych błędów, generalnie jeśli np. jakaś wtyczka nie działa prawidłowo komunikaty również będą wyświetlane. Tryb debugowania WP najczęściej na serwisach produkcyjnych ( kiedy nasza strona już zobaczy światło dzienne) jest wyłączony, tak aby nie informować innych użytkowników że ta piękna strona, którą teraz ogląda od środka zaraz 'wybuchnie’ 🙂 Jednak możemy, a wręcz musimy go włączyć 'na produkcji’ ( no chyba że mamy lustrzane odbicie naszej strony na wersji deweloperskiej to wiadomo że zrobimy to tam) kiedy na przykład po aktualizacjach wtyczek bądź cora WordPressa zobaczymy biały ekran, kiedy zobaczymy 500 lub kiedy coś nie będzie działać prawidłowo. Ja do momentu przeniesienia strony na serwer docelowy (produkcyjny) trybu debugowania nie wyłączam, tak aby na bieżąco kontrolować swój kod.
W celu włączenia trybu debugowania w głównym katalogu naszej instalacji WordPress na serwerze / hostingu odszukajmy plik wp-config.php a w nim znajdźmy poniższy kod:
/**
* For developers: WordPress debugging mode.
*
* Change this to true to enable the display of notices during development.
* It is strongly recommended that plugin and theme developers use WP_DEBUG
* in their development environments.
*
* For information on other constants that can be used for debugging,
* visit the Codex.
*
* @link https://codex.wordpress.org/Debugging_in_WordPress
*/
define('WP_DEBUG', false);
Zmieniamy wartość false na true i wysyłamy plik na serwer. Teraz możemy przystąpić do tworzenia naszej skórki już 'pod kontrolą’. Dalsza część w kolejnym poście.
Z niecierpliwością czekam na kolejne części .. 🙂
Właśnie kończę kolejne dwa wpisy 🙂
Mam pytanko: u mnie tryb debugowania nic nie pokazuje nawet po zmianie wartości w define z false na true.
To normalne?
Normalne. Nie masz ostrzeżeń, błędów to nic nie pokazuje.
Super artykuł. Rzeczowy, zwięźle i na temat a co najważniejsze w pełni zrozumiały dla początkującego jakim jestem ja. Kiedy można sie spodziewać następnych artykułów? 😉
W tym tygodniu bądź kolejnym. Zapraszam