【アフィンガー5 】目次上にアドセンス広告を挿入する方法【写真解説】

目次の上にアドセンスを入れたい!けどどうやって入れたらいいの?

このサイトにはAFFINGER5を入れていますが、標準の装備では目次上にアドセンスをいれることができません。

ですが、コードをちゃんとテーマに入れると、ウィジェットに目次上という項目ができます。

こんな方におすすめ

  • 目次上にアドセンスを入れたい!
  • 目次上にプロフィールなどをいれて装飾したい!

そんな方にオススメの記事になります。

【AFFINGER5(アフィンガー5)】目次上にアドセンスを入れる方法

AFFINGER5にコードをいれる簡単な流れはこちらです。

簡単な流れ

  • 下記のコードをコピー
  • テーマエディターに貼り付け
  • ウィジェットで編集

まずは下記のコードをコピーします。

  1. // 専用のサイドバーを用意する
  2. register_sidebars( 1,
  3.   array(
  4.     'name'=>'目次上',
  5.     'id' => 'widget-above-toc',
  6.     'description' => '目次の上に表示されるウイジェット。',
  7.     'before_widget' => '<div id="%1$s" class="widget-above-toc %2$s">',
  8.     'after_widget' => '</div>',
  9.     'before_title' => '<div class="widget-above-toc-title">',
  10.     'after_title' => '</div>',
  11.   )
  12. );
  13. /**
  14.  * 記事内の目次の上にサイドバーを追加する処理
  15.  * 目次がなければ、記事の先頭に追加する。
  16.  */
  17. function add_widget_above_toc($the_content) {
  18.   if ( is_single() && is_active_sidebar( 'widget-above-toc' ) ) {
  19.     // ウィジェットの表示文字列を取得する
  20.     ob_start();
  21.     dynamic_sidebar( 'widget-above-toc' );
  22.     $widget_content = ob_get_clean();
  23.     $pos_start = mb_strpos( $the_content, '<div id="toc_container"' ); // 目次の位置を取得する(TOC+の場合)
  24.     //$pos_start = mb_strpos( $the_content, '<div id="ez-toc-container"' ); // (Easy Table of Contents の場合)
  25.     if ($pos_start === false) {
  26.       $the_content = $widget_content . $the_content;
  27.     } else {
  28.       $html_before = mb_substr( $the_content, 0, $pos_start );
  29.       $html_after = mb_substr( $the_content, $pos_start );
  30.       $the_content = $html_before . $widget_content . $html_after;
  31.     }
  32.   }
  33.   return $the_content;
  34. }
  35. add_filter( 'the_content','add_widget_above_toc', 110 );

 

コピーをしたらWordpressの【外観】→【テーマエディター】→【テーマのための関数】

テーマの子テーマに【テーマのための関数】というテーマファイルがあるのでそこに貼り付けます。

【ファイルを更新】をクリックし、保存する。

保存が終わったら【外観】→【ウィジェット】に行きます。

一番上に【目次上】があることを確認します。

そして左の【00_STINGERカスタムHTML】の▽をクリックし、目次上を押して【ウィジェットを追加】を押します。

【目次上】に【00_STINGERカスタムHTML】が出来たら、そこにアドセンスのコードを入れれば、目次上にアドセンスが入ります。

【アフィンガー5 】目次上にアドセンス広告を挿入する方法【写真解説】まとめ

今回はアフィンガー5を使っている方向けの目次にアドセンス広告を挿入する方法を紹介しました。

目次上にアドセンスを入れるのはクリック率が上がるので、まだ入れていない人はアドセンスを入れてみてはいかがでしょうか。

 

ここまで読んでいただきありがとうございました。

  • この記事を書いた人
koichan

らむ

ブログ歴2年目|開設1ヵ月で2000PV|1ヵ月(7記事)でアドセンス合格|文章を書くことが得意|

-Wordpress
-,

© 2024 Powered by AFFINGER5