Craft CMSのプラグイン「HeadingLevelSlider」を試作してみた話

Craft CMS Advent Calendar 2017」17日目の記事です。

今年に入って「Craft CMS」を触りはじめ、このブログもCraft CMSで運用しようかと考え中です。

さて、ブログ記事を書く際タイトル欄は見出しレベル1、本文は見出しレベル2〜の想定で書いているのですが、実際に記事を出力する際は見出しレベルを一つずらしたい、ということがあるようなないような...。私の場合、article要素とアウトラインアルゴリズム、アクセシビリティ絡みで見出しレベルを1つ下げたくなり(とは言うものの、「インクルーシブHTML+CSS & JavaScript 」等に書かれている課題もあり、ここまでする必要はなさそうな...)、今Movable Typeでは上ノ郷谷太一さん作の「Heading Level Converter」を使用しています。(かなり昔のものですね。)

ブログの運用をCraftCMSに移行した場合この点がどうなるか試してみたくなり、「Heading Level Converter」プラグインのようなものを作ってみることにしました。

試作結果

今回作るのは見出しレベルを調節する「Twigのフィルタ」(Craft 3用)です。

BUNさんが昨年の「Craft CMS Advent Calendar 2016」21日目で紹介されていた「Build to Order Craft CMS plugins | pluginfactory.io」はCraft CMS 3.0.xにも対応しており、ここでプラグインの基本型(今回はTwigExtensinsになります)をダウンロードすれば50%は完成しています。

あとは自分でTwigのフィルタのロジックを書くと、あっという間に完成しました。Twigのフィルタは簡単にできるようなので、プラグイン作成の手始めに作るには良いかもしれません。

試作過程のメモ

プラグイン名は「HeadingLevelSlider」としました。

プラグインの基本型のダウンロード

先ほど書いたとおり、pluginfactory.ioでプラグインのコンポーネントを選択してファイルをダウンロードします。

使用するライブラリをComposerで追加

見出しレベルを上げたり下げたりできる便利なライブラリ「PHP: HTML Heading Normalizer」をComposerで導入しました。

composer.jsonに書いてあればオートロードしてくれるようですね。

ロジックの記述

最後にsrc/twigextensions/HeadingLevelSliderTwigExtension.phpにロジックを記述します。

基本的なことはpluginfactory.ioからダウロードした時点で既に記述されているので、フィルタ名を「hnslider」とし、hnSliderメソッドを記述しました。

public function hnSlider($html, $minLevel = 2)
{
    $meta = '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
    $result = \Vikpe\HtmlHeadingNormalizer::min($meta . $html, $minLevel);
    $result = str_replace($meta, '', $result);
    return $result;
}

テンプレートの例

{{ entry.body | hnslider(3) }}のように書くと、一番大きな見出しレベルが3になるよう調節されて本文が出力されます。
Firefoxで記事ページを表示しインスペクターで要素を調べている様子

ソースコード

hideki-a/heading-level-sliderに置いてあります。バタバタしていてPackagistへの登録はできませんでした。