【WordPress】投稿記事をmoreタグの前後で分割出力する方法

スポンサーリンク

WordPressで記事を出力させるための関数にthe_content();ってのがあります。

この関数は記事をまるっと出力します。<!--more-->を挟めば前後を分けたように出力することもできますが、実際に前後で分割して出力させる方法があったので紹介します。

WordPress 分割 出力

記事を分割して出力させるメリット

メリットというほどではないですが、記事を前後で出力させることができると、記事中に設置する広告の管理がラクになるんじゃないでしょうか。

例えば<!--more-->直後に広告を設置したいといった場合、通常だと記事中にショートコードを仕込んで表示させるという方法を取ることが多いと思います。

これをテンプレート上で、記事の<!--more-->以前と<!--more-->以後を別々に出力させるようにして、その間に広告コードを設置したり、もしくは別途記事中に挿入させたい何かをPHPファイルでインクルードすれば、ショートコードの入れ忘れも防げますし、何より記事の間で出力したい何かを変更したいという際に管理運用がしやすいと思います。

また、デザイン目線でも分割して出力させることができれば、アイデア次第で面白い見せ方もできますよね。
広告だけじゃなくて、いろいろな要素を記事の間に置くことが可能になりますから。

デメリットというか、いざ実装するにあたっていろいろめんどいのは、すでにかなりの記事を積み上げてしまっている場合。すでにショートコードを挿入していたりすると、それらすべてを排除しないといけません。

WordPressプラグインの「Search Regex」あたりを使えば、そんな手間でもないかもしれませんけどね。

分割出力の実装

ということで、いざ分割して出力させる方法を紹介。
今回カスタマイズするのは、functions.phpと、分割して出力させたいテンプレートファイルになります。コアファイルはまったくいじらなくて大丈夫。

1) functions.phpに分割出力のコードを記述する

まずは、functions.phpに以下のコードを記述します。

function get_the_divided_content($more_link_text = null, $stripteaser = 0, $more_file = '') {
$regex = '#(<span id="more-[d]+"></span>|<span id="more-[d]+"></span>)#';
$content = get_the_content( $more_link_text, $stripteaser, $more_file );
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]>', $content );
if(preg_match($regex, $content)) {
list($content_array['before'], $content_array['after']) = preg_split($regex, $content, 2);
} else {
$content_array['before'] = '';
$content_array['after'] = $content;
}
return $content_array;
}

2) 分割して記事を呼び出すコードを記述する

続いて、functions.phpに記述した処理を、テンプレート上で実際に分割して表示させるためのコードを記述します。
ここではsingle.phpを想定しています。

まずは、通常記事を呼び出して表示する関数

<?php the_content(); ?>

を探しだして下さい。

この関数は削除。もしくはコメントアウトしてください。削除する場合は一応バックアップしておいてくださいね。

<?php $content = get_the_divided_content(); ?>
<?php echo $content['before']; ?>
<?php echo $content['after']; ?>

削除した箇所、またはコメントアウトした関数の直後に、この3行のコードを記述。
これで分割出力の準備は完了です。

あとは、<!--more-->以前を出力する<?php echo $content['before']; ?>と、<!--more-->以後を出力する<?php echo $content['after']; ?>の間に、出力させたい広告などの要素のコードを設置すればOKです。

いやー、実はうちでも実装を考えているんですが、いかんせん記事の処理が面倒だなっていうのがあって、未だに実装に至っていません。

とは言え、別にうちのブログだけじゃなくて、仕事でWordPressをCMS採用してウェブサイト制作を行うときとかに役立ちそうなので、まぁ覚えておこうと思って記事にしました。

なお、このコードはWordPressのフォーラムで見つけたものです。当たり前ですが僕にはこんなコード書けません。

このコード使えば、どこぞのニュースサイトみたいに会員登録しないと続きが読めないようにしたりとかもできちゃいそうですね。
かなり応用の幅が広いですよ、これは。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく