2020.04.17
WordPressで「前の記事」「次の記事」リンクに任意のclassを付ける方法
こんにちは、webエンジニアのゾノ( @ozonosho )です。
さて、今回の記事ではWordPressで「前の記事」「次の記事」リンクに任意のclassを付ける方法を紹介したいと思います。
WordPressでは記事ページ（single.php）に「前の記事」と「次の記事」のナビゲーションを追加するための関数が用意されているのですが、この関数を利用して出力されるリンクにはclassやidがついていないのでCSSを設定するときに少し不便なんですよね。
WordPressで「前の記事」「次の記事」リンクに任意のclassを付ける方法
実装は簡単です。下記のようなコードをfunctions.phpに追加してあげればOKです。
|
1 2 3 4 5 6 7 8 9 |
//前の記事・次の記事のリンクにclassを付与する function add_prev_post_link_class($output) { return str_replace('<a href=', '<a class="prev-link" href=', $output); //前の記事リンク } add_filter( 'previous_post_link', 'add_prev_post_link_class' ); function add_next_post_link_class($output) { return str_replace('<a href=', '<a class="next-link" href=', $output); //次の記事リンク } add_filter( 'next_post_link', 'add_next_post_link_class' ); |
前の記事リンクや次の記事リンクを出力する際に値を変更するためのフィルターフックが用意されているので、aタグを置換してクラス名を追加しています。
上記のソースでは「prev-link」「next-link」というクラス名を割り振っていますが、好きな名前を付けていただいて大丈夫です。
おわりに
以上、今回の記事ではWordPressで「前の記事」「次の記事」リンクに任意のclassを付ける方法を紹介させていただきました。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
