Reklama sponsora

1. Pierwszy szablon „Witaj świecie”



Wstęp

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.

Lokalizacja szablonu

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.

szablon1_1

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:

  • Theme Name – nazwa szablonu
  • Theme URI – adres/strona internetowa szablonu
  • Author – autor, wykonawca szablonu
  • Author URI – strona internetowa autora
  • Description – opis szablonu
  • Version – wersja szablonu (to jest istotne kiedy udostępnimy aktualizacje)
  • License – licencja
  • License URI – adres, strona internetowa licencji
  • Tags – tagi
  • Text Domain – domena

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:

wsws1

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:

wsws2

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:

wsws3

I efekt końcowy na stronie po włączeniu szablonu:

wsws4

Pliki z kodem tej części można pobrać Tutaj

 

 

 

 


Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *