Шаблони WordPress для початківців: деревина

Останнє оновлення Лис 9, 2022

Зміст

Шаблони WordPress: використання Timber

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

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

3 Ініціалізація Timber

4 Застосування шаблону

Більше ресурсів

Розмовляючи про шаблони WordPress, я розглянув деякі різні доступні механізми:

Якщо ви дивитеся на Moustache, то вас може зацікавити Handlebars, а якщо ви дивитесь на Blade, то я настійно рекомендую перевірити Sage від команди Roots.

Але в цьому останньому дописі я збираюся продовжити тему Timber, яку я представив учора. Мене цікавить не стільки те, що використовується (оскільки всі вони мають свої компроміси), якщо це послідовне.

Шаблони WordPress: використання Timber

З огляду на це, ось як ви можете почати використовувати 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

Нарешті настав час використати 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 (яку я назвав $post ).
Нарешті, я кажу Timber відобразити сторінку під назвою content-sample-page.twig, використовуючи заданий контекст.

Саме тут важливо створити фактичний файл 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