Rozwój WordPress dla średnio zaawansowanych użytkowników: tworzenie motywów w szczegółach

Chcesz przenieść swoją grę WordPress na zupełnie nowy poziom? Chcesz dalej rozwijać swoje umiejętności PHP i dodawać bardziej złożone i ekscytujące funkcje do motywów i wtyczek?

Witamy w naszej najnowszej serii, rozwój WordPress dla średnio zaawansowanych użytkowników. Ta seria jest kontynuacją naszych popularnych samouczków dotyczących tworzenia WordPressa dla początkujących, które wprowadzają cię w podstawy tworzenia stron internetowych za pomocą WordPressa, jak rozpocząć kodowanie za pomocą PHP oraz budowanie motywów i wtyczek.

W tej siedmiotygodniowej serii podbijamy poziom, aby naprawdę sprawdzić swoje umiejętności. Dowiesz się jak:

• Opracuj motyw WordPress z plikami dołączonymi, częściami szablonów, tagami szablonów, a także haczykami akcji i filtrów
• Dodaj funkcjonalność dostosowywania do swojego motywu
• Tworzenie wtyczek przy użyciu najlepszych praktyk kodowania
• Dodawanie złożonych, niestandardowych zapytań i pętli do motywów i wtyczek
• Twórz i pracuj z niestandardowymi typami postów
• Praca z metadanymi, w tym metadanymi post (lub niestandardowymi polami) i innymi metadanymi, np. metadanymi autora, oraz
• Przetłumacz swój kod i przygotuj go do wydania

Kiedy przejdziesz przez tę serię i zastosujesz to, czego się nauczyłeś, wyjdziesz z drugiej strony kompetentnym programistą WordPress, gotowym do tworzenia własnych motywów i wtyczek i rozpowszechniania ich wśród innych użytkowników, a nawet sprzedaży witryn zbudowanych na nich klientom.

Uwaga: ważne jest, abyś miał praktyczną znajomość PHP, ponieważ jest to podstawowy język WordPress i będę odnosił się do fragmentów kodu w całej tej serii.

Zaczynajmy.

Przegapiłeś tutorial z naszej serii WordPress Development for Intermediate Users? Tutaj możesz nadrobić wszystkie 7 postów:

• Rozwój WordPress dla średnio zaawansowanych użytkowników: tworzenie motywów w szczegółach
• Rozwój WordPress dla średnio zaawansowanych użytkowników: przygotowanie motywów do dostosowania
• Rozwój WordPress dla średnio zaawansowanych użytkowników: budowanie wtyczek
• Rozwój WordPress dla średnio zaawansowanych użytkowników: niestandardowe typy postów i taksonomie
• Rozwój WordPress dla średnio zaawansowanych użytkowników: zapytania i pętle
• Rozwój WordPress dla średnio zaawansowanych użytkowników: niestandardowe pola i metadane
• Rozwój WordPress dla średnio zaawansowanych użytkowników: Internacjonalizacja

To prawda, mnóstwo wiedzy WordPress, recenzja, opinie instruktorów i certyfikacja, za darmo dla członków WPMU DEVRozpocznij Naukę

Zanim Zaczniesz

Ten kurs zakłada, że wcześniej kodowałeś dla WordPressa i masz podstawową wiedzę na temat tego, jak działają motywy i wtyczki. Jeśli nie opracowałeś wcześniej dla WordPressa lub chcesz odświeżyć, zdecydowanie polecam przeczytanie WordPress Development dla początkujących, który da Ci wszystko, co musisz wiedzieć przed rozpoczęciem tej serii.

Będziesz także potrzebował dostępu do kilku rzeczy, abyś mógł podążać za mną i pracować ze mną. Są to:

• Rozwój instalacji WordPress. Polecam pracę na twojej lokalnej maszynie
• Edytor kodu z dostępem FTP, jeśli pracujesz zdalnie (co w końcu zrobisz)
• Jeśli edytor kodu nie ma dostępu FTP, klient FTP

Celowo nie podałem ci linków, które pomogą Ci znaleźć te wszystkie rzeczy-zakładam, że jesteś już na poziomie, na którym wiesz o tego typu rzeczach i możesz je znaleźć sam.

W tym samouczku z tej serii, jak również w kolejnych samouczkach, będziemy pracować z motywem demonstracyjnym, który stworzyłem, który możesz znaleźć na Github. Stworzyłem również stronę demonstracyjną, którą będę aktualizował podczas pracy nad serią. Oto jak to teraz wygląda:

Podczas pracy nad różnymi tematami w tej części kursu, pokażę Ci, jak zastosować to, czego się nauczyłeś, do motywu demo. Więc jeśli chcesz podążać za tym, pobierz go przed rozpoczęciem i zainstaluj i aktywuj na swojej stronie programistycznej.

Spójrz na motyw startowy, aby zobaczyć, jak jest zorganizowany. Zawiera pliki szablonów, widżety i menu-wszystkie objęte naszą początkującą serią programistyczną. Zawiera również kilka podstawowych stylizacji – nie twierdzę, że jest piękna, a może chcesz ją poprawić!

Co omówimy w tym samouczku

W tym pierwszym samouczku zajmiemy się tworzeniem motywów. Ten samouczek będzie bazował na tym, czego się nauczyłeś, jeśli zapoznałeś się z następującymi modułami w naszym kursie rozwoju WordPress dla początkujących:

• Tematy Budowy
• Widżety i menu

Nie zamierzam więc pokazywać, jak stworzyć podstawowy motyw lub jak zarejestrować obszar widżetu lub menu. Jeśli nie wiesz, jak to zrobić, wróć do tej serii i sprawdź to!

Zamiast tego przyjrzymy się bardziej zaawansowanym aspektom rozwoju tematu, w szczególności:

• Podejścia do rozwoju tematu
• Strukturyzacja motywu-hierarchia szablonów
• Korzystanie z części szablonu
• Dodawanie znaczników szablonu do stylizacji
• Dodawanie funkcjonalności w pliku funkcji
• Dodawanie hooków do motywu

Ale zanim zaczniemy to kodować, rzućmy okiem na niektóre podejścia dostępne dla rozwoju tematu.

Podejścia do tworzenia motywów WordPress

Zanim zaczniesz rozwijać własne motywy, warto zastanowić się, jak zamierzasz to zrobić. Rzućmy okiem na niektóre z możliwych podejść.

Podejście 1: Kodowanie od podstaw

Napisanie motywu od podstaw nie jest czymś, co polecam. Oznacza to, że zaczynając od pustego pliku PHP (lub plików), a następnie dodając cały kod potrzebny do utworzenia motywu. Możesz zdecydować się na to za pierwszym razem, gdy tworzysz motyw, ale na pewno nie powinieneś tego robić w przypadku kolejnych motywów. W końcu będzie wiele wspólnego kodu, którego możesz ponownie użyć.

Niezależnie od tego, jakiego podejścia używasz do pierwszego motywu, nie koduj następnego motywu od zera – edytuj pierwszy motyw lub użyj pierwszego motywu, aby utworzyć motyw startowy.

Podejście 2: dostosowywanie statycznego HTML

Jest to tradycyjnie metoda, której ludzie używają do nauki WordPressa i jest to dobre podejście, jeśli już utworzyłeś statyczne witryny i dobrze znasz się na kodowaniu HTML. Alternatywnie, jeśli stworzyłeś prototyp dla witryny, którą budujesz przy użyciu statycznego kodu HTML, może to być podejście, którego używasz.

Jeśli zaczynasz ze statycznym HTML, musisz zrobić kilka rzeczy, aby przekonwertować znaczniki na motyw, w tym:

• Zmiana indeks.html plik do indeks.php
• Podział na części szablonu-oddzielenie nagłówka, stopki i paska bocznego na różne pliki
• Dodawanie pętli zamiast zawartości statycznej
• Dodawanie odpowiednich tagów szablonu (więcej wkrótce)
• Edycja informacji w < head> i gdzie indziej na stronie, takich jak nazwa strony i opis strony. Użyj takich funkcji jak get_bloginfo() aby pobrać to z bazy danych zamiast ręcznie kodować do motywu
• Zastąpienie zakodowanego na stałe menu nawigacyjnego takim, które korzysta z interfejsu menu WordPress
• Zastąpienie statycznej zawartości na pasku bocznym i stopce obszarami widżetów, w stosownych przypadkach
• Dodawanie dodatkowych plików szablonów oraz indeks.php – więcej w najbliższym czasie

Dowiesz się o tym wiele w naszym kursie dla początkujących WordPress.

Szczegółowy opis, który uczy, jak stworzyć motyw ze statycznego HTML, może okazać się pomocny w mojej książce, WordPress Theme Development: Beginner ’ s Guide.

Podejście 3: Używanie motywu startowego

Innym podejściem jest wzięcie motywu startowego innej firmy, takiego jak podkreślniki i wykorzystanie go jako podstawy kodu. To da Ci wszystkie podstawowe elementy WordPress, takie jak pętla, i zaoszczędzić dużo pracy.

Alternatywnie możesz użyć własnego motywu startowego, który tworzysz podczas tworzenia pierwszego motywu. Usuń Cały kod, który nie ma zastosowania do innych motywów, takich jak kolory, czcionki lub niestandardowy układ i funkcje, i użyj go, aby rozpocząć pracę nad kolejnym motywem.

Upewnij się, że Twój motyw startowy jest kodowany przy użyciu suchych zasad i że jest responsywny (a nawet lepiej, na urządzeniach mobilnych) i zawiera funkcje ułatwień dostępu.

Jeśli masz dodatkową funkcjonalność, którą dodajesz do wielu motywów, ale nie WSZYSTKICH, możesz zachować pliki dołączania dla każdego z nich, a następnie dodać je do motywu, gdy zajdzie taka potrzeba. Pokażę Ci, jak to zrobić później w tej części kursu.

Podejście 4: tworzenie motywu potomnego

Innym sposobem kodowania motywów jest użycie istniejącego motywu jako motywu nadrzędnego, a następnie utworzenie motywu podrzędnego dla każdego projektu. Pracuję w sposób, który łączy to i podejście do tematu początkowego:stworzyłem własny motyw niestandardowy framework, którego używam jako motyw nadrzędny dla każdej nowej witryny, którą buduję, oraz motyw początkowy z zaledwie kilkoma podstawami. Następnie dodaję i edytuję ten motyw potomny dla każdego projektu.

Korzystanie z motywu podrzędnego oznacza, że możesz zachować cały kod, którego używasz wielokrotnie w swoim motywie nadrzędnym, oszczędzając czas i miejsce na serwerze. Jeśli chcesz nadpisać cokolwiek, po prostu utwórz plik szablonu o tej samej nazwie w motywie podrzędnym, a WordPress użyje tego zamiast tego z motywu nadrzędnego.

Jako motyw nadrzędny można również użyć motywu innej firmy, takiego jak motyw ramowy. Wiele frameworków ma motywy potomne, których możesz używać po wyjęciu z pudełka, ale nic nie powstrzyma cię przed kodowaniem.

Podejście 5: dostosowywanie istniejącego motywu

Popularnym podejściem, gdy ludzie zaczynają pracę, jest wzięcie istniejącego motywu (takiego jak domyślny motyw, obecnie dwadzieścia szesnaście) i dostosowanie go do własnych potrzeb. Może to być dobry sposób na rozpoczęcie pracy, ponieważ pozwala przeglądać kod motywu, aby zobaczyć, jak wszystko działa i może być świetnym sposobem na naukę. Istnieją jednak pewne zastrzeżenia:

• Jeśli chcesz korzystać z aktualizacji motywu, Użyj motywu podrzędnego zamiast bezpośrednio edytować motyw
• Może się okazać, że pozbędziesz się wielu funkcjonalności i stylizacji oraz dodasz własne
• Używaj tylko motywu podobnego do tego, co chcesz osiągnąć
• Używaj tylko dobrze zakodowanego motywu-sprawdź jego recenzje w katalogu motywów WordPress

Krótko mówiąc, jeśli używasz motywu innej firmy jako sposobu na naukę i planujesz go rozdzielić, aby stworzyć własny, a nie martwisz się o aktualizacje, śmiało. Ale jeśli masz zamiar zmienić tak wiele, że jest to nierozpoznawalne, motyw startowy może być lepszy. Jeśli chcesz zachować wiele stylizacji i funkcjonalności z motywu, Użyj motywu podrzędnego, aby wprowadzić własne poprawki.

Struktura Motywu: Hierarchia Szablonów Motywu

Twój motyw będzie musiał zawierać określone pliki szablonów, które są plikami używanymi przez WordPress do wyświetlania treści w zależności od strony, na którą patrzy użytkownik. W Twoim szablonie są cztery główne typy plików:

• Pliki szablonów – indeks.php, strona.php i więcej
• Arkusz stylów – styl.css
• Części szablonu – nagłówek.php, pasek boczny.php, stopka.php i wszelkie inne elementy szablonu, które tworzysz, takie jak pętla.php plik
• Pliki funkcji – funkcje.php i wszelkie pliki dołączane

