Dziś dowiemy się, gdzie i jak dodać kod poza szablonami w naszym motywie. Robimy to dodając functions.phpplik motywu. Po drodze nauczymy się również, jak prawidłowo dodawać arkusze stylów i skrypty.
Plik functions.php motywu
Motyw musi gdzieś umieścić kod, który nie jest częścią szablonów. Zawsze jest mnóstwo kodu, który trzeba dodać do wszystkich motywów, aby obsłużyć funkcjonalność. Na przykład włączenie funkcji polecanych obrazów WordPress (zauważyłeś, że jej brakowało?), obsługę menu, widżetów, dodawanie arkuszy stylów i skryptów (w odpowiedni sposób) i wiele innych.
Ten plik to functions.php. WordPress automatycznie i zawsze ładuje ten plik, jeśli istnieje w twoim motywie. Jest zawsze ładowany zarówno w adminie, jak i we frontendzie.
Dodanie pliku functions.php do naszego motywu
Utwórzmy nowy, pusty plik w naszym głównym folderze motywu i nazwijmy go functions.php.
W tym pliku natychmiast zacznij od otwierającego tagu PHP (<?php) i nie dołączaj tagu zamykającego. Plik functions.phpjest przeznaczony dla kodu PHP, a nie HTML. Twój motyw może się zepsuć (lub nawet zachowywać się dziwnie), jeśli w tym pliku znajdują się znaki lub znaki nowej linii poza znacznikami PHP. Możesz oczywiście wyrwać się ze znaczników PHP, aby wyprowadzić HTML, ale musi to być zrobione wewnątrz funkcji lub hooków. Pozwólcie, że wyjaśnię to za pomocą eksperymentu.
Przetestujmy ten plik, aby zobaczyć, jak to działa. Wewnątrz functions.phpnapisz echo jakiegoś fikcyjnego tekstu:
<?php
echo 'This is an experiment';Odśwież swój frontend. Pojawia się fikcyjny tekst. Jeśli jednak sprawdzisz lub wyświetlisz źródło HTML, zobaczysz, że tekst pojawia się przed otwarciem <html>. To sprawia, że kod HTML jest całkowicie nieprawidłowy!
Przejdź do panelu administracyjnego i naciśnij przycisk odświeżania. Tam też robi to samo (może być ukryty za paskiem administratora, ale jest tam w kodzie HTML).
Jak widać, każdy kod w Twoich functions.phpładuje się przed czymkolwiek innym w naszych szablonach. Dlatego z reguły wszelkie dane wyjściowe (HTML poza znacznikami PHP lub echo) muszą znajdować się wewnątrz funkcji, które będą uruchamiane we właściwym czasie, zwykle podpiętych do akcji lub filtrów.
Przypomnij sobie, kiedy dowiedzieliśmy się i dodaliśmy haki w części 3 samouczka motywu WordPress dla początkujących. Sposób, w jaki uruchamiamy kod na zaczepie, polega na dołączeniu funkcji do zaczepu za pomocą add_action(). Przetestujmy coś innego; stwórzmy funkcję podpiętą do haka, który już zdefiniowaliśmy w naszych szablonach; wp_footer.
W functions.phpremove echododaliśmy w celach testowych i zamiast tego napisz:
<?php
add_action('wp_footer', 'wptutorial_print_footer');
function wptutorial_print_footer() {
echo 'This sentence will appear in footer!';
}Naciśnij przycisk odświeżania w interfejsie użytkownika i zobacz, czy ciąg pojawia się ładnie dokładnie w zdefiniowanym miejscu wp_footer, tuż przed zamknięciem </body>. Zwróć też uwagę, że to nie spowoduje echa w admin. Dzieje się tak, ponieważ wp_footerjest to hook, który jest uruchamiany tylko w interfejsie użytkownika.
Zróbmy nasze pierwsze właściwe operacje w functions.php!
Uwaga: W PHP nie jest możliwe posiadanie dwóch funkcji o dokładnie tej samej nazwie. Obejmuje to nazwy funkcji w WordPressie, motywie i aktywowanej wtyczce! Postępuj zgodnie z najlepszymi praktykami i poprzedź swoje funkcje slugą motywu, jak w powyższym przykładzie: ” wptutorial_<function_name>„. To znacznie zmniejsza ryzyko awarii WordPressa z powodu identycznych nazw funkcji.
Uwaga 2: Nie ma znaczenia, w jakiej kolejności dodasz funkcje i hooki w swoim functions.php. Pamiętaj, że haki i tak są uruchamiane w określonych punktach kontrolnych, a nie w kolejności, w jakiej się znajdują functions.php. Jedynym wyjątkiem jest dołączanie innych plików lub inicjowanie własnych klas.
Właściwy sposób dodawania stylów i skryptów vs niewłaściwy sposób
Niektórzy z was mogą pamiętać z części 3, gdzie dodaliśmy wp_headhaczyk w naszym header.php. Po wykonaniu tej czynności WordPress mógł załadować swoje style i skrypty, w tym pasek administratora. Być może myślisz, że aby dodać nasze arkusze stylów, musimy podłączyć funkcję wp_headi wypisać <link>dla arkusza stylów… Zwykle miałbyś rację!
Jednak w WordPress istnieje specjalny sposób na dodawanie skryptów i stylów. Służy to głównie zarządzaniu kolejnością ładowania i unikaniu ładowania zduplikowanych bibliotek. Na przykład jako autor motywu możesz chcieć dodać skrypty JavaScript, które są zależne od jQuerybiblioteki. Następnie musisz się upewnić, że jQueryzostanie załadowany przed plikami. Ale WordPress i wszelkie wtyczki mają tę samą potrzebę, aby upewnić się, że jQueryjest ładowany również przed ich skryptami. Nie możesz jQuerywielokrotnie ładować biblioteki, ponieważ powoduje to problemy. WordPress ma więc sposób na zarządzanie kolejnością ładowania skryptów i arkuszy stylów.
Dodawanie arkuszy stylów (właściwy sposób)
Do dodawania dowolnych stylów i dowolnych javascriptów używamy haczyka o nazwie wp_enqueue_scripts. Tak, używasz tego haczyka również do stylizacji, pomimo jego nazwy. Dodawanie skryptów i stylów jest określane mianem „w kolejce" – tak jak w wstawieniu do kolejki. Zakolejkujmy (dodaj) nasz arkusz stylów za pomocą funkcji wp_enqueue_style w naszym functions.php:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
}Funkcja wp_enqueue_styleprzyjmuje co najmniej dwa parametry. Pierwsza to unikalna nazwa (uchwyt lub „identyfikator slug”), a druga lokalizacja pliku. Uchwyt musi być unikalny, ponieważ jest to identyfikator, którego WordPress używa do określenia, czy istnieją jakieś duplikaty.
Jeśli chodzi o powrót ścieżki do twojego motywu, dostępnych jest wiele funkcji. Powyżej użyłem funkcji, get_stylesheet_directory_uri()która zwraca adres URL do folderu motywu, a następnie dodałem resztę ścieżki do naszego arkusza stylów.
PS: WordPress oferuje osobną funkcję zwracania pełnego adresu URL do motywu style.css: get_stylesheet_uri(). Użyłem drugiej funkcji powyżej, ponieważ lepiej się z nią zapoznać. Użyjesz go do wszystkich innych plików, które chcesz umieścić w kolejce.
Funkcja wp_enqueue_styleakceptuje bardziej przydatne parametry, takie jak zależności (które inne pliki css muszą być wcześniej załadowane) i numer wersji (przydatne do celów buforowania).
Odśwież swój frontend i zobacz, że arkusz stylów jest załadowany w <head>tagu!
Jeśli jesteś jednym z tych, którzy chcą, aby Twój motyw wyglądał ładniej podczas kodowania, oto Twoja szansa. Zachęcam do rozpoczęcia definiowania kodu HTML, klas i wrapperów oraz dodania stylizacji w style.css. W tej serii samouczków dodamy więcej treści, które będą wymagały stylizacji.
Dodawanie skryptów (właściwy sposób)
Przyjrzyjmy się, jak dodajemy skrypty java do naszego motywu. Odbywa się to za pomocą tego samego haka (dzięki czemu można to wszystko umieścić w jednej funkcji). Ale w przypadku skryptów używamy nieco innej funkcji.
Aby umieścić skrypt w kolejce, użyj wp_enqueue_script(). Parametry są takie same jak wp_enqueue_style(). Pierwszy to unikalny uchwyt, a drugi to ścieżka do skryptu. Trzecia (opcjonalnie) to tablica zależności. Jako czwarty (opcjonalny) parametr ustawiasz numer wersji. I wreszcie piąty (opcjonalnie) określasz, czy skrypt ma być załadowany w <head>tagu, czy na końcu </body>.
WordPress zawiera wiele bibliotek, które są już zawarte. Nie zawsze wszystkie są załadowane, ale dostępne, jeśli ich potrzebujesz. Jeśli chcesz dodać wspólny skrypt biblioteczny, najpierw sprawdź, czy WordPress już go ma. Przykładami są jQuery, wszystkie moduły jQuery UI, Underscore i Backbone.
Jeśli dodasz jeden ze skryptów dołączonych do WordPressa jako zależność, nie musisz kolejkować tego skryptu! Zróbmy to w praktyce.
Utwórz folder, assetsa w nim podfolder jsw naszym folderze motywu, a następnie dodaj nowy pusty main.jsplik. Powiedzmy, że ten skrypt wymaga jQuerybiblioteki, więc ustawiamy ją jako zależność. Wiemy, że WordPress jest dostarczany z jQuerypakietami, a uchwytem jest jquery. Umieścimy nasz skrypt w kolejce w następujący sposób:
<?php
add_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');
function wptutorial_enqueue_scripts() {
wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'/style.css');
wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery']);
}Jeśli odświeżysz frontend i sprawdzisz kod źródłowy, powinieneś zobaczyć, że Twój skrypt, main.jszostał dodany, ale także, że jQueryzaładowana jest biblioteka. I jQueryjest ładowany przed twoim plikiem!
Nauczyłeś się teraz, jak dodawać style i skrypty. Aby dodać więcej plików, dodaj wp_enqueue_style()lub wp_enqueue_script()dla każdego nowego pliku.