To będzie zabawa tutorial, w którym sprawdzamy, jak stworzyć swój własny motyw WordPress od podstaw. W rzeczywistości zaczniemy od absolutnie zero plików i zero linii kodu. Jedynym sposobem na zrozumienie, jak działają motywy WordPress, jest naprawdę wskoczenie na niski poziom i samodzielne robienie każdej rzeczy. Tak, kuszące jest unikanie tego, ponieważ możesz sprawić, że WordPress zrobi wszystko za ciebie bez zrozumienia kodu, który go zasila., Może to być PHP, JavaScript, CSS lub nawet podstawowy HTML. Pod koniec tego samouczka z motywem WordPress krok po kroku zrozumiesz, jak wszystko pasuje do siebie i jak z łatwością zginać WordPress do swojej woli.
istnieje tak wiele darmowych motywów dostępnych dla ciebie, gdy prowadzisz stronę internetową WordPress. Poza darmowymi motywami możesz również zapłacić premię za profesjonalnie wykonane motywy WordPress, które wyglądają świetnie i mają fantastyczne funkcje. Po co więc uczyć się, jak tworzyć własny motyw od zera?, Odpowiedź jest taka, że bez względu na to, jakiego motywu używasz, nadejdzie czas, kiedy będziesz chciał wprowadzić proste zmiany w swojej witrynie. Niektóre z tych zmian mogą być uwzględnione przez prostą wtyczkę lub widget. Wiele razy jednak bardziej sensowne jest zrozumienie, co chcesz zmienić, jak to zmienić i unikanie zmieniania witryny WordPress w bałagan wtyczek i dodatków, które stają się nieporęczne. Dzięki odrobinie wiedzy na poziomie podstawowym będziesz mieć pewność, że zmodyfikujesz swój motyw lub po prostu zbudujesz swój własny od zera., Będziesz wiedział, który plik edytować i jaki kod Dodać lub zmodyfikować, aby uzyskać pożądany efekt.
Krok 1: Utwórz folder do przechowywania plików motywów.
jeśli zamierzamy tworzyć motywy, musimy wiedzieć, gdzie znajdują się pliki składające się na motyw WordPress w instalacji WordPress. To całkiem proste. Wiemy, że instalacja WordPress zazwyczaj ma katalog główny o nazwie wordpress. Oto jak wygląda nasz katalog główny w PHP Storm.,
ten katalog zawiera następujące pliki i foldery:
pliki
foldery
- wp-admin
- wp-content
- wp-includes
folder, który najbardziej nas teraz interesuje, to folder wp-content. W folderze wp-content znajduje się folder o nazwie motywy. Wiesz do czego służy ten folder? Tak, to prawda! Jest to folder, który zawiera jeden lub więcej motywów, których chcesz użyć w swojej witrynie WordPress., W tym folderze z motywami znajdują się trzy dodatkowe foldery twentyfifteen, twentysixteen i twentyseventeen. Te foldery zawierają trzy motywy, które domyślnie są dostarczane przez WordPress. Zauważ, że poniżej znajduje się również folder o nazwie customtheme. Śmiało i utwórz ten folder również w swojej instalacji, ponieważ tutaj będziemy tworzyć nasz motyw WordPress od podstaw.
Krok 2: Utwórz styl.css i indeks.php w niestandardowym folderze motywów
teraz wiemy, gdzie są pliki motywów WordPress w systemie plików., Stworzyliśmy również nowy folder o nazwie customtheme w naszym folderze themes. Teraz utworzymy dwa puste pliki w tym katalogu. Jeden z nich nazywa się indeksem.php, a drugi nazywa się styl.css.
pozwól nam teraz wypełnić te pliki z niezbędnym minimum, musimy uzyskać nowy motyw będzie w WordPress.
style.css
WordPress faktycznie czyta komentarze, które umieszczasz w stylu.plik css. W tym miejscu należy podać konkretne informacje na temat budowanego motywu.
styl.,css to plik arkusza stylów (CSS) wymagany dla każdego motywu WordPress. Kontroluje prezentację (projekt wizualny i layout) stron internetowych.
w naszym fragmencie tutaj po prostu przypisujemy nazwę motywu, autora, Uri autora i numer wersji naszego motywu.,
|
1
2
3
4
5
6
|
indeks.,php
w tym pliku chcemy po prostu wysłać coś na ekran, aby udowodnić, że nasz niestandardowy motyw działa.
|
1
|
<h1>niestandardowy motyw!</h1>
|
Świetna robota! Wierz lub nie, stworzyłeś swój pierwszy motyw WordPress.,
Krok 3: aktywuj swój motyw z pulpitu WordPress
w tym momencie możemy odwiedzić nasz pulpit WordPress i przejść do Wygląd-> motywy i lo i oto, widzimy nowy motyw stworzyliśmy.
możemy kliknąć na „szczegóły motywu”, aby zapoznać się z naszym niestandardowym motywem i znaleźć informacje, które wprowadziliśmy do stylu.plik css zadziałał. Widzimy, że mają nazwę customtheme, z wersją 1.0, autor Vegibit, i link do URI mieliśmy pod warunkiem. Bardzo fajne.,
a teraz chwila prawdy! Śmiało i kliknij „Aktywuj” na nowym customtheme, a następnie odwiedź witrynę. Nie wygra żadnej nagrody Webby, ale mamy dobry start w nowym niestandardowym temacie!
Krok 4: Dodaj kod, aby wyświetlić tytuł postu i tekst postu
pozwoliliśmy sobie wypełnić kilka przykładowych postów w bazie danych, abyśmy mogli pracować z tymi danymi podczas tego samouczka. W tej chwili nasz motyw po prostu wyświetla niestandardowy motyw!, do strony, gdy odwiedzamy naszą stronę bez względu na to, ile postów znajduje się w bazie danych. Przejdźmy teraz do pobierania niektórych danych z bazy danych i wysyłania ich na stronę. W szczególności chcemy pobrać tytuł postu i zawartość postu wszystkich postów i wyświetlić je na stronie głównej. Spróbujmy teraz. Najpierw zobaczmy, co mamy dla postów w pulpicie nawigacyjnym WordPress.
wykorzystanie pętli WordPress
teraz możemy porozmawiać trochę o pętli WordPress. Pętla WordPress jest naprawdę silnikiem, który sprawia, że WordPress działa., To dzięki tej pętli twórcy motywów sprawdzają posty i wyświetlają je na stronie w razie potrzeby. Jeśli stosuje się do formatu w następujący sposób. Jeśli baza danych ma posty, zapętlmy je, dopóki są jeszcze posty, w przeciwnym razie powiadomimy użytkownika, że nie ma postów. Wygląda to tak w kodzie PHP.,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<? php
if ( have_posts ()):
while ( have_posts() ) : the_post ();? >
<?,php endwhile;
else:
echo '<p>nie ma żadnych postów!</p>”;
endif;
?>
|
zauważ, że pętla wykorzystuje dwie funkcje w swojej najbardziej podstawowej formie. Są to have_posts() i the_post (). Funkcja have_posts () robi tylko jedno. Informuje, czy w bazie danych są jakieś posty do zapętlenia., Ta funkcja zwróci albo true lub false I to wszystko. Jeśli zwróci true , wtedy dostępne są posty do pętli. Jeśli zwraca false , wtedy nie ma żadnych postów do pętli. Inna funkcja, the_post () niczego nie zwraca. Jego zadaniem jest przygotowanie WordPressa do wysyłania postów. W szczególności pobiera Następny post, ustawia post, ustawia właściwośćin_the_loop natrue., Na razie nasza strona nadal nie wyświetli żadnych informacji o naszych wpisach na blogu, ale możemy to zaktualizować teraz w naszym indeksie.plik php.
Ok spoko. Teraz wykorzystaliśmy dwie dodatkowe funkcje WordPress, the_title () i the_content (). Najczęściej te funkcje są używane wewnątrz pętli i to, co robią, to pobieranie tytułu i zawartości każdego posta, gdy pętla Itera się nad każdym z nich w bazie danych. Tak więc jak pętla działa, natknie się na pierwszy post., W tym czasie funkcja the_title() wyświetli tytuł posta na stronę, a the_content () wyświetli treść tego posta na stronę. Przy następnej pętli funkcje te ponownie pobierają następny tytuł i zawartość i wysyłają je na stronę. Więc z nimi na miejscu, powinniśmy teraz zobaczyć pewne informacje o naszych postach wysyłanych na ekran. Spróbujmy! Odwiedzamy http://wordpresstutorial.dev I widzimy, że działa!,
Krok 5: Dodaj Link do każdego posta
co z linkami do każdego pojedynczego posta, abyśmy mogli przeglądać post na własną rękę, a nie jako część tylko strony głównej. Możemy to zrobić dość łatwo, ponownie za pomocą specjalnych funkcji, które zapewnia WordPress. Do tego zadania możemy użyć funkcji the_permalink (). Możemy zaktualizować nasz kod w ten sposób:
teraz możemy kliknąć na każdy pojedynczy tytuł postu i przejść do strony, która ma tylko ten jeden post. Bardzo fajne!,
Krok 6: Dodaj nagłówek i stopkę do niestandardowego motywu
tytuł i treść postu są kluczowe w tworzeniu dobrego motywu. Prawie równie ważne jest posiadanie sekcji nagłówka i stopki motywu. Sekcje te zawierają treści, które są zawsze widoczne na wszystkich stronach witryny. Te sekcje znajdują się nad i pod treścią postu. Aby to zrobić, zgadliście, skorzystamy ze specjalnych funkcji dostarczonych przez WordPress, aby uzyskać nagłówek i uzyskać stopkę. Widzisz już jakiś wzorzec?, Prawie wszystko, co możesz zrobić jako twórca motywów w WordPress, zostało już zrobione za pomocą tych niestandardowych funkcji. Przekonasz się więc, że opłaca się zapamiętać te powszechnie używane funkcje w tworzeniu motywów WordPress. Teraz dodajmy funkcje get_header () i get_footer () do naszego pliku motywu.
no proszę.! Widzimy, że nasz niestandardowy motyw ma teraz obszar nagłówka, a także obszar stopki., W nagłówku znajduje się nazwa i slogan witryny, podczas gdy w stopce widzimy znany tekst, WordPress Tutorial jest dumnie zasilany przez WordPress. Są to domyślne opcje nagłówka i stopki podczas korzystania z tych funkcji. A jeśli chcemy mieć niestandardowy nagłówek i stopkę? Już się robi!
od 2 plików motywów do 4
do tej pory w tym samouczku mamy dwa pliki, które żyją w naszym folderze customtheme (który sam znajduje się w folderze motywów). Te pliki są stylowe.css i indeks.php. W tym momencie będziemy musieli dodać więcej plików, aby przejść dalej., Śmiało utwórz dwa nowe pliki w folderze customtheme. Pliki te będą wygodnie nazywane nagłówkiem.php i stopka.php.
teraz pliki te nadpisują domyślne układy nagłówka i stopki, które są domyślnie dostarczane podczas wywoływania funkcji get_header() lub get_footer (). W rzeczywistości, jeśli odświeżymy naszą stronę, wygląda na to, że nagłówek i stopka zniknęły. Dzieje się tak dlatego, że nie dodaliśmy jeszcze żadnych znaczników do tych plików. Tylko dla grins, ustaw pliki tak, aby to przetestować.
nagłówek.,php
|
1
2
|
<h2>The Header!</h2>
<hr>
|
footer.,php
|
1
2
|
<hr>
<h2>The Footer!</h2>
|
Working with header.,php
Nasz powyższy przykład zadziałał świetnie i pokazuje nam, jak ten plik działa na najbardziej podstawowym poziomie. Nagłówek.plik php jest jednak dość ważny, więc nie przesadzajmy zbyt szybko z jego szczegółami! To miejsce, w którym dołączasz kod, do którego wszystkie strony w Twojej witrynie będą musiały uzyskać dostęp w taki czy inny sposób. Na początek, wszystkie strony HTML będą miały doctype. Można to określić w tym pliku. Ponadto wszystkie strony będą miały otwierający znacznik html, sekcję head i otwierający znacznik body. Wszystko to można znaleźć w nagłówku.plik php., Szybko dodajmy niektóre z tych rzeczy, z których skorzystałyby wszystkie strony internetowe. Skorzystamy również z kilku nowych funkcji WordPress. Będą to language_attributes (), bloginfo () i body_class ().
nagłówek.php
Jeśli ponownie załadujemy stronę, a następnie obejrzymy źródło strony w naszej przeglądarce, możemy zorientować się, co te funkcje robią. Podkreślamy linie, które mają wyjście, które pochodziły z tych funkcji poniżej:
ponownie możemy zobaczyć bardzo liberalne korzystanie z funkcji WordPress podczas opracowywania własnych motywów w WordPress., W rzeczywistości nie napisaliśmy jeszcze żadnego kodu niestandardowego. Po prostu uczymy się, co mogą nam zaoferować różne funkcje WordPress, a następnie wprowadzamy je do naszego niestandardowego motywu.
w tym wp_head ()
wp_head() jest rodzajem specjalnej funkcji, gdy pracujesz z motywami WordPress. To nie jest tak proste, jak wszystkie inne, na które patrzyliśmy do tej pory. Celem tej funkcji jest sfinalizowanie wyjścia w sekcji<head> twojego nagłówka.plik php., W rzeczywistości ma to przejść tuż przed zamknięciem </head> tag. Staje się to ważne, gdy zaczniesz dodawać różne wtyczki do witryny. Drukuje skrypty lub dane w znaczniku head na froncie. Dobrą praktyką jest zawsze dołączanie wp_head() do swoich motywów, ponieważ wiele innych wtyczek może polegać na tym hooku, aby dodać style, skrypty lub elementy meta do<head> obszar witryny. Dodamy go jako taki tutaj:
header.php
uzupełnianie stopki.,php
skończyliśmy dodawać podstawy tego, czego będziemy potrzebować w nagłówku.plik php. Teraz zaokrąglmy stopkę.plik php. To kilka rzeczy, które musimy zrobić. Przypomnij to w naszym nagłówku.plik php mamy otwierające znaczniki html i body. W pewnym momencie trzeba je zamknąć. Stopka.plik php jest do tego idealnym miejscem. Tak więc dodamy zamykające </html> I </body> tagi oprócz wywołania funkcji wp_footer ().
stopka.,php
|
1
2
3
4
5
6
7
|
<footer class=”site-footer”>
<p><?php bloginfo( 'name' ) ?,></p>
</footer>
<?php wp_footer() ?,>
</body>
</html> |
Zmiana informacji o stronie w pulpicie nawigacyjnym WordPress
możesz się zastanawiać, dlaczego musieliśmy wykorzystać wszystkie te fantazyjne funkcje, aby zbudować nasz motyw. Na przykład, gdy chcieliśmy podać nazwę i slogan naszej witryny, skorzystaliśmy z funkcji bloginfo() przekazującej parametry nazwy i opisu., Powodem tego jest to, że zazwyczaj nigdy nie chcesz twardego kodowania tych wartości w swojej witrynie. To informacja, która może się zmienić. Dodatkowo, jeśli udostępnisz swój motyw publicznie, będą mieli własną nazwę i tagline dla swojej witryny. Powinni być w stanie po prostu odwiedzić panel administracyjny w WordPress i zaktualizować swoje ogólne Ustawienia, aby automatycznie wypełniać te dane.
Tworzenie linku do tytułu strony głównej
Większość motywów oferuje możliwość kliknięcia na tekst tytułu strony internetowej i skierowania użytkownika na stronę główną strony., W ten sposób, bez względu na to, gdzie użytkownik może być na stronie, zawsze może kliknąć ten tekst tytułu i wrócić do głównej strony witryny. Dodajmy ten link teraz w nagłówku.php.
Krok 7: Dodaj funkcję.plik php do Twojego motywu
w tym momencie mamy cztery pliki w naszym niestandardowym motywie. To są indeksy.php, style.css, header.php i stopka.php. Prawdopodobnie następnym najważniejszym plikiem, który musimy mieć, są funkcje.plik php.
funkcje.plik php w WordPress robi wiele rzeczy dla Twojego motywu. Jest to plik, w którym umieszczasz kod, aby zmodyfikować domyślne zachowanie WordPressa., Możesz prawie myśleć o funkcjach.php jako forma wtyczki do WordPressa z kilkoma kluczowymi punktami do zapamiętania:
- nie wymaga unikalnego tekstu nagłówka
- przechowywanego w folderze, który zawiera pliki motywu
- wykonuje tylko wtedy, gdy w aktualnie aktywowanym katalogu motywu
- stosuje się tylko do bieżącego motywu
- może wywoływać funkcje PHP, funkcje WordPressa lub funkcje niestandardowe
jedną z rzeczy, których bardzo potrzebujemy w naszym motywie, jest lepsza stylizacja! Stwórzmy funkcję w naszych funkcjach.plik php zawierający styl.plik css do naszego motywu., Oto, jak możemy osiągnąć ten cel.
Ten fragment kodu będzie zawierał lub uaktywnił arkusz stylów naszego niestandardowego motywu. Teraz możesz się zastanawiać, dlaczego używamy niestandardowej funkcji, gdy wydaje się, że możemy równie łatwo ręcznie połączyć się z arkuszem stylów w nagłówku.plik php. Cóż, sprowadza się to do zrobienia trochę więcej pracy z góry na większy zwrot z wysiłku później. Ponieważ motywy stają się bardziej złożone i dodawane są kolejne zasoby, z przyjemnością będziesz mieć tę jedną funkcję, która może obsłużyć wszystkie ciężkie podnoszenie.,
teraz nadszedł czas, aby rzeczy wyglądały trochę ładniej. Po pierwsze, dodajmy opakowanie <div> z klasą kontenera. Otwarcie <div> będzie w nagłówku.php, podczas gdy zamknięcie <div> będzie w stopce.php. Będziemy również owinąć wyjście post w indeksie.w tym celu prosimy o zapoznanie się z poniższym opisem:
Krok 8: Dodaj styl do nagłówka motywu
.php
dodanie otworu <div> do nagłówka.plik php.
stopka.php
dodanie zamknięcia </div> do stopki.plik php.
indeks.php
owijanie wyjścia posta za pomocą<artykuł> znacznik
styl.,css
na koniec dodajemy kilka różnych ulepszeń stylu CSS, aby motyw wyglądał nieco ładniej.
kiedy odwiedzamy naszą stronę testową teraz w przeglądarce, widzimy, że motyw WordPress, który opracowaliśmy krok po kroku w tym samouczku, wygląda całkiem nieźle!
WordPress Theme Development Tutorial krok po kroku podsumowanie
przejrzyjmy wszystko, czego nauczyliśmy się w tym podstawowym, krok po kroku WordPress theme tutorial dla początkujących., Nauczyliśmy się, jak stworzyć nasz pierwszy niestandardowy motyw w WordPress, tworząc nasz własny folder w folderze motywy naszej instalacji WordPress. W tym folderze dodaliśmy różne pliki, które odpowiadają różnym sekcjom witryny. W naszym samouczku zaczęliśmy od gołych minimów, które powinieneś mieć w motywie WordPress. W przyszłości dodałbyś do tego folderu o wiele więcej plików niż to, co omówiliśmy. Przejrzyjmy każdy plik, który stworzyliśmy w tym samouczku i co dla nas zrobili.
- style.,css ten plik jest miejscem, w którym dodajesz komentarze css, aby WordPress znał pewne informacje na temat Twojego niestandardowego motywu. Posiada również niestandardową stylizację css, którą zastosujesz do swojego motywu.
- indeks.php ten plik kontroluje html i ogólne wyjście motywu. Jest to główny plik używany do wyprowadzania danych na stronie głównej.
- nagłówek.,php pozwala określić obszar do przechowywania ważnych informacji o swojej stronie internetowej w <head> oraz otwarcie <html>, iv id=”bb63e1f9eb”
body>, and<div class=”container”>tagi.
- stopka.php stopka zamknie wszystkie otwierane znaczniki, które podałeś w obszarze nagłówka, dodatkowo dając Ci miejsce do wywołania funkcji wp_footer ().
- funkcje.,php pozwala na wywoływanie funkcji, zarówno PHP, jak i wbudowanego WordPressa, a także definiowanie własnych funkcji w celu zmiany domyślnych zachowań WordPressa
więc masz to! Udało nam się stworzyć w pełni funkcjonalny niestandardowy motyw WordPress z tylko plikami 5. Daje nam to wiedzę na poziomie podstawowym, aby budować bardziej zaawansowane motywy i funkcje WordPress. Świetna Robota!
