【SWELL】arkhe_part__{$path}フックをSWELLに移設してみた

SWELLマニアのかんた（@swell_mania）です。

「SWELLのテンプレートファイルをガッツリ編集したいけど、フックが見つからない...」

「テンプレートファイルを直接編集した環境でサイトを運営していて、アップデートのたびにファイルを上書きしないといけない...」

少し前にこんなジレンマを抱えていました。

以前別テーマのArkheでarkhe_part__{$path}というフックを使ったことがありSWELLでも使えたらなと感じていました。

ちなみにarkhe_part__{$path}フックは、テンプレートを指定して中身を書き換えるフィルターフックのことです。

＜参考＞Arkhe公式サイト：テンプレートパーツの読み込みについて

「僕の悩みを解決するにはこれが必要！」

「もしかしてSWELLにもあるのか？」

と思った矢先に、SWELL開発者さんがRTでコメントをくれました↓

SWELLとの一番の差別化点はこのパーツフックです🤓 https://t.co/TRhakmtk4v

— 了🌊SWELL開発者 (@ddryo_loos) April 3, 2022

SWELLには無いんですね...

「なければ何とかしよう！！」

そう思い、arkhe_part__{$path}フックをSWELL移設にチャレンジ、無事フックでカスタマイズできるようになりました。

こんなカスタマイズが実現できた

移設したarkhe_part__{$path}フックは、Arkheのオリジナルフックとほとんど同じ使い方ができます。

まずは基本的な使い方についての紹介です。

【基本的な書き方】

add_filter( 'arkhe_part__{$path}, function( $parts_content ) {
 //処理
   return $parts_content;
},
);

{$path}部分が対象のテンプレートです。

例えばSWELL/parts/post_list/loop_by_slider.phpファイルを対象にする場合は次のよう指定します。

add_filter( 'arkhe_part__parts/post_list/loop_by_slider', function( $parts_content ) {
 //処理
   return $parts_content;
},
);

【出力の一部を書き換える】

add_filter( 'arkhe_part__{$path}, function( $parts_content ) {
	$parts_content = str_replace(
			'マッチする文言',
			'変更後の文言',
			$parts_content
		);
   return $parts_content;
},
);

str_replace関数でマッチするテキストを置き換えるといった活用方法です。

「マッチする文言」に、変更したい対象のコードを書きます。

「変更後の文言」に、変更後のコードを書きます。

記事ページで更新日を出力している部分を変更する例で解説します。

対象のテンプレートは「parts/single/item/times.php」です。開くと、次のような中身になっています↓

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

$date     = $variable['date'] ?? null;
$modified = $variable['modified'] ?? null;

// 両方表示する設定の時、公開日＝更新日であれば更新日は表示しない。
if ( ( $date && $modified ) && ( $date >= $modified ) ) {
	$modified = null;
}

$date_format = get_option( 'date_format' );

?>
<div class="p-articleMetas__times c-postTimes u-thin">
	<?php if ( $date ) : ?>
		<span class="c-postTimes__posted icon-posted" aria-label="<?=esc_attr__( '公開日', 'swell' )?>">
			<?=esc_html( $date->format( $date_format ) )?>
		</span>
	<?php endif; ?>
	<?php if ( $modified ) : ?>
		<time class="c-postTimes__modified icon-modified" datetime="<?=esc_attr( $modified->format( 'Y-m-d' ) )?>" aria-label="<?=esc_attr__( '更新日', 'swell' )?>">
			<?=esc_html( $modified->format( $date_format ) )?>
		</time>
	<?php endif; ?>
</div>

「<div class="p-articleMetas__times c-postTimes u-thin">」というマークアップが付いています。

この部分を「<div class="kanta">」に置き換えるには次のように記述します↓

add_filter( 'arkhe_part__parts/single/item/times', function( $parts_content ) {
	$parts_content = str_replace(
			'<div class="p-articleMetas__times c-postTimes u-thin">',
			'<div class="kanta">',
			$parts_content
		);
   return $parts_content;
},
);

このへんの使い方はSWELLのバージョンアップにより今後変更される可能性あり（この記事執筆時に利用可能な最新バージョン2.6.0.1での動作を確認しています）。

メリット

本来フックがないテンプレートパーツはフックで調整することはできません。

ですが、arkhe_part__{$path}フックを使うとことでフックのないテンプレートを指定して出力をカスタマイズできるようになります。

＜例えばこんなことができる＞

・一覧テンプレートにカスタムフィールドを表示する
・一覧テンプレートをオリジナルにカスタマイズする
・特定のクラスを外す（付ける）ことができる
・表示内容を大幅に変更できる

デメリット

正直言って、1つだけデメリットがあります。

arkhe_part__{$path}を使うためにはSWELLのclasses/Utility/Parts.phpにコードを数行加えることになります。

テーマのアップデートでclasses/Utility/Parts.phpが上書きされるので、classes/Utility/Parts.phpを再編集することになります。

では、どんな場合にarkhe_part__{$path}フックを導入するべきか？

受注案件でクライアントの要望に応じるために複数のテンプレートファイルを直接編集しているような運用状況であれば、arkhe_part__{$path}フック導入のメリットが大きいと言えます。

＜想定例＞
・ファイルA、B、Cを直接編集している
・テーマのアップデート時、手動でファイルA、B、Cを上書きアップロードする運用をしている

arkhe_part__{$path}を導入すると...,

・独自カスタマイズはフックで管理（ファイルの編集なし）
・テーマのアップデート時、classes/Utility/Parts.phpのみ編集（数行のコード）

アチコチに散らばっているファイルを管理する必要がなくなります。

またSWELLの仕様が変更されると移設したフックが使えなくなる可能性があるので注意が必要です。

移設方法

SWELLでarkhe_part__{$path}フックを使うための作業です。

arkhe_part__{$path}フックを移設する方法をコピペできるコード付きで解説します。

【SWELL】
この記事執筆時に利用可能な最新バージョンの2.6.0.1です。

編集するファイルは1つだけ。

コピペで終わります。