WordPress 「続きを読む」の前後を別けて出力

WordPressで「続きを読む」の<!–more–>前後を分けて出力する方法のメモ

<!–more–>

<!–more–>を置くと投稿本文が分割されリスト表示で抜粋表示として使えます。これを本来の「本文の続き」区切りではなく、ヘッドラインとして使ってる場合も多いのではないでしょうか。

デフォルトでは続きを読むクリックでシングルポストの「続き」部分のアンカーにジャンプしますが、これを嫌って普通にシングルポストへのリンクに変更している方もおられるかもしれません。

「続きを読む」リンクのクリック時にページをスクロールしない

function remove_more_link_scroll( $link ) {
	$link = preg_replace( '|#more-[0-9]+|', '', $link );
	return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

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

シングルポストではmoreは関係なくなりひとまとめに「本文(content)」になります。せっかくヘッドラインと本文を分ける意味でmoreを使ってもシングルポストで意味をなしません。

そこでシングルページでもmoreの前後を分けて出力したいと思うのが人の常です。でも意外とそうでもなさそうで、皆そんなこと必要と思ってない感じです。それもそのはず、そもそもポストには「抜粋」というフィールドが「本文」とは別にあるのでヘッドラインにはそっちを使えばいいんですよね。

抜粋を利用しないくせに続きを読むを抜粋として利用するという、丁寧なのかものぐさなのか判らない運用をする粗忽な人（例えば私）が一部いまして、さらにその上「moreの前後で出力を分けたいのだが」などと、簡単な解決策を放棄してより難しそうなことをやりたがったりします。

moreの前後で出力を分けたい

more前を抜粋かヘッドラインのように使ってると、シングルポストで本文と一緒くたになることで文脈として違和感があるものになります。それを誤魔化すためにmoreの場所にペンギンのアイコンを置いたりする人もいますが、もうちょっと別のアプローチを施したいと思ったりもします。例えばアイキャッチ画像を挟み込むとか。

ヘッドライン – アイキャッチ画像 – 本文

という構図が美しいですね。この場合、アイキャッチ画像の存在がちょっぴり大事になるかもしれません。無意味な画像ではなく、本文のメインとなる画像であることによって効果が上がる気がします。例えばここDigibalBooではわりと無意味な画像が多いのですがMoiveBooでは映画のポスターアートを画像に用いているのでしっくりきます。

get_extended()

moreの前後を分けて出力するにはget_extendedを使います。

get_extended は<!–more–>で区切った内容を取得する関数で、前をmain、後をextendのキーとして連想配列します。ゲットするのは「main: more前, extend: more後」の両方ってことですね。

main キーの配列には <!--more--> より前の本文、extend キーの配列には <!--more--> より後の本文が入っています。関数リファレンス/get extended

前後を分けて出力するには、この関数からmainかextendかどちらかを選んで出力させなければなりません。

<?php get_extended( $post_content ) ?>

関数そのものはこのように使うそうですがこれではゲットしただけでmare前または後をどうやって分けて出力するのかわかりません。

関数リファレンスではこの後突然難解なコードが例として示されていて「何これ？」となります。知りたいのはmore前あるいはmore後をどうやって出力するのかだけですのに。

content.phpで使う

テーマテンプレートでいえば、more前後を出力したいのはsingle.phpではなくてその中のcontent.phpのほう、つまりメインループの中ってことが多いと思います。それ前提だとリファレンスの例より簡単に済みます。

echo get_extended( $post->post_content )['main'];

echo get_extended( $post->post_content )['extended'];

$post->post_content が「このポスト」を指定します。お尻に[‘main’]または[‘extended’]をくっつけることで個別に出力できます。content.phpでは本文が the_content() ですがこれを置き換えればいいですね。

moreの前後で出力を分けられたので、間に画像を挟むも良し、それぞれクラスを付けて別の装飾をするも良し、加工し放題になります。

[追記]

…といういい加減な記事を書いて放置していたのですがいろいろ間違いに気づいたので訂正しておきます。

extended

まず、コードの例でmoreの後の部分、[‘extended’]です。何とスペルミスしていました。全然気づきませんでした。

wpautop

もうひとつ。ここで示した例では、表示の際に改行などWordPressの整形処理が行われないことを明記していませんでした。整形は行われません。出力はベタテキストになります。

ヘッドラインではベタテキストのほうが具合がいいので気に掛けていませんでしたが、後半の部分もベタテキストでは具合が悪いかもしれません。

自動で行われるWordPressの本文の整形（2連続の改行を<p>に置き換えたり）は、関数 wpautop() で行えます。

したがって、後半部分を通常通りHTMLに整形された形にするには、例えばこのようにします。

<?php
$txt = get_extended( $post->post_content )['extended'];
echo wpautop($txt);
?>

以上、間違いの訂正と書き足りていなかったことの追記でした。

[さらに追記]

さらに追記します。上記、[‘extended’] を使った出力に問題がありました。通常の出力とは異なり、ショートコードが効かなくなります。

通常の出力というのは、ただpを付与するといった表面的なこと以外に複雑な処理をしているんですね。

ショートコードが効かないことが致命的である場合は別の出力方法をとりましょう。

$more = 1; the_content('', true);

こうです。

これが何なのかよくわかりませんがどなたか天才の方がこうすればいいと書いておられましたのでそのまま利用します。

この方法で「続きを読む」の後ろを出力した場合、通常のthe_content()と同じ結果になりました。ショートコードも効きます。やれやれ一安心。