Spis treści

Czym jest motyw WordPress?

Za sposób renderowania całej witryny internetowej odpowiadają motywy. Popularnym zwrotem jest również szablon WordPress. Są to jednak dwie różne rzeczy, ale często używane są zamiennie ze względu na powiązanie z wyglądem strony.

Szablon (ang. template) definiuje układ konkretnego typu treści np. szablon wpisów blogowych, produktów lub strony kontakt. Odpowiada za układ konkretnej strony.

Motyw (ang. theme) to jest szersze pojęcie. Służy do sposobu renderowania treści, zawiera zbiór stylii oraz funkcji wszystkich elementów na stronie.

  • Motywy odpowiadają głównie za sposób renderowania całej witryny internetowej.
  • Szablon WordPress odpowiada za układ konkretnej strony.

Określenie szablonu w odniesieniu do motywu WordPress jest już na tyle powszechnie stosowane, że te dwa zwroty bardzo często używane są jako synonimy.

Dlaczego warto postawić na własny motyw WordPress?

Nie od dziś wiadomo, że jeśli coś jest do wszystkiego - w praktyce oznacza, że jest do niczego. Czy tak samo jest w przypadku gotowych motywów WordPress? Jak stworzyć własny szablon WordPress? Samodzielne przygotowanie motywu WordPress ma wiele zalet:

Optymalizacja własnego motywu WordPress

Przede wszystkim jego kod jest został przygotowany dla konkretnego celu. Gotowe szablony WordPress tworzone są z myślą o rozwiązywaniu wielu problemów, co oznacza, że wyjściowy kod będzie zawierać wiele niepotrzebnych elementów na każdej stronie. Rozwiązanie przygotowane pod określony problem ogranicza ilość kodu i zapewnia lepszą optymalizację witryny. Samodzielnie możemy określić strukturę podstron czy wpisów oraz sposób ich formatowania. Otrzymujemy w ten sposób możliwość kompletnej edycji szablonów.

Struktura kodu pisanego pod konkretne rozwiązanie jest znacznie prostsza. Skraca czas ładowania strony internetowej i jest lepiej oceniana przez roboty Google, co zdecydowanie wpływa na pozycjonowanie stron WordPress.

Wizerunek marki w internecie

Zwróć uwagę, że witryna internetowa w dzisiejszych czasach pełni funkcję wizytówki firmy, dlatego istotne jest, aby odzwierciedlała wartości przedsiębiorstwa. Tworzenie stron w oparciu o WordPress daje szansę na przedstawienie oferty przedsiębiorstwa znacznie większej liczbie potencjalnych klientów. Własny szablon WordPress możemy w pełni dostosować, co daje nam możliwość lepszego budowania wizerunku naszej marki w internecie. WordPress umożliwia tworzenie prostych stron oraz rozbudowanych sklepów czy blogów. Ważne, aby Twoja strona internetowa była spójna z całym wizerunkiem Twojej marki oraz aby w jasny sposób przedstawiała ofertę i wartości przedsiębiorstwa.

Bezpieczeństwo stron WordPress

Posiadanie własnego motywu WordPressa jest również ważne ze względu na bezpieczeństwo i stabilność witryny. Prowadząc przedsiębiorstwo internetowe, jego bezpieczeństwo jest czynnikiem, którego zdecydowanie nie powinniśmy lekceważyć. Jest to kluczowa wartość, którą należy wziąć pod uwagę, jeśli planujemy otwarcie np. sklepu internetowego.

Gotowe rozwiązania często wymagają instalacji dodatkowych wtyczek, ich znaczna ilość może doprowadzić do sytuacji, gdzie nie będziemy w stanie nad nimi zapanować. Tak jak większość rozwiązań, one również wymagają regularnych aktualizacji, ich pominięcie może wpłynąć na bezpieczeństwo i stabilność naszej witryny. Może się również okazać, że z części dodatkowych wtyczek nigdy nie skorzystamy, co prowadzi do sytuacji, gdy nasza witryna posiada wiele zbędnych plików. Istotne jest również weryfikowanie aktualizacji motywu, który używamy. Może dojść do sytuacji, gdy autor wraz z kolejną wersją zrezygnuje z części funkcjonalności, z których korzystamy.

włąsny motyw wordpress dlaczego warto

Są to czynniki, które zdecydowanie warto przemyśleć przed podjęciem decyzji, jeśli chcemy, aby nasza witryna była dobrze pozycjonowana (SEO) oraz przyjazna dla użytkowników (UX).

