Wszystko, co musisz wiedzieć o funkcji get_template_part() WordPressa

Kiedyś przeczytałem, że najlepszym sposobem na naukę programowania jest czytanie kodu napisanego przez innych. W końcu większość czasu spędzonego jako programista prawdopodobnie będzie polegać na przeglądaniu, dopracowywaniu i naprawianiu kodu napisanego przez Ciebie lub innego programistę w przeszłości. Właśnie dlatego tak bardzo lubię darmowe i otwarte oprogramowanie: daje nam dostęp do kodu źródłowego świetnych narzędzi i pozwala się na nich uczyć.

Jeśli interesuje Cię świat WordPressa (i wyobrażam sobie, że jesteś, ponieważ tu jesteś), kod źródłowy WordPress Core lub kod Gutenberga to dwa bardzo dobre sposoby, aby stać się lepszym WordPress profesjonalistą i dowiedzieć się o rozwoju backendu i frontendu.

Od pierwszego wydania Gutenberga dzielimy się wszystkim, czego do tej pory dowiedzieliśmy się o tworzeniu frontendu. Na przykład stworzyliśmy serię postów, w których uczyliśmy Cię podstaw Reacta, widzieliśmy, jak ponownie wykorzystywać komponenty, wyjaśnialiśmy, jak rozszerzyć Gutenberga i dyskutowaliśmy o nowościach w JavaScript, aby pisać lepszy kod źródłowy, żeby wymienić kilka artykułów napisaliśmy.

Cóż, dzisiaj zmienimy bieg i ponownie skupimy się na WordPress Core. Czemu? Nie wiem, może dlatego, że ogłoszenie kolejnego motywu Twenty Twenty-One kilka dni temu jest idealną wymówką, aby to zrobić?. Porozmawiajmy więc o jednym z najważniejszych elementów podczas tworzenia motywów w WordPress: funkcji get_template_part .

Motywy WordPress

Przede wszystkim przyjrzyjmy się, jak działają motywy WordPress, dobrze? Zasadniczo motyw to zbiór plików definiujących strukturę HTML i style CSS, których będzie używać nasza witryna.

Jeśli pomyślisz o szkielecie dowolnej strony internetowej, zobaczysz, że zawsze powtarza się ten sam wzór:

• Zaczynamy od otwarcia tagów html i head . To tam dodajemy skrypty, style, metatagi i tak dalej.
• Następnie zamykamy tag head i otwieramy tag body , który będzie zawierał widoczną zawartość naszej strony.
  • Zwykle treść strony zawiera nagłówek z logo strony, menu itp.
  • Następnie pojawia się sama treść, która może być stroną, artykułem na blogu, listą postów, wynikiem wyszukiwania i tak dalej.
  • Wreszcie zwykle kończy się stopką.
• Wreszcie, po wyrenderowaniu całej strony, zamykamy wszystkie tagi i gotowe.

Tak więc wygląda na to, że każda strona internetowa ma mniej więcej podobną strukturę: jest część wspólna (np. nagłówek, menu, stopka…) i obszar specyficzny dla treści (post na blogu, zestaw wyników, które otrzymaliśmy po wyszukiwaniu). , produkt WooCommerce itp.).

Ponieważ programiści nie lubią powtarzać kodu, a my jesteśmy (ogólnie) zorganizowanymi ludźmi, motywy WordPress mają bardzo wzorzystą strukturę plików. W tym poście, który napisałem kilka miesięcy temu, masz dobre wyjaśnienie różnych plików w motywie, ale pamiętaj, że są:

• arkusz stylów: style.css ,
• plik header.php do „otwarcia” strony internetowej (czyli wypisania tagu head i zwykle początkowej części body , która jest wspólna dla wszystkich stron),
• kolejny plik footer.php , który „zamyka” stronę (tzn. dodaje stopkę i zamyka tag html ) oraz
• wiele dodatkowych plików dla różnych typów treści, które chcemy renderować.

Do czego służy funkcja get_template_part i do czego służy?

Pierwszą rzeczą, którą należy zrobić, gdy natkniesz się na nową funkcję, jest przeciwieństwo tego, co robisz, gdy twój ojciec prosi cię o pomoc w zaprogramowaniu jego nowego odkurzacza Roomba: przeczytaj dokumentację . Zróbmy to z naszą funkcją, patrząc na Kodeks:

get_template_part zapewnia prosty mechanizm dla motywów potomnych do przeciążania sekcji kodu, które można ponownie wykorzystać w motywie.

Dołącza nazwaną część szablonu dla motywu lub jeśli zostanie określona nazwa, zostanie dołączona część specjalistyczna. Jeśli motyw nie zawiera pliku {slug}.php, to żaden szablon nie zostanie dołączony.

Szablon jest dołączany za pomocą parametru require, a nie require_once, więc możesz dołączyć tę samą część szablonu wiele razy.

Dla parametru $name, jeśli plik nazywa się „{slug}-special.php”, określ „special”.

Uwaga: funkcja get_template_part() nie działa po cichu

get_template_part docs na WordPress.org

Widzieć? W niecałą minutę uzyskaliśmy wszystkie potrzebne nam informacje. Teraz wiemy, że ta funkcja jest używana do tworzenia „części wielokrotnego użytku” w motywie (co pozwala uniknąć powielania kodu) i robi to w taki sposób, że motyw potomny może je dostosować. Mamy również informacje o jego parametrach, jego wewnętrznym działaniu (używa funkcji require PHP) i czego możemy się po nim spodziewać ("powoduje niepowodzenie").

Niestety, jest kilka rzeczy, które są nadal niejasne, takie jak te pliki {slug}.php i {slug}-special.php , o których wspomina. Czym oni są? Co zawierają? Co oni robią? Wiele trudnych pytań, na które można odpowiedzieć, patrząc tylko na dokumentację, więc czas przejść do przykładów.

Jak tworzyć szablony częściowe w naszym motywie

Przyjrzyjmy się motywowi Twenty Twenty-One, aby dowiedzieć się, czy używa tych „szablonów częściowych”, a jeśli tak, to jak wyglądają i co należy zrobić, aby zaimplementować je we własnym motywie.

Jeśli przeczytasz mój post o hierarchii plików motywu WordPress, dowiesz się, że „ index.php jest domyślnym szablonem dla naszego motywu. Służy do renderowania dowolnej treści na naszej stronie internetowej, o ile ta treść nie ma specjalnie zaprojektowanego dla niej szablonu.” Ponieważ jest to szablon domyślny, myślę, że warto od niego zacząć. To jest zawartość index.php w motywie Twenty Twenty-One :

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

Jak widać, mamy wszystkie części, które wcześniej komentowaliśmy:

• Zawiera nagłówek za pomocą get_header .
• Renderuje samą treść.
• Zamyka stronę get_footer .

Interesującą rzeczą jest oczywiście obszar „treść” w index.php . W szczególności widzimy, że mamy niewielką kontrolę, aby wiedzieć, czy widzimy poprawną treść (funkcja have_posts pętli WordPress) i, w zależności od tego, czy mamy, czy nie, ładujemy częściowy szablon ( …/content ) lub inny ( …/content-none ).

Jeśli teraz przyjrzymy się częściowemu szablonowi content.php , z grubsza zobaczymy, co następuje:

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

Całkiem proste, prawda? Wszystko, co mamy, to mały szablon zaprojektowany do renderowania ogólnej treści WordPress, takiej jak na przykład post na blogu. Zwróć uwagę, że powstały szkielet HTML to nic innego jak tag article z tytułem, jego zawartością i stopką, a wszystko to przy użyciu tagów szablonu WordPress do pobrania rzeczywistej treści.

Dlaczego API WordPressa jest niesamowite

Nawet jeśli nie wiedziałeś, że wszystkie te funkcje istnieją ( get_header , get_footer lub dzisiejsza gwiazda: get_template_part ), jestem prawie pewien, że ułożyłbyś swój kod w podobny sposób. W końcu wydaje się całkiem logiczne, aby stworzyć szablon dla nagłówka, innego dla stopki, innego dla treści… a potem mieć specjalny plik lub coś, co skleja to wszystko razem, prawda?

Gdybyś zastosował takie podejście, założę się, że twój plik index.php wyglądałby mniej więcej tak:

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

który jest bardzo podobny do tego, który mamy w temacie Twenty Twenty-One. W tym miejscu możesz więc zadać sobie pytanie: co zyskam, korzystając z określonych funkcji WordPressa? Czy to nie to samo, co require bezpośredniego użycia PHP, zwłaszcza biorąc pod uwagę, że zgodnie z dokumentacją WordPressa jest to dokładnie to, czego używają te funkcje pomocnicze?

Cóż, główny powód jest wspomniany w samej dokumentacji: ułatwia tworzenie motywu potomnego. Tak więc, jeśli tworzysz motyw potomny i używasz get_template_part , WordPress będzie szukał szablonu w potomnym, a jeśli nie, użyje szablonu rodzica.

Ale to nie wszystko! Funkcje WordPressa są zazwyczaj pełne filtrów i akcji, które pozwalają dostosować efekt końcowy. Na przykład, jeśli spojrzymy na wewnętrzną funkcję get_template_part w pliku wp-includes/general-template.php :

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

zobaczymy, że mamy kilka działań, które wtyczki i sam motyw mogą wykorzystać. A jeśli nadal będziemy ciągnąć wątek, będziemy mogli nawet zobaczyć, jak WordPress zlokalizuje ( locate_template ) i ładuje szablon, którego użyje:

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

Mam nadzieję, że dzisiejszy post pomógł ci trochę lepiej zrozumieć, jak działają motywy WordPress. Mam też nadzieję, że pokazała Wam, jak poznać WordPressa, czytając jego dokumentację i przeglądając jego kod źródłowy. A jeśli Ci się spodobało, podziel się nim ze znajomymi i zostaw nam komentarz.

Polecane zdjęcie Joshua Sortino na Unsplash.