ウェブコーディング

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. ウェブコーディング

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

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

  2. ウェブコーディング

    意外と重要なCSSのidとclassを使い分け

    WordPressテーマを作ったり、ホームページを作ったりするとき、間…

  3. ウェブコーディング

    PHPでデータベースから取得した配列を加工する方法

    データベースからデータをfetch関数などで取得すると、大体は2次元配…

  4. ウェブコーディング

    子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

    WordPressをカスタマイズするときに使うと便利なのが「子テーマ」…

  5. ウェブコーディング

    PHPの基本的な文法と変数のまとめ

    どんなPHP文でも必ず従わなければいけない文法があります。その初歩…

  6. ウェブコーディング

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

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

コメント

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

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

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

関連コンテンツ

WordPressテーマ「MAG(TCD036)」   ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche  
  1. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  2. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  3. ブログやサイトの作り方

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

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

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