~/blog/inserting-images-or-text-after-h2-tags-in-wordpress
Published on

WordPressでH2タグの直後に画像やテキストを挿入する

1919文字4分で読めます–––
閲覧数
Authors
  • avatar
    Name
    Shou Arisaka nyapp.buzz/shou
    short bio
    Z世代の情報技術者。Next.jsで自作SNSを個人開発中。

WordPressでH2タグの直後に画像やテキストを挿入する方法を紹介します。 カテゴリごとに違う画像を挿入したりと、様々な拡張ができますので、ぜひ使いこなしてみてください。

メリット

どうしてこんなことしているのかというと、僕のSEOに関する仮説として、"どれだけスクロールされたか"があると思っています。 あるのは確実として、それはかなり大きな割合だとも思っています。

また、ユーザーの滞在時間も重要と言われています。これは有名ですね。

スクロールをするということは、その分滞在時間が伸びるということです。 広告を見たり、画像を見たり、そういったコンマ単位の時間が重要になってきます。

どれだけユーザーを離さない作りになっているか、これが要点ということです。

PHPで正規表現置換

PHPで正規表現置換をするには、以下のコードを実行してもらうと早いかと思います。

<?php
$string = 'aaa</h2>aaa';
$pattern = '/(<\/h2>)/i';
$replacement = '$1aiu';

  $return .= preg_replace($pattern, $replacement, $string) ;

  echo $return;


WordPressでは本文全体を置換対象とするので、$string = 'aaa</h2>aaa';$string = $the_content;とします。これだけの違いです。

はじめてPHPの正規表現を書いたんですが、Rubyと違って正規表現置換はちょっと書きにくいですね。Rubyであればgrepで簡潔に書けますからね。

wordpressでテスト

以下のコードをfunction.phpに書いて、サイトを更新してみましょう。

function category_1_1($the_content) {
    if (is_single() && in_category(array('ゲーム'))) {

      $string = $the_content;
      $pattern = '/(<\/h2>)/i';
      $replacement = '$1aiu';

        $return .= preg_replace($pattern, $replacement, $string) ;

        return $return;

    } else {
        return $the_content;
    }
}

add_filter('the_content','category_1_1');

これで"ゲーム"カテゴリの記事のH2のあとに、文字列"aiu"が追加されているはずです。

画像を挿入

では、本題、画像を挿入していきましょう。 簡単です。imgタグのHTMLを書いていけばいいだけです。

function category_image_1($the_content) {
    // if (is_single() && in_category(array('プログラミング'))) {

      $string = $the_content;
      $pattern = '/(<\/h2>)/i';
      $replacement = '$1
            <img src="https://techiecode.files.wordpress.com/2013/05/url3.png"
            alt="プログラミング" width="1200" height="600"/>
            ';

        $return .= preg_replace($pattern, $replacement, $string) ;

        return $return;

    // } else {
    //     return $the_content;
    // }
}

add_filter('the_content','category_image_1');

例として、当サイト用に書いたコードを見てみてください。

当サイトではカテゴリごとに画像を変更するのはやめました。結構面倒なので。

altタグを書いておくのも忘れないようにしましょう。

H1タグ直後に挿入

H1タグ直後に挿入しようと思ったんですが、なぜかh1直後だと挿入できなかったです。 ソース見ても変化無いし、コードは間違ってないし…で、これ以上時間も使いたくなかったので、諦めました。謎だ…

テーマによってはこういうことがあるのかもしれないです。

avatar

Shou Arisaka

情報技術者 / Z世代プログラマー / SaaSアプリやSNSを開発
今すぐ話そう!

15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。

Created with Fabric.js 5.2.4 何かご質問がありますか?