過去最高のキャンペーン内容
契約するなら今だ!エックスサーバー

目次前広告をPC・SP別表示(SWELL)&見出し毎に広告を入れる方法

広告を入れる方法
広告を入れる方法

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

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

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

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

記事の内容(もくじ)

目次前(後)に広告をいれる

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

「デバイス制限」を応用して広告を制御しています。

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

【…広告】と書かれている部分に広告コードを入れ、所定の枠内に貼り付けてください。

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

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

スマホは1つだけ。

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

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

<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>

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

デバイス制限で振り分けます。

これだと【PC用広告】は横長が落ち着きます。Googleアドセンスなら(たいてい)勝手にそうしてくれますが、他の広告なら横長を選ぶと良いかも?(関係ないかも?)しれません。

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

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

広告コードを入れる場所

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年の記事ですが、問題なく動作します。

Cocoon関連の余談

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

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

スゴイ!

広告関連の余談

目次前(または後)に設置する広告のヒントを書いた後にナンですが、広告の位置をかえてみました。

(ABテストや検証など無視して)気まぐれで、目次前に入れていたGoogleアドセンスを記事タイトル下に移動。

PCではタイトル下に2つ並ぶと鬱陶しすぎると思い、1つだけにしました。

と、推定収益が1.6倍

広告を移動して(わずか)5日後の結果ないので、広告の位置変更のお蔭とは言い切れませんが、アドセンスの折れ線グラフが何だか「いいよ~」と言いてくれている気がします。

あくまでも私の運用サイトの結果ですが…。

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容(もくじ)
閉じる