Utwórz motyw WordPress: krok po kroku do niestandardowego rozwoju

Od czasu swojego pierwotnego uruchomienia w 2003 r. WordPress ewoluował z prostego narzędzia do blogowania w potężny i popularny kreator stron internetowych oraz kompleksowy CMS (system zarządzania treścią) używany przez około 38% stron internetowych w sieci! Biorąc pod uwagę jego popularność, jeśli Twoja strona musi się wyróżniać z tłumu, musisz stworzyć motyw WordPress, który będzie unikalny dla Twojej witryny.

Nic więc dziwnego, że WordPressowi udało się zajść tak daleko i stać się tak popularnym.

Ilość elastyczności, jaką oferuje, i funkcje, które hostuje, pozwalają na jego szerokie wykorzystanie w różnych typach witryn. Poza tym WordPress jest dość łatwy w użyciu, z niewielkim lub żadnym doświadczeniem w kodowaniu lub tworzeniu stron internetowych.

Oto powody, dla których WordPress odniósł sukces i to właśnie one są powodem, dla którego prawie Wzrost o 40 wszystkich witryn internetowych w sieci World Wide Web korzysta z tego oprogramowania. 

WordPress posiada szereg przydatnych funkcji, które sprawiają, że tworzenie stron internetowych i programowanie stają się mniej skomplikowane i bardziej dostępne dla każdego.

Wprowadzenie do tworzenia motywów WordPress 

Inną popularną cechą, która sprawia, że ​​WordPress jest tak popularny, są jego motywy. Motyw to po prostu zbiór arkuszy stylów i szablonów, które definiują wygląd i sposób wyświetlania witryny opartej na WP.

Oprogramowanie oferuje użytkownikowi szeroką gamę różnych opcji edycyjnych w zakresie motywów z poziomu panelu administracyjnego WP.

Setki motywów WordPress jest całkowicie darmowych, a wiele innych można kupić za rozsądną cenę kilkudziesięciu dolarów.

W rzeczywistości WordPress.org hostuje ogromną bazę motywów w swoim Katalogu motywów.

Inne strony internetowe, np. Themeforest, również oferują mnóstwo płatnych motywów od różnych deweloperów.

Każdy z tych motywów charakteryzuje się innym układem, wzorem projektu i funkcjami.

Użytkownik musi znaleźć taki, który najlepiej odpowiada potrzebom jego witryny. W większości przypadków motywy są tworzone z myślą o konkretnych branżach lub zawodach, co oznacza, że ​​na przykład właściciele restauracji mogą łatwo znaleźć motywy z funkcjami rezerwacji.

Chociaż jest wiele niesamowitych motywów, które mogą odpowiadać Twoim potrzebom, można śmiało powiedzieć, że jeśli chcesz stworzyć coś wyjątkowego, będziesz musiał zrobić to sam. Jeśli nie potrafisz programować, dobrą alternatywą opcją byłoby zatrudnienie niezależnego programisty oprogramowania (ceny mogą się różnić w zależności od różnych czynników).

W tym artykule omówimy jednak WSZYSTKIE kroki niezbędne do stworzenia własnego, niestandardowego motywu WordPress dla Twojej witryny opartej na WP. Przyjrzymy się każdemu ważnemu aspektowi, aby upewnić się, że otrzymasz to, co najlepsze w WordPressie. 

Rozpoczęcie tworzenia własnego motywu dla początkującego może na pierwszy rzut oka wydawać się zadaniem nie lada wyzwaniem.

Jednak stworzenie własnego motywu od podstaw nie jest zbyt skomplikowane w WP. Nie musisz być geniuszem tworzenia stron internetowych, jeśli znasz podstawy kodowania w PHP, możesz łatwo nauczyć się, jak stworzyć motyw WordPress.

Co więcej, stworzenie własnego motywu może okazać się bardzo satysfakcjonujące, zwłaszcza gdy zobaczysz efekt końcowy na żywo na swojej stronie internetowej.

Tworzenie pierwszego niestandardowego motywu WordPress

Aby rozpocząć tworzenie motywu WordPress, będziesz potrzebować kilku podstawowych rzeczy:

• Witryna WordPress
• Dobry plan hostingowy
• Nieco wcześniejszego doświadczenia w takich kwestiach jak lokalne środowiska testowe
• Podstawowa znajomość języków kodowania CSS i PHP
• Motyw startowy

 

Zrozumienie hierarchii szablonów WordPress 

W WordPressie pliki szablonów (elementy składowe motywu) są modułowe i wielokrotnego użytku.

Pliki szablonów są odpowiedzialne za generowanie stron w witrynie WP. Niektóre z tych plików są używane na prawie wszystkich stronach, podczas gdy inne są używane tylko w określonych okolicznościach.

Przyjrzyj się poniższemu diagramowi — wyjaśnia on, jak zorganizowana jest hierarchia szablonów WordPress.

 

Pliki szablonów określą ogólny wygląd treści na stronie internetowej. Jeśli chcesz utworzyć nagłówek, użyjesz header.php pliku lub jeśli chcesz dodać sekcję komentarzy, użyj comments.php plik. 

