WordPress Lightning 投稿一覧のカスタマイズ

「Lightning（無料版）の投稿一覧をカスタマイズしたいけど管理画面からできないの？」 
この記事を見ていただいてるということは 現在、こういった悩みを抱えていませんか？

Lightning（無料版）はかなり使いやすいテーマですが、投稿一覧のデザイン変更が管理画面では出来ないのが残念なポイントです。そこで今回は、投稿一覧のカスタマイズ方法をご紹介します。

Lightningの投稿一覧とは

WordPressにはカテゴリー一覧や月別アーカイブなど、アーカイブページがあります。アーカイブページに自動で表示されるブログ記事一覧のことを投稿一覧（下図）と言います。

Lightning有料版（G3 Pro Unit）は管理画面から投稿一覧のカスタマイズが可能ですが、Lightning無料版についてはデフォルトの標準レイアウト（下図）のみになります。本記事ではLightning無料版を使用して、投稿一覧のカスタマイズ方法をご紹介します。

Lightning の稿一覧のカテゴリー色を変更する

投稿一覧のカテゴリー（赤枠）の色を変更する方法を解説します。カテゴリー色は管理画面から簡単に変更できます。カテゴリー毎に色を変えると見やすくなりますので、おススメです。

管理画面の①「投稿」＞②「カテゴリー」をクリックする。

カテゴリー一覧から色を変更したい①カテゴリーをクリックする。

①「色を選択」クリックする。

①色コードを入力またはリックして指定後、②「更新」をクリックする。

投稿一覧のカテゴリー色を変更できました！

Lightningの投稿一覧のボタンに表示する文字を変更する

Lightningの投稿一覧のボタンは「続きを読む」（赤枠）になっています。今回はボタンを「詳しくはこちら」に変更する方法を解説します。

管理画面の①「外観」＞②「テーマファイルエディタ」をクリックする。

「編集するテーマを選択する」から①「Lightning Child」を選択し、②「選択」をクリックし、③「functions.php」をクリックする。

子テーマのfunctions.phpの"独自の処理を必要に応じて書き足します"より下に、以下の①コードを追加し、②「ファイルを更新」をクリックする。

＜コードの説明＞
add_filter( 'vk_post_options', function ( $options) {
$options['btn_text'] = '詳しくはこちら'; 　←　ボタンに表示する文字
return $options;　
} );

ボタンに表示する文字が変更できました！

Lightningの投稿一覧をグリッド型に変更する

Lightning無料版の投稿一覧のレイアウトは下図のような、左にアイキャッチ、右側にタイトルや内容が表示されるレイアウトです。
今回は例としてレイアウトをグリッド型に変更したいと思います。

管理画面の①「外観」＞②「テーマファイルエディタ」をクリックする。

「編集するテーマを選択する」から①「Lightning Child」を選択し、②「選択」をクリックし、③「functions.php」をクリックする。

子テーマのfunctions.phpの"独自の処理を必要に応じて書き足します"より下に、以下の①コードを追加し、②「ファイルを更新」をクリックする。

＜コードの説明＞
add_filter( 'vk_post_options', function( $options ) {
$options['layout'] = 'card'; 　←　レイアウトをグリッド型
$options['class_outer'] = 'vk_post-col-xs-12 vk_post-col-sm-6 vk_post-col-md-6 vk_post-col-lg-6 vk_post-col-xl-6';　←　カラム数の指定（例として今回は、xsサイズ：1カラム　sm,sd,lg,xlサイズ：2カラム）
return $options;　
} );

投稿一覧ページのレイアウトをグリッド型に変更できました！

まとめ

WordPressテーマLightning（無料版）は投稿一覧のカスタマイズが管理画面で変更をすることができないため、functions.phpにコードを追記する必要があります。コードの追記は必ず子テーマにしてください。また、変更前には必ずバックアップを取るようにしてください。