Minimalna liczba plików to dwa: indeks.php oraz styl.css. Teoretycznie można zbudować motyw tylko z tych dwóch plików, ale nie polecam go. Oddzielenie rzeczy takich jak nagłówek i stopka oraz tworzenie różnych plików szablonów dla stron statycznych, stron archiwalnych i pojedynczych postów, na przykład, ułatwi Ci życie. Korzystanie z plików include może zwiększyć wydajność kodu.

Nasz motyw startowy zawiera następujące pliki:

• indeks.php
• styl.css
• funkcje.php
• nagłówek.php
• pasek boczny.php
• stopka.php

Jest to jeden plik szablonu, jeden arkusz stylów, jeden plik funkcji i trzy części szablonu. Wyjaśnię, co to jest po kolei.

Pliki Szablonów

Pierwszy plik, do którego WordPress trafia podczas wyświetlania treści, to odpowiedni plik szablonu. Wybierze to zgodnie z wyświetlaną treścią, korzystając z hierarchii szablonów.

Na przykład, jeśli odwiedzający czyta pojedynczy post z twojego bloga, WordPress przejrzy tę listę plików i użyje pierwszego, który znajdzie z tej listy, do wyświetlenia treści:

1. single-post.php (dla pojedynczych postów, a nie stron lub niestandardowych typów postów)
2. singiel.php (dla pojedynczych postów lub niestandardowych typów postów, a nie stron)
3. pojedyncza.php (dla pojedynczych postów, niestandardowych typów postów lub stron)
4. indeks.php (dla wszystkiego, co nie ma bardziej konkretnej części szablonu)

A jeśli użytkownik przejdzie do strony archiwum, na przykład archiwum dla kategorii” Polecane”, WordPress będzie działał przez te pliki szablonów:

1. Kategoria-POLECANE.php (tylko dla tej kategorii)
2. category-XX.php (gdzie XX To identyfikator kategorii „wyróżnione”)
3. Kategoria.php (dla wszystkich kategorii archiwum)
4. archiwum.php (dla wszystkich archiwów, w tym kategorii, terminów taksonomicznych, autorów i tagów)
5. indeks.php

Tak długo, jak Twój temat ma indeks.php plik, zawsze będzie dostępny plik do wyświetlenia zawartości. Musisz jednak upewnić się, że zawiera wszystkie typy treści, w tym pojedyncze posty i strony, archiwa i strony wyszukiwania, a także stronę 404. Łatwiej jest tworzyć pliki szablonów specjalnie dla każdego z nich.

Dodajmy jeszcze kilka plików szablonów do naszego motywu startowego, aby dostosować sposób, w jaki motyw wyświetla pojedyncze posty i strony. Najprostszym sposobem jest skopiowanie indeks.php plik. Najpierw zróbmy to dla stron.

1. Zrób kopię indeks.php i nazwij to strona.php.
2. Znajdź następującą linię:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Edytuj go tak, aby brzmiał następująco:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz nowy plik.

Nie zmienia to wiele, gdy ludzie oglądają witrynę, ale pomija kod, który nie jest konieczny. Instrukcja warunkowa, którą usunąłeś, sprawdza, czy jesteśmy na stronie, coś, co nie jest konieczne, ponieważ WordPress użyje tego pliku szablonu tylko wtedy, gdy jesteśmy na stronie.  Zmienia również h2 tag do h1.

Teraz, gdy już to zrobiłeś, możesz edytować indeks.php plik, aby zmienić ten czek na pierwszej stronie.

1. Otwórz indeks.php.
2. Znajdź ten kod:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Edytuj to tak, żeby wyglądało to tak:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz plik.

Usuwa to sprawdzenie strony głównej z pętli.

Teraz stwórzmy plik dla pojedynczych postów.

1. Zrób kopię indeks.php i nazwij to singiel.php
2. Znajdź te linie:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Edytuj je tak, aby brzmiały następująco:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz plik.

Usuwa to czek na bycie na pierwszej stronie, ponieważ pojedynczy post na blogu nie będzie stroną główną. Zmienia również h2 tag do h1.

Na koniec stwórzmy czwarty szablon dla archiwów.

1. Zrób kopię indeks.php i nazwij to archiwum php.
2. Znajdź tę linię:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Pod nim dodaj te linie:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz plik.

Arkusz Stylów