Aby zrozumieć hierarchię szablonów, należy wiedzieć, że WordPress korzysta z czegoś, co nazywa się „ciągiem zapytania”, aby zdecydować, który szablon lub zestaw szablonów powinien zostać użyty do utworzenia i wyświetlenia określonej strony.

Ciąg zapytania to informacja przechowywana w linku każdej części witryny, którą próbujesz zmodyfikować. Mówiąc prościej, WordPress analizuje informacje i przeprowadza wyszukiwania w hierarchii szablonów, aby znaleźć plik szablonu, który pasuje do podanych informacji w ciągu zapytania.

Generalnie rzecz biorąc, jest to schemat, w którym WP szuka pasujących plików szablonów za każdym razem, gdy ładowane są strony.

Na przykład, jeśli wpiszesz następujący adres URL http://example.com/post/this-post, WordPress znajdzie niezbędne pliki szablonów w następującej kolejności: 

1. Pliki, które pasują do ślimaka, w tym przypadku, ten post.
2. Pliki pasujące do identyfikatora posta.
3. Ogólny pojedynczy plik post, taki jak single.php.
4. W tym przypadku jest to plik archiwalny, archive.php.
5.  index.php plik.

 

Ostatni plik (index.php) jest wymagany w każdym motywie i jest domyślnym (lub awaryjnym) ustawieniem, jeśli w procesie dopasowywania nie zostanie znaleziony żaden inny plik. podkreślenia (motyw startowy WP) ma najpopularniejsze pliki. Te pliki zawarte w tym motywie będą działać od razu.

Możesz je edytować, jeśli masz ochotę poeksperymentować lub chcesz stworzyć niestandardową funkcjonalność na swojej stronie.

Czym jest motyw startowy WordPress? 

Motyw startowy to podstawowy fundament niestandardowego motywu WordPress.

Możesz użyć go jako podstawy, aby uruchomić swój własny, unikalny motyw. Dzięki motywowi startowemu możesz zbudować swój własny, niestandardowy motyw WordPress bez konieczności projektowania lub kodowania całego motywu od podstaw.

Motywy startowe WordPress zawierają wszystkie pliki zdefiniowane zgodnie z powyższą hierarchią.

Korzystając z motywu startowego, możesz lepiej zrozumieć działanie WordPressa, ponieważ pokazuje on podstawy, strukturę motywu i sposób, w jaki poszczególne części ze sobą współpracują.

Spersonalizowany motyw WordPress można zastosować w wielu różnych typach witryn, od prezentacji i katalogów po sklepy internetowe zbudowano za pomocą WooCommerce, mediach społecznościowych lub w jakimkolwiek innym celu może być Ci potrzebna Twoja strona internetowa.  

Wybór motywów startowych (takich jak UnderStrap, Underscores i Bones) pomoże w stworzeniu motywu WordPress otwierającego drzwi do korzystania z wielu różnych opcji.

Używanie Underscores może być najlepszym wyborem dla początkujących, ponieważ oferuje najważniejsze funkcje. Pochodzi również od wieloletniego i niezawodnego dewelopera. Oznacza to, że jest bardziej prawdopodobne, że będzie kompatybilny, bezpieczny i niezawodny, a także będzie miał lepsze wsparcie w dłuższej perspektywie.

Dlaczego warto używać motywu startowego

Jak wspomniano powyżej, motyw startowy to fundament, plan, który pomaga Ci stworzyć unikalną witrynę. Jest już w pełni funkcjonalny, ale nadal brakuje mu kluczowych cech, które tworzą przyjazną dla użytkownika witrynę. 

Generalnie rzecz biorąc, trzeba go jeszcze odpowiednio wystylizować i skonfigurować. 

To powiedziawszy, motywy startowe są idealne dla tych, którzy mają niewielkie lub żadne doświadczenie z WordPressem lub ogólnie z tworzeniem stron internetowych. To świetny sposób, aby zapoznać się z tematem tworzenia motywów i poznać podstawy witryn opartych na WP. 

Motyw WordPress Starter pozwala zaoszczędzić czas i nie wymaga żadnej wiedzy na temat kodowania ani innych skomplikowanych zagadnień związanych z WordPressem. 

Możesz skorzystać z efektów lat ciężkiej pracy twórców motywu startowego i zastosować się do tych wytycznych, aby lepiej zrozumieć, jak działa WordPress i jak działa projekt motywu.   

Przykłady popularnych motywów startowych

• podkreślenia – Niezawodny i ceniony motyw startowy, który daje początkującym przewagę w rozwój motywu. Underscores jest dość podstawowy i idealny do natychmiastowego rozpoczęcia, jeśli masz wszystkie niezbędne narzędzia. Motyw jest świetny do zrozumienia koncepcji rozwoju motywu. Underscores dotyczy rozpoczęcia nowego projektu, który należy postrzegać bardziej jako stale rozwijający się zestaw narzędzi, a mniej jako strukturę.
  
  
• Roots – Ten motyw startowy oferuje podejście bardziej ukierunkowane na deweloperów, ponieważ jego znaczniki są oparte na HTML5 Boilerplate. Obsługuje również bardziej zaawansowane narzędzia, takie jak Bootstrap oraz Chrząknięcie. Motyw startowy Roots zawiera również wrapper motywu, który pomaga utrzymać proces w czystości i eliminuje konieczność wielokrotnego wywoływania tych samych części szablonu.

