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