「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;
}
テンプレートの例
``のように書くと、一番大きな見出しレベルが3になるよう調節されて本文が出力されます。
ソースコード
hideki-a/heading-level-sliderに置いてあります。バタバタしていてPackagistへの登録はできませんでした。