CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress 前後の記事のタイトルを短縮表示する方法

前後の投稿 wordpress

WordPressで前後の個別記事リンクのタイトル表示を短縮して表示しました。
previous_post_link()だと長い記事のタイトルを表示した場合、リンクが広がってしまい見た目が悪くなり困っていました。get_previous_post()でタイトルを短縮表示できたので紹介します。

previous_post_link()を使った場合のリンク表示

WordPressで記事に前後の個別記事リンクを表示するには以下のように記述すると思います。

previous_post_link()は前の記事のリンクを表示します。next_post_link()は後の記事のリンクを表示します。

なおprevious_posts_link()とnext_posts_link()もありますが、こちらはページ送りを使うページ使われます。今回はこちらではありません。

previous_post_link()のパラメータ

previous_post_link()の1番目の’%link’はリンクをどのように表示するか設定します。
2番目の’%title’はリンクの表示に記事のタイトルを表示する場合に設定します。例では記事のタイトルとアイコンを組み合わせています。ここを記事のタイトルの代わりに’前の記事へGo’などとすることもできます。

詳しくはこちらが参考になります。
WordPressで「前の記事へ」、「次の記事へ」をカスタマイズする方法 | よつば手帖

画面での表示

例を画面で表示するとこのようになります。
前後の投稿 wordpress 修正前

記事のタイトルが長すぎて前後のリンクがくっついています。機能的には問題ないのですが見た目が悪すぎます。

get_previous_post()を使った方法

タイトルが長すぎてリンクの幅が広がりすぎるのが問題です。そこで長すぎるタイトルはある文字数で切り取り、超えた分は「…」で表示するようにします。

previous_post_link()ではタイトルの加工はできないようなので、代わりにget_previous_post()を使用しました。

こちらの用例を参考に修正します。
関数リファレンス/get previous post

修正ソース

2行目でget_previous_post()の内容を$previous_post変数に代入します。
3行目で$previous_post変数からタイトルを取り出して$pre_post_title変数に代入します。

4行目でmb_strlen()で取り出したタイトルの文字数を取得します。mb_strlen()は日本語などのマルチバイト文字列の文字数をカウントする関数です。
タイトルの文字数が18文字を超えるとタイトルの後ろに「…」を付けます。

5行目で$previous_post変数が空でなければ、前の記事のリンクを表示します。

6行目でリンクを作成します。get_permalink()と$previous_post変数のIDでurlを設定しています。
esc_url()関数で無害化しています。XSS対策としてです。
またタイトルが一部しか表示されないのでリンクにマウスオーバするとすべてのタイトルが表示されるようにします。そのためaタグのtitle属性に$pre_post_title変数を指定しました。

同じく後の記事のリンクもget_next_post()で実現します。両方まとめると次のようになります。

htmlに変換されると以下になります。

完成イメージ

画面で表示するとこのようになります。
前後の投稿 wordpress

リンクの幅が縮まり前後のリンクが横に並ぶようになりました。
マウスオーバすると完全なタイトルが表示されます。
見た目も良くなり、ひとまず成功です。

参考にした本

WordPressの関数は以下の本を参考にしました。手を動かす演習とその解説から構成され、0からWordPressのテーマを作っていきます。基礎から学べるのでお勧めです。
WordPressレッスンブック HTML5&CSS準拠
WordPressレッスンブック HTML5&CSS準拠

PHPの文法は以下の本を参考にしました。これも手を動かす演習とその解説から構成され、分かりやすいので習得しやすいと思います。
気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!
気づけばプロ並みPHP~ショッピングカート作りにチャレンジ!

まとめ

get_previous_post()とget_next_post()を使って前後の記事のリンクを作る方法を紹介しました。
previous_post_link()で記事のタイトルを表示すると、見た目が悪くなるという方は参考にされてはいかがでしょうか。


Top