このサイトには カスタム投稿タイプを使った「賃貸物件」のデモページ があります。
個々の賃貸物件のページの下部に前の記事・次の記事が表示されます。この部分は一般の投稿(いわゆるブログです)を前提にデザインされているので、賃貸物件には適していません。
そこで、以下のように賃貸物件に適した表示に変更してみました。
カスタマイズしたいときにとても役立つのが フック と呼ばれる機能で、今回は フィルターフック を使ってカスタマイズします。
カスタマイズ内容 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;
});
サイト運営者プロフィール
-
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
最新の投稿
- カスタマイズ2024年1月24日タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例
- VK Blocks Pro2023年7月23日VK 投稿リストでカスタム分類のタームを親→子の順に表示した例
- ExUnit2023年6月20日VK 最近の投稿ウィジェットでクエリを改変するフィルターフック
- ExUnit2023年6月13日記事ごと個別に Google 広告の表示・非表示を切り替えるカスタマイズ事例
今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。
名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。
Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています(個々の単体販売はされていません)。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。
名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。
Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています(個々の単体販売はされていません)。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。