WordPressのテーマ制作はベースとなるものを自分で作って、そこからカスタマイズしてます。
テンプレートタグも非推奨のものは使わないように、Codexや書籍などを参考にしながら見直してます。（query_postsは卒業）
CSSはSassで書いてるのですが、最近Bootstrapがバージョン3になったり、Font-Awesomeがバージョン4になったりしたのもあり、ベーステーマを作りなおしました。
その際、前後の記事へのリンクが結構カスタマイズ出来ると知ったのでご紹介します。
前後の記事へのリンクを追加する
「前の記事へ」や「次の記事へ」ののリンクを呼び出すタグは下記。（nextも同じように使うので省略してます）
次の記事って新しいの？古いの？って一瞬迷いません？
前後の記事へのリンクの記述方法その1：シンプルな書き方
普通に記述すると下記のようになります。
1 | <?php previous_post_link(); ?> |
1 | <?php next_post_link(); ?> |
このテンプレートタグは()の中に記述する事でカスタマイズ出来ます。
意味的にはこのような感じ。
綠色の部分はどのような形式で出力するか？通常は%linkを使用
黄色の部分は出力されるテキスト「次の記事へ」等
水色の部分はカテゴリー内でのリンクにするかどうか？
ピンク色の部分はカテゴリーを除外したい場合のIDを指定
前後の記事へのリンクの記述方法その2：リンク部分を装飾する
1 | <?php previous_post_link('<strong>%link</strong>'); ?> |
ソースコードは次のようになります。
1 | <strong><a href="hoge">« 前の記事へ</a></strong> |
タグで囲われます。
前後の記事へのリンクの記述方法その2：リンク部分の文章を変更する
%linkの後に,で区切って”で囲った部分に書いた文字がリンクになります。
1 | <?php previous_post_link('%link', '以前に書いた記事へ'); ?> |
下記のようになります。
テキストの内容は自由です。
1 | <?php previous_post_link('%link', '子どもがまだ食ってる途中でしょうが！'); ?> |
前後の記事へのリンクの記述方法その3：カテゴリー内の記事にリンクする
全体の投稿では無く、例えば最新情報のカテゴリーの記事だけで前後のリンクを貼る場合などはtrueを記述します。
1 | <?php previous_post_link('%link', '以前に書いた記事へ',true); ?> |
前後の記事へのリンクの記述方法その4：特定のカテゴリーを除外する
特定のカテゴリーの記事にはリンクしたくない場合はカテゴリーIDを指定する事で除外できます。（カテゴリーID=3の記事を除外する場合）
1 | <?php previous_post_link('%link', '以前に書いた記事へ',false,3); ?> |
前後の記事へのリンクの記述方法その5：アイコンフォントを使用して、アイコンにもリンクを貼る
前後の記事リンクの前にアイコンフォントを入れる方法です。
FontAwasomeを利用しているので、下記の矢印のアイコンフォントを利用します。
下記のように書くとアイコン自体にはリンクが貼られません。
1 | <i class="fa fa-chevron-circle-left"></i> <?php previous_post_link('%link', '以前に書いた記事へ'); ?> |
これは気持ち悪い。
このように書けばアイコンも含めてリンクになります。%titleで記事のタイトルを表示します。その直前にアイコンフォントの表示指定をします。
1 | <?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?> |
前後の記事へのリンクの記述方法その6：一番新しい記事の時、一番古い記事の時に表示を変更する
一番新しい記事や一番古い記事になったときに表示を変える方法です。
（CSSは省いているので、各自追加してください）
下記の条件分岐を使えば可能となります。（以前の記事がある場合）
1 | <?php if( $prev_post) : ?> |
タグの意味は下記のような感じです。
1 2 3 4 5 6 7 8 9 10 11 | <?php if( $prev_post) : ?>※以前の記事があったら 以前の記事がある場合に記述するところ <?php else : ?>※これより以前の記事がなかったら 一番古い記事の場合に表示するところ <?php endif; ?> <?php if( $next_post ) : ?>※新しい記事があったら 新しい記事がある場合に表示するところ <?php else : ?>※これより新しい記事がなかったら 最新の記事の場合に表示するところ <?php endif; ?> |
実際に使用しているもの。
1 2 3 4 5 6 7 8 9 10 | <?php if( $prev_post) : ?> <?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?> <?php else : ?> この記事が一番古い記事です。 <?php endif; ?> <?php if( $next_post ) : ?> <?php next_post_link('%link','<i class="fa fa-chevron-circle-right"></i> %title'); ?> <?php else : ?> <i></i> この記事が最新です。 <?php endif; ?> |
このような感じで表示されます。
スマホ版ではボタンっぽく表示されるように加工しています。
まとめ：前後リンクのカスタマイズは楽しい
テンプレートタグを理解していけば、それぞれのWebサイトにあった体裁で使えるようになります。
PHPとか苦手でもちょっとだけやってみると意外と出来ちゃったりするのがWordPressの良いところだと思います。
他のテンプレートタグもCodexを参考にしながらやってみると表現の幅が広がりますよー。
参考リンク
Function Reference/previous post link « WordPress Codex
アイコンフォントを使うところまでかぶってました。p117あたりに事例とともに詳しく解説されてるので、ぜひ書籍でもチェックしてみてください。
WordPress ステップアップブック (STEP UP BOOK)
こちらの書籍もよろしくお願いします。
現場でかならず使われているWordPressデザインのメソッド
ps:関連記事を表示するプラグインを「WordPress Related Posts」にしてみました。
WordPress › WordPress Related Posts « WordPress Plugins
よつばデザイン代表。主に東京と大分を拠点として全国的に活動しています。
中小企業アドバイザーとして事業戦略・広報・サービス開発相談の活動しています。既に決められた物を形作るお仕事より、企画や商品開発の段階などビジネスの根幹から関わるお仕事を得意としています。
Webやデザイン系のセミナーで登壇しています。
すみだクリエイターズクラブ、CPIエバンジェリスト。和菓子（あんこ）好き。
運営サイト
広告デザインを読む - Advertising Design Center
Webクリエイターズニュース
COCOmag（普通の感覚で楽しめる、子どもとオシャレにまつわる、楽しく可愛い情報）
Facebookグループ
webクリエイターのための情報交換所ゼロから始めるWordPress勉強会
Amazon書籍の開発技法カテゴリー＆Web構築・管理カテゴリーで1位![WordPressプロフェッショナル養成読本 [Webサイト運用の現場で役立つ知識が満載! ] (Software Design plus)](https://images-na.ssl-images-amazon.com/images/I/610lYz15VZL.jpg)