Roots wykorzystuje również preprocesory CSS i obsługuje LESS, wstecznie kompatybilne rozszerzenie języka CSS, które może znacznie przyspieszyć proces tworzenia Twojego motywu.

Mówiąc wprost, Roots oferuje bardziej pragmatyczne podejście i wymaga od programisty nieco większej wiedzy.  

6 podstawowych kroków do opracowania motywu WordPress

Po omówieniu podstaw możesz wreszcie rozpocząć tworzenie motywu WordPress.

Ponieważ artykuł ten skierowany jest raczej do początkujących, użyjemy motywu startowego, jednak możesz również stworzyć wszystko od podstaw bez żadnego motywu startowego.

Jeśli chcesz podążać tą drogą, nie zapominaj, że będziesz potrzebował o wiele więcej czasu i będziesz musiał bardziej zagłębić się w kodowanie oraz ogólnie rzecz biorąc w tworzenie stron internetowych.

1. Konfigurowanie środowiska programistycznego

Pierwszym krokiem w tym procesie powinno być utworzenie środowiska programistycznego.

Zasadniczo jest to serwer, który musisz zainstalować na swoim komputerze, aby zarządzać i rozwijać lokalne witryny WP. Środowisko programistyczne umożliwia bezpieczne rozwijanie witryny, a także daje wiele opcji tworzenia lokalnego środowiska.

Korzystanie z Serwer stacjonarny jest jedną z idealnych ścieżek, które możesz obrać. To łatwy sposób na uzyskanie lokalnej i szybkiej wersji WP, która jest kompatybilna zarówno z Windows, jak i Mac. Wybierz bezpłatną wersję, zarejestruj się i pobierz ją, a następnie zainstaluj oprogramowanie.

 

Po zainstalowaniu otwórz program i skonfiguruj środowisko lokalne.

To dość prosty proces i będziesz gotowy w ciągu kilku minut. Po konfiguracji będziesz mieć witrynę i środowisko programistyczne, które będą działać i wyglądać jak każda działająca witryna WP.

2. Pobierz i zainstaluj motyw startowy

Najbardziej podstawowe motywy startowe (takie jak Underscores) są łatwe do wykorzystania nawet dla osób, które pierwszy raz korzystają z tych motywów.

W przeciwieństwie do większości podstawowych motywów, Underscores umożliwia dostosowywanie opcji za pomocą Opcje zaawansowane (takich jak autor i opis) po nazwaniu motywu. 

Możesz również dodać arkusze stylów o niesamowitej składni lub SASS który jest językiem CSS umożliwiającym wstępne przetwarzanie i wprowadzanie funkcji takich jak zagnieżdżanie, operacje matematyczne, wykorzystywanie zmiennych itp.

Po dokonaniu wyboru wystarczy kliknąć przycisk Generuj, aby pobrać plik .zip zawierający wybrany motyw startowy.

Teraz zainstaluj plik na swojej lokalnej stronie. Jeśli wszystko zrobiłeś poprawnie, możesz teraz zobaczyć podstawową wersję swojego niestandardowego motywu WordPress.

Zrozumienie podstawowych zasad WordPressa 

Teraz, gdy podstawy są już skonfigurowane, możesz zabrać się do pracy. Jednak zanim zanurzysz się w procesie dostosowywania, musisz zapoznać się z podstawowymi zasadami i komponentami tworzenia motywu WordPress przy użyciu podstawowych zasad WP. 

Przede wszystkim musisz się czegoś nauczyć pliki szablonów, główne elementy składowe każdego motywu w WP.

Pliki szablonów zasadniczo określają sposób wyświetlania układu i treści na Twojej stronie. Jeśli chcesz utworzyć nagłówek, będziesz chciał użyć header.php plik, podczas gdy comments.php będzie używany do wyświetlania komentarzy.

Jak omówiono powyżej, WP używa swojej hierarchii szablonów, aby określić, który plik szablonu wybierze do wykonania treści, której użytkownik żąda/potrzebuje. Możesz pracować z tymi plikami takimi, jakie są, ale biorąc pod uwagę, że jesteś tutaj, aby utworzyć motyw WordPress, większość Twojej pracy będzie polegała na dostosowaniu tych plików do Twoich potrzeb.

 

Mówiąc o podstawowych zasadach WP, należy również zrozumieć koncepcję, która za tym stoi Loop.

Jest to kod, którego WP używa przede wszystkim do wyświetlania treści. Można go znaleźć we wszystkich plikach szablonów wyświetlania treści, takich jak index.php or pasek boczny.php. To dość złożony temat, ale na szczęście jest on zawarty w motywie startowym (jeśli używasz podkreślników), co oznacza, że ​​cały proces powinien być prostszy. 

Musisz zrozumieć koncepcję i z nią pracować. Sprawdź niektóre przykłady w linku powyżej, aby lepiej zrozumieć, jak używana jest pętla i jak możesz dostosować kod do swoich potrzeb.