Każdy motyw musi zawierać arkusz stylów, ponieważ mówi on WordPressowi o motywie, a także zapewnia stylizację witryny.

Twój arkusz stylów musi zawierać skomentowany tekst na górze informujący WordPress o tym wszystkim. W temacie, którego będziemy używać, arkusz stylów zaczyna się od następującego:

Części Szablonu

Jeśli tworzysz wiele plików szablonów, każdy z własną pętlą, nagłówkiem, stopką itp., możesz się martwić o cały powtarzający się kod. Dobra wiadomość jest taka, że nie musisz powtarzać żadnego kodu. Możesz użyć części szablonu do zakodowania niektórych części motywu tylko raz, a następnie dołączyć ten kod do plików szablonów. Przykłady obejmują:

• Nagłówek – nagłówek.php
• Pasek boczny – pasek boczny.php
• Stopka – stopka.php
• Ogólna pętla – pętla.php
• Bardziej specyficzna pętla – loop-page.php, na przykład

Użyjmy części szablonu dla pętli w naszym temacie.

1. Otwórz indeks.php plik.
2. Znajdź ten kod:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Skopiuj ten kod.
4. Utwórz nowy plik w swoim motywie o nazwie pętla.php.
5. Otwórz nowy plik i wklej do niego kod. Zapisz plik.
6. Wróć do indeks.php i usuń kod, który właśnie skopiowałeś.
7. W jego miejsce dodaj to:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
8. Zapisz plik.
9. Teraz Usuń powyższy kod z archiwum.php plik i zastąp go tym samym get_template_part() funkcja, jakiej używałeś w pętla.php. Save the archiwum.php plik.

Teraz, zamiast mieć pętlę zakodowaną w dwóch plikach szablonów, masz ją w jednym pliku. Jeśli chcesz go edytować, musisz to zrobić tylko raz.

Zróbmy to samo dla pętli dla pojedynczych postów i stron.

1. Utwórz nowy plik w swoim motywie o nazwie pętla-singel.php.
2. Otwórz strona.php plik.
3. Znajdź ten kod:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Skopiuj go do nowego pliku include i usuń ze strony.php.
5. Na strona.php, zastąp go tym:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
6. Zapisz swoje pliki.
7. Teraz powtórz powyższe dla singiel.php, usunięcie pętli i zastąpienie jej funkcją.

Ponownie wykorzystuje to get_template_part() funkcja, ale tym razem ma dwa parametry: „loop „i” single.”Jeśli WordPress nie może znaleźć pętla-singel.php pliku, powróci do używania pętla.php.

Pliki Funkcjonalności

Jeśli chcesz dodać funkcje do motywu, powinieneś użyć funkcje.php. W tym miejscu można robić takie rzeczy, jak rejestrowanie widżetów i menu. Jeśli twój motyw zaczyna zawierać wiele funkcji i chcesz go oddzielić, możesz użyć pliku Dołącz. Zrobimy to w następnym poście z tej serii, gdzie dodamy plik include dla funkcji dostosowywania.

Aby dołączyć plik, dodajesz coś takiego do swojego funkcje.php plik:

Obejmuje to plik na zawiera folder w Twoim temacie, o nazwie customizer.php. Kod z tego pliku jest uruchamiany tak, jakby był zakodowany w funkcje.php plik w miejscu, w którym umieszczono funkcję include.

Nasz temat ma już plik o nazwie funkcje.php który zawiera funkcje rejestracji menu i widżetów. Dodajmy do tego obsługę motywów.

1. Otwórz funkcje.php
2. Na dole dodaj te linie:
   Wczytywanie gist 1c9db3673e9a82cdfb72
3. Zapisz plik.

Przekonasz się, że po dodaniu postów do witryny możesz ustawić polecane obrazy i określić formaty postów. Więcej na temat korzystania funkcje.php aby uzyskać obsługę motywu, zobacz nasz najlepszy przewodnik po Pliku funkcji motywu.

Wyzwanie: Dodanie Większej Liczby Plików Szablonów

Teraz, gdy dodałeś kilka plików do swojego motywu, spróbuj dodać więcej bez moich wskazówek. Dodaj następujące pliki:

• 404.php – dla stron o błędach
• Szukaj.php – wyniki wyszukiwania

Możesz użyć kopii archiwum.php dla szablonu wyszukiwania i kopię dowolnego z plików dla stron 404, ale zastępując pętlę powiadomieniem o błędzie. Co więcej, możesz dołączyć listę najnowszych postów i / lub pole wyszukiwania na swojej stronie wyszukiwania – coś, co zrobimy później w tym kursie.

