機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

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

プログラミング

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直後だと挿入できなかったです。
ソース見ても変化無いし、コードは間違ってないし…で、これ以上時間も使いたくなかったので、諦めました。謎だ…

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

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu