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のカスタマイズ制作依頼を請け負っています。運営中のサイトで何かお困りのことがある方は、下記の記事を参照のうえ気軽にご相談ください。
- チャレンジを応援する無料オンラインコミュニティ運営中！
-
生きづらさを抱える人のチャレンジを応援する無料オンラインコミュニティ『Cree』をスタートしました。ただいま参加者70名！お互いの目標を共有したり、就労・就職のサポートするサービスを無料で提供しています。
オンラインコミュニティの詳細はこちら
