[WP]moreタグの出力ソースを変更する

<!–more–> で記事を区切ったときに出力される続きを読むリンクや、ターゲットに使われてるspanタグそのものを変更する方法について。

デフォルトだと、全文が表示されたときに挿入されるソースはこうです。

<p><span id="more-4"></span></p>

たとえばこれを次のようにDivへ変更する

</div>
<div id="more-4">

the_content_more_link について追加

正規表現置換による方法

2.5以上だとTinyMCEの性能がいいので大抵以下の正規表現置換で変更出来ると思います。
このブログのテーマ(Vicuna)もこれで置換しています。
function.phpに以下をコピペしてみてください。

function moretag_custom($content) {

	if (is_page() || is_single()) {
		$content = preg_replace('/<p><span id="more-([0-9]+?)"><\/span>(.*?)<\/p>/i', "\n</div>\n<div id=\"more-$1\" class=\"entry\">\n<p>$2</p>", $content);
	}
	return $content;
}

add_action('the_content', moretag_custom, 100);

条件にマッチしないとスルーしてしまうので、いくつかパターンを用意した方が確実です。
2.5より前のバージョンだと、綺麗にPタグ内にspanが入ってなかったりaタグだったりするので合わせて正規表現の条件を変える必要があります。
また、#more-postIDの書式を変更した場合、続きを読むリンクのターゲットも変更しておく必要があります。

get_extended()関数による方法

この記事でチラッと書いたget_extended()でも一応やれます。

single.phpとかで(以下はDefaultテーマ用)

<?php $contents = get_extended($post->post_content); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
	<?php print(wpautop($contents[main])); ?>
<?php if(!empty($contents[extended])):?>
</div>
<div id="more-<?php the_ID();?>">
	<?php print(wpautop($contents[extended])); ?>
<?php endif;?>

見ての通りthe_content()を使ってないので、category.phpとかindex.phpには不向き。
この場合も、リンクの#more-postIDの書式を変更する場合は、続きを読むリンクのターゲットも変更しておく必要があります。

「続きを読む」リンクのスタイル変更

デフォルトのリンクテキストは(more…)で、#more-記事IDにリンクされています。

テキスト変更はthe_content()の引数に文字列入れるだけ。

<?php the_content("『".the_title('', '', false)."』の続きを読む&raquo;"); ?>

▼ソースはこう

<p><a class="more-link" href="http://localhost/wordpress/?p=1#more-1">Hello world!の続きを読む»</a></p>

タグも使えます

<?php the_content(__('<span class="moretext">Read the rest of this entry &raquo;</span>', 'kubrick')); ?>

デフォルトテーマだと翻訳解けちゃうのでmoファイルの修正が必要。

ソースそのものの変更は次のような方法があります。

正規表現による置換

vicunaのソースを参考に、上の置換にelseを追加する。

function.php

function moretag_custom($content) {

	if (is_page() || is_single()) {

		$content = preg_replace('/<p><span id="more-([0-9]+?)"><\/span>(.*?)<\/p>/i', "\n</div>\n<div id=\"more-$1\" class=\"entry\">\n<p>$2</p>", $content);

	}else{
		$content = preg_replace('/<p(\s.+?=".+?">|>)\s?<a href="(.+?)#more-([0-9]+?)" class="more-link">(.+?)<\/a><\/p>/', '<p class="more-link"><a href="$2#more">$4</a></p>', $content);
		$content = preg_replace('/\s*<a href="(.+?)#more-([0-9]+?)" class="more-link">(.+?)<\/a><\/p>/', "</p>\n".'<p class="more-link"><a href="$1#more">$3</a></p>', $content);
	}
	return $content;
}

add_action('the_content', moretag_custom, 100);

preg_replace内の中央の引数を変更すれば別の書式に出来ます。

コアのソースそのものを変更

上記で挙げた変更はコアファイルのソースを変更しても同じことが出来ます。
wordpressのバージョンアップしたら戻ってしまいますが、テーマやエディタに依存しないので確実かも。

