Lightningの投稿一覧は、PHPを使ってカスタマイズできることをご存知でしょうか？
私は、初めて受注した案件で、新たに投稿された記事に表示される「新着!!」を「NEW!!」に変更してほしいとお願いされた経験があります。その際、Vector社のブログ記事「Lightning 投稿一覧カスタマイズ徹底解説 | 株式会社ベクトル」を見つけました。今回はこの記事の内容を共有したいと思います。
当時、私はPHPの初学者でした。そのため、この記事の内容を理解するのに苦労しました。今でもPHPコードで何が行われているのかを完全には理解できないことがあります。一緒に理解を深めていきましょう！
まずは「新着!!」を「NEW」に変更するためのコードをご覧ください。
add_filter( 'vk_post_options', function( $options ) {
// $options の 'new_text' の値を変更する
$options['new_text'] = 'NEW';
// 変更した $options を返す
return $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 は配列です。
配列の基本
index => value 形式でインデックスと値を定義します。
複数の要素を同時に定義する場合はカンマで区切ります。
配列の要素にアクセスするには array[key] 構文を使います。
$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_titlebody_prepend：各投稿の先頭に追加する要素を指定するbody_append：各投稿の末尾に追加する要素を指定する
__( 'Read more', 'lightning' ) と __( 'New!!', 'lightning' ) は、翻訳を取得するための関数です。１つ目の引数が翻訳するテキストで、２つ目の引数がテキスト ドメインです。
VK_Component_Posts::the_view(); は、１件分の投稿を表示するためのメソッドです。
VK_Component_Postsはクラスで、_g3/inc/vk-components/package/class-vk-component-post.phpで定義されていますthe_view()は、VK_Component_Postsクラス内で定義されているメソッド$postはWordPressが標準で用意している変数で、表示する投稿の情報$optionsは、記事の表示に関する情報
まとめ
プログラミングのスキルは、実際に手を動かすことで向上します。$options の値を変更するためのコードをアレンジして試してみることをおススメします！
