現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

WordPress記事中最初のH2見出し前に広告を自動挿入方法

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

所要時間目安:3

This session is using  IPv4  is established in

今日は2025年6月1日です。

この記事は2016年3月19日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年6月1日 (日曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルT32ヘッドライト光軸調整方法 2PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

  2. たった今使用したパスワードがデータ侵害で検出されました。とChromeで表示 1PV

    ブラウザのひとつにGoogle製のGoogle Chromeがあります。その他にもMicrosoft製のMicrosoft EdgeやSleipnirやsafariやBLAVEなどいくつもあります。そ…

    もっと読む

  3. プッシュスイッチでブレーキを踏まずにエンジンをかける方法 1PV

    以前にプッシュスイッチ式のプッシュエンジンスタートボタンだと、運転席の方はブレーキを踏んでエンジンプッシュスイッチを押せばエンジンはかかります。しかし、助手席側にいる方は車に乗ったままだとブレーキが踏…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 24PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 23PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 21PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  1. エクストレイルT32ヘッドライト光軸調整方法 2PV

    エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

    もっと読む

  2. たった今使用したパスワードがデータ侵害で検出されました。とChromeで表示 1PV

    ブラウザのひとつにGoogle製のGoogle Chromeがあります。その他にもMicrosoft製のMicrosoft EdgeやSleipnirやsafariやBLAVEなどいくつもあります。そ…

    もっと読む

  3. プッシュスイッチでブレーキを踏まずにエンジンをかける方法 1PV

    以前にプッシュスイッチ式のプッシュエンジンスタートボタンだと、運転席の方はブレーキを踏んでエンジンプッシュスイッチを押せばエンジンはかかります。しかし、助手席側にいる方は車に乗ったままだとブレーキが踏…

    もっと読む

WordPress

WordPressで記事の途中に思い通りの広告などをショートコードなどによって、
挿入する方法はいくつかあります。

この記事を読む方へのオススメ

今回は、

記事中の始めのh2タグの前にウィジェットとして追加して自動的に表示する方法です。

具体的な方法はfunction.phpに以下のコードを記載・記述することで、

アドセンス336pxPC閲覧記事下表示1つ目コード

///////////////////////////////////////
 // 投稿本文中ウィジェットの追加
 ///////////////////////////////////////
 register_sidebars(1,
 array(
 'name'=>'投稿本文中',
 'id' => 'widget-in-article',
 'description' => '投稿本文中に表示されるウイジェット。文中最初のH2タグの手前に表示されます。',
 'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<div class="widget-in-article-title">',
 'after_title' => '</div>',
 ));

///////////////////////////////////////
 //H2見出しを判別する正規表現を定数にする
 ///////////////////////////////////////
 define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン

///////////////////////////////////////
 //本文中にH2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
 //H3-H6しか使っていない場合は、h2部分を変更してください
 ///////////////////////////////////////
 function get_h2_included_in_body( $the_content ){
 if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
 return $h2results[0];
 }
 }

///////////////////////////////////////
 // 投稿本文中の最初のH2見出し手前にウィジェットを追加する処理
 ///////////////////////////////////////
 function add_widget_before_1st_h2($the_content) {
 if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
 is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき
 ) {
 //広告(AdSense)タグを記入
 ob_start();//バッファリング
 dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示
 $ad_template = ob_get_clean();
 $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
 if ( $h2result ) {//H2見出しが本文中にある場合のみ
 //最初のH2の手前に広告を挿入(最初のH2を置換)
 $count = 1;
 $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
 }
 }
 return $the_content;
 }
 add_filter('the_content','add_widget_before_1st_h2');

 

管理画面の中に記事中ウィジェットという項目が追加されます。

こんな感じです。

記事本文中にウィジェット追加

ここに、
テキストなどのウィジェットを追加すると、
記事中の始めのh2タグの上部に追加した内容が表示されるようになります。

ショートコードなどをわざわざ使用しなくても、
自動的に広告などが表示されるようになります。

 

メルカリ招待コード:

最後に、function.phpをいじる際には、

必ずFTPソフトなどでいじる前のfunction.phpファイル自体をバックアップしてからにしてください。

でないとミスした時などに画面が真っ白になってしまいます。
バックアップをとっていればそのバックアップファイル自体を元の場所にアップロードで上書きすることで元に戻すことができます。

参考サイト)

 

表示をカスタマイズしたい方は、CSSで簡単に微調整ができます。

広告部分には「 .widget-in-article 」、ラベル部分には「 .widget-in-article-title 」というclass名が振られているので、CSSですぐにカスタマイズできます。

参考にCSSです。

.widget-in-article {
 margin-bottom: 20px;
 }
 .widget-in-article-title {
 font-size: 80%;
 color: #333;
 }

あなたにおすすめ

Windows10サポート終了まで

Multiplex 広告

あなたが訪問してから

0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

Total668


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録
-, ,

目次に戻る

目次に戻る


コメントを閉じる

Stinger6のフッターに3カラムのウィジェットを追加する方法 | WordPressデビュー津々浦々 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.