Anatomia motywu WordPress

To jest rozdział z „Up and Running: A Practical Guide to WordPress Development”, multimedialnego przewodnika po programowaniu WordPress, który zostanie wydany 16 czerwca. i wywiady dotyczące kodu z 13 najlepszymi programistami WordPress na świecie. Zamów w przedsprzedaży już teraz na upandrunningwp.com, aby uzyskać 20% zniżki!

Kluczowe dania na wynos:

• Motyw WordPress składa się z zestawu spójnych części. Kluczowe części motywu niebędącego motywem podrzędnym obejmują style.css , functions.php i kilka rodzajów plików szablonów PHP (takich jak header.php , footer.php i index.php ).
• Jako główne źródło stylów CSS motywu, style.css dyktuje wygląd motywu. Sekcja komentarzy u góry style.css jest również miejscem, w którym zarejestrowana jest nazwa motywu, autor itp.
• functions.php to miejsce, w którym dodajesz funkcjonalność prezentacyjną do swojego motywu. Poprzez functions.php dodasz arkusze stylów CSS, pliki JavaScript, menu nawigacyjne, obszary widżetów i inne funkcje.
• Pliki szablonów można nieformalnie podzielić na: „zawsze używane” pliki szablonów ( header.php i footer.php oraz sidebar.php , jeśli dotyczy); pliki w hierarchii szablonów WordPress (takie jak index.php , single.php i page.php ); i „części szablonu” (niekompletne fragmenty pobrane z innych plików szablonów w celu zmniejszenia liczby powtórzeń).
• Tematy mogą być dowolnie duże i złożone; ale to są elementy, które są tam najważniejsze i przewidywalne.

Ten krótki rozdział kręci się wokół dużego diagramu. Po co czekać? Oto on:

Nie panikować! Niedługo to zrozumiesz. W dalszej części tego rozdziału dokładniej wyjaśnimy każdą część diagramu.

Co jest w imieniu?

WordPress decyduje, jak traktować pliki motywów na podstawie ich nazwy.

Pierwszą rzeczą, którą należy zauważyć, jest to, że każdy plik na diagramie ma specjalną nazwę. functions.php , style.css , index.php — żaden z tych plików nie został nazwany przypadkowo i żadna z ich nazw nie jest arbitralna.

WordPress decyduje, jak traktować pliki motywów na podstawie ich nazwy. Ma specjalne traktowanie napisane dla functions.php , ale w ogóle nie ma dla functionz.php . Więc jeśli prześlesz zestaw instrukcji jako functions.php , WordPress zinterpretuje je; ale jeśli prześlesz te same instrukcje, co functionz.php , WordPress domyślnie zignoruje ten plik i jego instrukcje całkowicie.

styl.css

style.css jest głównym źródłem wyglądu motywu.

style.css jest głównym źródłem stylów CSS motywu. W związku z tym jest głównym źródłem wizualnego wyglądu motywu — od wyboru czcionek i kolorów po to, czy motyw działa na responsywnej siatce.

Na przykład, jeśli w style.css Twojego motywu wpiszesz następujący kod CSS:

p {
color: blue;
}

…wtedy wszystko, co jest w akapicie, w dowolnym miejscu witryny , w której jest uruchomiony motyw, zmieni kolor na niebieski. Naprawdę fajne, prawda?

style.css to miejsce, w którym wykonasz większość swojej pracy, aby Twoje motywy wyglądały tak, jak chcesz.

Ten rodzaj kontroli wizualnej oznacza, że ​​w style.css jest dużo pracy do wykonania — to tam wykonasz większość swojej pracy, aby Twoje motywy wyglądały tak, jak chcesz.

style.css to także sposób, w jaki rejestrujesz swój motyw

style.css zawiera również sekcję komentarzy w swoim nagłówku, w której rejestrowane są dane motywu — nazwa motywu, autor, motyw nadrzędny, jeśli jest, itd. Wygląda to następująco:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress czyta te komentarze, aby uzyskać informacje o Twoim motywie. Tak więc mały blok komentarzy powyżej – i nic bardziej wyszukanego ani bardziej technicznego – powoduje, że Twój motyw pojawia się na liście motywów Twojej witryny w Wygląd > Motywy w obszarze administracyjnym WordPress:

Przykład rzeczywistych danych rejestracji motywu można zobaczyć w wierszach od 1 do 6 style.css na tej dużej grafice, Anatomia motywu WordPress.

funkcje.php

functions.php to miejsce, w którym dodajesz niestandardową funkcjonalność do swojego motywu. To może być bardzo dużo, w tym:

• Dodawanie arkuszy stylów CSS (w tym samego style.css ) i plików JavaScript
• Rejestrowanie obszarów menu nawigacji i obszarów widżetów
• Definiowanie niestandardowych rozmiarów obrazów, które mają być dostępne w Twojej witrynie
• Filtrowanie zawartości strony

functions.php „rozmawia” z resztą WordPressa głównie za pomocą zaczepów WordPress (zwanych również zaczepami akcji i filtrów), które pozwalają mu dodawać funkcje we właściwych miejscach. Zagłębimy się w działanie functions.php w Podstawowych koncepcjach motywów WordPress: 3. Dodawanie funkcjonalności za pomocą functions.php , a o wiele więcej o zaczepach w zaczepach WordPress (działania i filtry): co robią i jak działają.

Pliki szablonów PHP

Pliki szablonów witryny WordPress określają znaczniki witryny. Bez nich nie ma dosłownie nic na stronie.

Większość plików motywu to pliki szablonów PHP. Jeśli functions.php to mózg motywu, style.css to jego ubrania, a pliki szablonów to jego rzeczywiste ciało.

Pliki szablonów to pliki ,code>.php, które zawierają mieszankę znaczników HTML i kodu PHP. (Sprawdź tę grafikę, a zobaczysz, jak wyglądają.)

Pliki szablonów tworzą znaczniki na dwa sposoby

Razem te pliki określają znaczniki witryny: rzeczywisty kod HTML wyświetlany przez przeglądarkę podczas odwiedzania witryny. Robią to na dwa sposoby.

1. HTML

Po pierwsze, pliki szablonów drukują kod HTML bezpośrednio w przeglądarce, tak jak robiłby to zwykły plik .html . Wszystko, czego nie ma w <!--?php?--> , nie jest PHP: to zwykły HTML, który trafia bezpośrednio na stronę. Więc jeśli plik header.php motywu zawiera trochę kodu HTML, takiego jak:

<body class="site-body">

To jest dokładnie to, co przeglądarka zobaczy na każdej stronie WordPress, która zawiera header.php , które powinny być wszystkimi.

2. PHP

Pliki szablonów naprawdę działają dzięki PHP, który kompiluje się lub zamienia w HTML. Jako prosty przykład, ten sam plik header.php może zamiast tego zawierać następujący kod:

<body class="<?php echo 'site-body'; ?>">

Dodany PHP po prostu odbija (drukuje) ciąg site-body bezpośrednio na stronie. Serwer wykonał więc dodatkowe przetwarzanie PHP, ale przeglądarka nadal widzi ten sam stary kod HTML.

Jak możesz sobie wyobrazić, pliki szablonów motywu są absolutnie kluczowe: bez nich na stronie nie ma dosłownie nic.

„Zawsze używane” pliki szablonów

header.php i footer.php są zwykle używane wszędzie w motywie, ponieważ większość witryn wymaga spójnego nagłówka i stopki na różnych stronach.

Niektóre pliki szablonów są używane na każdej stronie w witrynie. Główne przykłady to header.php i footer.php .

Pliki te są używane tak często, że WordPress ma specjalne funkcje do umieszczania ich w innych plikach szablonów: get_header() i get_footer() . Nazywane w ten sposób, bez parametrów, funkcje te po prostu header.php i footer.php , i upuszczają je w miejscu wywołania funkcji.

Dlaczego te pliki są używane wszędzie? Dzieje się tak, ponieważ większość witryn wymaga spójnego nagłówka i stopki na różnych stronach. Jeśli jedna strona ma logo Twojej firmy i główne menu nawigacyjne, możesz się założyć, że chcesz, aby inne strony robiły to samo. To samo dotyczy stopki na dole strony.

