Lightning 前の記事・次の記事のカスタマイズ

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

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

手順① 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 で指定できるオプションには以下のようなものがあります。（抜粋）

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

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

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

前の記事 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;

} );

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

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

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

記事はこちら ↓ です。

画像を表示しない 前の記事・次の記事 のデザイン

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

手順① functions.php

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

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

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

    return $options;
} );

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

    $options['body_prepend'] = '<span class="vk_post_imgOuter_singleTermLabel">前の記事</span>';

    return $options;
} );

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

    $options['body_prepend'] = '<span class="vk_post_imgOuter_singleTermLabel">次の記事</span>';

    return $options;
} );

手順② CSS

文字が重ならないように、以下の CSS を追加します。

.next-prev-prev.card-horizontal .card-body {
padding-left: 5.0rem;
}

.next-prev-next.card-horizontal .card-body {
padding-right: 5.0rem;
}

個々の賃貸物件のページの下部に前の記事・次の記事が表示されます。この部分は一般の投稿（いわゆるブログです）を前提にデザインされているので、賃貸物件には適していません。

そこで、以下のように賃貸物件に適した表示に変更してみました。

カスタマイズしたいときにとても役立つのが フック と呼ばれる機能で、今回は フィルターフック を使ってカスタマイズします。

カスタマイズ内容 functions.php にフィルターフックを追加

子テーマの functions.php に以下の行を追加すると上記のような 前の物件・次の物件 が表示されます。
下記のコードで chintai は 投稿タイプID 、moyori はカスタム分類「最寄駅」のスラッグ です。

/*-------------------------------------------*/
/*    前の記事・次の記事 の表示をカスタマイズ
/*-------------------------------------------*/
add_filter( 'lightning_next_prev_options', function( $options ){

    if ( get_post_type() === 'chintai' ){

      // 表示タイプを変更
      $options['layout'] = 'card-horizontal';

      // ボタンを表示する
      $options['display_btn'] = true;

      // ボタンに表示する文字
      $options['btn_text'] = '物件を見る';

      // 日付を表示しない
      $options['display_date'] = false;

      // カスタム分類を表示
      $options['display_taxonomies'] = true;

    }

    return $options;
} );

/*-------------------------------------------*/
/*    前の記事 の表示をカスタマイズ
/*-------------------------------------------*/
add_filter( 'lightning_next_prev_options_prev', function( $options ){

    if ( get_post_type() === 'chintai' ){

      // 画像に重ねる文字
      $options['overlay'] = '<span class="vk_post_imgOuter_singleTermLabel">前の物件</span>';

      // ボタンを左寄せ
      $options['btn_align'] = 'text-left';

    }

    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>';

      // ボタンを右寄せ
      $options['btn_align'] = 'text-right';

    }

    return $options;

} );

/*-------------------------------------------*/
/*    前の物件・次の物件を同じ最寄駅の物件に限定する
/*-------------------------------------------*/
// カスタム投稿タイプ 賃貸物件(chintai) で
// カスタム分類 最寄駅(moyori) が同じ物件のみを表示する。
add_filter( 'lightning_prev_next_post_in_same_term', function(){
    if ( get_post_type() === 'chintai' ){
        return true;
    }
});
add_filter( 'lightning_prev_next_post_taxonomy', function($taxonomy){
    if ( get_post_type() === 'chintai' ){
        $taxonomy = 'moyori';
    }
    return $taxonomy;
});