3. Utwórz szczegóły motywu

Tematy nie są składnikami czysto kosmetycznymi.

Istnieje wiele różnych funkcji, które możesz dodać do swojej witryny, co może poprawić jej funkcjonalność. Omówimy, jak wdrożyć kilka podstawowych funkcji, aby urozmaicić swoją witrynę.

Dodawanie Haczyki może umożliwić Ci uruchamianie różnych akcji PHP, wyświetlanie innych informacji lub wstawianie stylów danych, jeśli jest to konieczne.

Hooki to fragmenty kodu, które są wstawiane do plików szablonów. Większość z nich jest bezpośrednio implementowana jako część rdzenia WordPressa, ale niektóre hooki są również bardzo przydatne podczas dostosowywania motywów.

Oto lista najczęściej występujących haczyków i ich ról:

• wp_head() - jest dodawany do element w header.php. Umożliwia skrypty, style i inne informacje, które są uruchamiane, gdy witryna zaczyna się ładować.
• wp_footer() - zwykle dodawane do pliku footer.php przed tag, najczęściej używany do wstawiania kodu dla Google Analytics lub innego kodu, który musi być wyświetlany na każdej stronie, ale jest za duży, aby załadować go w nagłówku.  
• wp_meta() - Plik ten można zazwyczaj znaleźć w pliku sidebar.php i najczęściej służy do dodawania dodatkowych skryptów (na przykład chmury tagów).
• komentarz_form() - Dodano do comments.php bezpośrednio przed zamknięciem pliku oznacz aby wyświetlić komentarze. 

Gdy używasz Underscores, te haki będą już dołączone do motywu, ale zawsze warto dowiedzieć się o nich więcej i zobaczyć wszystkie dostępne haki. Haki pozwalają rozszerzyć możliwości Twojego niestandardowego motywu.  

4. Dodawanie stylów za pomocą CSS

Cascading Style Sheets lub CSS definiuje wygląd treści na tworzonej przez Ciebie stronie.

Przy użyciu style.css plik, który jest już zawarty w Twoim motywie, możesz edytować dowolny ze stylów znalezionych tutaj i zapisać go, aby zobaczyć, jak zmienia Twój projekt. Domyślnie zawiera on tylko podstawowy styl.

CSS służy do umożliwienia prezentacji i rozdzielenia treści na Twojej stronie internetowej, od układu po czcionki i treść. CSS może pomóc uczynić treść na Twojej stronie bardziej dostępną i elastyczną.

Wchodzenie w szczegóły dotyczące używania stylów w motywach WordPress może być dość skomplikowane i wykracza poza zakres tego artykułu. Jeśli nie jesteś pewien, możesz chcieć poczytać więcej o CSS, zanim przejdziesz dalej.

5. Dołączanie JavaScript

Dodanie plików JavaScript do motywu, jeśli to konieczne, może zwiększyć interaktywne funkcje i możliwości oraz zapewnić lepsze funkcjonowanie witryny. Jest to szczególnie przydatne, gdy chcesz włączyć wtyczki innych firm do swoich witryn, takie jak określone odtwarzacze wideo lub audio, takie rzeczy jak suwaki, obsługa wyskakujących okienek i inne biblioteki innych firm, aby tworzyć zaawansowane funkcje.

Aby używać JavaScriptu na swojej stronie, możesz utworzyć wywołanie, korzystając ze składni podanej poniżej, aby dodać plik skryptu do motywu.

Alternatywnie możesz użyć skryptu bezpośrednio w swoim header.php plik szablonu pomiędzy meta tagami a linkiem arkusza stylów, tak jak zrobiłbyś to w przypadku strony HTML. Podczas używania go w pliku nagłówkowym, powinien wyglądać mniej więcej tak: 

Jeśli chcesz użyć JS bezpośrednio, dodaj wywołanie dla plików bezpośrednio zgodnie z poniższym. Jeśli chcesz ustawić funkcję „wyślij to znajomemu”, możesz umieścić ją pod tytułem posta. Wyglądałoby to podobnie do tego: 

" rel="bookmark">

<!--

wyślij e-mailem();

//-->

Skrypty można również umieszczać w kolejce, korzystając ze składni opisanej dalej w tym artykule.

6. Przetestuj swój motyw i wyeksportuj go

Gdy już wykonasz wszystkie powyższe czynności, nadejdzie czas na przetestowanie utworzonego przez Ciebie motywu WordPress, aby upewnić się, że działa on płynnie.

W tym celu możesz skorzystać z Test jednostkowy tematu Dane, zestaw danych pozornych, które możesz przesłać do swojej witryny. Dane składają się z wariantów stylu i różnej zawartości, co pozwala zobaczyć, jak skutecznie Twój motyw radzi sobie zarówno z przewidywalnymi, jak i nieprzewidywalnymi danymi.

Dokładnie wszystko przetestuj (zgodnie z podanym powyżej linkiem do Kodeksu), aby mieć pewność, że utworzony przez Ciebie motyw spełnia wymagane standardy i spełnia Twoje oczekiwania, zanim go wyeksportujesz.

Gdy będziesz mieć pewność, że testy wypadły pomyślnie, możesz wyeksportować motyw.