Gotowy szablon jest dobrym rozwiązaniem, gdy szukamy rozwiązania tymczasowego. Jeśli planujemy rozwijać nasz serwis, budując w ten sposób pozycję swojej marki w internecie, warto skorzystać z rozwiązania przygotowanego na miarę.

Samodzielne tworzenie własnego motywu WordPress może wydawać się skomplikowane. Poniżej przedstawiamy krótki poradnik przedstawiający najważniejsze kroki, które przybliżą Cię do stworzenia własnej strony w WordPressie.

Jak zacząć? Czyli serwer na pierwszym miejscu

Instalacja systemu odbywa się w kilku prostych krokach. Po pierwsze musimy przygotować środowisko pracy. W tym celu niezbędny jest edytor kodu oraz serwer http. Jeśli chcemy zainstalować WordPressa w celu nauki, musimy skonfigurować lokalny serwer.

Możemy skorzystać z narzędzi, takich jak:

  • XAMPP,
  • WAMP,
  • MAMP

lub dla bardziej zaawansowanych użytkowników z gotowego obrazu dockera.

Natomiast, jeśli mamy już wykupiony hosting, wystarczy wstawić gotowe pliki na serwer.

W celu instalacji WordPressa wchodzimy na stronę wordpress.org/download i pobieramy najnowszą wersję.

Tworzenie motywu WordPress

Po instalacji WordPressa przechodzimy do katalogu wp-content, który przechowuje między innymi wszystkie wtyczki i motywy danej witryny. Możemy więc w łatwy sposób dostać się do kodu źródłowego motywu WordPress obecnie używanego przez naszą stronę. Natomiast edytowanie tych plików nie jest najlepszym pomysłem, ponieważ przy kolejnej aktualizacji możemy utracić wszelkie zmiany.

Jeśli chcemy zadbać o bezpieczeństwo naszej strony www, warto odinstalować wszystkie domyślne wtyczki i motywy.

W celu stworzenia własnego motywu należy przejść do katalogu themes i utworzyć w nim nowy katalog o nazwie naszego motywu. Do stworzenia własnego motywu teoretycznie wystarczą nam dwa pliki:

  • style.css (który jako jedyny jest wymagany)
  • index.php (odpowiadający za strukturę strony WordPress)

Natomiast warto lepiej poznać strukturę plików w katalogu motywu, aby nasz projekt był bardziej czytelny. W tym celu przyjrzymy się jednemu z domyślnych motywów WordPressa - Twenty Nineteen.

WordPress Twenty Nineteen

(źródło: wordpress.org/themes/twentynineteen)

style.css

Jest to najważniejszy i jako jedyny wymagany plik podczas tworzenia motywu WordPress. Plik styli css wpływa głównie na wygląd strony, ale zawiera również szczegóły motywu wyświetlane w panelu administracyjnym WordPressa. Umieszczamy w nim informacje o autorze, wersji oraz opis i nazwę szablonu. Dane te widoczne są na początku dokumentu w komentarzu.

deklaracja nowego szablonu WordPress

Powyższy kod stanowi deklarację nowego szablonu WordPress. Jeśli chcemy go uruchomić musimy przejść do panelu administratora WordPress -> motywy -> wygląd i odnaleźć nasz motyw. Oczywiście uruchamianie szablonu WordPress na tym etapie nie ma większego sensu, ponieważ otrzymamy pustą stronę. Poniżej zostały przedstawione podstawowe pliki i funkcje, które pomogą Ci pomóc rozpocząć tworzenie szablonu WordPress.

index.php

Znajduje się na samej górze hierarchii struktury plików. Oznacza to, że odczytywany jest w pierwszej kolejności. Możemy umieścić w nim całą zawartość struktury strony internetowej, ale byłoby to bardzo nieczytelne i na dłuższą metę niewygodne podczas pracy na motywie WordPress. Dlatego przed przystąpieniem do stworzenia szablonu WordPress warto przemyśleć jego projekt. Funkcje i metody najczęściej wykorzystywane podczas budowy pliku index.php:

  • get_header(); - pozwala na załadowanie fragmentu kodu umieszczonego w pliku header.php,
  • get_footer(); - ładuje fragment kodu umieszczonego w pliku footer.php.

Podczas tworzenia stron opartych o CMS WordPress często spotkasz się również z wykorzystaniem warunków php if oraz z pętli php while. Dzięki nim możemy określić, w jaki sposób mają być renderowane pojedyncze strony. Podczas ich budowy często wykorzystuje się:

  • have_posts(); - sprawdza, czy istnieją jakieś posty, zwraca wartość boolean,
  • the_post(); - służy do iteracji w pętli,
  • get_template_part(); - umieszcza fragment kodu z pliku wskazanego, jako (obowiązkowy) argument funkcji.