Nawiasem mówiąc, sidebar.php również jest tego rodzaju plikiem, ponieważ często jest tak, że większość typów stron internetowych w witrynie będzie współdzielić jeden pasek boczny — może z wyjątkiem stron o pełnej szerokości, które są przeznaczone do wyświetlania typu strony posty. sidebar.php ma również swoją własną funkcję, get_sidebar() .

Pliki w hierarchii szablonów WordPress

Prawdziwe podekscytowanie dzieje się w plikach takich jak index.php , single.php i page.php . Te pliki określają, jakie znaczniki będą wyświetlane dla różnych rodzajów danych postów .

Mówiąc inaczej, WordPress wie , której strony użyć dla jakiego rodzaju danych postów. Na przykład:

• Jeśli żądana strona internetowa zawiera wpis typu strona (na przykład strona Informacje), WordPress prawdopodobnie użyje page.php do zbudowania tej strony.
• Jeśli żądana strona internetowa jest pojedynczym postem typu Post (na przykład przeglądasz konkretny post na blogu), WordPress prawdopodobnie użyje do jej utworzenia single.php .
• Jeśli przeglądasz wszystkie posty typu Post, które napisałeś w 2014 roku, WordPress prawdopodobnie użyje archive.php do zbudowania tej strony.

Oto magia hierarchii szablonów WordPress , którą szczegółowo omawiamy w Podstawowych koncepcjach motywów WordPress: 1. Hierarchia szablonów.

Te pliki szablonów są oparte na pętli

Wszystkie te pliki szablonów „w hierarchii szablonu” mają coś bardzo ważnego: są zbudowane wokół The Loop, jednej z absolutnych podstawowych zasad tworzenia WordPressa.

Zagłębiamy się w The Loop w podstawowe koncepcje motywów WordPress: 2. Przetwarzanie postów za pomocą The Loop. Loop jest naprawdę fajny, więc jeśli jesteś nowy, trzymaj skarpetki, aby The Loop ich nie zdmuchnął!

Części szablonu

Załóżmy, że istnieje dokładnie taka sama sekcja w index.php i page.php . Czy powinniśmy powtórzyć ten kod w obu tych plikach?

Właściwie DRY — „Nie powtarzaj się!” — to okrzyk bojowy dla dobrych programistów. Powtarzanie powoduje różnego rodzaju problemy. Co zrobić, jeśli chcesz coś zmienić w powtarzanej sekcji? Teraz musisz to zmienić w dwóch miejscach. Co się stanie, jeśli zapomnisz go zmienić w jednym miejscu lub popełnisz błąd w jednym pliku, ale nie w innym? Teraz Twój kod jest niezsynchronizowany, a witryna zawiera błędy. (Teraz: co, jeśli powtórzysz ten sam kod dwadzieścia razy? Musisz powtórzyć każdą zmianę razy dwadzieścia i mieć nadzieję, że „złapałeś je wszystkie”).

Części szablonu pobierają część pliku szablonu, która prawdopodobnie zostanie powtórzona, i przenoszą ją do nowego pliku. W ten sposób, zarówno index.php , jak i page.php mogą po prostu odnosić się do tej samej części szablonu, zamiast osobno pisać ją dwukrotnie; a jeśli chcesz zmienić tę sekcję, zmieniasz ją tylko raz.

Teraz znasz anatomię swojego motywu

To są rzeczy, które naprawdę należy zrozumieć w motywie WordPress. Nawet zbyt duży motyw ThemeForest zostanie zbudowany wokół tego szkieletu, więc zrozum, w jaki sposób te elementy się łączą, a będziesz mieć dużo mocy, aby zrozumieć motywy WordPress.

Po zakończeniu tej lekcji anatomii następne trzy rozdziały omawiają cztery kluczowe zasady programowania, które wyjaśniają, w jaki sposób motyw działa:

1. Hierarchia szablonów WordPress
2. Pętla
3. funkcje.php
4. Haki WordPress

Naprzód!