Lightningの投稿一覧をカスタマイズする

Lightningの投稿一覧は、PHPを使ってカスタマイズできることをご存知でしょうか？

私は、初めて受注した案件で、新たに投稿された記事に表示される「新着!!」を「NEW」に変更してほしいとお願いされた経験があります。その際、ベクトル社の「Lightning 投稿一覧カスタマイズ徹底解説」を見つけました。今回はこの記事の内容を共有したいと思います。

当時、私はPHPの初学者でした。そのため、見つけた記事の内容を理解するのに苦労しました。今でもPHPコードで何が行われているのかを完全には理解できないことがあります。一緒に理解を深めていきましょう！

コード

まずは「新着!!」を「NEW」に変更するためのコードをご覧ください。

add_filter( 'vk_post_options', function( $options ) {

	// $options の 'new_text' の値を変更する
	$options['new_text'] = 'NEW';
	
	// 変更した $options を返す
	return $options;

} );

コードの記述場所としては、子テーマのfunctions.phpファイルやCode Snippetsなどのプラグインが挙げられます。プラグインを利用すると、テーマを変更してもカスタマイズが維持されますが、今回のカスタマイズはLightningに特化したものであるため、子テーマのfunctions.phpでも特に問題ありません。

$options

vk_post_optionsフィルターで書き換えが可能な変数「$options」は、テーマの_g3/template-parts/loop-item.phpで定義されています。

$options = array(
	// card, card-noborder, card-intext, card-horizontal , media, postListText.
	'layout'                     => 'media',
	'display_image'              => true,
	'display_image_overlay_term' => true,
	'display_excerpt'            => true,
	'display_date'               => true,
	'display_new'                => true,
	'display_taxonomies'         => false,
	'display_btn'                => true,
	'image_default_url'          => false,
	'overlay'                    => false,
	'btn_text'                   => __( 'Read more', 'lightning' ),
	'btn_align'                  => 'text-right',
	'new_text'                   => __( 'New!!', 'lightning' ),
	'new_date'                   => 7,
	'class_outer'                => 'vk_post-col-xs-12 vk_post-col-sm-12 vk_post-col-lg-12',
	'class_title'                => '',
	'body_prepend'               => '',
	'body_append'                => '',
);VK_Component_Posts::the_view( $post, $options );

配列の基本

$optionsは配列ですので、まずは配列の基本を押さえましょう。

• key => value の形式で要素を定義する
• 複数の要素を同時に定義する場合はカンマ（,）で区切る
• 配列の要素にアクセスするにはarray[key]の構文を使用する

$optionsの要素

$optionsの要素は以下のとおりです。詳しくは、利用可能な主なパラメーターを参照してください。

• layout：投稿一覧のレイアウト（card, card-noborder, card-intext, card-horizontal , media, postListText）を指定する
• display_image：アイキャッチ画像の表示(true)/非表示(false)を制御する
• display_image_overlay_term：アイキャッチ画像の右上に項目を表示する(true)/しない(false)を制御する
• display_excerpt：投稿の抜粋の表示(true)/非表示(false)を制御する
• display_date：投稿日の表示(true)/非表示(false)を制御する
• display_new：新着の表示(true)/非表示(false)を制御する
• display_taxonomies：タクソノミーの表示(true)/非表示(false)を制御する
• display_btn：ボタンの表示(true)/非表示(false)を制御する
• image_default_url：アイキャッチ画像が設定されていないときに使用するデフォルト画像のURL指定をする
• overlay：アイキャッチ画像の上に重ねる要素を指定する
• btn_text：ボタンのテキストを指定する
• btn_align：ボタンの配置（text-right、text-left、text-center）を制御する
• new_text：新着のテキストを指定する
• new_date：新着を表示する日数を指定する
• class_outer：各投稿のdiv要素に追加するクラスを指定する
• class_title：各投稿のタイトルに追加するクラスを指定する
• body_prepend：各投稿の先頭に追加する要素を指定する
• body_append：各投稿の末尾に追加する要素を指定する

国際化

__( 'Read more', 'lightning' ) と __( 'New!!', 'lightning' ) は、翻訳を取得するための関数です。

１つ目の引数が翻訳するテキストで、２つ目の引数がテキスト ドメインです。

テキストドメインについては、以下の公式ドキュメントを参照してください

• 国際化 – Japanese Team – WordPress.org 日本語
• Internationalization – Theme Handbook | Developer.WordPress.org

the_view()

the_view()は、VK_Component_Postsクラスのメソッドで、１件の投稿を表示します。

/**
 * Display single view
 *
 * @param object $post post oject.
 * @param array  $options display options.
 * @return void
 */
public static function the_view( $post, $options ) {
	$allowed_html = self::vk_kses_post();
	echo wp_kses( self::get_view( $post, $options ), $allowed_html );
}

the_view()のパラメーター

このメソッドに渡されるパラメーターは以下のとおりです。

• $postは、WordPressが標準で用意している変数で、表示する投稿の情報
• $optionsは、Lightningが定義している変数で、投稿の表示に関する情報

VK_Component_Postsクラス

VK_Component_Postsは、/wp-content/themes/lightning/vendor/vektor-inc/vk-component/src/VK_Component_Posts.phpで定義されています。

まとめ

$optionsの値を変更するコードを実際に書いて試してみてください。自分の書いたコードがサイトの表示を変える体験すると、プログラミングがさらに楽しくなるはずです！