Dodano 2016-11-15 09:55:16 przez Daniel
Witaj w pierwszej części kursu o budowie szablonu do WordPressa. Z kolejnymi częściami przejdziemy od umieszczenia w odpowiednim miejscu pliku z napisem „Witaj świecie” do rozbudowanego szablonu z licznymi funkcjami dodatkowymi oraz obsługą kategorii czy komentarzy. Zacznijmy od początku.
Zakładam że masz już serwer lokalny i jakiś wygodny edytor kodu, jeśli nie to odsyłam do pierwszych wpisów o narzędziach Server lokalny oraz Edytor kodu a także zainstalowany wordpress. umożliwiający testy. Tworzenie szablonu rozpoczynamy od utworzenia katalogu. Wszystkie szablony znajdują się w katalogu wp-content > themes tam też utworzymy katalog naszego szablonu o nazwie „zwp” tak jak na obrazku poniżej.
Teraz tworzymy kolejne dwa pliki index.php oraz style.css. Są to dwa niezbędne pliki do działania szablonu.
W pierwszym z nich, czyli index.php umieszczamy niezwykle prosty kod odpowiedzialny za wyświetlenie napisu „Witaj świecie”.
<?php
echo 'Witaj świecie';
?>
Najważniejsza w tym momencie jest zawartość pliku style.css w którym umieszczamy informacje o naszym szablonie za pomocą komentarzy na początku pliku:
/* Theme Name: Zaawansowanywordpress Szablon Theme URI: http://zaawansowanywordpress.pl/1-witaj-swiecie/">http://zaawansowanywordpress.pl/1-witaj-swiecie Author: Daniel Kuczewski Author URI: http://zaawansowanywordpress.pl Description: Szablon dla serwisu zaawansowanywordpress.pl Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: kurs,tworzenie szablonów,wordpress Text Domain: zaawansowanywordpress */
Poniżej wyjaśnienie co oznaczają poszczególne elementy:
Z powyżej wymienionych elementów w zasadzie najważniejszy jest pierwszy i tylko on jest wymagany. Pozostałe parametry są opcjonalne. Obecnie nasz szablon na liście szablonów nie wygląda zbyt atrakcyjnie. Wynik na ten moment prezentuję na obrazku poniżej:
Jak widać nasz szablon nie jest zbyt atrakcyjny na pierwszy rzut oka w porównaniu z innymi szablonami a to za przyczyną braku obrazka poglądowego. Możemy go dodać w każdej chwili dodając plik graficzny do katalogu głównego szablonu o nazwie screenshot.png. Najlepiej tutaj dodać projekt szablonu jeśli taki posiadamy lub po prostu można zrobić zrzut ekranu gdy szablon jest już zakodowany i wygląda tak jak powinien w ostatecznej wersji. Po dodaniu tego pliku, nasz nowy szablon będzie się prezentował następująco:
No i to by było na tyle. Na ten moment nasz szablon nie robi praktycznie nic poza tym że jest i można go uruchomić. Poniżej zamieszczam jeszcze efekt końcowy po kliknięciu szablonu z listy szablonów oraz po zaaplikowaniu go dla naszej testowej strony:
I efekt końcowy na stronie po włączeniu szablonu:
Pliki z kodem tej części można pobrać Tutaj