Od czasu, gdy mówię o szablonach WordPress, omówiłem kilka różnych dostępnych silników:
Jeśli patrzysz na Wąsy, być może zainteresuje Cię Kierownica, a jeśli patrzysz na Blade, gorąco polecam sprawdzenie Sage z zespołu Roots.
Ale w tym ostatnim poście zamierzam kontynuować z Timberem, co przedstawiłem wczoraj. Nie chodzi mi tak bardzo o to, co jest używane (ponieważ wszystkie mają swoje kompromisy), o ile jest to spójne.
Szablony WordPress: Korzystanie z drewna
Mając to na uwadze, oto jak możesz zacząć używać Timber w swoich projektach.
Aby rozpocząć, musisz znać Composer i mieć konfigurację lokalnego środowiska programistycznego. Jeśli nie masz żadnego z nich lub potrzebujesz pomocy, mam dla Ciebie ochronę:
Po przejściu kroków opisanych w każdym z tych przewodników powinieneś być gotowy. Oto, co zamierzamy zrobić.
1 Skonfiguruj lokalną instalację dla drewna
Będę do tego używał Valeta, co oznacza, że będę miał katalog z najnowszą wersją WordPressa (czyli 4.8.3) zainstalowaną w jego katalogu.
Oznacza to, że będę mieć bazę danych już gotową do pracy:
Wydam następujące polecenia, aby skonfigurować Laravela i bezpieczną instalację (aby naśladować środowisko pomostowe):
$ valet link
$ valet secureAbym mógł uzyskać dostęp do witryny w przeglądarce.
Dla ciekawskich używam:
- WordPress 4.8.3
- dwadzieścia piętnaście
- Wyczyść permalinki
I żadnych innych wtyczek. To tylko waniliowa instalacja inna niż ta, którą widzisz powyżej.
W tym momencie jestem gotowy do zainstalowania Timber.
2 Instalacja drewna
Zakładając, że postępowałeś zgodnie z powyższymi wskazówkami dla Valeta i Composera, powinieneś być gotowy. Korzystając z terminala, przejdź do katalogu instalacyjnego WordPress.
Następnie wydaj następujące polecenie:
$ composer require timber/timber
Spowoduje to zainstalowanie Timber, ale nadal będziesz musiał zaktualizować plik functions.php swojego motywu, aby poprawnie używał autoloadera Composera.
Zakładając, że wszystko poszło poprawnie, powinieneś być w stanie odświeżyć swoją witrynę, przejść do dowolnych postów, stron itd. i nic nie powinno być niesprawne.
3 Inicjalizacja drewna
Wreszcie nadszedł czas, aby użyć Timber, aby zastąpić większość tego, do czego przywykliśmy w kontekście szablonu WordPress.
Zdecydowałem się zrobić to w content-page.php, aby ułatwić śledzenie. Zauważ, że segment kodu, który zmieniam oryginalnie wygląda tak:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">'. __( 'Pages:', 'twentyfifteen' ). '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">'. __( 'Page', 'twentyfifteen' ). ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',) );
?>
</div><!-- .entry-content -->
<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>
</article><!-- #post-## -->W tym poście nie zamierzam całkowicie odtwarzać tego, co widzisz powyżej, ale zacznę od tego, co jest potrzebne, aby zacząć używać silnika szablonów w kontekście podstawy PHP.
Najpierw będziesz musiał stworzyć szablon, który można zastosować do przykładowej strony w standardowej instalacji WordPressa. Zadzwoniłem do mojego template-timber-page.php i wygląda to tak:
<?php
/**
* Template Name: Timber Template
* Description: Replaces the standard page with a Timber template.
*/
$timber = new TimberTimber();
$context = Timber::get_context();
$post = new TimberPost();
$context['post'] = $post;
Timber::render(
array( 'content-'. $post->post_name. '.twig', 'page.twig' ),
$context
);
W powyższym kodzie dzieje się tak:
- Tworzę instancję obiektu Timber.
- Następnie otrzymuję kontekst drewna. Kontekst zawiera wiele przydatnych informacji w szablonie (lub witrynie) w zależności od tego, gdzie używasz szablonu.
- Potem chwytam TimberPost, który jest zasadniczo rozszerzeniem postu na WordPressie. Posiada dane WP_Post, ale udostępnia je naszym szablonom.
- Następnie ustawię indeks postu tablicy $context z odniesieniem do Timber Post (który nazwałem $post ).
- Na koniec każę Timberowi wyrenderować stronę o nazwie content-sample-page.twig przy użyciu podanego kontekstu.
W tym miejscu ważne jest, aby utworzyć rzeczywisty plik gałązki (który jest rozszerzeniem pliku szablonu Timber). Stworzyłem więc content-sample-page.twig i wygląda to tak:
{% block content %}
<article id="post-{{post.ID}}" class="{{body_class}}">
<header class="entry-header">
<h1 class="article-h1">{{post.title}}</h1>
</header><!-- .entry-header -->
<div class="entry-content">
{{post.content}}
</div><!-- .entry-content -->
</article><!-- #post-## -->
{% endblock %}
Po utworzeniu instancji obiektu Timber, a następnie zastąpieniu kodu, który widzisz powyżej, zauważysz, że kod czyta się trochę inaczej (choć nie jest to trudne do naśladowania).
4 Stosowanie szablonu
Aby zastosować szablon, przejdź do Strony w WordPressie. Zlokalizuj przykładową stronę, a następnie w menu rozwijanym szablonu wybierz tę, którą właśnie utworzyliśmy, używając powyższego tytułu:
Gdy to zrobisz, możesz wyświetlić post. Zauważysz, że wygląda trochę nago w porównaniu do tego, do czego jesteśmy przyzwyczajeni:
Ale masz ogólne pojęcie, w jaki sposób możemy użyć kontekstu, aby uzyskać dostęp do wielu tych samych właściwości, do których przywykliśmy w WordPressie, bez konieczności zaśmiecania kodu znacznikami i PHP oraz czymkolwiek innym, czego używamy do używania.
Więcej zasobów
Wiem, że jest to głównie przyspieszony kurs tworzenia szablonów i nie obejmuje tak dużo, jak mógłby. Ponieważ ten post zbliża się do 1000 słów, muszę gdzieś narysować granicę, więc zdecyduję się zrobić to tutaj.
Nie oznacza to jednak, że skończyłem o tym dyskutować. Planuję wrócić do bardziej zaawansowanych tematów związanych z tworzeniem szablonów w przyszłych doniczkach.
Ale jeśli jesteś zainteresowany, gorąco polecam podążanie zarówno za przewodnikiem Getting tarted dla Timber, jak i projektem na GitHub.
To przynajmniej da ci punkt wyjścia, od którego możesz zrobić jeszcze większy postęp w tworzeniu czystszego, bardziej logicznie oddzielnego kodu niż ten, do którego przywykliśmy w WordPressie.