挿入されるspanタグの変更はwp-includes/post-template.phpの121行目くらいに次の文があるので

$output .= '<span id="more-'.$id.'"></span>'.$content[1];

こうする▼

$output .= '</div><div id="more-'.$id.'">'.$content[1];

続きを読むリンクの変更は125行目くらいに次の文があるので

$output .= ' <a href="'. get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>";

好きなように変更するだけでおk。

$output .= '<p class=\"more-link\"><a href="'. get_permalink() . "#more-$id\">$more_link_text</a></p>";

参考:Customizing the Read More

ver2.8以降の場合

アクションフィルターにthe_content_more_linkというのが追加されたので、こいつを使えば割と簡単にmoreリンクの変更が可能。

付与されるIDを消して#moreだけにするサンプル:

function custom_more_link( $more_link ) {
	$more_link = preg_replace('/#more-[\d]+/i', '#more', $more_link );
	return $more_link;
}
add_filter( 'the_content_more_link', 'custom_more_link', 10 );

この場合のcustom_more_linkには引数でアンカータグしか渡されないが、
add_filterの一番最後に引数の数を指定する2を追加すると、リンクテキストも得る事が出来るようになる。

付与されるIDを消して#moreだけにした上でテキストも変える:

function custom_more_link( $more_link, $more_link_text ) {
	$more_link = preg_replace('/#more-[\d]+/i', '#more', $more_link );
	return str_replace($more_link_text, "『".the_title('', '', false)."』の続きを読む&raquo;", $more_link);
}

リンクテキストの変更はthe_contentでも可能だからオマケ扱い。

しかしこのthe_content_more_linkで変更出来るのはリンク部分だけなので、
moreリンクの親(pタグ)にクラスを付与する場合にはやっぱり正規表現置換するしかない。

function moretag_custom($content) {
	if (is_page() || is_single()) {
		$content = preg_replace('/(?:<p>)*<span id="more-([0-9]+?)"><\/span>(.*?)(?:<\/p>)*/i', "\n</div>\n<div id=\"more\" class=\"entry\">\n$2", $content);
	}else{
		$content = preg_replace('/<p>\s*<a href="(.+?)#more" class="more-link">(.+?)<\/a><\/p>/', '<p class="more"><a href="$1#more" class="more-link">$2</a></p>', $content);
	}
	return $content;
}

function custom_more_link( $more_link, $more_link_text ) {
	$more_link = preg_replace('/#more-[\d]+/i', '#more', $more_link );
	return str_replace($more_link_text, "『".the_title('', '', false)."』の続きを読む&raquo;", $more_link);
}
add_action('the_content', moretag_custom, 100);
add_filter( 'the_content_more_link', 'custom_more_link', 10, 2 );

「[WP]moreタグの出力ソースを変更する」への8件のフィードバック

  1. はじめまして
    最初の正規表現置換による方法で、例えば

    と出力する場合にdiv内に

    などのテンプレートを挿入したい場合はどうすれば良いのでしょうか

    返信
  2. uzi さん>
    エンティティ化されなかったようで肝心な所が読み取れませんでした…。
    お手数ですがもう一度、メタ文字を全角にしてコメもらえないでしょうか。

    返信
  3. 返信ありがとうございます

    <div id=”more-4″></div>

    正規表現置換で上記の様にした場合なのですが
    この空の要素に、xxx.phpなどのテンプレートを挿入出来ないかと思い質問をさせて頂きました

    返信
  4. uzi さん>

    置き換える文字列の中にinclude文を含めれば読み込まれるんじゃないかなーと思います。

    <?php include(‘hoge.php’) ?>

    ?などのメタ文字はエスケープさせてください。
    読み込まれなければget_extendedやコア変更が手っ取り早いです。

    返信
  5. includeでは出来ませんでしたが、get_extendedでは問題なく出来ました
    出来ればfunctions.phpで済ませたいところなので、正規表現置換の方はもう少し自分で試行錯誤してみようと思います
    丁寧に答えて頂いてとても助かりました
    ありがとうございました

    返信

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください