Zrozumienie skrótów WordPress

Jeśli korzystasz z WordPressa od dłuższego czasu, prawdopodobnie korzystałeś już z niektórych skrótów.

Skróty to przydatne małe fragmenty, które pozwalają wstawić do treści jakąś specjalną funkcjonalność, która w innym przypadku nie byłaby możliwa. Na przykład: wiele galerii obrazów i wtyczek z suwakami daje krótki kod, który możesz po prostu wstawić do treści w dowolnym miejscu, aby pojawiły się tam odpowiednie obrazy. Skróty zwykle wyglądają mniej więcej tak:

[example shortcode]

Innymi słowy: skróty powodują, że dzieje się coś wyjątkowego wszędzie tam, gdzie są umieszczone w tekście.
Ale nie jesteś ograniczony do wstępnie zdefiniowanych skrótów; możesz zdefiniować niestandardowe skróty, aby robić, co chcesz! Mogą być proste, złożone lub cokolwiek pomiędzy.

W tej serii zaczniemy od prostego krótkiego kodu i przejdziemy do bardziej skomplikowanych (i jeszcze bardziej użytecznych!) przykładów.

Uwaga: będziemy tutaj pracować głównie z PHP, a konkretnie z plikiem functions.php twojego motywu. Jeśli nie używasz motywu potomnego (lub motywu niestandardowego/początkowego, który można edytować bez obawy, że aktualizacje nadpiszą twoje zmiany), przed rozpoczęciem będziesz chciał utworzyć motyw potomny.

Uwaga: nie potrzebujesz żadnej wiedzy o PHP, aby przejść przez ten post, ale znajomość przynajmniej podstaw pomoże. Zawarty tutaj kod jest dość prosty i staraliśmy się, aby jego kopiowanie i dostosowywanie było jak najłatwiejsze. Będziemy wyjaśniać każdy fragment kodu na bieżąco, ale jeśli jesteś zupełnie nowy w PHP z motywem WordPress, pamiętaj, że trochę złego kodu w pliku functions.php może zepsuć witrynę.

Przydatny prosty przykład krótkiego kodu

Załóżmy, że potrzebujemy krótkiego kodu, który wstawia do posta specjalną sekcję z informacjami o autorze, taką jak ta:

Zamiast tworzyć i stylizować ramkę, obraz i tekst w edytorze wizualnym WordPress, po prostu utworzymy krótki kod, aby wyświetlić to wszystko za pomocą prostego fragmentu!

(Uwaga dodatkowa: WordPress ma lepsze sposoby pracy z profilami autorów, ale trzymamy się tego przykładu, ponieważ ładnie pokazuje, jak łatwo jest używać skrótów do umieszczania określonych bloków treści na stronie).

Krok 1: Dodaj krótki kod w pliku functions.php Twojego motywu

Będziesz używać funkcji add_shortcode , aby nadać swojemu shortcode nazwę i powiedzieć WordPressowi, co powinien zrobić za każdym razem, gdy zostanie użyty shortcode. Dodaj ten wiersz do pliku functions.php motywu:

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

Tak naprawdę nie ma znaczenia , gdzie wewnątrz functions.php , ale aby uniknąć konfliktów, zalecamy umieszczenie go na samym końcu. (Jeżeli jednak plik kończy się tagiem zamykającym ?>, powinien on znajdować się tuż przed nim, a nie po.)

Zanim przejdziemy dalej, podzielmy trochę tę linię, abyśmy zrozumieli, co tak naprawdę się tutaj dzieje. Dwa fragmenty tekstu lub „argumenty” w nawiasach nie są tak naprawdę wyjątkowe; to tylko nazwy. Przyjrzyjmy się, co każdy z nich oznacza:

1. Pierwszy argument: w tym przypadku author_bio – mówi WordPressowi rzeczywistą nazwę twojego shortcode. Będzie to tekst, który użytkownicy mogą wpisać w nawiasach, aby użyć krótkiego kodu. Tak więc z tym kodem w formie, w jakiej został napisany, [author_bio] będzie naszym krótkim kodem, który uruchomi nasze pole biografii autora.
   Ten tekst może być dowolny, ale zawsze najlepiej jest starać się być wyjątkowy. W ten sposób nie będziesz narażać się na ryzyko konfliktu nazwy skrótu z nazwą innej osoby z innej zainstalowanej wtyczki lub motywu.
2. Drugi argument: w tym przypadku create_author_bio – wskazuje WordPressowi rzeczywistą funkcję PHP, którą powinien wykonać za każdym razem, gdy używany jest ten krótki kod. Utworzymy tę funkcję w następnym kroku; na razie po prostu informujemy WordPressa, jak będzie się nazywać. (Ta nazwa również powinna być unikalna, aby uniknąć konfliktów).

Więc jeśli to pomoże, możesz pomyśleć o kodzie w ten sposób:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

Jeśli jesteś zainteresowany bardziej szczegółowymi szczegółami, sprawdź wpis add_shortcode Codex.

Krok 2: Utwórz funkcję do obsługi krótkiego kodu

Teraz musimy faktycznie utworzyć funkcję, którą właśnie nazwaliśmy!

Ponieważ właśnie powiedzieliśmy WordPressowi w ostatnim kroku, że nazwa naszej funkcji to create_author_bio, nasz kod powinien teraz wyglądać tak, gdy dodamy nową funkcję:

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

Możesz zauważyć, że ta funkcja jeszcze nic nie robi; wszystko, co jest w środku, to komentarz. Zajmiemy się tym w następnym kroku. Na razie chcemy tylko zaznaczyć, że tak naprawdę są tu tylko dwa elementy: rejestracja krótkiego kodu i funkcja, która dzieje się za każdym razem, gdy jest używana. WordPress PHP może wyglądać onieśmielająco, ale to naprawdę takie proste!

Uwaga dodatkowa: nie ma znaczenia, czy funkcja create_author_bio występuje po funkcji add_shortcode , czy przed nią. Kolejność nie jest w tym przypadku istotna.

Krok 3: Spraw, aby funkcja coś zrobiła

Teraz pozostaje tylko sprawić, by nasza funkcja robiła to, co chcemy!

Taka funkcja może zrobić wszystko, ale bez względu na wszystko powinna ostatecznie zwrócić pojedynczą wartość (taką jak ciąg tekstu lub liczba). Ta wartość może mieć dowolną długość lub złożoność, ale niezależnie od tego, co zwróci funkcja, pojawi się wszędzie tam, gdzie używany jest nasz krótki kod.

Dla naszych celów będzie to po prostu prosty kod HTML. Oto znaczniki do dodania obrazu i biografii naszego autora w elemencie <aside> z niestandardową klasą (ale nie umieszczaj tego jeszcze nigdzie; na razie patrzymy na to jako podgląd):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

Ostatecznie użyjemy tej klasy Author-bio-box w pierwszym wierszu, aby stylizować biografię za pomocą CSS. (Będziemy używać klasy zamiast identyfikatora, na wypadek, gdybyś chciał dodać skrót więcej niż jednego autora do treści napisanych przez wielu autorów). Pamiętaj jednak, że może to być wszystko, co chcemy umieścić na stronie!

Teraz wszystko, co musimy zrobić, to sprawić, aby funkcja naszego shortcode zwróciła powyższy kod HTML!

Ponieważ plik functions.php powinien zawierać tylko… cóż, funkcje PHP (a także dla zachowania porządku), usunęliśmy podziały wierszy i spacje między tymi elementami HTML, które właśnie przeglądaliśmy, i umieściliśmy je w ciągu znaków (wewnątrz pojedynczych cudzysłowów) . Ale funkcjonalnie to wciąż ten sam fragment kodu HTML, który właśnie widzieliśmy powyżej, a tak powinien wyglądać nasz końcowy kod PHP:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

Skończyliśmy z PHP! Po zapisaniu naszego pliku functions.php z powyższym kodem końcowym, każdy autor może po prostu wpisać [author_bio] na dowolnej stronie lub w poście, a powyższy kod HTML pojawi się w miejscu krótkiego kodu!

Poza tym naprawdę fajną rzeczą jest to, że jeśli kiedykolwiek będziemy musieli zaktualizować naszą biografię, nie będziemy musieli edytować każdego miejsca, w którym się pojawia! Zamiast tego wszystko, co musimy zrobić, to edytować kod w naszym pliku functions.php , a zostanie on zaktualizowany wszędzie jednocześnie. Czysto, co?

Aby jednak jak najlepiej to wykorzystać, prawdopodobnie będziemy chcieli dodać specjalną stylizację do pudełka z biografią.

