お問い合わせ

SWELL|記事一覧にカスタムフィールドを表示するカスタマイズ

SWELLのアーカイブページなどの記事一覧でカスタムフィールドを表示するカスタマイズを見かけました。

noteの有料記事だったので実現方法までは無料部分では明かされていませんでしたが、色々検索していたら、この方法なら出来るのでは?という参考記事を見つけたので実現方法の概略をメモしておきます。

SWELLで記事一覧を表示するテンプレート

SWELLでは記事一覧を表示する時に最終的に呼び出されdるテンプレートパーツは以下の3つです。

  • parts\post_list\style_normal.php
  • parts\post_list\style_simple.php
  • parts\post_list\style_big.php

この中に記事一覧の各記事のHTMLを出力する部分があります。

			<div class="p-postList__body">
				<?php
					if ( $show_title ) :
					echo '<' . esc_attr( $h_tag ) . ' class="p-postList__title">';
					the_title();
					echo '</' . esc_attr( $h_tag ) . '>';
					endif;
				?>
				<?php if ( ! empty( $excerpt ) ) : ?>
省略
				<?php endif; ?>
				<div class="p-postList__meta">
					<?php
省略
					?>
				</div>
			</div>

カスタムフィールドを呼び出して表示するには、このコードの中でカスタムフィールドを呼び出し、HTMLを追加で出力する必要があります。

この部分で唯一使えるフックがthe_tile()です。もし、投稿毎にカスタムフィールドを表示するのであれば、このフックを使う以外に方法はありません。

しかし、カスタムフィールドを追加したいのはタイトルではない!そう思ってあきらめる人が大半だと思いますが、このフックを変則的に使うことでタイトル以外の部分にコードを追加することができます。

SWELLの記事一覧でカスタムフィールドを表示するカスタマイズ

SWELLの記事一覧で親テーマを直接修正することなく、カスタムフィールドを表示するには、2つのカスタマイズ方法が知られています。

①子テーマにテンプレートパーツをコピーしてカスタマイズ

カスタムフィールドを表示するカスタマイズはテンプレートファイルを子テーマにコピーして、コードを修正すれば簡単に実現できます。

SWELLはテンプレートパーツが細かく分かれているので、子テーマにコピーしてカスタマイズしても、親テーマとの差分管理は最小限で済みます。

②記事一覧で抜粋を使用してカスタムフィールドを表示するカスタマイズ

記事一覧では抜粋を表示することができます。その抜粋を表示する時に内容を書き換えてカスタムフィールドの内容を表示させる方法を紹介している方がいます。

SWELLは投稿の抜粋に直接書かれたショートコードは展開してくれるので、それを利用したカスタマイズになります。

カスタムフィールドを表示するコードはショートコードになっており、抜粋にショートコードを書くことでカスタムフィールドを表示させるようです。

全ての記事にショートコードを抜粋に記入する必要があり、ちょっと使いにくい印象があります。

the_titleフックでカスタムフィールドを表示する方法

考え方

the_titleフックはタイトルを書き換えるフックなので、そこにカスタムフィールドを表示しても思ったおとりにならないと思うかもしれません。

でも、無理やりつじつまを合わせることで、タイトルの外にカスタムフィールドを表示させることができます。

記事一覧はタイトルタグがH2の場合は以下のような構成になります。

<h2>
the_title();
</h2>

この構成のまま、the_titleフックを使って、タイトルを以下のように書き換えます。

<h2>
タイトル
</h2> // フックで追加
// ここにカスタムフィールドを表示
// ここにカスタムフィールドを表示
<h2 class="display:none;"> //フックで追加
</h2>

何をやっているかというと、フックで書き換える時にh2タグを最初に閉じ、そのあとにカスタムフィールドを表示させ、最後にダミーのh2タグを追加し、つじつまを合わせています。

the_titleフックは、post_idを参照できるので、記事一覧の記事毎にカスタムフィールドを表示させることができます。

記事一覧のタイトルタグは設定から変更できるので、h2は1例です。

実際のコード

the_titleフックを必要な時だけ有効化する必要があります。そうしないと、the_title()を呼び出しているところで全て有効になってしまいます。

the_titleフックはメニューにも使われているので、条件指定しないと予期せぬ動きをします。

このコードはプロトタイプなのでコピペしても動かないです。実際のカスタムフィールドや実現したい内容に合わせて修正する必要があります。

function function_name( $title, $id ) {
    $cf_value = get_post_meta( $id, 'cf-field-name', true );
    if ( !empty($cf_value) ) {
        $title .= "</h2><p class='cf-field-name'>フィールド名:{$cf_value}</p><h2 style='display:none;'>";
    }
    return $title;
}

if( strcmp($_SERVER['REQUEST_URI'], '/archive_slug/') === 0 ){
    add_filter( 'the_title', 'function_name', 10, 2 );
}

タイトルタグ内に無理やり追加しているので、ダミーのh2タグができてしまうのがこの方法の欠点です。

ダミーのh2が嫌だという場合は、タイトルタグを変更して影響を少なくする方法もあります。

また、最終HTMLをバッファしてダミーのタグを消す方法はありますが、そこまでやる必要があるのか?というトレードオフになるでしょう。

参考記事

この記事を書くにあたり参考にさせていただきました。

まとめ

一見、フックを使っても実現できなそうなカスタマイズを実現しているのを見かけたので、実現方法を検討してみました。

個人的には、変則的にフックを使って実現するよりも、テンプレートファイルを修正する方がよいと思っています。

役に立ったら他の人にもシェア!
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次