WordPress moreタグを削除せずにmoreタグの前後にコンテンツを挿入する方法 完全版

2018-03-08

投稿/固定ページのmoreタグの部分にコンテンツを挿入したい。でも、moreタグを置換してmoreタグがなくなってしまうのはうまくない、という場合。moreタグを残したまま、前後にコンテンツを挿入する方法。

moreタグ

moreタグは以下のように変換されて記事に挿入されます。xxxの部分は、記事のIDが入ります。




これ↑を置換してコンテンツに置き換える方法をよく見かけますが、それだとmoreタグがなくなってしまう。moreタグを残したい場合もあるので、その場合も想定したバージョンが以下。

moreタグを削除せずにmoreタグの前後にコンテンツを挿入するフィルターフック

the_content にフィルターフックを引っかけます。


  <?php
  add_filter('the_content', 'my_content');
  function my_content($content) {

    $add_html = '<!--挿入したいHTML-->';
    $id = get_the_ID();
    $more = sprintf('<span id="more-%d"></span>', $id);

    $html = '';
    $html .= $more;
    $html .= "\n";
    $html .= $add_html;

    $pattern_base = '<span id="more-[0-9]+"><\/span>';
    $pattern = sprintf('/%s/', $pattern_base);
    $pattern_p = sprintf('/<p>%s<\/p>/', $pattern_base);

    if(preg_match($pattern_p, $content, $matches)) {
        $content = preg_replace($pattern_p, $html, $content);
    } else if(preg_match($pattern, $content, $matches)) {
        $content = preg_replace($pattern, $html, $content);
    }
    
    return $content;
  }

解説

$add_html に挿入したいHTMLを代入します。

$more で、置換していなくなっちゃうmoreタグを自前で生成しておきます。

$html の部分でmoreタグと挿入したいコンテンツの順番を組み立てます。組み立て方はなんでもいいですが、変更しやすい方法で書いておきました。

後は単に置換すればいい話なんですが、悩みごとがひとつ。

条件によっては、出力されるHTMLに構文エラーが発生します。原因はWordPressの自動的にpタグやbrタグを挿入する、wpautop なる機能によるものです。挿入したいHTMLに div などが含まれている場合、pタグの中にdivが入ってしまったりします。

それを解決するには、以下の2つが必要です。

  • moreタグ前後にそれぞれ空白行を1行以上入れること
  • /<p><span id="more-[0-9]+"><\/span></p>/ と、pタグごと置換すること

しかし、pタグごと置換すると、万一moreタグ前後に空白を入れなかった場合に置換されず、挿入したいHTMLが表示されません。なので、泣く泣くpタグなしバージョンも置換するようにしておく、ということです。

そのため、置換のあたりのコードがちょっとややこしくなっています。

オレは絶対にmoreタグ前後に空白行を入れるぜ!って方は、単に1行で置換してもokです。


preg_replace('/<p><span id="more-[0-9]+"><\/span></p>/', $html, $content)