X-T9 で前の記事・次の記事のリンクにアイキャッチ画像を表示しました

もう何年間も Lightning 一本で他のテーマに一切浮気せずに WordPress のサイト制作を行っていますが、メインテーマがブロックテーマに変わっても慌てないように準備（勉強）をしている対馬です。

X-T9 と Lightning の「前の記事・次の記事」の違い

Lightning では記事の最後にある前の記事・次の記事のリンクにアイキャッチ画像が表示されますが、X-T9 は WordPress 標準のブロックで前の記事・次の記事を表示していて、アイキャッチ画像を表示できる仕様になっていません。

そこで、X-T9 を使っているこのサイトで前の記事・次の記事にアイキャッチ画像を表示するカスタマイズを行いました。

例えばこの記事の最後には以下のように前の記事・次の記事へのリンクが表示されています。

ページヘッダーにサブタイトルを表示するカスタマイズを行いました

画像とタイトルだけを表示したシンプルなデザインで、マウスホバーで矢印が動きます。

ショートコードを使ってカスタマイズ

X-T9 にはアクションフックやフィルターフックが用意されていませんので、ショートコードを使ってカスタマイズしています。

以下の図に示すように、サイト編集画面で表示したい場所にショートコード ujs_show_prev_next を置くと、その場所に前の記事・次の記事へのリンクが表示されるようにしました。

このようにショートコードを使って、Lightning でフックを使ってカスタマイズしていたのと同じことができるので、X-T9 を使った制作でもカスタマイズに困ることはなさそうです。

カスタマイズをプラグイン化しました

私は汎用的なカスタマイズを行ったときに、そのカスタマイズをプラグイン化しています。

今回のカスタマイズも UJS Next Prev Style for X-T9 というプラグインにしました。

「①画像とタイトルのシンプルなデザイン」とあるように、これからデザインパターンを増やしていこうと考えています。

このようにプラグイン化しておくと、実案件ですぐに使えますし、自分のための備忘録として大変役立っています。

投稿者プロフィール

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

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

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

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

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

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

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

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