Шаблоны WordPress для начинающих: древесина

Последнее обновление Авг 9, 2022

Содержание

Шаблоны WordPress: использование древесины

1 Настройте локальную установку для Timber

2 Установка бруса

3 Инициализация тимберса

4 Применение шаблона

Дополнительные ресурсы

После разговора о шаблонах WordPress я рассмотрел несколько доступных движков:

Если вы смотрите на Mustache, вас может заинтересовать Handlebars, а если вы смотрите на Blade, то я настоятельно рекомендую проверить Sage от команды Roots.

Но в этом заключительном посте я продолжу тему Timber, которую я представил вчера. Я не столько о том, что используется (поскольку у всех есть свои компромиссы), если это последовательно.

Шаблоны WordPress: использование древесины

С учетом сказанного, вот как вы можете начать использовать Timber в своих проектах.

Для начала вам необходимо познакомиться с Composer и настроить локальную среду разработки. Если у вас нет ни того, ни другого или вам нужна помощь, я вам помогу:

После того, как вы выполнили шаги в каждом из этих руководств, вы должны быть готовы к работе. Итак, вот что мы собираемся сделать.

1 Настройте локальную установку для Timber

Я собираюсь использовать Valet для этого, что означает, что у меня будет каталог с последней версией WordPress (4.8.3), установленной в его каталоге.

Это означает, что у меня будет база данных, уже готовая к работе:

И я собираюсь ввести следующие команды для настройки Laravel и безопасной установки (чтобы имитировать промежуточную среду):

$ valet link
$ valet secure

Так что я могу получить доступ к сайту в браузере.

Для тех, кому интересно, я использую:

WordPress 4.8.3
двадцать пятнадцать
Чистые постоянные ссылки

И никаких других плагинов. Это просто ванильная установка, отличная от того, что вы видите выше.

На данный момент я готов установить Timber.

2 Установка бруса

Предполагая, что вы следовали приведенным выше руководствам для Valet и Composer, все должно быть хорошо. Итак, используя терминал, перейдите в каталог установки WordPress.

Затем введите следующую команду:

$ composer require timber/timber

Это установит Timber, но вам все равно нужно будет обновить файл functions.php вашей темы, чтобы он правильно использовал автозагрузчик Composer.

Предполагая, что все прошло правильно, вы сможете обновить свой сайт, перейти к любым сообщениям, страницам и т. д., и все должно быть в порядке.

3 Инициализация тимберса

Наконец, пришло время использовать Timber для замены большей части того, что мы привыкли видеть в контексте шаблона WordPress.

Я предпочитаю делать это в content-page.php, чтобы было легко следовать. Обратите внимание, что сегмент кода, который я изменяю, изначально выглядит так:

<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-## -->

В этом посте я не собираюсь полностью воссоздавать то, что вы видите выше, но я собираюсь начать с того, что необходимо для начала использования механизма шаблонов в контексте основы PHP.

Во-первых, вам нужно создать шаблон, который можно будет применить к странице примера в стандартной установке WordPress. Я назвал свой шаблон template-timber-page.php, и он выглядит так:

<?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
);

В приведенном выше коде вот что происходит:

Я создаю экземпляр объекта Timber.
Затем я получаю контекст Timber. Контекст содержит много полезной информации в шаблоне (или на сайте) в зависимости от того, где вы используете свой шаблон.
После этого я хватаю TimberPost, который по сути является расширением сообщения WordPress. Он содержит данные WP_Post, но делает их доступными для наших шаблонов.
Затем я устанавливаю индекс сообщения массива $context со ссылкой на сообщение Timber (которое я назвал $post ).
Наконец, я говорю Timber отобразить страницу с именем content-sample-page.twig, используя заданный контекст.

Именно здесь важно создать фактический файл ветки (который является расширением файла шаблона Timber). Итак, я создал content-sample-page.twig, и он выглядит так:

{% 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 %}

После создания экземпляра объекта Timber и последующей замены кода, который вы видите выше, вы заметите, что код читается немного по-другому (хотя и не так сложно для понимания).

4 Применение шаблона

Чтобы применить шаблон, перейдите на Страницы в WordPress. Найдите Образец страницы, затем в раскрывающемся списке шаблонов выберите тот, который мы только что создали, используя заголовок выше:

Как только это будет сделано, вы можете просмотреть сообщение. Вы заметите, что это выглядит немного голым по сравнению с тем, что мы привыкли видеть:

Но вы получаете общее представление о том, как мы можем использовать контекст для доступа ко многим из тех же свойств, которые мы привыкли видеть в WordPress, без необходимости засорять код разметкой, PHP и всем остальным, что мы используем. к использованию.

Дополнительные ресурсы

Я знаю, что это преимущественно ускоренный курс по шаблонам, и он не охватывает столько, сколько мог бы. Поскольку этот пост приближается к 1000 слов, мне нужно где-то провести черту, поэтому я решил сделать это здесь.

Это не значит, что я закончил обсуждать это. Я планирую вернуться к более сложным темам, связанным с шаблонами, в будущих горшках.

Но если вам интересно, я настоятельно рекомендую следовать как руководству по началу работы с Timber, так и проекту на GitHub.

Это, по крайней мере, даст вам отправную точку, с которой вы сможете добиться еще большего прогресса в своих усилиях по созданию более чистого, более логически отдельного кода, чем то, что мы привыкли видеть в WordPress.

Источник записи: tommcfarlin.com