STORK(ストーク)の目次(H2)上にGoogle アドセンスを貼る方法

STORK(ストーク)の目次(H2)上にGoogle アドセンスを貼る方法

WordPressの有料テーマのSTORK(ストーク)で、目次(H2)の上にGoogleアドセンス等の広告を導入する方法 を紹介していきたいと思います。

プラグインを使えば簡単に設定可能ですが、あまり余計なプラグインを入れたくない場合に、functions.phpにコピペ1発で設定できる方法がお勧めです。

追記

2019年11月にSTORKの新バージョンとなる、STORK19が公開されました。

これによると、機能面でのパワーアップと表示スピードの改善を中心にアップデートが行われたという事です。

公式STORK19の特徴や変更点など

STORK(ストーク)では最初の見出し(H2)上に広告を設置するウィジェットは無し

当ブログはWordPress無料テーマのSimplicity(現在はSANGO)を使用しているので、デフォルトですんなり最初の見出し(H2)上にGoogleアドセンスを導入しています。

ところがワタシが最近他サイトで導入したワードプレス有料テーマのSTORK(ストーク)には、最初の見出し(H2)の上に広告を貼るウィジェットはありません。

Simplicity「投稿本文中」

最初の見出し(H2)上は、ブログ訪問者がリード文を読んだ後で、離脱する場合の出口 になるので、クリック率がとても良いんですね。

なるほど!ブログの出口にもなるのか、よく考えてありますね。

functions.phpにコピペ1発で貼りつけられる

functions.phpにコードを貼りつけるだけなので、超簡単に導入できると思います

functions.phpって間違えるとブログが真っ白になる例のアレですね、大丈夫かな?

FTPソフトを使うので、もし万が一ブログが真っ白になっても修正可能です。しかし、念のためにファイルのバックアップは行っておいた方が良いですね。

FTPソフト?何じゃそれ。

FTPソフトとは?

プロバイダーに置いてあるサーバーに、サイトに作ったデータを送り届けることのできるソフトウェア。

スポンサーリンク

投稿本文中に広告を貼りつけられるウィジェットの導入方法

以下が導入の手順です。

STEP.1
STORKの子テーマにあるfunctions.phpをローカルにダウンロード
STEP.2
functions.phpにコードを追加
STEP.3
functions.phpをSTORKの子テーマにアップロード

STORKの子テーマにあるfunctions.phpをローカルにダウンロード

まずはFTPソフトを起動します。今回はFileZilla(ファイルジラ)を使用しました。導入方法は過去記事で解説しています。

FileZillaの使い方を初心者向けに分かりやすく解説【FTPソフト】FileZillaの使い方を初心者向けに分かりやすく解説【FTPソフト】

対象のドメインから「public_html」➝「wp-content」➝「themes」➝「jstork_custom」と進み、中にある「functions.php」をパソコンのデスクトップに保存します。

STORKの子テーマにあるfunctions.phpをローカルにダウンロード

子テーマの「functions.php」をデスクトップにダウンロードする訳ですね。

functions.phpにコードを追加

パソコンのデスクトップにダウンロードした「functions.php」のファイルを開くわけですが、メモ帳ではなくテキストエディターで開きます。ここではTeraPadを使用していきます。

「functions.php」のファイルをTeraPadにドラッグアンドドロップするだけです。

「functions.php」のファイルをTeraPadにドラッグアンドドロップする

開いたファイルに下記のコードを追加して上書き保存します。

///////////////////////////////////////
// 投稿本文中ウィジェットの追加
///////////////////////////////////////
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');

functions.phpをSTORKの子テーマにアップロード

上書き保存した「functions.php」をSTORKの子テーマ「jstork_custom」にアップロードしてやります。

functions.phpをSTORKの子テーマにアップロード

すると、ウィジェットに 投稿本文中 という項目が出現しました。

STORK(ストーク)「投稿本文中」

コピペ成功ですね!

MEMO
ダッシュボードの「外観」→「テーマエディター」から「functions.php」を開いてコードを貼りつける方法もあります。
スポンサーリンク

ウィジェット「投稿本文中」に広告を貼りつけてみる

ウィジェットの「投稿本文中」に広告を貼りつけてみましょう。ダッシュボードから「外観」→「ウィジェット」と進み、「カスタムHTML」を選択して広告のコードを挿入していきます。

STORK(ストーク)ウィジェット「投稿本文中」に広告を貼りつけてみる

これで目次(H2)の手前に広告が表示されました。

STORK 広告表示

よっしゃ!バッチリ。

まとめ

今回は、ブログの最初の見出し(H2)上に、Googleアドセンス等の広告を自動で設置できるウィジェットの導入方法を紹介しました。

functions.phpにコードを貼りつけるだけなので、失敗なく簡単に導入できるお勧めな方法かと思います。勿論、広告だけではなく画像や表・テキストなどの任意のものを表示させることが可能になります。

やっぱりアドセンスを貼るのが良いですね。

追記:今後はストークの最新バージョンのSTORK19が購入可能です。

STORK最新バージョン【STORK19】

WordPress有料テーマSTORK(ストーク)関連記事一覧はコチラ

コメントを残す

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

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)