本サイトにはプロモーションが含まれています

[WordPress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

Wordpressの運営覚書き

マイクロアド広告などJavaScriptでのコードをポンっと渡されたWEB初心者の方が戸惑ってご依頼くださるという例を数件体験したので、ある程度簡単に解決できる方法をシェアします。

PHPファイルをいじる場合は必ずバックアップを取ってください。(免責!)

目次

マイクロアドの広告タグ設置にお困りの初心者の方のために覚え書き

WEB制作自体に関わっているわけではないワードプレスなどブログユーザーはCSSやJavaScript まで勉強することは少ないです。(記事を書くだけなら不要なことです)

しかし、広告会社さんの中には「サイトを運営している人はサイト制作も出来る」と思っておられる担当者がいるようで、コードだけポンっと渡してくるらしいのです。

で、「この記事を参考にしてください」と添付してあるURLに書かれた内容は、Wordpress向けではないという……。

そもそもワードプレスでは、そんな複雑なことをしなくてもちゃんとレスポンシブになるはずですので簡単に書きます。

無理そうでしたらご依頼ください。

広告コードの内容

以下のような内容のコードを受け取るようですが……

弊社ではJavaScriptのタグになっておりまして、サイトのHTMLのbody部にご設置いただくような形です。

弊社のタグはPC/SPでタグが分かれており、レスポンシブ対応はユーザーエージェントの情報分岐のご対応が必要になります。

※点線の中のタグをご設置くださいませ。

(SP)
枠ID:12345
枠名:広告コード_SP_300x250
-------------------------------------------------
<script type="text/javascript">
var microadCompass = microadCompass || {};
microadCompass.queue = microadCompass.queue || [];
</script>
<script type="text/javascript" charset="UTF-8" src="//j.microad.net/js/compass.js" onload="new microadCompass.AdInitializer().initialize();" async></script>
<div id="****************" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "******************"
		});
	</script>
</div>
-------------------------------------------------
(PC)
枠ID:12345
枠名:広告コード_PC_300x250
-------------------------------------------------
<script type="text/javascript">
var microadCompass = microadCompass || {};
microadCompass.queue = microadCompass.queue || [];
</script>
<script type="text/javascript" charset="UTF-8" src="//j.microad.net/js/compass.js" onload="new microadCompass.AdInitializer().initialize();" async></script>
<div id="*****************" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "******************"
		});
	</script>
</div>
-------------------------------------------------

基本的には、ほとんどのテーマではJavascriptで表示させた画像もレスポンシブになるはずです。

少なくともCocoon あるいはSWELL などの有料テーマではレスポンシブになります。

WordPressではほとんどのテーマでPCとスマホ用のコード分けは必要ない

つまり、レスポンシブのためだけに悩むのでしたら、PC用コードを貼っておけばスマホでも適応するはずです。

例えば、以下はテストとして同じ画像をscript とimgタグで貼った場合です。テーマはLightning です。

上がscriptコードです。

[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

プレビューです。上がscriptコードで貼った画像です。

左がPC表示、右がスマホ表示です。どちらのコードでも同じ率で縮小されますよね。

[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

つまり「PC用のコードとスマホ用のコード」、と言って送って来られても関係なく、Wordpressの場合はPC用コードを設置すればレスポンシブになるということです。

コードはどこに設置するのか

広告タグはアドセンスなどと同じで、サイトのhead 部分に設置すれば問題なく表示されます。

  • Cocoon の場合は 「Cocoon設定」→「アクセス解析・認証」の「ヘッド用コード」欄
  • SWELL やTHE THOR などの場合は「外観」→「カスタマイズ」中の→「高度な設定」→「headタグ」欄
  • テーマの機能でheadに書き込むことができない場合は、head.php を探して入力する必要があります。

好きな場所に広告を設置したい場合

headにコードを全て挿入するとサイトのヘッダー部分に広告が入る可能性が大きいので、任意の場所に広告を入れたい場合は広告の以下の部分のみをhead内に設置します。

以下のコードは一例ですので、ご自身が貰っているコードの該当部分を挿入してください。

[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け
<script type="text/javascript">
var microadCompass = microadCompass || {};
microadCompass.queue = microadCompass.queue || [];
</script>
<script type="text/javascript" charset="UTF-8" src="//j.microad.net/js/compass.js" onload="new microadCompass.AdInitializer().initialize();" async></script>

これを< /head> の上に挿入してください。

そして、IDが入ったコードの部分を任意の場所に挿入します。

<div id="****************" >
	<script type="text/javascript">
		microadCompass.queue.push({
			"spot": "******************"
		});
	</script>
</div>

例えば single.php のHタグ下に設置すれば、全記事のタイトル下に入りますし、side.php に設置すればサイドバーに入るでしょう。

また、カスタムhtmlブロックにコピペすればご自身で記事の好きな場所に広告を入れることができます。

レスポンシブにならないテーマだったら……

テストサイトで試したところでは、TWENTYシリーズのテーマはjavascriptで埋め込んだ画像はレスポンシブにならなそう。

[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

このような場合も、Wordpressだったらわざわざfunction.php にあのコードを入れて、ここで分岐して……というような面倒なことはしなくても良いと当方は考えます。

1. 広告会社から貰った「PC用コード」と「スマホ用コード」を上下に別々に並べて「カスタムHTMLブロック」で貼ります。

[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

2.「PC用コード」と「SP用コード」それぞれに”class”を付けます

PC用コードを記入したカスタムHTLブロックの一番上に

<div class="pc-add">

と記入。

一番下を

</div>

で閉める。

スマホ用コードを記入したカスタムHTLブロックの一番上に

<div class="sp-add">

と記入。

一番下を

</div>

で閉める。
[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

この段階では、上にPC用の幅広いバナーが、下にスマホ用の幅狭いバナーが、ならんで入ってしまっていると思います。

[Wordpress] MicroAd Compass などJavaScript 広告のユーザーエージェント情報分岐方法・初心者向け

3. CSSで分岐する

「外観」→「カスタマイズ」→「追加CSS」を開きます。

以下のコードをコピペして保存します。

@media (max-width: 500px) {
.pc-add {
display:none;
     }
  }

@media (min-width: 499px) {
.sp-add {
display:none;
     }
  }

“}”ひとつ、”.”ひとつ抜けても効きませんので慎重にコピーしてください。

先ほどPC スマホ 各コードの上に足したclassで分けています。

幅500px以下のデバイスの場合はPC用コードは非表示。
幅499px以上のデバイスの場合はSP用コードは非表示。

というような意味のことを入力しています。

上手く行かなかったらご依頼ください。

上手く行かなかったらご依頼ください

WEBサイト制作の一木堂
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次