Jeśli utkniesz, spójrz na gotowy motyw części 1 z plików źródłowych tej serii.

Dodawanie tagów szablonu do motywu

Następnym krokiem jest dodanie znaczników szablonu do motywu. Oto jak Kodeks WordPress definiuje znaczniki szablonów:

Tagi szablonów są używane w szablonach bloga do dynamicznego wyświetlania informacji lub w inny sposób dostosowywania bloga, zapewniając narzędzia, dzięki którym będzie on tak indywidualny i interesujący, jak ty.

Tagi szablonów są rodzajem funkcji, ale zamiast używać ich w pliku funkcji lub wtyczki, używasz ich w plikach szablonów do generowania treści, takich jak:

• Pobieranie zawartości z części szablonu za pomocą get_header(), get_sidebar(), get_footer() oraz get_template part().
• Wyświetlanie informacji o witrynie, takich jak jej tytuł, adres URL lub opis za pomocą bloginfo().
• Wysyłanie treści postów i metadanych za pomocą tagów takich jak the_content(), _title() oraz the_permalink().
• Wyświetlanie informacji o autorze postu z tagami takimi jak get_the_author() oraz get_the_author_link().
• Wyprowadzanie informacji o wpisie jako ID lub klasy do celów stylizacji za pomocą tagów takich jak body_class().

Zauważ, że niektóre tagi mają Pobierz_ na ich początku, podczas gdy inni nie. jeśli używasz tagu zaczynającego się od Pobierz_, wszystko, co WordPress robi, to pobiera te informacje-nie wyprowadza ich. Więc aby wypisać to, co pobrałeś, używasz echo przed nim. Na przykład, echo get_the_author_link() link do profilu autora. Daje to większą kontrolę nad tym, w jaki sposób zawartość jest generowana. Jeśli właśnie użyłeś the_author_link (), WordPress wyprowadziłby to w predefiniowany sposób. Czasami działa to dla ciebie, ale czasami nie i chcesz dodać własne znaczniki wokół tagu szablonu z Pobierz_ na początku.

Temat, nad którym pracujemy, ma już dodane znaczniki szablonów. Przejrzyj pliki szablonów i sprawdź, czy możesz je znaleźć. Powinieneś znaleźć następujące:

• Na nagłówek.php: bloginfo ('url'), bloginfo ('nazwa') oraz bloginfo ('opis').
• Na indeks.php, archiwum.php, singiel.php oraz strona.php: get_template_part(), które dodałeś wcześniej.
• Na pętla.php oraz pętla-singel.php: the_permalink(), the_title_attribute(), the_title() oraz the_content().

Możesz zobaczyć, że już pracowałeś z tagami szablonów. Dodajmy trochę więcej, szczególnie, aby pomóc w stylizacji.

Dodawanie znaczników szablonu do stylizacji

WordPress daje trzy niezwykle przydatne tagi szablonów, które można dodać do < body> element i do pętli, aby umożliwić bardziej drobnoziarnistą stylizację Twoich postów, stron i archiwów. Są to:

• body_class(), które dodajesz do ciało tag w temacie nagłówek.php plik: dodaje klasy do ciało element w zależności od typu oglądanej strony
• the_ID (), którego możesz użyć, aby dodać post ID do postu w pętli
• post_class(), która działa w podobny sposób jak body_class() ale jest używany z postami w pętli

Dodajmy je do naszego tematu.

1. Otwórz nagłówek.php plik.
2. Znajdź otwarcie < body> tag, który jest na własnej linii.
3. Edytuj to tak, żeby wyglądało to tak:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz i zamknij plik.
5. Otwórz pętla.php plik.
6. Znajdź otwarcie < artykuł> tag, który będzie na własnej linii.
7. Edytuj to tak, żeby czytało:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
8. Zapisz i zamknij plik.
9. Powtórz kroki 5-8 dla pętla.php plik.

Teraz przekonasz się, że Twój < body> element ma przypisaną liczbę klas, w zależności od tego, jaki rodzaj treści jest przeglądany. I twoje < artykuł> każdy element ma identyfikator, który jest identyfikatorem postu i liczbę klas odpowiednich do rodzaju postu.

Rzućmy okiem na kod wygenerowany dla strony głównej witryny. Zapisz swój motyw i przejdź do strony głównej swojej witryny w przeglądarce. Sprawdź kod. Oto moje:

