【SWELLの広告設定】PC・SPで別広告を表示＆見出し毎に広告挿入の方法

2022 4/28

2022年4月28日

ちょっと小技のきいた広告の表示方法を紹介します。全然意味合いの違う2パターン。

どちらもなかなか使い勝手が良いので、良かったら試してください。

目次前（または後）にPC・スマホそれぞれ別の広告を入れる
※SWELLユーザー向け
任意の見出しタグ前に広告を差し込む
※WordPressユーザー向け

＼高速・高機能なイチ押しテーマ／

SWELL公式サイト

記事に書いた通りに私は使っていますが、参考にしてくださる場合は自己責任でお願いします。

記事の内容（もくじ）

表示速度もお洒落度もピカ一。頻繁なアップデートで機能満載だけどすごく使いやすい【SWELL】はこちら！

SWELLの広告設置場所

SWELLで用意されている広告枠

SWELL設定（上部メニューまたは左サイドバー） → 広告コード（タブ）

記事内広告
任意の場所にショートコードで呼び出せる
目次広告（目次の前か後に設置）
前後の位置指定は…
外観 → カスタマイズ → 投稿・固定ページ → 目次
自動広告
Google Ads自動広告コード用
インフィード広告
アーカイブページのコンテンツ間に差し込まれる広告

インフィード広告の間隔
★サンプル　SWELL一覧ページ（間隔 3）

SWELLのウィジェット利用

基本的にはどのウィジェットにも広告を表示させることができます。

下記のどちらかを使います。

SWELL [広告コード]
PCのみ、SPのみを選べる
カスタムHTML
広告タグ、ブログパーツ（独自の広告を作るのに便利）

目的の位置に上記どちらかのウィジェットを置き、広告コードまたは広告タグ、ブログパーツにセット済みの呼び出しコードをコピペする。

ウィジェットの使い方

ウィジェットをクリックし、プルダウンメニューから位置を選択
ウィジェットを目的の位置にドラッグ&ドロップ

※このやり方はWordPressコアのやり方です

目次前（後）に広告をいれる

テーマSWELL独特の機能を使っていますので、SWELL限定の記事です。

＼高速・高機能なイチ押しテーマ／

SWELL公式サイト

Googleアドセンス、アフィリエイトコード、物販コードなんでも大丈夫です。

PC広告横並び2つ、スマホ1つ

「デバイス制限」のコードを使って広告を制御しています。

2カラムを応用し、PCは横に2つ並べます（必然的レクタングル）。

スマホは1つだけ。

PCの広告コードを1つスマホに流用してもいいですが、Googleアドセンスならそれぞれ別のコードを取得すると、成果などがわかりやすいです。

全然成果の上がらない私が言うのもナンだけど…

SWELL設定 → 広告コード → 目次広告

<div class="pc_only">
<div class="wp-block-columns">
<div class="wp-block-column">
【PC用・左側の広告】
</div>
<div class="wp-block-column">
【PC用・右側の広告】
</div>
</div>
</div>
<div class="sp_only">
【スマホ用広告】
</div>

カスタマイズ → 追加CSS（最下段）

.wp-block-column {
   float: left;
   width:50%;
	padding:0 10px 20px;
}

※paddingは自分の好みで変更してくださいね。

PC・スマホそれぞれ違う広告を1つ

広告を1つ入れるだけなら、広告コード欄にコードを貼りつけるだけですが、収益がPCからかスマホからのモノかを把握するには違うコードを利用するのが簡単です。

Googleアドセンスなら、PCやSPなどの文言を広告のタイトルに入れておくと便利です。

アドセンス管理画面の「広告ユニット」欄で一目で確認できます。

SWELL設定 → 広告コード → 目次広告

<div class="pc_only">
【PC用広告】
</div>
<div class="sp_only">
【スマホ用広告】
</div>

【PC用広告】【スマホ用広告】それぞれに広告コードを入れる。

ブログパーツを利用する

簡単なコードですが、ちょっと抵抗があると思う場合は、ブログパーツを利用しましょう。

デバイス制限で見たままを反映できます。

ブログパーツ → 新規追加

カスタムHTMLを使い2つ広告を作る
横並び2つの広告は2カラム内にカスタムHTML
それぞれデバイスを指定
ブロックメニュー → デバイス制限

「SPサイズ」を指定した方は薄いグレーになり、両者の違いがはっきりわかるようになっています。SWELLの細やかさ（謝）

ブログパーツの「呼び出しコード」をコピー
SWELL設定 → 広告コード → 目次広告欄にペースト

ちなみに、広告を目次前か後かはカスタマイズで指定できます。

カスタマイズ → 投稿・固定ページ → 目次 → 目次広告の表示設定

＼高速・高機能なイチ押しテーマ／

SWELL公式サイト

任意の見出し前に広告を入れる

任意と言っても、その都度という意味ではないです。

例えば…

3つ目のh2見出し前に広告をはさむとか、4つ目の前にはさむとか、その場所を任意に決められるということです。

子テーマ内のfunctions.phpに記述しますので、子テーマを使っている必要があります。

「2番目のH2見出し手前に広告を挿入」するコードです。

【広告コード】の部分にコードを貼ってください。

Googleアドセンス、アフィリエイトコード、物販コードなんでも大丈夫でした。

function add_ad_before_h2_for_3times($the_content) {
//広告（AdSense）タグを記入
$ad = <<< EOF
【広告コード】
EOF;

  if ( is_single() ) {//投稿ページ
    $h2 = '/^<h2.*?>.+?<\/h2>$/im';//H2見出しのパターン
    if ( preg_match_all( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      if ( $h2s[0] ) {//チェックは不要と思うけど一応
        if ( $h2s[0][1] ) {//2番目のH2見出し手前に広告を挿入
          $the_content  = str_replace($h2s[0][1], $ad.$h2s[0][1], $the_content);
        }
      }
    }
  }
  return $the_content;
}
add_filter('the_content','add_ad_before_h2_for_3times');

FTPの場合

私はビビりなので、FTPを使います。

バックアップが簡単だし、元の状態に戻すのも簡単。どんな小さな編集でも日付フォルダを作り、その中にバックアップをとります。

FTPの場合は、子テーマもfunctions.phpに上記（＋広告コード）を追加し、サーバー上のfunctions.phpを上書き

管理画面から追加

外観 → テーマエディター → 「注意！」→ SWELL CHILD: テーマのための関数 (functions.php)を選択 → コード追加 → ファイルを更新

※必ずバックアップをとってください。1文字の違いでもアウト（画面真っ白）になるかも？

このやり方は、わいひらさんの「寝ログ」を元にしています。2015年の記事ですが、問題なく動作します。

寝ログ | 寝ながら出来るコトや使…

本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法 Google AdSense広告を投稿本文中に全て表示させるWordpressカスタマイズ方法です。パフォーマンスとユーザビリティーの兼ね合いに注意する必要があります。

Cocoon関連の余談

わいひらさんにはCocoonテーマでもWordPressの知恵でも本当にお世話になりっぱなし。今、とても大変な状況のようなので応援しなくちゃ！と思っています。受けの恩の1000分の1くらいは…

Cocoon

Cocoonの寄付特典機能の追加について新しくCocoon寄付特典を追加した経緯や、特典内容などを説明させていただきます。これまでの経緯Cocoonは、2014年7月に公開したSimplicityの後継テーマとして、2018年3月に…

私のチリのような応援の気持ちとは違って、我がSWELLの了さんはこんなすごい手を打ってきました。

スゴイ！

SWELL

WordPressテーマ「Cocoon」様と業務提携の契約を結びました | WordPressテーマ SWELL タイトルの通りとなりますが、この度、無料WordPressテーマ「Cocoon」様（以下、「Cocoon」）とWordPressテーマ「SWELL」は、業務提携及び資本提供の契約を結ぶこととなり…

＼高速・高機能なイチ押しテーマ／

SWELL公式サイト