Krok 4: Dodaj CSS

Krótki kod nie jest świetny bez stylizacji, więc dodajmy go! Być może będziesz musiał nieco dostosować niektóre wartości, w zależności od czcionek Twojej witryny (ta na powyższym obrazku to Fanwood Text) i obowiązujących reguł CSS. A może po prostu chcesz spróbować czegoś innego!

Ten CSS można skopiować do pliku style.css motywu (podrzędnego) lub jeśli korzystasz z WordPress w wersji 4.7 lub nowszej (co powinno być!), możesz po prostu wkleić ten CSS w polu „Dodatkowy CSS” w oknie Dostosuj ekran:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

Teraz wszystko powinno wyglądać znacznie lepiej. Ale nie krępuj się bawić CSS, aby dostosować pole autora do siebie i sprawić, by czuł się jak w domu na Twojej stronie!

Zalecane: spraw, aby funkcja była „podłączalna”

Nie dotyczy to skrótów i nie jest bezwzględnie potrzebne do działania kodu, ale jest to najlepsza praktyka i jest to dobry moment, aby o tym wspomnieć.

Najpierw trochę informacji o tym, jak działa PHP :

Pamiętasz, jak sami nazwaliśmy naszą funkcję create_author_bio ? Cóż, nie ma nic specjalnego w nazwie create_author_bio; Równie dobrze mogliśmy nazwać naszą funkcję, jak tylko chcieliśmy (chociaż najlepiej, jeśli nazwa funkcji daje choć odrobinę podpowiedzi, co ona robi, dlatego wybraliśmy create_author_bio ).

Ale oto rzecz: jeśli dwie funkcje PHP mają taką samą nazwę, wynikiem będzie błąd krytyczny, który uniemożliwi załadowanie strony, ponieważ PHP nie będzie miał pojęcia, która funkcja jest właściwa. PHP nie zgaduje, więc po prostu się zatrzymuje.

I nie tylko o nasz kod musimy się martwić; witryna WordPress może wykorzystywać kod dziesiątek, a może nawet setek różnych programistów, w zależności od zainstalowanych wtyczek i motywów. Jeśli ta sama nazwa funkcji zostanie użyta dwa razy, wszystko się zepsuje!

To źle i oczywiście chcemy mieć pewność, że to się nigdy nie wydarzy.

Możemy to zrobić, czyniąc naszą funkcję „podłączalną”; innymi słowy, mówiąc WordPressowi, aby nie tworzył naszej funkcji, jeśli istnieje już inna o tej samej nazwie. To elegancko proste; po prostu zawijamy nasz istniejący kod w tę prostą instrukcję warunkową:

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

To warunkowe wyrażenie if sprawdza tylko, czy funkcja o nazwie create_author_bio już nie istnieje. Cały nasz kod PHP, którego używaliśmy do tej pory, można po prostu przenieść do wnętrza tej instrukcji, między nawiasy klamrowe { } .

Jednak nadal najlepiej jest nazywać funkcje tak unikatowo, jak to tylko możliwe! Umożliwienie podłączania naszej funkcji pozwala jedynie uniknąć błędu krytycznego. Jeśli więc wystąpiłby konflikt nazw, nasz krótki kod nadal nie działałby, ale przynajmniej witryna nadal by działała i nic więcej nie byłoby zepsute.

Wniosek

Otóż ​​to! Mam nadzieję, że podobało Ci się tworzenie niestandardowego krótkiego kodu biograficznego autora! Jeśli śledziłeś to wszystko, wystarczy wpisać [author_bio] w dowolnym miejscu na stronie lub w poście, a Twój kod się pojawi!

Ten krótki kod można łatwo dostosować do wyświetlania czegokolwiek na stronie. Gif, niestandardowy blok HTML i/lub JavaScript, obraz lub wideo… cokolwiek chcesz!

Jednak chociaż ten przykład jest przydatny, jeśli potrzebujesz tylko wypisać pojedynczą, statyczną wartość gdzieś na stronie, nie jest on zbyt elastyczny. Zawsze zwraca dokładnie to samo za każdym razem, a często potrzebujemy skrótów, aby były bardziej elastyczne.

Dobra wiadomość: omówiliśmy tylko podstawy skrótów, a są w stanie znacznie więcej!