Cocoonで目次の上に広告を追加する

えーとも

どーも。えーとも(@atomoblog)です。

Twitter眺めてたら「目次の上に広告入れたらめっちゃええ」って情報が流れてきました。
ってーことで、現在利用中のテーマであるCocoonで表示できる目次上に広告を追加してみることに。

対象読者は「phpちょっといじって、自分でエラー対応などができる人」です。

くれぐれも自己責任でお願いします。

functions.phpに目次生成関数をコピペする

現在利用中の子テーマのfunctions.phpに関数を追加します。
内容はCocoonのlibフォルダ内にあるtoc.php内に記載されている関数「add_toc_before_1st_h2」をコピーして、子テーマのfunctions.phpにペーストします。

広告のコードを追加する


$label_for = null;
}
と
$html = '
の間に広告用のコードを追加します。

できればローカルの開発環境で不具合が無いことを確認してからアップロードします。
アップロード後、正常に動くことを確認してください。
エラーが出る場合は広告コード末尾のセミコロン抜けてるコトも多いのでソコをご確認ください。

広告と目次の間に隙間を作る

このままだと広告と目次の間に隙間が無くて美しくないので余白を追加します。

子テーマのstyle.cssに以下のコードを追加。

.toc {
    margin-top: 1em;
}

以上でおしまいです。

親テーマが更新されたらメンテすること！

今回のコードは親テーマからソースをコピペしています。
今後のアップデートでCocoonの目次生成関数に変更が生じた場合は同じようにコピペしてから広告を追加する作業を行ってください。

何でかっていうと、今回の方法って関数をオーバーライドって言って子テーマのfunctions.phpで親テーマにある関数を上書きしています。
上書きされた関数って親テーマで何らかの更新が行われても古い状態が保持されるので、アップデートが重なっていくと他の関数との兼ね合いで不具合が生じる原因になる可能性があります。

ってーことで、Cocoonのアップデートがあったら忘れずにコードをメンテナンスしましょう。

以上、Cocoonの目次上に広告を追加する方法でした。

「どうしても目次上に広告を追加したいんじゃー！」って人は試してみてください。
あ、エラー対応はご自身でお願いいたします。

えーとも

それでは、えーともでした！