Warto dodać, że te funkcje wykonują na konkretnej stronie poprzez globalny kontekst zmiennej `WP_QUERY` dzięki temu użycie domyślnej pętli w określonych szablonach wyświetli wpisy konkretnego typu treści np. w szablonie archive-products.php wyświetlą się tylko produkty.

index.php motyw WordPress

Poniżej zostały omówione najczęściej stosowane pliki, które na pewno przydadzą się podczas tworzenia własnego motywu Wordpress. Każdy z nich odpowiada za inna część strony internetowej.

header.php

Przechowuje początek pliku HTML, umieszczamy tu informacje od deklaracji pliku, przez sekcję head, a czasami nawet nawigację czy nagłówek strony WordPress. Aby wyświetlić tę sekcję na naszej stronie w pliku index.php, w znacznikach php umieszczamy funkcję get_header(). WordPress, po wywołaniu danej funkcji poszukuje w naszym katalogu pliku header.php, jako argument możemy podać nazwę innego nagłówka, który może zostać wyświetlony w zależności od tego, na jakiej stronie obecnie znajduje się użytkownik.

Plik header.php możemy zbudować między innymi za pomocą funkcji:

  • bloginfo(); - pobiera konkretne informacje o naszej witrynie WordPress określone jako parametr funkcji, w ten sposób dynamicznie możemy odczytać informacje na temat np. title, które użytkownik może edytować z poziomu panelu administratora WordPressa,
  • wp_head(); - funkcja powinna być umieszczona tuż przed znacznikiem zamykającym sekcję head. Skorzystanie z tej funkcji jest konieczne między innymi do poprawnego działania wtyczek, które podczas instalacji  umieszczają w sekcji head dodatkowe elementy,
  • home_url(); - zwraca adres, który został określony jako strona główna witryny w panelu administracyjnym.

Można to również ustawić przez zadeklarowanie stałej w pliku wp-config.php define( 'WP_HOME', ' http://example.com ' );

footer.php

Przechowuje koniec kodu HTML - stopkę, tag zamykający body oraz tag zamykający html. Wyświetlenie zawartości pliku footer.php następuje przez umieszczenie w pliku index.php funkcji get_footer(). W jej argumencie możemy podać nazwę innej stopki do wczytania.

Podczas budowania stopki nie powinniśmy zapomnieć o funkcji:

  • wp_footer(); - powinna zostać umieszczona tuż przed zamknięciem znacznika body. Podobnie jak funkcja wp_head() jest ona konieczna do poprawnego funkcjonowania witryny.

single.php, archive.php

Plik single.php zawiera informacje o sposobie wyświetlania pojedynczego wpisu na blogu. Archive.php natomiast określa, strukturę archiwum postów na blogu.

  • the_post_thumbnail(); - zwraca miniaturę wpisu, w parametrach funkcji możemy określić między innymi jej wielkość,
  • the_title(); - zwraca tytuł wpisu,
  • the_content(); - zwraca zawartość wpisu,
  • the_excerpt(); - zwraca fragment postu.

Podobnie jak w pkt. 3. Można przyjąć, że wszystkie funkcje w WordPressie, które zaczynają się od the_ odnoszą się do aktualnego globalnego kontekstu. Oznacza to, że jeśli jesteśmy np. w pliku odpowiedzialnych za wyświetlenie wpisu blogowego single.php - funkcja the_title() pobierze z bazy danych tytuł odpowiedni do wyświetlanej strony. Alternatywą do tych funkcji są te, których nazwa zaczyna się od get_ np. get_the_title(int|WP_Post $post ). Do nich należy jawnie przekazać, o jaki wpis chodzi i globalny kontekst nie ma znaczenia.

Oczywiście WordPress posiada o wiele więcej wbudowanych funkcji i metod umożliwiających budowanie rozbudowanych motywów WordPress. Powyżej przedstawione zostały zaledwie podstawowe informacje na temat systemu WordPress. Jest to jeden z najbardziej rozbudowanych CMS-ów, co oznacza, że do stworzenia własnego motywu w znacznej mierze ogranicza nas wyłącznie wyobraźnia. Jeśli interesuje Cię tworzenie stron www, więcej na ten temat możesz przeczytać w dokumentacji WordPressa.