To jest kod, który jest wyjście:

Teraz rzućmy okiem na inną stronę. Przejdź do jednego posta i zobacz, co jest wyjściowe dla ciało:

Jak widać, WordPress generuje różne klasy, ponieważ jesteśmy na jednym poście. Teraz spójrz na kod, który jest generowany dla < artykuł> tag na tej stronie pojedynczego postu:

Na artykuł posiada wiele klas, które wskazują identyfikator postu, jego typ postu, status, kategorię i inne, a także identyfikator równoważny ID postu. Następnie możesz użyć tego do stylowania swoich postów według kategorii lub typu postu, a nawet indywidualnie, kierując identyfikator postu. Jeśli na przykład prowadzisz witrynę z wiadomościami, a każda kategoria ma swój własny kolor, możesz wystylizować wszystkie posty w tej kategorii za pomocą odpowiedniego koloru na głównej stronie oferty.

Dodawanie hooków filtrów i akcji do motywu

Następną rzeczą, którą możesz dodać do swojego motywu, aby był jeszcze bardziej wydajny, są Hooki. Pozwalają one albo zmienić zawartość, którą już posiadasz w swoim szablonie, albo dodać nową zawartość, bez edytowania samych plików szablonów. Więc jeśli chcesz napisać wtyczkę, która wstawia zawartość gdzieś na swoich stronach, możesz to zrobić łatwo. W rzeczywistości zrobimy to później w trakcie kursu.

Jest to również bardzo przydatna technika, jeśli opracowujesz motyw, który zamierzasz użyć jako motyw nadrzędny. W plikach funkcji motywu podrzędnego można tworzyć funkcje, które wstawiają dodatkową zawartość zgodnie z wymaganiami do motywu nadrzędnego (lub zmieniają istniejącą zawartość) bez tworzenia zduplikowanych plików szablonów w szablonie podrzędnym. Wszystkie frameworki tematyczne mają dużą liczbę hooków, więc możesz to zrobić.

Jeśli chcesz zrozumieć, jak działają Hooki i różnicę między hookami action I filter, musisz przestudiować część 5 naszej serii WordPress Development for Beginners, która pokazuje, jak używać hooków w swoich wtyczkach. Innymi słowy, powinniście to już wiedzieć!

Istnieją dwa rodzaje haków: haki akcji i haki filtracyjne:

• Hooki akcji są puste – są miejscem w Twoim motywie lub wtyczce, w którym Ty lub inny programista możesz wstawić kod, dołączając funkcję do tego Hooka.
• Haki filtrujące otaczają istniejący kod lub zawartość-zawiń hak filtrujący wokół istniejącej zawartości, aby umożliwić nadpisanie tej zawartości poprzez dołączenie funkcji do tego haka. Spowoduje to zastąpienie zawartości filtra zawartością funkcji.

Tutaj zrobimy coś nieco innego: zamiast pisać funkcję Hooka do istniejącego Hooka, stworzymy ten hook w naszym temacie.

Dodawanie Haków Akcji

Aby utworzyć hook akcji w swoim szablonie, użyj do_action () funkcja. Ma jeden parametr: unikalną nazwę haka.

Użyjmy tego do dodania hooków akcji.

1. Otwórz nagłówek.php plik.
2. Bezpośrednio nad < header> tag, Dodaj ten wiersz:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Teraz bezpośrednio pod zamykającym znacznikiem nagłówka, który czyta < / header>, dodaj tę linię:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz i zamknij plik.

Właśnie dodałeś dwa Hooki akcji do nagłówka. Możesz ich użyć, aby dodać dodatkową zawartość do pliku funkcji motywu (lub motywu podrzędnego) lub za pośrednictwem wtyczki. Teraz dodajmy więcej.

1. Otwórz indeks.php plik.
2. Znajdź < div class = "content"> linii i dodać to bezpośrednio pod nią:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
3. Teraz bezpośrednio przed zamknięciem < / content> tag, dodaj to:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
4. Zapisz i zamknij plik.
5. Powtórz kroki 1-4 dla singiel.php oraz strona.php.

Zauważyłeś, że dodałeś ten sam hook trzy razy w trzech różnych plikach. Jeśli chcesz, możesz zmienić strukturę plików, może przesuwając znaczniki otwarcia z indeks.php, strona.php oraz singiel.php na nagłówek.php, a znaczniki zamykające na pasek boczny.php. Jeśli chcesz tego spróbować, śmiało, ale uważaj, aby niczego nie przegapić.

Zaletą używania Hooka, mimo że musieliśmy go dodać trzy razy, jest to, że jeśli chcemy dodać dodatkowy kod przed lub po treści, musimy to zrobić tylko raz, za pomocą funkcji, którą następnie dołączamy do tego Hooka. Funkcja będzie działać niezależnie od tego, który z trzech plików szablonów WordPress jest obecnie używany. A jeśli chcesz tylko podłączyć nową zawartość do jednego z plików szablonów, możesz użyć znacznika warunkowego, aby sprawdzić, jakiego rodzaju zawartość jest wyświetlana. Ponownie dowiesz się tego później w trakcie kursu.

Następnie dodajmy hook do każdego z paska bocznego i stopki. Nie dam ci tutaj szczegółowych instrukcji, zamiast tego pozwolę ci sam to wypracować. Jeśli utkniesz, sprawdź kod źródłowy tej części kursu. W tym kodzie źródłowym umieściłem zarówno motyw startowy, jak i gotowy.

Więc, dodaj te haki:

• wpmu_before_sidebar przed obszarem widżetu paska bocznego (upewnij się, że umieściłeś go poza znacznikiem warunkowym dla aktywnych widżetów.
• wpmu_after_sidebar po obszarze widżetu paska bocznego.
• wpmu_before_footer przed stopką.
• wpmu_after_footer po stopce.

Musisz edytować dwa pliki: pasek boczny.php oraz stopka.php. Upewnij się, że haki są wewnątrz <aside class = "sidebar"> oraz stopka elementy.

Dodawanie Haczyków Filtrujących

Haki filtrujące pozwalają użytkownikom nadpisać istniejący kod. Przydatne miejsce do tego jest w nagłówku, gdzie znajduje się tytuł i opis strony. W ten sposób dajesz użytkownikom możliwość zastąpienia ich na przykład logo.

Więc zróbmy to!

1. Otwórz nagłówek.php plik i znajdź ten kod:
   Ładowanie gist abcb5a4b406e4b32577823d641096012
2. Edytuj to tak, żeby czytało:
   Ładowanie gist abcb5a4b406e4b32577823d641096012

   Nie zapomnij zmienić wszystkich wystąpień bloginfo() na get_bloginfo(), ze względu na echo, które otacza całość. I upewnij się, że masz właściwą składnię – PHP jest bardzo niewybaczalne, jeśli chodzi o średniki!

3. Zapisz plik.

Nie różni się to jeszcze od tego, co jest wyświetlane w nagłówku, ale jeśli ktoś używa motywu potomnego lub pisze wtyczkę, powinien chcieć zmienić ten konkretny aspekt nagłówka w przyszłości, nie będzie musiał tworzyć duplikatu całości nagłówek.php plik. Wszystko, co muszą zrobić, to napisać funkcję, którą dołączają do tego haka filtra za pomocą add_filter(). Przyjrzymy się temu później.

Temat budynku jest zabawa!

Teraz, gdy ukończyłeś tę część kursu, dowiesz się o wiele więcej o budowaniu motywów i będziesz miał początki własnego motywu z kilkoma potężnymi funkcjami, których możesz użyć do dalszego rozwijania motywu i dodawania treści do swojej witryny.

Nie włączyłem CSS do tej serii, ponieważ chodzi o WordPress, a nie CSS. Ale jeśli chcesz dodać lub zmienić CSS w arkuszu stylów motywu, śmiało-chciałbym zobaczyć, jak stylizujesz mój podstawowy motyw startowy i sprawić, że będzie wyglądał lepiej!

Jeśli masz problemy z dodaniem kodu do motywu lub chcesz zobaczyć, jak to zrobiłem, Sprawdź pliki dla części 1 ukończonego motywu w plikach źródłowych dla tej serii. Zdecydowanie polecam zrobienie tego przed wysłaniem pytań poniżej, ponieważ najlepszym sposobem na nauczenie się budowania motywu jest przesłuchiwanie kodu.

W następnym samouczku z tej serii będziemy kontynuować pracę z tym motywem i dodamy do niego funkcję dostosowywania motywu.

To prawda, mnóstwo wiedzy WordPress, recenzja, opinie instruktorów i certyfikacja, za darmo dla członków WPMU DEVRozpocznij Naukę