WordPressのRead More(続きを読む)をリンクボタンにカスタマイズする方法

Twenty Fourteenで試した例

「続きを読む」のリンクは標準の状態だと下の画像のように普通のリンクとして表示される。

このリンクをボタン化するとTwenty Fourteenのデフォルト状態では下の画像のように表示される。

このカスタマイズはfunctions.phpに以下のコードを追加することで反映させることができる。

function read_more_button_link($link, $more_link_text) {

	$link = str_replace($more_link_text, "<button>".$more_link_text."</button>", $link);
	return $link;
}
add_filter('the_content_more_link', 'read_more_button_link', 10, 2);

the_content_more_linkというアクションフィルターに、続きを読むのリンクの一部を置換するコードをフックさせているのが上のコードで、ポイントとしては以下の2点になる。

• $more_link_textを第2引数として設定
• add_filterの第4引数に認識する引数の数を指定

処理の内容は、標準のリンクテキストをHTMLのbuttonタグで囲むようにリンク全体の文字列を置換するというシンプルな内容になっている。

続きを読むのリンク先を変更したい場合は、続きを読むのカスタマイズを簡単に行うのエントリーに方法を書いてみた。記事中のリンクをボタン化する場合には、WordPressでボタンリンクを作成のエントリーが参考になる。アンカーテキストを変更する場合は、WordPress 内部リンクのアンカーテキストを最適化の記事をそれぞれ参考にして頂きたい。