【Cocoon/PHP編集】目次ブロックの真上に広告を自動表示する(WordPress)

TIPS

こんにちは。ざわかける!のざわ(@zw_kakeru)です。

このブログはWordPressを使って作成されており、テーマはCocoonを用いています(無料)。
このCocoonで自動生成される目次のすぐ上に広告を入れたかったので、中身のphpファイルを直接編集しました。
現状、Cocoonのアップデートがかかる度にこの編集をしなければならないのでその作業Tipsです。

現状とやりたいこと

現在、このざわかける!ブログでは目次ブロックのすぐ上に広告が表示されています。

こんな感じですね。
このような表示を行うにはWordPressのメニューを開き外観>テーマエディタからテーマを直接編集する必要がありますが、ここで編集するのはCocoonテーマ本体のソースコードなので、Cocoonがアップデートされると自動的に変更が上書きされ、この広告ブロックは無かったことになってしまいます。

そのため、Cocoonのアップデートが行われる度に編集する必要があるのですが、毎回どのファイルを編集するんだっけ?となり、その度にChromeから開発者ツールで要素名を確認してテーマエディタで検索をかける、という作業をするのが非効率的なので、ここに記しておきます。

やり方(テーマのphpファイルを直接編集)

WordPressのメニューから外観>テーマエディタを開き、編集するテーマにCocoonを選択します(Cocoon Childではありません)。
テーマファイル一覧から、lib/toc.phpを開きます。
ここに目次タグを生成している場所があるので、そこを探してAdsenseコードを挿入します。
この記事執筆時点では、160行目付近にその記述がありました。

$html .= '
  <div' . $id . ' class="' . $class . get_additional_toc_classes() . ' border-element">'.$toc_check.
     '<'.$title_elm.' class="toc-title"'.$label_for.'>' . $title . '</'.$title_elm.'>
    <div class="toc-content">
    ' . $toc_list .'
    </div>
  </div>';

このうち、$toc_checkの直後の‘<‘の、<の間にAdsenseコードを丸ごとブチ込みました。
(なぜこの記述でうまくいくのかは、各自で考えてください。)

$html .= '
  <div' . $id . ' class="' . $class . get_additional_toc_classes() . ' border-element">'.$toc_check.
     '<center><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="horizontal"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></center><'.$title_elm.' class="toc-title"'.$label_for.'>' . $title . '</'.$title_elm.'>
    <div class="toc-content">
    ' . $toc_list .'
    </div>
  </div>';

ちなみに、data-ad-format=”horizontal”の設定をしておくと、横長の広告しか表示されなくなるのでオススメです。
挿入できたら「ファイルを更新」します。
すると、きちんと冒頭で示したような広告の表示ができました。
(インデントが汚いのは許してください笑)

終わりに

完全に自分用のメモです。
目次のすぐ上に広告を表示させたいなと思いやり方を軽く調べたら、「WP QUADなどを使ってブロックを置きましょう」とかしか出てこず、流石に毎回記事を執筆するたびにブロックを置くのはめんどくさすぎるのでこういう仕様にしておきました。

検索してもphpを直接編集する方法は、ニッチなのかほとんど出てきませんでした。
プログラミングができるとこのように中のコードまでいじった改造ができるので、細かいところまでストレスなく変更ができて良きですね。
(すでにお察しかもしれませんが、この記事の最大の目的はtoc.phpの場所のメモです。)
やはりブロガーさんでもプログラミングに精通している人ってあんまりいないんですかね。

ざわ
ざわ

そんなことよりさっさとテーマを自作すればこんな対応なんかしなくて済むんや。。。

タイトルとURLをコピーしました