広告運用

【SWELL】タイトル上に広告を設置する方法!PCとスマホで分岐配信するには?

SWELLでタイトル上に広告を設置する方法

ブロックエディタ対応の優良テーマ『SWELL』。

私自身とても気に入っていて愛用しているのですが、タイトル上に広告を入れる機能が標準装備されていないのです。(2022年5月現在)

そのため、ここに広告を入れるためにはテーマエディターを直接編集する必要があります。

今回は、そんなタイトル上の広告設置方法についてです。

また、PC表示とスマホ表示で異なる広告を表示させる「分岐配信」の設定方法についても併せてご紹介します。

初心者の方にとっては少し難易度が高めな内容になりますが、この記事を見ながら一つ一つ進めていってくださいね。

SWELLのタイトル上とは?

今回広告を設置するのは、個別記事のタイトル上の部分です。

SWELLでタイトル上に広告を設置する方法6

 

他のテーマでは「ウィジェット」から設定できるものもありますが、2022年5月時点SWELLでは設置することができません。

この点は今後の改良に期待しつつ、以下ではテーマエディターを直接編集して広告を設置する方法をご紹介いたします。

テーマエディターを直接編集するリスク

リスク

実際のやり方をご説明する前に、一つ注意点があります。

それは、

テーマエディターの編集は、一つ間違えるとブログが真っ白になる

リスクがあること。

ユミ
ユミ
私も何度かやらかしました・・・

 

特に、一日数千~数万PVを集めるような大きなブログの場合、そのような事態になれば、復旧までの機会損失が甚大なものになってしまいます。

また、復旧が遅れてしまうと、最悪の場合SEO(検索順位)への影響も懸念されます。

そのため、作業は慎重に行うようにしていきましょう。

初心者の方は、この記事に書いてある内容”以外”のことは、決して行わないようにしてください。

可能でしたら、事前にバックアップをとっておくか、もしくはテスト環境で予め動作チェックをしてから進めていくとより安心でしょう。

 

SWELLでタイトル上に広告を設置する方法

本記事での設定方法は、2022年5月現在のものです。

今後テーマが更新された場合、テーマファイルの場所や広告タグの挿入箇所が変更になる可能性があります。

前置きが長くなりましたが、ここからは実際のやり方を説明していきます。

「外観」▶「テーマエディター」

SWELLでタイトル上に広告を設置する

 

SWELLがテーマ選択されていることを確認し、「parts」▶「single」▶「post_head.php」をクリック。

SWELLでタイトル上に広告を設置する方法2

 

広告を入れる箇所は、以下の画像のところになります。

SWELLでタイトル上に広告を設置する方法3

※行数はバージョンによって異なることがあります。前後の記述を確認し↓

$modified : $date;?>

<div class=”p-articleHead c-postTitle”>

この間の部分です。

 

テーマエディターを触る前に、ブラウザの別タブで同じく「post_head.php」を開いておくことを推奨します。

ユミ
ユミ
このようにすることで、万が一更新時にエラーが起きても、別タブの方から上書きすれば元の状態に戻すことができます。

 

広告を入れる箇所を改行し、

SWELLでタイトル上に広告を設置する方法4

 

広告タグを貼り付けましょう。

SWELLでタイトル上に広告を設置する方法5

 

これで広告の設置は完了ですが、このままだとタグのサイズによっては広告が画面左側に寄ってしまいます。

そのため、センタータグを入れるようにしていきましょう。

入れるタグ:<center></center>

SWELLでタイトル上に広告を設置する方法8

 

このようにすると、タイトル上中央にきれいに表示されますが、ただタイトルの文字と広告がピッタリくっついてしまっているのも気になります↓

SWELLでタイトル上に広告を設置する方法9
ユミ
ユミ
このままでも悪くはないけど、ちょっと気持ち悪い…

 

そこで、改行タグを入れて調整しておきましょう。

入れるタグ:<br></br>

SWELLでタイトル上に広告を設置する方法10

 

最後に忘れずに「ファイルを更新」ボタンを押せば・・・

SWELLでタイトル上に広告を設置する方法7

 

このように、きれいな形で記事タイトル上に広告が設置されます!

SWELLタイトル上広告

 

この時点で、万が一「画面が真っ白に!」ということになってしまえば、別タブで開いているテーマファイルを上書きして元に戻しましょう。

ユミ
ユミ
別タブで開いていると、すぐに前の状態に復元できるので安心ですね。

以上で、タイトル上に広告が設置できました!

PCとスマホで別々の広告を分岐配信するには?

ここからは、もう一歩踏み込んでPCとスマホ表示で、異なる広告を設置したい場合のやり方です。

PCで記事を見た場合はタイトル上にAの広告を表示させ、スマホで見た場合は同じ箇所にBの広告を表示させる方法ですね。

このような配信方法は、「分岐配信」と言われています。

やり方はとっても簡単で、分岐配信を指定したコードを使用するだけです!

以下のコードをそのままコピーしてください。

<br><center><?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?></center></br>
ユミ
ユミ
センタータグと改行タグも設定済みです!

 

これをそのまま、先ほどの箇所に貼り付けます。

SWELLでタイトル上に広告を設置する方法11

そして、

  • // スマホで表示させたい内容 の箇所に、スマホ用の広告タグを
  • // PCで表示させたい内容 の箇所に、PC用の広告タグを

 

それぞれ貼り付けます。

 

例えばスマホの場合、「// スマホで表示させたい内容」を丸々削除して、スマホ用のタグに置き換えるイメージです↓

SWELLでタイトル上に広告を設置する方法12

 

同じように、PCにも表示させたい広告タグを設置します。

最後に、忘れずに「ファイルを更新」ボタンを押してきましょう。

ユミ
ユミ
これで、分岐配信の設定は完了です!

 

スマホのみ、PCのみにそれぞれ表示させたい場合は、それぞれ以下のコードを使用されるといいでしょう。

◆スマホのみに広告を表示させる

<br><center><?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php endif; ?></center></br>

 

◆PCのみに広告を表示させる

<br><center><?php if ( !wp_is_mobile() ) : ?>
 // PC で表示させたい内容
<?php endif; ?></br></center>
 

(注)テーマの更新がかかったら設定がリセットされます

ここまで、SWELLでの広告タグの設定方法を解説してきましたが、最後に一つ注意点があります。

それは、

テーマの更新がかかると、上の設定がリセットされてしまう

ということ。

 

上の方法は、直接親テーマを触りにいっているので、テーマそのものに更新がかかると設定内容が反映されない(=初期化されてしまう)のです。

そのため、子テーマ側で設定しておく方法もあります。

  • 親テーマ…テーマの元となる部分(定期的に更新される)
  • 子テーマ…カスタマイズ用のテーマ。親テーマを更新しても子テーマの設定が上書きされる仕様となっているため、カスタマイズした設定は残ります。

 

ブログの外観は、

親テーマ + 子テーマ

で決まります。

親テーマの内容の上に、子テーマが上書きされる仕組みになっているんですね。

だから、子テーマ側で上の設定をしておけば、親の方に更新がかかっても子が上書きされ、設定が保持されます。

※子テーマのダウンロードは、SWELLの公式サイトから可能です。

子テーマのダウンロードはこちら

 

ただ、テーマの更新はそんなに頻繁にあるものでもありません。

なので、子テーマの設定が面倒であれば、テーマが更新されたタイミングで都度広告の設定を行えばOK!

慣れれば5分でできますので、そこまでストレスにはならないかと思いますよ。

もし、この広告設定「以外」にも複数の設定を行っている場合は、子テーマを使えば便利です。

あとがき

今回は、SWELLでタイトル上の広告を設定する方法についてでした。

初心者の方にとっては少しややこしかったかもしれませんが、一つ一つ手順を確認していけばOK!

ただ、テーマエディターの更新はリスクがあることも事実です。

そのため、必ず別タブでも同じ画面を開いておいて、設定がうまくいかなければすぐに元に戻せるようにしておきましょう。

それでも、万が一ブログの表示がおかしくなってしまった場合は、サーバー側から復元することも可能です。

エックスサーバー&wpX Speedそれぞれの復元方法を解説!プラグインやWordPressの更新後、不具合が出てしまったという方も少なくないのではないでしょうか? 不具合の原因が判明していれば、...

 

ただし、復元は「1日前」「一週間前」といった”日単位”で戻すことになるため、直近で更新した記事は消えてしまいます。

ユミ
ユミ
だから、これを使うのは本当に最終手段ですね…

別タブで開いておけばこのような方法を使うことはありませんが、最悪の場合はこのような方法があることも知っておくと安心でしょう。

 

\自分らしい働き方を叶えたいあなたへ/

※コンサルの募集に関しては、不定期にてメルマガ読者さま限定にご案内しております。

ABOUT ME
ユミ
ブログコンサルタント(主にアドセンス)/複数のネット広告を組み合わせて、収益性の高いブログを作るのも得意/月収10~420万円の収入を得るコンサル生さんを輩出中/ブログで収入を得たい初心者の方へ、無料のメールマガジンを配信中