今回は、WordPressのテーマ『SWELL』を使って、目次上下両方に広告タグを設置する方法についてです。
一度設定したら、自動で全記事に一括反映されるやり方を解説していきます。
2022年5月現在、SWELLの標準機能ではこの”片方”への設定しかできない仕様となっているため、テーマエディターを直接編集していく方法になります。
SWELLで目次広告を設定する方法
まずは、SWELLの標準機能を使って目次広告を貼る方法を確認していきましょう。
やり方は、2段階です。
- 広告タグを設置する
- 広告の表示箇所を指定する
広告タグを設置する
ダッシュボード「SWELL設定」→「広告コード」→「目次広告」に広告タグを貼り付けます。
![SWELLで目次広告を設定する方法](https://ym-life.com/wp-content/uploads/2022/05/1f16eebb6fb6ed81f02fdeaa210ef5ec.jpg)
一番下までスクロールし、「変更を保存」ボタンを忘れずに押しておきましょう。
広告の表示箇所を指定する
「外観」→「カスタマイズ」をクリックします。
![SWELLで目次広告を設定する方法2](https://ym-life.com/wp-content/uploads/2022/05/710228e461198ba6715b87309f7fbb15.jpg)
「投稿・固定ページ」をクリック。
![SWELLで目次広告を設定する方法3](https://ym-life.com/wp-content/uploads/2022/05/20215271db6a5b2385bbdf70bf279350.jpg)
「目次」をクリック。
![SWELLで目次広告を設定する方法4](https://ym-life.com/wp-content/uploads/2022/05/e2f4e30a7d15cef55a3f972bad56b52d.jpg)
「目次広告の表示設定」で、目次広告の設置箇所を指定できます。
![SWELLで目次広告を設定する方法5](https://ym-life.com/wp-content/uploads/2022/05/326908f9ecbca76e13455fbe8c899650.jpg)
✔ 目次の前or後どちらに表示するか
✔ 投稿ページのみに表示するか、固定ページにも表示するか
SWELLの標準機能では目次の片方しか広告を貼れない!
上の設定方法を見るとおわかりの通り、
SWELLでは目次上下両方に広告を設定することができない
仕様になっているのです。(2022年5月現在)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ2(丸)-150x150.png)
まぁ目次上下に広告があるのも鬱陶しいし、どちらか一つに入れるというのが一般的ですしね…。
そこで、どうにかして両方に広告を入れる方法を模索したところ、直接テーマエディターを触れば可能でした!
まず、SWELLの目次設定では「目次の前に設置する」を選択しておき↓
![SWELLで目次広告を設定する方法6](https://ym-life.com/wp-content/uploads/2022/05/8724537ffe54dfc478324532179ab072.jpg)
![SWELLで目次広告を設定する方法6](https://ym-life.com/wp-content/uploads/2022/05/8724537ffe54dfc478324532179ab072.jpg)
この状態で、「目次下」に設置する広告のみをテーマエディターで指定していきましょう!
・目次上…SWELLの標準機能で設定
・目次下…テーマエディターで設定する
テーマエディターを直接編集するリスク
![テーマエディターを編集するリスク](https://ym-life.com/wp-content/uploads/2022/05/2f7e0ffb99a2bacb1c6a4d975a589ad7.jpg)
![テーマエディターを編集するリスク](https://ym-life.com/wp-content/uploads/2022/05/2f7e0ffb99a2bacb1c6a4d975a589ad7.jpg)
実際のやり方をご説明する前に、一つ注意点があります。
それは、テーマエディターの編集は、一つ間違えるとブログが真っ白になるリスクがあること。
特に、一日数千~数万PVを集めるような大きなブログの場合、そのような事態になれば、復旧までの機会損失が甚大なものになってしまいます。
また、復旧が遅れてしまうと、最悪の場合SEO(検索順位)への影響も懸念されます。
そのため、作業は慎重に行うようにしていきましょう。
初心者の方は、この記事に書いてある内容”以外”のことは、決して行わないようにしてください。
可能でしたら、事前にバックアップをとっておくか、もしくはテスト環境で予め動作チェックをしてから進めていくとより安心でしょう。
テーマエディターから目次下に広告を設置する方法
本記事での設定方法は、2022年5月現在のものです。
今後テーマが更新された場合、テーマファイルの場所や広告タグの挿入箇所が変更になる可能性があります。
ここからは、いよいよテーマエディターを使って目次下に広告する方法についてです。
「外観」→「テーマエディター」
![SWELLで目次下に広告を設置する](https://ym-life.com/wp-content/uploads/2022/05/fe66e357bb1e77d0b3494158573dc9e0.jpg)
![SWELLで目次下に広告を設置する](https://ym-life.com/wp-content/uploads/2022/05/fe66e357bb1e77d0b3494158573dc9e0.jpg)
SWELLがテーマ選択されていることを確認し、「lib」→「content_filter.php」をクリック。
![テーマエディタ](https://ym-life.com/wp-content/uploads/2022/05/5b382437dabada99854afb144102e388.jpg)
![テーマエディタ](https://ym-life.com/wp-content/uploads/2022/05/5b382437dabada99854afb144102e388.jpg)
下の方にスクロールしていき、「目次本体」と書かれている部分を探しましょう。
![SWELLで目次広告を設定する方法8](https://ym-life.com/wp-content/uploads/2022/05/c56f812f8ab93ad048ca85c647c7e6d5.jpg)
![SWELLで目次広告を設定する方法8](https://ym-life.com/wp-content/uploads/2022/05/c56f812f8ab93ad048ca85c647c7e6d5.jpg)
</div>と「’」の間に広告タグを入れていくので・・・
![SWELLで目次広告を設定する方法9](https://ym-life.com/wp-content/uploads/2022/05/40f5a8184327c57e1b2f8a5eb6601be8.jpg)
![SWELLで目次広告を設定する方法9](https://ym-life.com/wp-content/uploads/2022/05/40f5a8184327c57e1b2f8a5eb6601be8.jpg)
作業をしやすくするために、一度ここで改行してください。
![SWELLで目次広告を設定する方法10](https://ym-life.com/wp-content/uploads/2022/05/c51b2db9230c4a4e7aef004a69d29a1e.jpg)
![SWELLで目次広告を設定する方法10](https://ym-life.com/wp-content/uploads/2022/05/c51b2db9230c4a4e7aef004a69d29a1e.jpg)
そして、下の矢印の箇所に広告タグを貼り付けます。
![SWELLで目次広告を設定する方法11](https://ym-life.com/wp-content/uploads/2022/05/3bc5a4060666d7dfd1173a75fc54d407.jpg)
![SWELLで目次広告を設定する方法11](https://ym-life.com/wp-content/uploads/2022/05/3bc5a4060666d7dfd1173a75fc54d407.jpg)
実際に貼り付けると、こんな形になります↓
![SWELLで目次広告を設定する方法12](https://ym-life.com/wp-content/uploads/2022/05/868e65878efa2edec587ebf261453b08.jpg)
![SWELLで目次広告を設定する方法12](https://ym-life.com/wp-content/uploads/2022/05/868e65878efa2edec587ebf261453b08.jpg)
必要があれば、センタータグ<center></center>を入れて、広告が画面中央に表示されるように調整しておきましょう!
![SWELLで目次広告を設定する方法13](https://ym-life.com/wp-content/uploads/2022/05/af803077ca6a897c782e15695f1135eb.jpg)
![SWELLで目次広告を設定する方法13](https://ym-life.com/wp-content/uploads/2022/05/af803077ca6a897c782e15695f1135eb.jpg)
最後に忘れずに「ファイルを更新」ボタンを押せば・・・
![SWELLで目次広告を設定する方法14](https://ym-life.com/wp-content/uploads/2022/05/bd9f9afeccea47f45a8ff32ff53ba347.jpg)
![SWELLで目次広告を設定する方法14](https://ym-life.com/wp-content/uploads/2022/05/bd9f9afeccea47f45a8ff32ff53ba347.jpg)
このように、目次下に記事タイトル上に広告が設置されます!
![SWELLで目次広告を設定する方法15](https://ym-life.com/wp-content/uploads/2022/05/6abf18d8bcb1b700b232ea2403d549d4-1.jpg)
![SWELLで目次広告を設定する方法15](https://ym-life.com/wp-content/uploads/2022/05/6abf18d8bcb1b700b232ea2403d549d4-1.jpg)
テーマエディターの編集箇所については、Visual Studio Codeで探すことができます。
![SWELL目次下広告設定(ビジュアルスタジオコード)](https://ym-life.com/wp-content/uploads/2022/05/83a73496e83fd58624d13352d72cc817.jpg)
![SWELL目次下広告設定(ビジュアルスタジオコード)](https://ym-life.com/wp-content/uploads/2022/05/83a73496e83fd58624d13352d72cc817.jpg)
(注)テーマの更新がかかったら設定がリセットされます
ここまで、SWELLでの広告タグの設定方法を解説してきましたが、最後に一つ注意点があります。
それは、
テーマの更新がかかると、上の設定がリセットされてしまう
ということ。
上の方法は、直接親テーマを触りにいっているので、テーマそのものに更新がかかると設定内容が反映されない(=初期化されてしまう)のです。
そのため、子テーマ側で設定しておく方法もあります。
![](https://ym-life.com/wp-content/uploads/2023/07/3ac75508d36a031444c3f395c4f7f2a0-300x169.jpg)
![](https://ym-life.com/wp-content/uploads/2023/07/3ac75508d36a031444c3f395c4f7f2a0-300x169.jpg)
- 親テーマ…テーマの元となる部分(定期的に更新される)
- 子テーマ…カスタマイズ用のテーマ。親テーマを更新しても子テーマの設定が上書きされる仕様となっているため、カスタマイズした設定は残ります。
ブログの外観は、
親テーマ + 子テーマ
で決まります。
親テーマの内容の上に、子テーマが上書きされる仕組みになっているんですね。
だから、子テーマ側で上の設定をしておけば、親の方に更新がかかっても子が上書きされ、設定が保持されます。
※子テーマのダウンロードは、SWELLの公式サイトから可能です。
あとがき
今回は、目次上下両方に広告を入れる方法についてでした!
SWELLの標準機能ではどちらか片方にしか入れることができないので、致し方なく目次下をテーマエディターから設定していきました。
初心者の方にとっては少し難易度が高めな内容だったかもしれませんが、一度設定すれば全記事に自動反映してくれるのは嬉しいところ。
ぜひ、今回のやり方をマスターして、サイトの収益性アップに役立ててくださいね!
コメント