ウェブコーディング

AdSenseのモバイル向けページ単位の広告をWordPressに設置する方法

AdSenseにモバイル用のページ単位の広告という機能が追加されてしばらく経ちましたが、導入しているブログをあまり見かけないですね。

↓こういうやつです。

screenshot_20161112-092631_adsense%e3%83%9a%e3%83%bc%e3%82%b8%e5%8d%98%e4%bd%8d%e5%ba%83%e5%91%8a%e3%82%92wordpress%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95
screenshot_20161112-092544_adsense%e3%83%9a%e3%83%bc%e3%82%b8%e5%8d%98%e4%bd%8d%e5%ba%83%e5%91%8a%e3%82%92wordpress%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95

理由は色々あるかと思いますが、WordPressでの導入方法がわからないからという理由で諦めている人もいるかと思います。

私自身、最初はよくわかっていない状態だったので、導入を見送っていたのですが、安全に導入する方法を見つけたのでご紹介しておきます。

この方法ではテンプレートファイル(header.phpなど)を直接編集する必要はありませんし、子テーマを使っていればコピペで完了しますので、ぜひ試してみてください。

下準備 ~子テーマの導入~

今回は子テーマの「functions.php」にページ単位広告を読み込ませる設定をコピペするので、先に子テーマを作って準備をしておきます。

  • 子テーマを作ってある
  • 子テーマ内に「functions.php」がある

という方は読み飛ばしてOKです。

子テーマの作り方

子テーマに含まれているファイルは基本的に「style.css」と「function.php」の2つです。

どちらもテキストエディタでファイルを作った後に、WordPressのテーマフォルダへ追加します。

Windowsを使っていると「メモ帳」が標準のテキストエディタですが、WordPressとは相性が悪いので「TeraPad」や「Notepad++」などがおすすめです。

子テーマの詳しい作り方は以前に紹介しているので、こちらを参考にしてください。

↑ 子テーマのテンプレートを用意しているのでちょっと書き換えるだけで子テーマが作れます。

↑ こちらは基本的な作り方を紹介しています。

 

「functions.php」に広告用の設定を追加する

子テーマの「functions.php」へ広告を挿入するテンプレを追加しておきます。

今回はWordPressのページが読み込まれたときに自動で挿入されるように「アクション」という機能を追加する方法です。

子テーマの「functions.php」を開いて、以下をコピペします。

コピペしたら、あとでコードを追加できるように、開いたままにしておきます。

ページ単位の広告コードを取得する

先程の子テーマ「functions.php」に加える広告コードをAdSenseから取得します。

AdSenseにアクセスして、ページ単位の広告のコードを表示させます。

2016-11-11_13h51_07_adsense%e3%83%9a%e3%83%bc%e3%82%b8%e5%8d%98%e4%bd%8d%e5%ba%83%e5%91%8a%e3%82%92wordpress%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95

表示されたコードをコピーして、「functions.php」の該当箇所へ貼り付けます。

2016-11-11_14h00_05_adsense%e3%83%9a%e3%83%bc%e3%82%b8%e5%8d%98%e4%bd%8d%e5%ba%83%e5%91%8a%e3%82%92wordpress%e3%81%ab%e8%a8%ad%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95

「functions.php」はこうなります。

これを保存して、子テーマとしてアップロードし直すと、ページ単位広告が表示されるようになります。

ちょっとだけ解説:WordPressのアクションの追加

今回使っているこの「add_action」という関数を使うと

「WordPressがやってる処理に追加して別の処理もしてね!」

という命令ができてしまいます。

アドセンスコードを追加した今回の場合は、WordPressの標準機能で「wp_head」という処理がされたときに、一緒に「adsense_page_ad」も実行するように書かれています。

「wp_head」は全てのページでヘッダーが読み込まれるときに使われるので、そのとき一緒にアドセンスコードも表示されることになります。

これで広告コードが表示されるという仕組みです。

今回の方法はアドセンスに限らず、色んな方法で使いまわせるので、覚えておくと便利かと思います。

まとめ

今回の手順は3ステップでとっても簡単です。

  • 子テーマの準備
  • 「function.php」にテンプレのコピペ
  • AdSenseのコードを取得して貼り付け

子テーマがある人にとっては2ステップで3分もあれば終わってしまいます。

AdSenseのページ単位コードを使ってみたい方はぜひお試しください。

親テーマの「functions.php」にはいろいろな設定が書かれていたりするので、間違えずに子テーマの方を編集してくださいね。

間違って重要な設定を消してしまうと、復元がかなり面倒になるので。

では今回はこのあたりで。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

関連記事

  1. ウェブコーディング

    WordPressの記事内でPHPを実行した結果を表示する方法

    WordPressの記事内でPHPを実行できると、記事に表示できるコン…

  2. ウェブコーディング

    InstantWPで管理バーが表示されなくなったらどうする?

    InstantWPはローカル環境でWordPressの開発をするときに…

  3. ウェブコーディング

    プラグイン不要!2ステップで完了!「FontAwesome」をWordPressに導入してアイコンを…

    ブログのカスタマイズをするとき、必要なアイコンをいちいち画像化して、フ…

  4. ウェブコーディング

    WordPressのテーマ・テンプレートのディレクトリを取得する方法

    WordPressのカスタマイズをするとき、親テーマと子テーマのどちら…

  5. ウェブコーディング

    WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

    会話風吹き出しのテンプレートとして使えるCSSを作ってみました。会…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

   
  1. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  2. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  3. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
  4. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
  5. ブログの収益化

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
PAGE TOP