Eksportu możesz dokonać, odnajdując miejsce, w którym zainstalowałeś lokalnie środowisko programistyczne witryny.

Otwórz folder i uzyskaj dostęp  /wp-content/themes/, gdzie możesz znaleźć temat, nad którym pracowałeś.

Teraz za pomocą narzędzia do kompresji utwórz plik zip na podstawie folderu poprzez jego kompresję. Kiedy skończysz, wszystko co musisz zrobić to przesłać i zainstalować go na dowolnej stronie WordPress. Możesz również przesłać go do WordPress Katalog motywów. 

Szczegółowy przewodnik po rozwoju motywów WordPress

Teraz, gdy znasz już podstawy, w kolejnych krokach znajdziesz dodatkowe informacje na temat tworzenia motywu WordPress.

Tworzenie niestandardowych plików/katalogów motywów

Jak już wiesz, motywy WP są tworzone z różnych plików szablonów, które co najmniej zawierają: sidebar.php, nagłówek.php., footer.phpMożna je wywołać za pomocą znaczników szablonu (pobierz_nagłówek(), podczas wywoływania nagłówka, pobierz_pasek_boczny(), podczas wywoływania paska bocznego itp.).

Można również tworzyć własne wersje tych plików z niewielkimi modyfikacjami, jak pokazano poniżej: pasek boczny-{twój_szablon_niestandardowy}.php, nagłówek-{twój_szablon_niestandardowy}.php i stopka-{twój_szablon}.php. 

Możesz również wywołać znaczniki szablonu za pomocą tej samej analogii, używając nazwy szablonu jako parametru w następujący sposób:

pobierz_nagłówek( 'twój_szablon' ); 

Strony są tworzone przy użyciu różnych plików, co oznacza, że ​​możesz również tworzyć inne niestandardowe pliki szablonów i wywoływać je w dowolnym miejscu na stronie, po prostu używając pobierz_część_szablonu(). Wystarczy nadać plikowi odpowiednią nazwę i zastosować tę samą metodę, którą zastosowano w przypadku plików nagłówka, stopki i paska bocznego. 

Załóżmy, że chcesz utworzyć szablon, który będzie obsługiwał Twoją treść — wystarczy, że utworzysz plik o nazwie content.php a następnie rozszerz nazwę pliku, aby dodać konkretny układ. W tym przypadku niech to będzie zawartość-produktu.php.

Na koniec, gdy załadujesz plik szablonu do motywu, będzie on wyglądał mniej więcej tak:

get_template_part( 'zawartość', 'produkt' );.

Korzystanie z katalogów

Aby połączyć się z katalogami motywów, wystarczy użyć funkcji pobierz_plik_motywu_uri();

Ta funkcja zwróci pełny identyfikator URI do głównego folderu Twojego motywu. Możesz go użyć do odwoływania się do plików i podfolderów, korzystając z następującego przykładu:

echo get_theme_file_uri( 'images/logo.png' );

Kolejkowanie skryptów i arkuszy stylów

Tworząc własny motyw, możesz także tworzyć niestandardowe arkusze stylów i własne pliki JavaScript.

Zawsze gdy to robisz, pamiętaj, aby ładować je przy użyciu standardowej metody WordPressa. W przeciwnym razie istnieje ryzyko, że Twój motyw i wtyczki nie będą działać poprawnie w każdych okolicznościach.

Wszystko, co musisz zrobić, to utworzyć funkcję, która kolejkuje wszystkie style i skrypty. W tym celu WP tworzy zarówno uchwyt, jak i ścieżkę do znalezienia pliku i zależności (jeśli takie istnieją), a gdy to nastąpi, będziesz musiał użyć haka, aby wstawić arkusze stylów i skrypty. 

Podstawowa funkcja dla stylu kolejkowania:

wp_enqueue_style( $uchwyt, $źródło, $zależności, $wer, $media );

W celu kolejkowania skryptów:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer); 

Kolejkuj czcionki Google

Czcionki Google to doskonałe, bezpłatne źródło czcionek dla projektantów stron internetowych. Można je łatwo dodać do własnego motywu.

Najpierw musisz znaleźć czcionkę, która Ci się podoba w bibliotece czcionek Google. Gdy już znajdziesz czcionkę, z którą chcesz pracować, po prostu kliknij przycisk „Wybierz ten styl”, który przeniesie Cię na nową stronę.

Jeśli przewiniesz stronę w dół, znajdziesz instrukcję ich użycia w polu z niezbędnym kodem, który możesz dodać do swojej witryny.   

Czcionki można dodać albo standardową i zalecaną metodą, albo wybrać metodę @import CSS lub skorzystać z metody Javascript.

Możesz również dodać go do WP, umieszczając czcionkę w kolejce swojego motywu funkcje.php.pliku lub używając konkretnej wtyczki.

funkcja wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );

}

