WordPress:previous_posts_link()とnext_posts_link()に任意のクラスを付加する方法

  • Posted on
  • Category : WordPress
WordPress:previous_posts_link()とnext_posts_link()に任意のクラスを付加する方法

備忘録。WordPressで前後のリンクを表示する`previous_posts_link()`と`next_posts_link()`を使用した際に出力される`a`タグに任意のクラスを付加する方法です。また、併せて`previous_post_link()`と`next_post_link()`を使用した際のクラス付加についても書いておきます。

previous_posts_link() と next_posts_link() にクラス付加

実装には下記をfunctions.phpに記述し、記述後に表示確認すると前ページへのa要素に.prev-link"が、次ページへのa要素に.next-linkというクラスがそれぞれ付加されているのを確認できます。

※他のクラス名にしたい場合は赤字部分を任意のものに変更してください。

functions.php

add_filter('previous_posts_link_attributes', 'add_prev_posts_link_class');
function add_prev_posts_link_class() {
	return 'class="prev-link"';
}
add_filter('next_posts_link_attributes', 'add_next_posts_link_class');
function add_next_posts_link_class() {
	return 'class="next-link"';
}

previous_post_link() と next_post_link() にクラス付加

previous_post_link()next_post_link()に任意のクラスを付加したい場合は、functions.phpへ下記のように記述します。
記述後に表示確認すると前の投稿へのa要素に.prev-link"が、次の投稿へのa要素に.next-linkというクラスがそれぞれ付加されているのを確認できます。

※他のクラス名にしたい場合は赤字部分を任意のものに変更してください。

functions.php

add_filter('previous_post_link', 'add_prev_post_link_class');
function add_prev_post_link_class($output) {
	return str_replace('<a href=', '<a class="prev-link" href=', $output);
}
add_filter('next_post_link', 'add_next_post_link_class');
function add_next_post_link_class($output) {
	return str_replace('<a href=', '<a class="next-link" href=', $output);
}

Back to Top

WordPress:previous_posts_link()とnext_posts_link()に任意のクラスを付加する方法

WordPress:previous_posts_link()とnext_posts_link()に任意のクラスを付加する方法

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。