WordPressでTwigを使えるようにするプラグイン Timber

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。ましじめの田村です。

WordPressでTwigを使いたい場合にTimberプラグインが良さそうでしたので紹介したいと思います。
timber公式サイト

twigとは

twigとはPHP製のテンプレートエンジンです。

PHP

<?php echo $var ?>
<?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?>

PHPだとこのように書くところを

Twig

{{ var }}
{{ var|escape }}

このようにシンプルに書くことができます。

有名どころではDrupalやCraftCMS、GRAVとさまざまなCMSでも使われています。
記述の習得は必要ですが、多くのシステムで使われていますので覚えておいても損をするということはなさそうです。

詳しくは公式サイトを確認ください。
Twig

プラグインを有効化して使ってみよう

まずはこのあたりから順を追ってはじめるとそさそうです。
サンプルテーマもありますので確認してみてください。
getting-started

実際にはWordPressの記述をこういう感じでテンプレートを書いていくことができます。

title

<h1 class="article-h1"><?php the_title(); ?></h1>
↓
<h1 class="article-h1">{{ post.title }}</h1>

single

{% extends "base.twig" %}

{% block content %}
    <div class="content-wrapper">
        <article class="post-type-{{ post.post_type }}" id="post-{{ post.ID }}">
            <section class="article-content">
                {% block headline %}
                    <h1 class="article-h1">{{ post.title }}</h1>
                    <h2 class="article-h2">{{ post.subtitle }}</h2>
                {% endblock %}

                <p class="blog-author"><span>By</span> {{ post.author.name }} <span>&bull;</span> {{ post.post_date|date }}</p>
                {{ post.content }}
            </section>
        </article>
    </div>
{% endblock %}

テンプレートをextendsしたりfilterを使用することも可能です。
他のCMSなどでTwigを使ったことがある方は比較的スムーズに導入できるかなと思います。

以前WordPressにTimberを入れてTwigでサイト作成した際は、概ねやりたいことはできた印象でした。 個人的にはテンプレートエンジンを通して書いた方が安心するので好みな書き方です。

以上「WordPressでTwigを使えるようにするプラグイン Timber」でした。
WordPressでTwigを使いたい場合に参考にしてみてください。


関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから