WordPress「続きを読む」のカスタマイズ

今回は、WordPressの「続きを読む」のカスタマイズに関するメモです。WordPressの「続きを読む」は、デフォルトでは<a>タグにクラスmore-linkが指定され出力されますが、このままではCSSでコントロールしづらい点が難点です。そこで、この<a>タグを<p>タグで囲み、クラスmore-linkを<p>タグに移動してみます。

追記 2014/1/6

現在は、Custom-More-Link-Completeというプラグインを使用しています。

しかし、今回紹介する方法はWordPressのコアファイルを編集するので、正直お勧めできません。WordPressをアップデートする度にやり直しになるので、私自身も他にいい方法はないかと模索しています。本来は、プラグインで実装するのが好ましいのでしょうが、まだそこまでWordPressを理解できていないので、とりあえずといった感じです。

まず、編集するファイルは、/wp/wp-includes/post-template.phpです。220行目を下記のように修正します。

/wp/wp-includes/post-template.php 220行目

// 変更前
$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "#more-{$post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

// 変更後
$output .= apply_filters( 'the_content_more_link', '<p class="more-link"><a href="' . get_permalink() . "#more-{$post->ID}\">$more_link_text</a></p>", $more_link_text );

以上で下記のようなHTMLが出力されるようになります。<a>タグのcssをコントロールしたい場合は、.more-link a {}とすれば良いので、自由度が増しますね。

<p class="more-link"><a href="URL">続きを読む</a></p>

正直、アップデートする度にやり直すのは面倒なので、誰かがプラグインを作ってくれるのを気長に待ちたいと思います。

  • このエントリーをはてなブックマークに追加

Advertisement