Stwórz własny motyw WordPress

Opublikowany: 2021-12-21

W poprzednich artykułach zbadaliśmy, jak dostosować witrynę WordPress, stworzyć własny motyw podrzędny lub szablony.

Dzisiaj przyjrzymy się, jak zbudować własny motyw WordPress. Kontynuujmy!

Po co tworzyć własny motyw WordPress?

WordPress zapewnia wiele sposobów na dostosowanie Twojej witryny. Dlaczego miałbyś więc odczuwać potrzebę stworzenia własnego motywu? W niektórych przypadkach gotowe motywy mogą nie pasować do projektu Twojej marki lub mieć potrzebne funkcje. Motyw niestandardowy może rozwiązać ten problem i zapewnić dokładnie taki styl witryny, jaki chcesz, ze wszystkimi potrzebnymi funkcjami, bez konieczności polegania na motywie innej firmy.

Wymagania przed utworzeniem motywu

Aby móc odtworzyć następujące kroki w poniższym przykładzie, musimy mieć skonfigurowaną instalację WordPress i gotową do pracy, lokalnie lub na administrowanej przez Ciebie przestrzeni serwerowej. Nie próbuj tego na działającej witrynie. Zamiast tego utwórz środowisko testowe.

Wymagana jest również praktyczna znajomość i zrozumienie CSS, PHP i HTML.

Utwórz motyw

Nazwiemy nasz motyw „Mój pierwszy motyw”. Pierwszym krokiem jest utworzenie niezbędnych plików, aby motyw był widoczny w obszarze administracyjnym. W tym celu stworzymy plik style.css i index.php.

Tworzymy podfolder dla naszego motywu w folderze wp-content/themes/, który nazywamy „my-first-theme” i dodajemy te 2 pliki do tego folderu.

W tym momencie motyw powinien być widoczny jako wybór w obszarze administracyjnym.

Jeśli brakuje któregokolwiek z tych plików, otrzymasz komunikat ostrzegający, że motyw jest uszkodzony. Na przykład, jeśli brakuje index.php, zobaczysz coś takiego:

W pliku style.css dodamy kilka komentarzy, które informują WordPress o naszym motywie. Najważniejszą informacją jest nazwa, pod którą będzie się wyświetlać. Poza tym możesz powiedzieć, kto jest autorem, lub podać identyfikator URI autora, aby użytkownicy mogli odwiedzić witrynę i dowiedzieć się więcej o Twoim motywie. Podaj opis, który będzie wyświetlany w wyskakującym okienku modalnym motywu administratora, oraz wersję instalacji.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

UWAGA: Możesz również zdefiniować swoją licencję. Jeśli chcesz, aby Twój motyw był rozpowszechniany na WordPressie, musi on być zgodny z GPL.

Jeśli chcesz wyświetlić obraz logo, wstaw plik screenshot.png w tym samym miejscu, w którym znajdują się pliki style.css i index.php.

Teraz, jeśli aktywujesz swój motyw na ekranie administratora motywów, powinieneś zobaczyć coś takiego:

A jeśli klikniesz „Szczegóły motywu”, powinieneś zobaczyć to:

Pliki motywów

Teraz czas na napisanie kodu w pliku index.php. Jako test otwórz plik w swoim ulubionym edytorze i wstaw dowolny element HTML, na przykład

 <h1>My First Theme's Content</h1>

Zapisz plik i odwiedź interfejs. Powinieneś zobaczyć tylko nagłówek „Zawartość mojego pierwszego motywu”

W tym momencie musisz zdecydować, jaki układ będzie miał twój motyw.

Układ motywu

Trasy, którymi można się stąd kierować, są nieograniczone. Zdecydowanie zalecamy, abyś nie spieszył się i przestudiował działanie motywów WordPress. Co ważniejsze, upewnij się, że w pełni rozumiesz hierarchię szablonów, zanim przejdziesz do tworzenia własnego motywu.

Krótko mówiąc, WordPress umożliwia wywoływanie różnych plików php w zależności od rodzaju treści. Odbywa się to za pomocą zapytań. Zapytanie sprawdza, czy aktualnie oglądana strona zawiera posty, jest stroną wyników wyszukiwania lub jakąkolwiek inną zawartością i wyświetla odpowiedni kod.

Klasycznym przykładem jest oddzielenie nagłówka i stopki poprzez utworzenie osobnych plików dla każdego z nich. Aby zobaczyć bardzo uproszczony przykład tego, jak możesz to zrobić samodzielnie, wstaw ten fragment kodu do pliku index.php.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

Ten kod, wykorzystujący wbudowane funkcje WordPress wp_head() i wp_footer(), zapewnia domyślny układ treści, który zawiera nagłówek z logo, tytułem i menu, główną treść, w której zapytania będą wyświetlać właściwą treść, oraz stopkę zawierającą informacje o witrynie.

Jeśli chcielibyśmy podzielić ten kod i używać osobnych plików header.php i footer.php, należy je utworzyć w folderze motywu.

I podziel kod w ten sposób:

Index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Nagłówek.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Footer.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

I to wszystko! Stworzyłeś swój pierwszy motyw!

Motywy startowe

Przyjrzeliśmy się powyżej, jak ręcznie utworzyć motyw… jakie pliki należy utworzyć i jaki kod można dołączyć. Jeśli już to znasz, możesz zaoszczędzić trochę czasu, pobierając motyw startowy WordPress w kilka sekund. Wypróbuj na przykład podkreślenie, gdzie możesz po prostu podać nazwę i od razu pobrać plik zip motywu.

Niesamowite, prawda?

Wniosek

Niestandardowy motyw WordPress to świetne rozwiązanie, gdy potrzebujesz większej elastyczności jako programista. Tworzenie motywu może wydawać się zniechęcającym procesem. Mam nadzieję, że jak pokazał ten artykuł, jest to całkiem łatwe. Kluczem do sukcesu jest nie spieszyć się przed rozpoczęciem kodowania. Zrób krok wstecz, przestudiuj strukturę motywu, która spełnia Twoje wymagania, a następnie idź do niej.