特定の記事でAdSenseを非表示にする機能を自作したい!

WordPressテーマの中には、「特定の記事でAdSenseを非表示にする機能」が最初から実装されているものがたくさんあります(僕が利用している「Emanon Pro」も同様)。

しかし、もちろんそんな機能はついていないよ!というテーマもありますし、機能はついていても1つの広告しか登録できないよ!というテーマもあり、痒いところに手がとどかないことってありますよね。

そんな人は、頑張って機能そのものを自作してみませんか?

今回は、カスタムフィールドの値を利用して、「特定の記事でAdSenseを非表示にする機能」を自作する方法と、当ブログで利用中のPHPコードをご紹介させていただきます。

実装環境

今回の記事を書いた時点での当ブログの環境は以下の通り。

  • サーバー:エックスサーバー
  • WordPress:4.7.3
  • Emanon Pro:1.2.9(子テーマを利用)

 

この記事の対象となる方

まず大前提として、この記事は以下のような方に向けて書いています。

  • チェックボックスにチェックを入れればAdSenseが非表示になる機能が欲しい
  • 表示する場所に加えてパソコンとスマホで別々の広告を表示させたい
  • WordPressのテーマファイル(php)のカスタマイズ経験が有る(推奨)

「利用しているテーマ」や「広告を表示したい場所」によって、AdSenseを表示させる方法(テーマファイルの修正方法)が変わるため、今回のカスタマイズはちょっと難易度が高いかもしれません。

記事の通りにコピペしながら読み進めればきっと上手くいくので、落ち着いて作業してください。

※カスタマイズする前に、それぞれのテーマファイルを必ずバックアップしてください。

 

Sponsored link

基本的な流れとカスタマイズのポイント

今回のカスタマイズの基本的な流れは以下の通り。

  1. 「AdSenseを非表示にするチェックボックス」を作成する
    WordPressの機能の1つである「カスタムフィールド」と使って、「チェックが入っている記事はAdSenseを表示しない」というチェックボックスを作成します。
  2. 自分のブログに実装したいAdSense表示のためのカスタマイズを探す
    「1つ目の見出しの前」「記事下」「サイドメニュー」など、自分のブログにAdSenseを表示させるためのカスタマイズ方法を探します。
  3. カスタムフィールドの値に合わせて表示を分岐させる
    カスタムフィールドにチェックが入っているかどうかで、表示する内容を変更するようにカスタマイズ。

 

Sponsored link

『Advanced Custom Fields』を利用して記事作成画面にチェックボックスを作成する

WordPressのには「カスタムフィールド」という機能があり、記事作成画面で表示有無を選ぶことができます。

ただしデフォルトの機能では、↓の図のように、利用しているテーマによってたくさんのフィールド名が出てきて分かりにくい……。

カスタムフィールドがたくさん表示される様子

そこで今回は『Advanced Custom Fields』というWordPressプラグインを利用して、記事作成画面に「AdSenseを非表示にさせるためのチェックボックス」を作りましょう

『Advanced Custom Fields』をインストールすると、WordPressのメニューに「カスタムフィールド」という項目が増えるので選択

WordPressの管理画面で「カスタムフィールド」を選択

「新規追加」を選択

「新規追加」を選択

分かりやすい名前を付けてから「フィードを追加」を選択

「フィールドを追加」を選択

必須項目である以下の3つ+αを入力して「公開」

  • フィードラベル:記事作成画面で表示されるタイトル
  • フィード名  :カスタムフィールドの名前
  • フィードタイプ:「真/偽」を選択(チェックボックスが表示される)
  • メッセージ  :機能が分かりやすくなるようにコメントを記入(必須ではない)

必要事項を記入して「公開」

記事作成画面にチェックボックスが出現!

WordPressの記事作成画面にチェックボックスが表示された

 

カスタムフィールドの値に合わせた条件分岐

利用中のWordPressテーマによって、細かいカスタマイズ方法は変わりますが、今回は記事下にAdSenseを表示する場合の「テーマファイルに直書きする方法」と、見出しの直前にAdSenseを表示する場合の「function.phpに追記する方法」をご紹介します。

ちなみにどちらもパソコンとスマホで別々の広告が表示される条件分岐に加えて、カスタムフィールドの値に合わせた条件分岐を設定しています。

 

テーマファイルに直書きする方法

まずは「記事下に表示したい!」といったテーマファイルに直書きする場合のコードをご紹介します。

get_field() の部分は「no-adsense」というカスタムフィールドの値が偽(チェックが付いていない状態)なら、以下のコードを出力してね、という意味です。

ちなみに、「Emanon Pro」にはAdSenseを表示するためのCSSのクラス名が設定されているので、当ブログの場合は最終的に以下のようなコードにしています。

 

function.phpに追記する方法

一方、記事の内部(例えば2個めの見出しの直前)にAdSenseを表示したい人は、function.phpをカスタマイズする方法を採用している人もいますよね。

パソコンとスマホで表示する広告を変更したい場合は、以下のサイトの記事が参考になります。

こんにちは、とみーです。こちらの寝ログさんの記事を参考に、更にスマホ or PC&タブレットで広告の表示を分け&

このfunction.phpのカスタマイズと、上記のカスタムフィールドの値による条件分岐を合わせたものが↓。

(ただし、記事下にすでに1つAdSenseを入れていること、1つめの見出しの直前は「目次」を表示させていることから、2つめと3つめの見出しの直前にAdSenseが入るようにしてます)

ざっくり言うと、「no-adsenseの値が偽(チェックが入っていない)」の「single(投稿)」で、閲覧デバイスが「mobileでない」とき、記事中の2個めと3個めのh2タグの直前にパソコン用のAdSenseのコードを出力してね、「mobile」のときはスマホ用のAdSenseコードを出力してね、という流れで記載しています。

 

特定の記事のAdSense非表示機能を自作する方法まとめ

今回の記事が必要なのは、ブロガーさんよりアフィリエイターさんかもしれませんが、「カスタムフィールドの値で条件分岐させる方法」という観点から考えると、記事ごとにおすすめの記事やCTAを変更するなど、応用範囲の広いカスタマイズになるかと思います。

ちなみに、AdSenseの禁止コンテンツは時々変更されることがあるので、定期的に確認されることをおすすめします。

禁止コンテンツ – AdSense ヘルプ

また、今回の記事のように、僕が「Emanon Pro」に追加したカスタマイズは、下記のカテゴリに全てまとめていますので、合わせてご覧くださいませ。

参考Emanon Pro カスタマイズ | こまろくNOTE

以上、TSUNJI(@tsunji1983)でした。

 

Sponsored link