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

ちょっと小技のきいた広告の表示方法を紹介します。全然意味合いの違う2パターン。
どちらもなかなか使い勝手が良いので、良かったら試してください。
- 目次前(または後)にPC・スマホそれぞれ別の広告を入れる
※SWELLユーザー向け - 任意の見出しタグ前に広告を差し込む
※WordPressユーザー向け
\高速・高機能なイチ押しテーマ/
記事の内容(もくじ)
SWELLの広告設置場所
記事に書いた通りに私は使っていますが、参考にしてくださる場合は自己責任でお願いします。
SWELLで用意されている広告枠
- 記事内広告
任意の場所にショートコードで呼び出せる - 目次広告(目次の前か後に設置)
前後の位置指定は…
外観 → カスタマイズ → 投稿・固定ページ → 目次 - 自動広告
Google Ads自動広告コード用 - インフィード広告
アーカイブページのコンテンツ間に差し込まれる広告
インフィード広告の間隔
★サンプル SWELL一覧ページ(間隔 3)
SWELLのウィジェット利用
基本的にはどのウィジェットにも広告を表示させることができます。
下記のどちらかを使います。
- SWELL [広告コード]
PCのみ、SPのみを選べる - カスタムHTML
広告タグ、ブログパーツ(独自の広告を作るのに便利)
目的の位置に上記どちらかのウィジェットを置き、広告コードまたは広告タグ、ブログパーツにセット済みの呼び出しコードをコピペする。
ウィジェットの使い方
- ウィジェットをクリックし、プルダウンメニューから位置を選択
- ウィジェットを目的の位置にドラッグ&ドロップ
※このやり方はWordPressコアのやり方です
目次前(後)に広告をいれる
テーマSWELL独特の機能を使っていますので、SWELL限定の記事です。
\高速・高機能なイチ押しテーマ/
Googleアドセンス、アフィリエイトコード、物販コードなんでも大丈夫です。
PC広告横並び2つ、スマホ1つ
「デバイス制限」のコードを使って広告を制御しています。
2カラムを応用し、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>
.wp-block-column {
float: left;
width:50%;
padding:0 10px 20px;
}
※paddingは自分の好みで変更してくださいね。
PC・スマホそれぞれ違う広告を1つ
広告を1つ入れるだけなら、広告コード欄にコードを貼りつけるだけですが、収益がPCからかスマホからのモノかを把握するには違うコードを利用するのが簡単です。
Googleアドセンスなら、PCやSPなどの文言を広告のタイトルに入れておくと便利です。
アドセンス管理画面の「広告ユニット」欄で一目で確認できます。
<div class="pc_only">
【PC用広告】
</div>
<div class="sp_only">
【スマホ用広告】
</div>
【PC用広告】【スマホ用広告】それぞれに広告コードを入れる。
ブログパーツを利用する
簡単なコードですが、ちょっと抵抗があると思う場合は、ブログパーツを利用しましょう。
デバイス制限で見たままを反映できます。
- カスタムHTMLを使い2つ広告を作る
横並び2つの広告は2カラム内にカスタムHTML - それぞれデバイスを指定
ブロックメニュー → デバイス制限
「SPサイズ」を指定した方は薄いグレーになり、両者の違いがはっきりわかるようになっています。SWELLの細やかさ(謝)
- ブログパーツの「呼び出しコード」をコピー
- SWELL設定 → 広告コード → 目次広告欄にペースト
ちなみに、広告を目次前か後かはカスタマイズで指定できます。
\高速・高機能なイチ押しテーマ/
任意の見出し前に広告を入れる
任意と言っても、その都度という意味ではないです。
例えば…
3つ目のh2見出し前に広告をはさむとか、4つ目の前にはさむとか、その場所を任意に決められるということです。
「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を使います。
バックアップが簡単だし、元の状態に戻すのも簡単。どんな小さな編集でも日付フォルダを作り、その中にバックアップをとります。
管理画面から追加
※必ずバックアップをとってください。1文字の違いでもアウト(画面真っ白)になるかも?
このやり方は、わいひらさんの「寝ログ」を元にしています。2015年の記事ですが、問題なく動作します。
寝ログ


本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法
1年ほど前、最初のH2見出し手前に広告を表示する方法を考えてみました。 この方法は、現在自分のテーマでも利用し…
Cocoon関連の余談
わいひらさんにはCocoonテーマでもWordPressの知恵でも本当にお世話になりっぱなし。今、とても大変な状況のようなので応援しなくちゃ!と思っています。受けの恩の1000分の1くらいは…
Cocoon


Cocoonの寄付特典機能の追加について
エックスサーバー株式会社へのCocoon事業譲渡より、2022年9月7日から寄付特典機能はすべて開放され全機能を無料で利用出来るようになりました。新しくCocoon寄付特典を追加...
私のチリのような応援の気持ちとは違って、我がSWELLの了さんはこんなすごい手を打ってきました。
スゴイ!
SWELL


WordPressテーマ「Cocoon」様と業務提携の契約を結びました | WordPressテーマ SWELL
タイトルの通りとなりますが、この度、無料WordPressテーマ「Cocoon」様(以下、「Cocoon」)とWordPressテーマ「SWELL」は、業務提携及び資本提供の契約を結ぶこととなり...
\高速・高機能なイチ押しテーマ/
広告関連の余談
WordPressだけでなく、広告(アフィリエイト)掲載も初心者という場合は、とりあえず楽天でしょう。
GoogleアドセンスやAmazonアソシエイトは審査があるので、ある程度ブログ(サイト)が成長していないとパスしません。
それはオイオイということで、でも…
ブログから少しでも収益が上がると、すごくモチベーションアップに繋がります。
長く続けるには、励みになる何かがあるほうが断然ラクです。
まず、楽天の広告コードを貼り、次はA8に登録しましょう。
初心者にとって、A8は成果というよりセルフバック!
A8は登録無料ですし、審査もありません。案件も国内最多と思います。
広告の貼り方もとてもわかりやすいです。
でも、初心者にとって有難いのは…
セルフバック!
広告の商品を自分が利用して、成果報酬がもらえるというシステムです。
A8登録当初、「記事を書くために利用してもよい」という程度に理解していたんですが、記事には関係ないそうです。
バンバン使ってください!という感じ。
「初心者でも稼げる 今すぐ50,000円」とA8サイト内で誘っています。
\セルフバックが嬉しい~/
節操なく利用する気にはなりませんが、半年くらい前、カード番号の印字されていないクレジットカードが欲しくて(加齢でそそっかしさが半端ない)、三井住友カードをセルフバックしたら、10,800円の報酬がもらえました。
三井住友カードの入会特典ポイントももらえて、ビックリです。
アフィリエイトそのものは難しい(サイドバーにバナーを貼ったくらいでは反応無し)ですが、こんなシステムもあるので、参加する価値はあると思います。