dodaj_akcję( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Jeśli chcesz możesz przeczytać więcej na jak zmienić czcionki w motywie WordPress tutaj.

Podział strony na sekcje (Header.php / Footer.php)

W większości witryn nagłówek, stopka i pasek boczny będą takie same na wszystkich stronach. To prawda, że ​​w niektórych przypadkach będziesz chciał dostosować kilka rzeczy, ale generalnie są one spójne.

Aby podzielić stronę na nagłówek i stopkę, należy skopiować i wkleić index.php strona, odpowiednie części, które powinny być w nagłówku/stopce i pasku bocznym. To zależy trochę od twojego bieżącego index.php.

Na przykład, jeżeli używasz podkreślników, nagłówek i stopka zostały już poprawnie zdefiniowane w plikach header.php i footer.php.

Kontynuujmy ten przykład, tak jakbyśmy tworzyli treść nagłówka.

W większości witryn internetowych nagłówki zawierają podstawowe style nagłówka i elementy nawigacyjne witryny.   

Zacznij od dodać przed zamknięciem . Powinieneś mieć coś takiego. Jest to oparte na motywie startowym z podkreśleniami, ale możesz chcieć dostosować nagłówek w razie potrzeby, aby utworzyć własne dostosowania.

header.php

 

/ **
* Nagłówek naszego motywu
*
* To jest szablon, który wyświetla wszystkie sekcja i wszystko aż do
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @pakiet Daves_Theme
*/

?>

>

">

>

logo_niestandardowe();
jeśli ( is_front_page() && is_home() ) :
?>
" rel="home">

inaczej:
?>
" rel="home">

koniec;
$daves_theme_description = get_bloginfo( 'opis', 'wyświetlacz' );
jeśli ( $daves_theme_description || is_customize_preview() ) :
?>

wp_nav_menu(
tablica (
'theme_location' => 'menu-1',
'menu_id' => 'menu-główne',
)
);
?>

 

Tę samą procedurę należy zastosować w przypadku stopki.

Korzystanie z Functions.php

Temat functions.php Plik jest plikiem szablonu w motywie WP, który pełni rolę „głównego” pliku ładującego się automatycznie zarówno dla administratorów, jak i stron front-end witryny.

Zwykle definiuje funkcje, akcje, filtry i klasy, których inne pliki szablonów używają w motywie. Może być również używany do rozszerzania funkcjonalności motywu poprzez dodatkowe haki, akcje i filtry.

Plik functions.php można łatwo znaleźć w folderze motywu. Można dodawać wbudowane funkcje WP i zwykłe funkcje PHP do filtrów i haków, które są już zdefiniowane w rdzeniu WP.

Możesz po prostu utworzyć plik functions.php, tworząc plik zwykłego tekstu, który nazwiesz functions.php i umieszczając go w katalogu motywu. Za pomocą tego pliku możesz włączyć formaty postów, menu nawigacyjne i miniatury postów wraz z akcjami i filtrami WP. 

Sprawdź plik functions.php z motywu startowego, aby zobaczyć kilka przykładów tego, co można zrobić. Możesz również wyszukać artykuły, które używają pliku functions.php, rozszerzającego funkcje witryny WordPress za pomocą pliku functions.

Korzystanie z głównych ustawień w motywie

Ustawienia główne umożliwiają zmianę niektórych ustawień motywu bez modyfikowania plików motywu lub konieczności zmiany kodu. Szczegółowy opis tego wykracza poza zakres tego artykułu, więc odsyłamy do kilku artykułów, które szczegółowo wyjaśniają tę koncepcję.

1. Ustawienia API opis w WordPress Codex.
2. Kompletny przewodnik po Ustawienia API WordPressa

Pętla WordPressa

Jak już wcześniej omawialiśmy, Loop to domyślny mechanizm używany przez WP do wyświetlania postów za pomocą plików szablonów.

Wykorzystując mechanizm pętli, WP pobiera posty na bieżących stronach i formatuje je zgodnie z „instrukcjami” w pętli.

Zasadniczo program przechodzi kolejno przez posty na bieżących stronach, wykonując akcję określoną w motywie. 

Możesz użyć pętli do

• Wyświetlanie treści i komentarzy
• Wyświetlanie tytułów i fragmentów postów na stronie głównej bloga
• Wyświetlanie danych z pól niestandardowych i niestandardowych typów wpisów
• Wyświetlaj zawartość na poszczególnych stronach korzystając z tagów szablonów.
• Dostosuj pętlę, aby wyświetlać i manipulować treścią w plikach szablonów

Jeśli używasz motywu startowego Underscores, znajdziesz pętlę WordPress używaną w plikach single.php i page.php. Możesz chcieć przejrzeć te pliki, aby zrozumieć, jak to działa i/lub może być używane.

 

pobierz_nagłówek();
?>

podczas gdy ( have_posts() ) :
post();

get_template_part( 'części-szablonu/zawartość', get_post_type() );

nawigacja_po_postach(
tablica (
'prev_text' => ' ' . esc_html__( 'Poprzedni:', 'daves-theme' ) . ' %title ',
'next_text' => ' ' . esc_html__( 'Dalej:', 'daves-theme' ) . ' %title ',
)
);

// Jeśli komentarze są otwarte lub mamy co najmniej jeden komentarz, załaduj szablon komentarza.
jeśli ( comments_open() || get_comments_number() ) :
komentarze_szablon();
koniec;

endwhile; // Koniec pętli.
?>

pobierz_pasek_boczny();
pobierz_stopkę();

 

Menu i strony

Menu Główne

Możesz wybrać swoje główne menu w WP Menu Editor (znajdującym się w Appearance - Menu). Twój motyw może obsługiwać więcej niż jedno menu nawigacyjne w różnych miejscach w Twoim motywie. 

Istnieją również sposoby na zarejestrowanie dodatkowych menu, na przykład możesz utworzyć menu „stopki”.

Aby dowiedzieć się, jak to zrobić, zajrzyj do kodeksu WordPressa: https://codex.wordpress.org/Navigation_Menus

Strona niestandardowa

WP domyślnie umożliwia tworzenie stron i postów. Kontroluje wygląd strony poprzez page.php plik szablonu.

Chociaż ten plik dotyczy wszystkich pojedynczych stron w Twoim motywie, możesz modyfikować ich układ i wygląd. Edycja tych niestandardowych szablonów stron w WP wymaga trochę HTML, PHP i CSS, ale raz jeszcze, powinno być to dość proste.

index.php

Ten szablon jest domyślnym szablonem zapasowym w WordPressie służącym do wyświetlania dowolnej strony, gdy hierarchia szablonów nie może znaleźć innej strony odpowiadającej podanym parametrom.

Będziesz musiał użyć tego, aby obsłużyć wszystkie elementy, których nie obsługują pozostałe pliki szablonu.

Archiwum.php

archive.php Szablon służy do wyświetlania tagów, autorów, kategorii i innych niestandardowych stron archiwum.

Utworzenie strony archiwum może okazać się dobrym sposobem na zebranie całej zawartości na jednej stronie.

Kategoria

W rozwoju stron internetowych WP nie jest niczym niezwykłym używanie różnych szablonów dla kategorii, niestandardowych typów postów, taksonomii i tagów. Tworząc różne kategorie szablonów, możesz uwzględnić różne funkcje na każdej stronie kategorii.   

Typowy szablon category.php będzie wyglądał następująco:

/ **

* Prosty szablon kategorii

*/

pobierz_nagłówek(); ?>

// Sprawdź, czy są jakieś posty do wyświetlenia

jeśli (masz_posty()): ?>

Kategoria:

// Wyświetl opcjonalny opis kategorii

 jeśli ( opis_kategorii() ) : ?>

// Pętla

podczas gdy ( have_posts() ) : the_post(); ?>

" rel="bookmark" title="Stały link do <?php the_title_attribute(); ?>">

przez

 <?php

  comments_popup_link( 'Brak komentarzy', '1 komentarz', '% komentarzy', 'comments-link', 'Komentarze zamknięte');

?>

<?php endwhile;

w przeciwnym razie: ?>

Niestety, nie znaleziono postów odpowiadających Twoim kryteriom.

Pasek boczny.php

Pasek boczny to obszar, w którym możesz umieścić swoje widżety w motywie WP. Najczęściej znajduje się po prawej stronie lub pod treścią na wszystkich stronach.

Paski boczne służą do wyświetlania elementów, które nie są bezpośrednio powiązane z treścią wpisu lub strony, ale na przykład linków do różnych obszarów witryny, formularzy rejestracyjnych, reklam, linków do mediów społecznościowych i tak dalej.

Pasek boczny jest zazwyczaj używany w połączeniu z widżetami WP.   

Oto jak możesz dodać do swojego motywu pasek boczny gotowy na widżety:

funkcja wpb_widgets_init() {

    zarejestruj_pasek_boczny( tablica(

        'name' => __( 'Główny pasek boczny', 'wpb' ),

        'id' => 'pasek boczny-1',

        'description' => __( 'Główny pasek boczny pojawia się po prawej stronie na każdej stronie, z wyjątkiem szablonu strony głównej', 'wpb' ),

        'przed_widżetem' => ' ',

        'after_widget' => ' ',

        'przed_tytułem' => ' ',

        'after_title' => ' ',

    ));

    zarejestruj_pasek_boczny( tablica(

        'name' =>__( 'Pasek boczny strony głównej', 'wpb'),

        'id' => 'pasek boczny-2',

        'description' => __( 'Pojawia się na statycznym szablonie strony głównej', 'wpb' ),

        'przed_widżetem' => ' ',

        'after_widget' => ' ',

        'przed_tytułem' => ' ',

        'after_title' => ' ',

    ));

    }

dodaj_akcję( 'widgets_init', 'wpb_widgets_init' );

Pojedyncze strony postów (single.php)

Załóżmy, że chcesz użyć innego szablonu lub układu dla konkretnego artykułu na swojej stronie internetowej.

W tym celu musisz utworzyć niestandardowy szablon pojedynczego wpisu. Jest to dość podobne do tworzenia niestandardowych stron. Postępując zgodnie z podstawowymi wytycznymi tam zastosowanymi, możesz łatwo tworzyć również pojedyncze wpisy. 

Tworzenie wyróżnionego obrazu

Aby dodać obsługę wyróżnionych obrazów, wystarczy dodać następujący kod do motywu functions.php file:

add_theme_support ("post-miniatury"); 

Teraz możesz przejść do swoich stron lub postów i sprawdzić, czy opcja wyróżnionego obrazu jest dostępna. Istnieje prawdopodobieństwo, że WP nie wyświetli go automatycznie, więc aby wyświetlić obraz, możesz potrzebować dokonać niewielkich zmian w szablonach, w których wyświetlane są strony i posty, dodając ten kod:

Paginacja 

Ta funkcja umożliwia Ci przeglądanie stron z treścią w tę i z powrotem. Możesz użyć tej funkcji podczas przeglądania list postów z większą liczbą wpisów niż mieści się na jednej stronie lub gdy chcesz podzielić dłuższe posty za pomocą etykietka.

Najprostszą formą paginacji jest umieszczenie funkcji posts_nav_link(). w szablonie po pętli. Generuje to linki zarówno do następnej strony postów (gdy dzielisz listy postów), jak i do poprzednich postów, jeśli ma to zastosowanie.  

posty_link_nawigacyjny();

Możesz również użyć next_posts_link i prev_posts_link, aby kontrolować, gdzie będą wyświetlane linki do poprzednich i następnych postów.

link_następnego_postu();

link_do_poprzednich_postów();

Komentarze 

Komentarze są istotną częścią każdego bloga lub strony. Dają odwiedzającym witrynę możliwość skontaktowania się z Tobą, przekazania opinii, zadania pytań i ogólnie, stworzenia głębszej więzi z Twoją witryną i treścią.

Wszystkie komentarze są wyświetlane w obszarze administracyjnym. Możesz dodać kilka funkcji, np. umożliwienie komentowania tylko określonym użytkownikom lub moderowanie komentarzy.

Za pomocą pliku comments.php możesz dostosować wygląd komentarzy w swoim motywie.

Inne strony i pliki 

W zależności od potrzeb możesz znaleźć lub utworzyć różne strony i pliki, a następnie dostosować je do swoich preferencji, stosując te same lub podobne wytyczne, o których mowa powyżej. 

Korzystanie z motywu nadrzędnego/podrzędnego

Temat nadrzędny

Motywy nadrzędne w WP to motywy, które zostały zadeklarowane jako „nadrzędne” przez inne motywy, czyli motywy potomne.

Motyw potomny jest używany, aby umożliwić projektantom i deweloperom tworzenie dostosowań motywów bez przerywania możliwości aktualizacji motywu nadrzędnego. Dzieje się tak, ponieważ jeśli deweloper zmieni oryginalne pliki motywu, to podczas wykonywania aktualizacji motywu zmiany zostaną utracone.

Jednakże motywy nadrzędne przekazują swoje funkcje i funkcjonalności motywom podrzędnym. Deweloperzy mogą swobodnie wprowadzać zmiany w funkcjonalności i funkcjach motywu podrzędnego bez wpływu na możliwość aktualizacji motywu nadrzędnego.

Motyw dziecka

Motywy potomne dziedziczą funkcjonalność motywów nadrzędnych. Są one używane głównie do modyfikowania istniejącego motywu bez utraty wcześniej dodanego niestandardowego stylu podczas aktualizacji motywu.  

Motywy potomne przyspieszają proces tworzenia, ponieważ można łatwo wprowadzać w nich modyfikacje.

Większość motywów utworzy motyw potomny i udostępni go wraz z motywem, dzięki czemu każdy, kto używa motywu, może go dostosować za pomocą motywu potomnego. Definiujemy sposób tworzenia motywu potomnego, w naszym artykule tutaj.

Korzystanie z frameworków programistycznych

Termin ten odnosi się do bibliotek kodu wykorzystywanych podczas tworzenia motywów. 

Ramy programistyczne zostały stworzone, aby służyć jako szablony motywów nadrzędnych ze wszystkimi funkcjami. Zasadniczo, podobnie jak w przypadku motywów nadrzędnych, ramy pozostają nietknięte, podczas gdy programiści mogą przeprowadzać modyfikacje w motywach podrzędnych.

Dzięki temu rozwój jest szybszy i łatwiej jest pozbyć się błędów w określonych ramach motywów. Do godnych uwagi ram programistycznych należą Ramy kompozycji Genesis, Themify i Divi od Elegant Themes.

Podsumowanie, jak utworzyć motyw WordPress

Powyżej przedstawiono szczegółowy przewodnik krok po kroku, który pokaże Ci, jak rozpocząć tworzenie własnego, spersonalizowanego motywu WordPress.

Podsumowując, chociaż musisz dobrze rozumieć WordPressa i PHP, nie jest to aż tak wymagający proces. Znajomość podstaw tworzenia stron internetowych jest ważna, a rdzeń WordPressa możesz zrozumieć bardziej szczegółowo w miarę rozwoju. Jeśli nie czujesz się jeszcze na siłach, nie spiesz się i trochę poeksperymentuj.

Gdy popełnisz kilka błędów, zaczniesz uczyć się coraz więcej. Dobrze jest również przyjrzeć się bazie kodu innych popularnych motywów, aby zrozumieć, co robią i uzyskać dobry pomysł na praktyki, które mają sens.

Jeśli masz jakieś pytania, daj nam znać w komentarzach poniżej.