Moneytizerバナーをスマホで非表示する方法【WordPress】
Moneytizerの広告、収益性は良いのですが...
PC表示用にサイドバーにバナーコードを設置しても、スマホだと本文中に文脈をブッタ斬る位置にランダム挿入される
「FOOTER or SLIDE-IN」フォーマットのバナーが、スマホだと理不尽にデカい、もしくはバナー画像サイズがスマホ幅に合っていない場合がある
という仕様、つまり
スマホで広告が超・邪魔という仕様が我慢できませんでした...。
というわけで、
- PCでアクセスした時のみMoneytizerのバナー広告が表示される
- スマホでアクセスした時には表示されない
- 非表示にしたいバナーは自分で指定できる
＝両方で表示したいバナーは今まで通り表示できる
というカスタマイズをして運用しています(逆にPCだけ非表示も可)。
JavaScriptというプログラミング言語を使ってWordPressテーマへコードを追加していきますが、
プログラミングは全く分からん...
というかたでも「コピペだけ」で作業完結できるように書いていきます。
そう複雑なことはしないので、5分もあれば完了するかと。
- 当然、広告収益は減少します。収益よりも読者の利便性向上を優先する方向け
- WordPressソースコードの編集作業は細心の注意を払って行なうべし
ー もくじ ー
Moneytizerバナーをスマホで非表示/PCのみ表示するカスタマイズ
▼作業の前提
PC・スマホの両方でMoneytizerのバナーが正常に表示されていること。
ここから片方のみ表示されないようにしていきます。
手順は以下5ステップ。
- WordPress管理画面で広告タグを修正
- WordPress管理画面→テーマエディターでfooter.phpを開く
- コードをコピペ
- 1ヶ所だけ書き換え → 保存
- 広告が表示されなくなっているか確認
1. WordPress管理画面で広告タグを修正
WordPress管理画面へログインしたら、Moneytizerの広告タグを貼り付けているページへ移動してください。
使っているWordPressテーマ・プラグインによって場所は異なります。
例として、ぼくの場合は以下のように 外観 > ウィジェットでサイドバーに表示されるよう貼り付けています。
ページへ移動して対象の広告コードを見つけたら、まずメモ帳などにコードをコピペして退避おきます(後で使うため)。
次に、以下のように、
<div id="xxxxxx-x"></div>のみを残して中身の<script>~</script>を削除・保存。
▲この記述だけ残す
↑を保存した時点で、いったん広告は表示されなくなります。
(キャッシュが残っている場合はしばらく表示され続ける場合あり)
▼WordPress管理画面から 外観 > テーマファイルエディターをクリック。
▼右側カラムから、「テーマフッター (footer.php)」を探してクリック。
3. コードをコピペ
スマホで非表示にするか、PCで非表示にするか、どちらかコードを全コピーしてください。右上"Copy"ボタンでコピーできます。
▼スマホで非表示(PCのみ表示)する場合
JavaScript<script>
const isSmartphone = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isSmartphone) {
const adContainers = [
"★★★★★",
];
const siteId = adContainers[0].split("-")[0];
const types = adContainers.map((x) => x.split("-")[1]);
for (let i = 0; i < adContainers.length; i++) {
const type = types[i];
const adContainer = document.getElementById(adContainers[i]);
const adScript = document.createElement("script");
adScript.src = `//ads.themoneytizer.com/s/gen.js?type=${type}`;
adContainer.appendChild(adScript);
const requestFormScript = document.createElement("script");
requestFormScript.src = `//ads.themoneytizer.com/s/requestform.js?siteId=${siteId}&formatId=${type}`;
adContainer.appendChild(requestFormScript);
}
}
</script>▼PCで非表示(スマホのみ表示)する場合
JavaScript<script>
const isSmartphone = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isSmartphone) {
const adContainers = [
"★★★★★",
];
const siteId = adContainers[0].split("-")[0];
const types = adContainers.map((x) => x.split("-")[1]);
for (let i = 0; i < adContainers.length; i++) {
const type = types[i];
const adContainer = document.getElementById(adContainers[i]);
const adScript = document.createElement("script");
adScript.src = `//ads.themoneytizer.com/s/gen.js?type=${type}`;
adContainer.appendChild(adScript);
const requestFormScript = document.createElement("script");
requestFormScript.src = `//ads.themoneytizer.com/s/requestform.js?siteId=${siteId}&formatId=${type}`;
adContainer.appendChild(requestFormScript);
}
}
</script>▼コピーしたら、開いているテーマフッター (footer.php)コード最下部にある</body>の直上にペースト。
4. 1ヶ所だけ書き換え → 保存【作業完了】
これで最後。
ペーストしたコードに含まれる★★★★★部分を、アカウント固有のIDに置き代えていきます。
以下数字は例なので、手順1で退避しておいた自分の広告コードを参照しながら、
★★★★★ → <div id="123456-7">の<div id="123456-7">の数字部分に書き換えます。
編集時、ダブルクォーテーション"を消さないように要注意！
▲修正した後の完成コード
▼複数の広告コードがある場合
以下のように、行を増やして記述します。広告1つにつき1行。
行を増やした後、"123456-31",←このカンマを必ず付けること！
★部分以外に余計な編集を加えると不具合が出てしまいます。
意図しないキーボード入力/削除/改行が紛れ込まないようによく注意してください
▼ ★部分を漏れなく置換したら、
「ファイルを更新」をクリック→"ファイルの編集に成功"と表示されれば作業完了です。
保存したら"エラー"になった場合
「ファイルを更新」をクリックしたら以下のように「エラーが発生、保存できず」と表示されることがあります。
この場合、編集のやり方を何かしら誤っています。
無理に保存しようとせず、WordPress管理画面上「ダッシュボード」など別のページへ遷移してください。
保存していないので「このサイトを離れますか？」と聞かれますが、離れてOKです。
これで編集がなかったことになる(作業をする前の状態に戻る)ので、再び注意深く作業をしてみてください。
広告が表示されなくなっているか確認
WordPressのキャッシュ系プラグインを使っている場合、編集作業が完了後にまずキャッシュクリア(パージ)を行ってください。
追加したコードが反映されることを確実にするためです。
たとえば、"Mixhost"や"カラフルボックス"といったレンタルサーバーを使っている場合は「LiteSpeed Cache」というプラグインを使っている場合が多いはず。
スマホ非表示にした方は、スマホで閲覧してMoneytizerの広告が表示されないこと。
PC非表示にした方は、PCで閲覧してMoneytizerの広告が表示されないこと。
これが確認できれば成功です。
