WordPressの有料テーマのSTORK（ストーク）で、目次(H2)の上にGoogleアドセンス等の広告を導入する方法 を紹介していきたいと思います。
プラグインを使えば簡単に設定可能ですが、あまり余計なプラグインを入れたくない場合に、functions.phpにコピペ1発で設定できる方法がお勧めです。
2019年11月にSTORKの新バージョンとなる、STORK19が公開されました。
これによると、機能面でのパワーアップと表示スピードの改善を中心にアップデートが行われたという事です。
目次
STORK（ストーク)では最初の見出し(H2)上に広告を設置するウィジェットは無し
当ブログはWordPress無料テーマのSimplicity(現在はSANGO)を使用しているので、デフォルトですんなり最初の見出し(H2)上にGoogleアドセンスを導入しています。
しかし、ワタシがこの前、他サイトで導入したWordPress有料テーマのSTORK（ストーク）には、最初の見出し(H2)の上に広告を貼るウィジェットはありません。
最初の見出し(H2)上は、ブログ訪問者がリード文を読んだ後で、離脱する場合の出口 になるので、クリック率がとても良いんですね。
functions.phpにコピペ1発で貼りつけられる
functions.phpにコードを貼りつけるだけなので、超簡単に導入できると思います
FTPソフトを使うので、もし万が一ブログが真っ白になっても修正可能です。しかし、念のためにファイルのバックアップは行っておいた方が良いですね。
投稿本文中に広告を貼りつけられるウィジェットの導入方法
以下が導入の手順です。
STORKの子テーマにあるfunctions.phpをローカルにダウンロード
まずはFTPソフトを起動します。今回はFileZilla（ファイルジラ）を使用しました。導入方法は過去記事で解説しています。
FileZillaの使い方を初心者向けに分かりやすく解説【FTPソフト】対象のドメインから「public_html」➝「wp-content」➝「themes」➝「jstork_custom」と進み、中にある「functions.php」をパソコンのデスクトップに保存します。
functions.phpにコードを追加
パソコンのデスクトップにダウンロードした「functions.php」のファイルを開くわけですが、メモ帳ではなくテキストエディターで開きます。ここではTeraPadを使用していきます。
「functions.php」のファイルをTeraPadにドラッグアンドドロップするだけです。
開いたファイルに下記のコードを追加して上書き保存します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | /////////////////////////////////////// // 投稿本文中ウィジェットの追加 /////////////////////////////////////// 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」にアップロードしてやります。
すると、ウィジェットに 投稿本文中 という項目が出現しました。
ウィジェット「投稿本文中」に広告を貼りつけてみる
ウィジェットの「投稿本文中」に広告を貼りつけてみましょう。ダッシュボードから「外観」→「ウィジェット」と進み、「カスタムHTML」を選択して広告のコードを挿入していきます。
これで目次(H2)の手前に広告が表示されました。
まとめ
今回は、ブログの最初の見出し(H2)上に、Googleアドセンス等の広告を自動で設置できるウィジェットの導入方法を紹介しました。
functions.phpにコードを貼りつけるだけなので、失敗なく簡単に導入できるお勧めな方法かと思います。勿論、広告だけではなく、画像や表・テキストなどの任意のものを表示させることが可能になります。
追記：今後はストークの最新バージョンのSTORK19が購入可能です。
コメントを残す