SWELLでタイトル下に広告を表示する方法【カスタマイズ】

URL Copied!

悩んでいる人

SWELLを導入したんですが、タイトル下に広告を表示する方法が分かりません。
アドセンス広告を表示したいので設定の仕方を詳しく教えてください。

そんな疑問にお答えします。

この記事の内容

記事下に表示するおすすめのアドセンス広告とは
SWELLでタイトル下にアドセンス広告を表示する方法

本記事ではSWELLのカスタマイズ方法の１つ『タイトル下に広告を表示する方法』を紹介します。
タイトル下広告は当ブログの中でも一番クリック率がいいところです。

SWELLを導入している方はすぐにでも導入できるので、本記事を参考にして広告を挿入してみてください。
とても簡単で効果も抜群なので非常におすすめです！

それではさっそく確認していきましょう。

タイトル下に表示するのはアドセンス広告一択

タイトル下という場所は、一番最初に表示され必ず目に付く場所です。
その場所に目立つ広告が表示されていれば非常に目立ち非常に効果的です。

しかし、次の場合には非常にマイナス印象になるので注意しましょう。

広告が大きすぎる
サイズがコンテンツ幅にあっておらず不自然
多すぎる広告

また、アドセンスのようなクリック型広告は表示が多すぎるとWebサイトが重くなるので多くても3つが限界と思います。
Googleアドセンスのおすすめ表示場所は下記記事で詳しく解説しているのでぜひご覧ください。

＞＞【鉄板】SWELLのGoogleアドセンスおすすめ貼り付け箇所を解説！

ではさっそく次の項目からタイトル下に広告を表示する方法を解説していきます。

SWELLでタイトル下に広告を表示する方法

～やることリスト～
①：Webサイトのコンテンツ幅確認
②：Googleアドセンスでディスプレイ広告を作成
③：テーマエディタを編集

Webサイトのコンテンツ幅確認

まず、いい感じの広告を表示するためにWebサイトのサイト幅を確認しましょう。

サイト幅の確認方法
『外観』⇒『カスタマイズ』⇒『サイト全体設定』⇒『基本デザイン』⇒『コンテンツ幅の設定』

サイト幅というのはWebサイト全体の幅のことで、コンテンツ幅とは実際の記事が表示される幅のことです。
ここで必要なのはコンテンツ幅なので、ここの数字をメモリましょう。

Googleアドセンスでディスプレイ広告を作成

次にGoogleアドセンスにアクセスします。

ディスプレイ広告を選択
『サマリー』⇒『広告ユニットごと』⇒『ディスプレイ広告』を選択

ディスプレイ広告の設定内容
①名前を入力
②広告サイズ⇒　幅880（先ほど確認したコンテンツ幅）　高さ100

下画像のように設定し、作成ボタンを押します。

下画像では幅を880にしていますが、先ほど確認したご自身のコンテンツ幅に合わせて調整してください

作成ボタンを押すと、下画像のようにアドセンス広告が表示されます。

このコードを後程使うのでコピーしておきます。

テーマエディタを編集

これからテーマエディタを編集していきますが、テーマエディタは変なところを変えてしまうと、サイトのレイアウトが崩れたり、最悪Webサイトが表示されなくなってしまいます。
編集する前に必ずバックアップと子テーマでの編集になっていることを確認してください。

今回テーマエディタを編集するコードはSWELL公式サイトを参考にさせていただきました。

SWELL

記事のタイトルとアイキャッチ画像の間に広告を表示させる方法 | WordPressテーマ SWELL このページでは、「タイトルとアイキャッチ画像の間に広告を表示させる」方法を解説していきます。ただし、SWELLでは「タイトルとアイキャッチ画像の間」にはウィジェット…

コードの準備

まずは下記のようにテーマエディタに張り付けるコードを準備していきます。

アドセンス広告コードの挿入場所
【ここに広告コードをペースト】の個所に先ほどコピーしたアドセンスコードに張り替えてしてください。

/* 
  ~ functions.phpにすでにあるコード ~
*/

//以下のコードを追加
add_action('swell_before_post_thumb', function( $post_id ) {
?>
<div class="widget widget_swell_ad_widget">
   【　ここに広告コードをペースト　】
</div>
<?php
});

アドセンスコードを張り付けて準備ができたら次はテーマエディタを編集していきます。