前の記事・次の記事のレイアウトやデザインをカスタマイズ

1. Lightning G3 デフォルトのデザイン
2. 画像を表示しないシンプルなデザイン
3. 手順① functions.php
4. 手順② CSS
5. 参考指定できるオプションにはどのようなものがあるの？
6. 参考前の記事と次の記事で別々の設定をするには
6.1. 追記前の記事と次の記事でフックが活躍するケース
7. 続編前の記事・次の記事および日付を表示するデザインの作り方
8. その他のカスタマイズ例

Lightning G3 デフォルトのデザイン

Lightning G3 で記事の後に表示される 前の記事・次の記事 のデザインは、デフォルトで以下のようなカード（インテキスト）型になっています。

現状（2021年10月6日）、テーマのカスタマイズ画面で提供されているのは前の記事・次の記事を非表示にする機能だけで、レイアウトやデザインを変更する機能はありません。この部分を変更したい場合、フックや CSS を使ってカスタマイズする必要があります。

カスタマイズ例として、アイキャッチ画像を表示しない、以下のような超シンプルなデザインにするやり方を紹介します。

画像を表示しないシンプルなデザイン

上記のカスタマイズ例のようにする手順は以下の通りです。

手順① functions.php

functions.php に以下のフィルターフックを追加します。

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

    $options['layout'] = 'card-horizontal';
    $options['display_image'] = false;
    $options['display_date'] = false;

    return $options;
} );

とりあえずこれだけでシンプルな前の記事・次の記事になります。

手順② CSS

左右の矢印を表示したり、リンクエリアを拡げたりして、ユーザビリティ向上を図る目的で以下の CSS を追加します。

.next-prev-prev.card-horizontal .card-body {
display: flex;
padding: 0;
align-items: center;
justify-content: flex-start;
}

.next-prev-prev.card-horizontal .card-body:before {
font-family: "Font Awesome 5 Free";
content: "\f053";
font-weight: bold;
position: absolute;
font-size: 3rem;
color: rgba(0,0,0,0.1);
top: calc(50% - 1.5rem);
left: 1rem;
}

.next-prev-prev.card-horizontal.vk_post .card-body .vk_post_title a {
display: block;
padding: 1.5rem 1.0rem 1.5rem 3.5rem;
}

.next-prev-next.card-horizontal .card-body {
display: flex;
padding: 0;
align-items: center;
justify-content: flex-end;
}

.next-prev-next.card-horizontal .card-body:before {
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: bold;
position: absolute;
font-size: 3rem;
color: rgba(0,0,0,0.1);
top: calc(50% - 1.5rem);
right: 1rem;
}

.next-prev-next.card-horizontal.vk_post .card-body .vk_post_title a {
display: block;
padding: 1.5rem 3.5rem 1.5rem 1.0rem;
}

参考指定できるオプションにはどのようなものがあるの？

フィルターフック lightning_next_prev_options で指定できるオプションには以下のようなものがあります。（抜粋）

これらのオプションを組み合わせることにより、さまざまなバリエーションの前の記事・次の記事を作ることができます。

オプション	説明
layout	表示タイプ指定できるものは以下の通り。 'card' カード 'card-noborder' カード（線なし） 'card-intext' カード（インテキスト） 'card-horizontal' カード（水平） 'media' メディア 'postListText' テキスト１カラム
display_image	アイキャッチ画像を表示するか（true / false）
image_default_url	デフォルトアイキャッチ画像のURL
display_image_overlay_term	画像に重ねてカテゴリーを表示するか（true / false）
overlay	画像に重ねる文字（HTML可）指定しないと「前の記事」「次の記事」が表示される
display_excerpt	抜粋を表示するか（true / false）
display_date	日付を表示するか（true / false）
display_new	新着を示す文字を表示するか（true / false）
new_text	新着投稿に表示する文字列（例：'新着!!'）
new_date	何日前までの投稿を新着とするか（例：7）
display_taxonomies	タクソノミーを表示するか（true / false） true を指定すると、すべてのタクソノミーが表示される表示したくないタクソノミーがあれば、フックではなく CSS で非表示にする方がかんたん（クラス名で識別可）
display_author	投稿者名を表示するか（true / false）
display_btn	ボタンを表示するか（true / false）
btn_text	ボタンに表示する文字（例：'記事を読む'）
btn_align	ボタンの配置（左寄せ：'text-left'　右寄せ：'text-right'）
body_prepend	先頭に追加する文字など（HTML可）
body_append	最後に追加する文字など（HTML可）

参考前の記事と次の記事で別々の設定をするには

前の記事のボタンは左寄せ、次の記事のボタンは右寄せのように、前の記事と次の記事で別々の設定をしたいことがあります。
その場合は以下のフィルターフックを使います。

前の記事 lightning_next_prev_options_prev

次の記事 lightning_next_prev_options_next

使用例はこんな ↓ かんじ。

// 前の記事・次の記事で共通の設定
add_filter( 'lightning_next_prev_options', function( $options ){

    $options['display_btn'] = true;
    $options['btn_text'] = '記事を読む';

    return $options;
} );


// 前の記事のボタンを左寄せ
add_filter( 'lightning_next_prev_options_prev', function( $options ){

    $options['btn_align'] = 'text-left';

    return $options;

} );

// 次の記事のボタンを右寄せ
add_filter( 'lightning_next_prev_options_next', function( $options ){

    $options['btn_align'] = 'text-right';

    return $options;

} );

おっと、ボタンの左寄せ・右寄せだとフックを使わなくても CSS で可能なので、使用例としていまいち説得力に欠けていることに気がつきました。

そこで...

追記前の記事と次の記事でフックが活躍するケース

フックが活躍するケースとして賃貸物件での使用例を紹介します。

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

    if ( get_post_type() === 'chintai' ){
      // 画像に重ねる文字を「前の物件」にする
      $options['overlay'] = '<span class="vk_post_imgOuter_singleTermLabel">前の物件</span>';
    }

    return $options;

} );

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

    if ( get_post_type() === 'chintai' ){
      // 画像に重ねる文字を「次の物件」にする
      $options['overlay'] = '<span class="vk_post_imgOuter_singleTermLabel">次の物件</span>';
    }

    return $options;

} );

この ↓ 物件ページのカスタマイズで使っています。

続編前の記事・次の記事および日付を表示するデザインの作り方

以下のようなデザインにするやり方を記事にしました。

記事はこちら ↓ です。

その他のカスタマイズ例

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく