ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Luxeritas(ルクセリタス)で目次の前にウィジェットを配置する方法

Luxeritasで記事内に自動挿入した目次の前にウィジェットを配置できるようにします。

そうすることで、記事の導入文と目次の間に広告を配置できるようになります。

この記事でわかること

目次前に広告を配置する2つの方法

方法1:目次をウィジェットで配置する
方法2:子テーマのfunctions.phpによるカスタマイズをする

それぞれ長所・短所も含めて解説します。方法2はコードのコピペだけでできますが、最後にコードの解説もしています。

目次前にウィジェットを配置するメリット

Luxeritasでは目次の自動挿入ができますが目次の直前にウィジェット配置ができません

代わりに記事内の最初の見出し<h2>タグの前にウィジェット配置ができるので、記事本文内の最初のアドセンス広告を配置するのに使ったりします。

しかしながら次のメリットにより、目次前のほうが広告のクリック率が向上する可能性があります。

  • 記事の導入文だけを見て離脱するユーザーに対しても広告が目に入る
  • 目次が長い場合、広告を目にすることなくユーザーが離脱する可能性がある
  • 導入文の書き方によっては、導入文直後の広告クリック率を高めることができる

なので目次前にウェジェットを配置できる記事構成を目指します。

本記事の目指す記事内配置

もちろん『記事導入文を書いた後に広告を直接手動で挿入する』という方法でも可能ですが、『記事毎に作業が必要』『あとで広告内容の変更するとき大変』なので採用却下です。

方法1:目次をウィジェットで挿入する

目次の自動挿入はせずにウィジェットエリア”投稿内で最初に見つかったH2タグの上”に広告ウィジェットと目次ウィジェットを配置する方法です。

ダッシュボードメニュー 外観>ウィジェット の画面で簡単に操作可能です。

目次ウィジェットを使った場合のウィジェット配置

上図のように、広告ウィジェット→目次ウィジェットの順に配置しておけば、最初の見出し<h2>の前にこの順で表示されるので結果的に目次前に広告を表示できるというわけです。

もちろん、外観>カスタマイズ>目次にて目次の自動挿入は外しておきます

この方法は非常に簡単にできるので過去に私もこの方法を使っていましたが、次のデメリットによりやめました。

  • 目次ウィジェットのスタイルはカスタムCSSで整える必要がある
  • 目次ウィジェットでは自動挿入した目次で使える開閉表示設定が適用されない
  • 目次ウィジェットでは自動挿入した目次で使えるモバイルナビボタンが使えない
  • 目次ウィジェットでは記事毎の目次非表示設定が使えない

カスタムCSSでスタイルを整えるのは当たり前なのでたいしたデメリットではありませんが、あとの3つはせっかくLuxeritasで使える機能を活かせずサイトの利便性を損なってしまいます。

これらのLuxeritasの機能を生かしたままで目次前に広告ウィジェットを表示するためには、次の方法2:functions.phpによるカスタイマイズを使うとよいでしょう。

方法2:functions.phpによるカスタマイズをする

子テーマのfunctions.phpを編集して次の作業を行います。2021年9月現在のウェブチルサイトでも使っている手法です。

  1. あらたなウィジェットエリアを追加する
  2. 追加したウィジェットエリアを自動挿入した目次前に表示させる

この方法のデメリットは、次の注意事項の内容といえますが、作業としてはコードをコピペするだけなので比較的簡単なカスタマイズといえるでしょう。

注意事項

本記事での検証は、Luxeritasバージョン3.20.3で実施しています。別バージョンでは正しく動作しない可能性があります。

したがって事故防止として事前にバックアップを取ってから実施する、または、ローカル環境で試してから本サイトに反映させるなど、自己責任で実施ください。

私もローカル環境で動作テストをしたうえで、本サイトに適用する前にはバックアップを取ってから実行しています。

メリットとしては、Luxeritasの自動挿入目次に適用できる次の機能を使えることです。

  • 目次の開閉切り替えボタン
  • モバイルナビの目次ボタン
  • 記事毎の目次非表示設定
  • 文字色や背景色、枠線色などの簡単スタイルはカスタムCSS不要で設定可能

目次を自動挿入しておく

準備として、ダッシュボードメニュー 外観>カスタマイズ>目次 にて目次の自動挿入をしておきます。

手順①あらたなウィジェットエリアの追加

次のコードを子テーマのfunctions.phpにコピペします。

function thk_widget_areas() {
	return array(
		array(
			'id'		=> 'above-toc',
			'name'		=> __( 'Above Toc Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above toc.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget above-toc %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="above-toc-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'above-toc-amp',
			'name'		=> __( 'Above Toc Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above toc.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget above-toc %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="above-toc-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'side-h3',
			'name'		=> __( 'General-purpose sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'side-h4',
			'name'		=> __( 'General-purpose sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-top-h3',
			'name'		=> __( 'Front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> __( 'Front page dedicated.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'side-top-h4',
			'name'		=> __( 'Front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> __( 'Front page dedicated.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-no-top-h3',
			'name'		=> __( 'Other than the front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> __( 'Pages other than the front page.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'side-no-top-h4',
			'name'		=> __( 'Other than the front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> __( 'Pages other than the front page.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-scroll',
			'name'		=> __( 'Scroll follow sidebar (H4 type)', 'luxeritas' ),
			'description'	=> __( 'Widget to follow the scroll. The title is only h4.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-amp',
			'name'		=> __( 'AMP sidebar (H4 type)', 'luxeritas' ),
			'description'	=> __( 'AMP dedicated. The title is only h4.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'head-under',
			'name'		=> __( 'Under Header Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget just below the header.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget head-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="head-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'head-under-amp',
			'name'		=> __( 'Under Header Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget just below the header.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget head-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="head-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-upper',
			'name'		=> __( 'Above Post Title Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-upper-amp',
			'name'		=> __( 'Above Post Title Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-under',
			'name'		=> __( 'Under Post Title Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-under-amp',
			'name'		=> __( 'Under Post Title Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget under the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-h2-upper',
			'name'		=> __( 'Above the first H2 tag in the post', 'luxeritas' ),
			'description'	=> __( 'Place the widget above first H2 tag in the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-h2-title %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-h2-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-h2-upper-amp',
			'name'		=> __( 'Above the first H2 tag in the post', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above first H2 tag in the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-h2-title %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-h2-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-upper',
			'name'		=> __( 'Above Related Posts Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-upper-amp',
			'name'		=> __( 'Above Related Posts Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-under',
			'name'		=> __( 'Under Related Posts Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-under-amp',
			'name'		=> __( 'Under Related Posts Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget under the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'posts-list-upper',
			'name'		=> __( 'Above Posts List Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above the posts list.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-list-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-list-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'posts-list-middle',
			'name'		=> __( 'Middle of Posts List Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget middle of the posts list.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-list-middle %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-list-middle-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'posts-list-under',
			'name'		=> __( 'Under Posts List Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the posts list.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-list-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-list-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'footer-left',
			'name'		=> __( 'Footer left', 'luxeritas' ) . ' (' . __( 'Title H4', 'luxeritas' ) . ')',
			'description'	=> __( 'When the sidebar is offscreen, it will be not shown.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="footer-left-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'footer-center',
			'name'		=> __( 'Footer center', 'luxeritas' ) . ' (' . __( 'Title H4', 'luxeritas' ) . ')',
			'description'	=> __( 'When the sidebar is offscreen, it will be not shown.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="footer-center-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'footer-right',
			'name'		=> __( 'Footer right', 'luxeritas' ) . ' (' . __( 'Title H4', 'luxeritas' ) . ')',
			'description'	=> __( 'When the sidebar is offscreen, it will be not shown.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="footer-right-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'post-under-1',
			'name'		=> __( 'Under Post Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-1 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-1">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-under-1-amp',
			'name'		=> __( 'Under Post Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget under the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-1 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-1">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-under-2',
			'name'		=> __( 'Further below "Under Post Widget"', 'luxeritas' ),
			'description'	=> __( 'Place the widget further below "Under Post Widget".', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-2 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-2">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-under-2-amp',
			'name'		=> __( 'Further below "Under Post Widget"', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget further below "Under Post Widget".', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-2 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-2-amp">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'col3-h3',
			'name'		=> __( '3 Column Left Sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'col3-h4',
			'name'		=> __( '3 Column Left Sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		)
	);
}

子テーマのfunctions.phpはダッシュボードメニュー 外観>テーマエディター と進めた後、次の手順で開けることができます。

①Luxeritas Child Themeであることを確認
(通常は自動的に選択されているので念のため)
②画面右メニューでfunctions.phpをクリック
③画面上部で子テーマのfunctions.phpが開いたことを確認

子テーマfunctions.phpを開ける

コピペ場所は、冒頭のコメント終了を表す*/より下の行(上の画像で15行目以降)であれば、どこでもOKです。

以上の作業が終了後、ダッシュボードの外観>ウィジェットを開けて確認しましょう。ウィジェットエリアとして"Above Toc Widget"が追加表示されていればOKです。

追加されたウィジェットエリア

本記事の目的は目次前に広告を表示することなので、このAbove Toc Widgetエリアに広告用ウィジェットを配置して設定しておきます。もちろんテキストウィジェットなどをテスト的に配置してもOKです。

Above Toc Widgetに広告ウィジェットを配置する

②目次前にウィジェットエリアを挿入する

functions.phpにさらに次のコードを記述すると、先ほど追加したウィジェットエリアAbove Toc Widgetが自動挿入した目次前に表示されるようになります。

//目次前にウィジェットを挿入する
function above_toc_widget( $contents ){
	global $luxe, $_is, $post;//$postはthe_post()でセットされるglobal変数
	if( !empty( $contents ) ) {
		// ページ単位で目次を非表示にするかどうかの meta data 取得
		$thk_hide_toc = isset( $post->ID ) ? get_post_meta( $post->ID, 'thk_hide_toc', true ) : '';

		// 目次の自動挿入か目次ウィジェットが有効な場合のみ処理
		if( $thk_hide_toc !== 'disable' && ( isset( $luxe['toc_auto_insert'] ) || is_active_widget( false, false, 'thk_toc_widget' ) !== false ) ) {
			if( ( $_is['single'] === true && isset( $luxe['toc_single_enable'] ) ) || ( $_is['page'] === true && isset( $luxe['toc_page_enable'] ) ) ) {
				$toc_pos = '<div id="toc_container">';//これを目印にして上にウィジェットを挿入
				if( function_exists('dynamic_sidebar') === true && is_active_sidebar('above-toc') === true ) {
					if( stripos( $contents, $toc_pos ) !== false ) {
						ob_start();
						if( !isset( $luxe['amp'] ) ) {
							dynamic_sidebar( 'above-toc' );
						}
						else {
							dynamic_sidebar( 'above-toc-amp' );
						}
						$widget = ob_get_clean();
						$widget = str_replace( "\t", '', $widget );
						$contents = str_replace( $toc_pos, $widget . "\n" . $toc_pos,  $contents );
					}
				}
			}
		}
		return $contents;
	}
}
add_filter('thk_content', 'above_toc_widget', 1073741825);

実際に目次前に広告表示した事例です。

目次前の広告ウィジェット表示
目次前の広告表示例

もちろん、目次が自動挿入されていないページでは広告ウィジェットも表示されません

ウィジェットの表示ページ制限をする

Luxeritasでは、ダッシュボードのLuxeirtas>管理機能>”ウィジェット管理”タブにてページ種毎にウィジェット領域の非表示設定ができるようになっています。

今回あらたに追加したウィジェットエリアAbove Toc Widgetも、非表示設定できる一覧に加わっていますので、もし自分の用途に合わせて非表示に制限したい場合は利用するとよいでしょう。

ウィジェット領域の制限

方法2のコードの解説

あらたなウィジェットエリアを追加したコード

ウィジェットに関する情報は、親テーマLuxeritasフォルダーのincフォルダ内widget.phpに記述されています。

widget.phpの場所

widget.phpの1927行目のfunction thk_widget_areas( )がウィジェットエリアを定義している関数です。

function thk_widget_areas() {
	return array(
		array(
			'id'		=> 'side-h3',
			'name'		=> __( 'General-purpose sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'side-h4',
			'name'		=> __( 'General-purpose sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-top-h3',
			'name'		=> __( 'Front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> __( 'Front page dedicated.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'side-top-h4',
			'name'		=> __( 'Front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> __( 'Front page dedicated.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-no-top-h3',
			'name'		=> __( 'Other than the front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> __( 'Pages other than the front page.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'side-no-top-h4',
			'name'		=> __( 'Other than the front page sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> __( 'Pages other than the front page.', 'luxeritas' ) . sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-scroll',
			'name'		=> __( 'Scroll follow sidebar (H4 type)', 'luxeritas' ),
			'description'	=> __( 'Widget to follow the scroll. The title is only h4.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'side-amp',
			'name'		=> __( 'AMP sidebar (H4 type)', 'luxeritas' ),
			'description'	=> __( 'AMP dedicated. The title is only h4.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'head-under',
			'name'		=> __( 'Under Header Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget just below the header.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget head-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="head-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'head-under-amp',
			'name'		=> __( 'Under Header Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget just below the header.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget head-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="head-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-upper',
			'name'		=> __( 'Above Post Title Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-upper-amp',
			'name'		=> __( 'Above Post Title Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-under',
			'name'		=> __( 'Under Post Title Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-title-under-amp',
			'name'		=> __( 'Under Post Title Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget under the post title.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-title-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-title-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-h2-upper',
			'name'		=> __( 'Above the first H2 tag in the post', 'luxeritas' ),
			'description'	=> __( 'Place the widget above first H2 tag in the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-h2-title %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-h2-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-h2-upper-amp',
			'name'		=> __( 'Above the first H2 tag in the post', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above first H2 tag in the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget post-h2-title %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="post-h2-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-upper',
			'name'		=> __( 'Above Related Posts Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-upper-amp',
			'name'		=> __( 'Above Related Posts Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget above the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-under',
			'name'		=> __( 'Under Related Posts Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'related-under-amp',
			'name'		=> __( 'Under Related Posts Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget under the related posts.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget related-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="related-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'posts-list-upper',
			'name'		=> __( 'Above Posts List Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget above the posts list.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-list-upper %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-list-upper-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'posts-list-middle',
			'name'		=> __( 'Middle of Posts List Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget middle of the posts list.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-list-middle %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-list-middle-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'posts-list-under',
			'name'		=> __( 'Under Posts List Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the posts list.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-list-under %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-list-under-title">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'footer-left',
			'name'		=> __( 'Footer left', 'luxeritas' ) . ' (' . __( 'Title H4', 'luxeritas' ) . ')',
			'description'	=> __( 'When the sidebar is offscreen, it will be not shown.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="footer-left-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'footer-center',
			'name'		=> __( 'Footer center', 'luxeritas' ) . ' (' . __( 'Title H4', 'luxeritas' ) . ')',
			'description'	=> __( 'When the sidebar is offscreen, it will be not shown.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="footer-center-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'footer-right',
			'name'		=> __( 'Footer right', 'luxeritas' ) . ' (' . __( 'Title H4', 'luxeritas' ) . ')',
			'description'	=> __( 'When the sidebar is offscreen, it will be not shown.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="footer-right-title">',
			'after_title'	=> '</h4>'
		),
		array(
			'id'		=> 'post-under-1',
			'name'		=> __( 'Under Post Widget', 'luxeritas' ),
			'description'	=> __( 'Place the widget under the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-1 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-1">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-under-1-amp',
			'name'		=> __( 'Under Post Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget under the post.', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-1 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-1">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-under-2',
			'name'		=> __( 'Further below "Under Post Widget"', 'luxeritas' ),
			'description'	=> __( 'Place the widget further below "Under Post Widget".', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-2 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-2">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'post-under-2-amp',
			'name'		=> __( 'Further below "Under Post Widget"', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
			'description'	=> __( 'Place the widget further below "Under Post Widget".', 'luxeritas' ),
			'before_widget'	=> '<div id="%1$s" class="widget posts-under-2 %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<p class="posts-under-2-amp">',
			'after_title'	=> '</p>'
		),
		array(
			'id'		=> 'col3-h3',
			'name'		=> __( '3 Column Left Sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H3' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h3' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h3 class="side-title">',
			'after_title'	=> '</h3>'
		),
		array(
			'id'		=> 'col3-h4',
			'name'		=> __( '3 Column Left Sidebar', 'luxeritas' ) . ' (' . sprintf( __( 'title %s type', 'luxeritas' ), 'H4' ) . ')',
			'description'	=> sprintf( __( 'If you want the title to have %s tag.', 'luxeritas' ), 'h4' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<h4 class="side-title">',
			'after_title'	=> '</h4>'
		)
	);
}

これを全部コピーして子テーマのfunctions.phpにペーストしたうえで、この関数内にあらたなウィジェットエリアAbove Toc Widgetを配置するコードを追記したものが今回使用したコードです。

array(
    'id'		=> 'above-toc',
    'name'		=> __( 'Above Toc Widget', 'luxeritas' ),
    'description'	=> __( 'Place the widget above toc.', 'luxeritas' ),
    'before_widget'	=> '<div id="%1$s" class="widget above-toc %2$s">',
    'after_widget'	=> '</div>',
    'before_title'	=> '<p class="above-toc-title">',
    'after_title'	=> '</p>'
),
array(
    'id'		=> 'above-toc-amp',
    'name'		=> __( 'Above Toc Widget', 'luxeritas' ) . '( ' . __( 'for AMP', 'luxeritas' ) . ' )',
    'description'	=> __( 'Place the widget above toc.', 'luxeritas' ),
    'before_widget'	=> '<div id="%1$s" class="widget above-toc %2$s">',
    'after_widget'	=> '</div>',
    'before_title'	=> '<p class="above-toc-title">',
    'after_title'	=> '</p>'
),

したがって、もし今後のテーマLuxeritasのアップデートでウィジェットエリアが追加された場合は、アップデート後のwidget.phpから function thk_widget_areas( ) をコピーしなおしてからAbove Toc Widgetを再度追記すればよいでしょう。

目次前にウィジェットエリアを挿入するコード

上記コードまででウィジェットエリアとしてAbove Toc Widgetが追加できましたが、どこに配置するウィジェットなのかをテンプレートファイルに記述する必要があります。

今回は直接テンプレートファイルに書き込まずに、Luxeritasが準備してくれているフィルターフックのthk_contentを利用してfunctions.phpに記述する方法を取りました。そのほうが、テーマのアップデートの影響を受けにくいからです。

そもそも目次の自動挿入をするコードは、親テーマのincフォルダ内にあるwpfunc.php内に記述されています。

wpfunc.phpの場所

このwpfunc.phpは、目次の自動挿入だけでなく、ファイルシステムやテーマの初期設定値などLuxeritasのさまざまな重要機能を司るPHPが記述されているので、wpfunc.phpを子テーマに置いて書き換えるのはテーマのアップデートの影響を受けやすくなってしまいます。

そこでwpfunc.phpの836行目のfunction thk_the_content( )が目次の自動挿入や<h2>前のウィジェット配置など記事内の様々な調整をする関数であり、最後にフィルターフックthk_contentにフックされていることに着目しました。

add_filter( 'thk_content', 'thk_the_content', 1073741824 );

そこで子テーマのfunctions.php内でAbove Toc Widgetを目次前に配置する関数above_toc_widget( )を定義して、thk_the_content( )がフックされた後にフックされるようにpriorityを1073741825としました。

add_filter('thk_content', 'above_toc_widget', 1073741825);

またabove_toc_widget( )内の記述をみればわかるように、ウィジェットの挿入場所は目次のコンテナである<div id="toc_container">の前としています。

$toc_pos = '<div id="toc_container">';//これを目印にして上にウィジェットを挿入
if( function_exists('dynamic_sidebar') === true && is_active_sidebar('above-toc') === true ) {
    if( stripos( $contents, $toc_pos ) !== false ) {
        ob_start();
        if( !isset( $luxe['amp'] ) ) {
            dynamic_sidebar( 'above-toc' );
        }
        else {
            dynamic_sidebar( 'above-toc-amp' );
        }
        $widget = ob_get_clean();
        $widget = str_replace( "\t", '', $widget );
        $contents = str_replace( $toc_pos, $widget . "\n" . $toc_pos,  $contents );
    }
}

これは、wpfunc.phpのthk_the_content( )内で次のように目次本体を定義しているからです。

// 目次本体
$toc_body = '<div id="toc_container"><span class="toc_title">' . $toc_title . '</span>';
if( !isset( $luxe['amp'] ) ) {
    $toc_body .= '<input id="toc_toggle" type="checkbox" checked="checked"><label class="toc_toggle" for="toc_toggle"></label>';
}
$toc_body .= $toc_array[1] . '</div><!--/#toc_container-->' . "\n";

もしなんらかの理由で目次のコンテナのスタート記述が <div id="toc_container"> でなくなった場合は、今回の目次前ウィジェット挿入はできなくなるので注意してください。

まとめ

目次前に広告を表示する2つの方法を紹介しました。

1つ目の目次ウィジェットを利用する方法は、非常に簡単なのでfunctions.phpを編集したくないという場合は利用するとよいでしょう。

2つ目のfunctions.phpの編集ですが、基本的には次のステップとなっています。

  1. あらたなウィジェットエリアを追加する
  2. 追加したウィジェットエリアを自動挿入した目次前に表示させる

①番目のステップは、目次前でなくてもあらたなウィジェットエリアを追加したい場合に使えます。この方法だとLuxeitasのウィジェット管理に反映されます。

ステップ②については、今回紹介したコードのほかにも、関数thk_the_contents( )をfunctions.phpにコピペして編集する方法もありますが、今回のように変更箇所のみthk_contentにフックする方が今後のLuxeritasのアップデートの影響を受けにくいと考えます。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる