ウイジェットエリア

WordPress

WordPressテーマに、広告を表示するウィジェットエリアを追加する方法



ぺんです。

本サイト「あふぃぶ」で使っているワードプレステーマは、下記記事でもご紹介したTDCさんの「MAG」というテーマです。

この「MAG」には、ショートコードを使って記事文中の好きな位置に広告を表示する仕組みが提供されているのですが、ショートコードの場合は毎回手動で広告表示位置を指定しなければなりません。

今回は、サイト記事の指定した位置に、自動的に広告を貼るためのカスタマイズ方法をご紹介します。

どこに広告を貼ると効果的なのか?

ネット上でブログのSEOのノウハウや、AdSenceの広告収益を公開しているサイトをいろいろ調べてみると、スマホでのアクセスが50%を超えている昨今では、記事のヘッダー画像(アイキャッチ画像)と、記事本文のすぐ下に広告を入れると効果が高い様です。

PCについては、サイト訪問時に目に入る、サイドバーの上部の広告が有効です。 余り広告が多すぎると、読みにくくなってしまいますが、文章量が長い記事の場合は、記事文中の広告表示も有効ですね。

広告を貼るべき場所

ワードプレステーマ「MAG」では、「タイトル下」と「本文直下」の広告自動表示には対応していないため、自動的に広告が掲載されるように改造します。

広告の表示にはウィジェット(Widget)を利用する

広告の表示は、その内容を定期的に変更する必要があるため、標準でついてくる「テキスト」ウイジェットを利用します。

テキストウイジェット

ウィジェット(Widget)とは?

ウィジェットとは、ワードプレスサイト上に情報を表示するための部品です。
このウイジェットには、たとえば入力されたテキスト(文字列)をそのまま表示するといった単純なものから、Google Mapを表示したり、記事一覧を表示するなど様々なものがあります。

ウィジェットは、ワードプレスをインストールするとすぐに使える標準ウイジェットの他には、ワードプレステーマに付属しているものや、プラグインとして提供されるものがあります。そして、もちろん自作することも可能なのです。

広告タグの設定画面

こちらは、テキスト ウィジェットに、広告表示用のタグを入力したイメージです。テキスト ウィジェットに入力された文字列(広告用タグ)は、ウィジェットが設定された場所(ウィジェットエリア)に表示されます。

ウィジェットエリア(Widget Area)とは?

ウイジェットエリアとは、ワードプレスサイト上にウィジェットを表示する場所の事です。

ウィジェットをつかうためには、ウィジェットをウイジェットエリアに登録する必要があります。これは、このサイト「あふぃぶ」で利用しているワードプレステーマ「MAG」のウィジェット画面です。

MAGのウイジェット画面

画面の赤い部分を見てください! カスタマイズして追加した2つのウィジェットエリア(カスタム広告 タイトル後、カスタム広告 記事下)に、それぞれ「テキストウイジェット」が登録されています。

テキスト ウィジェットの内容は、ワードプレステーマのテーマが指定する場所に、表示されるのです。

今回追加するウィジェットエリア(Widget Area)は?

ワードプレステーマ「MAG」が提供しているウィジェットエリアは、サイドバーと、フッターです。(実際には、MAGの独自機能として、ウィジェットをつかわずに、フッターの中の複数箇所に広告表示を指定することができますが、ここでは説明を割愛します)

ウイジェットエリアのイメージ

一般的なウイジェットエリア

 

今回、広告を貼りたいのは本文の中なので、下の図で、「広告」と記載されている2箇所となるため、この2箇所にウィジェットエリアを追加する必要があります。

ウイジェットエリアの修正イメージ

改造後のウイジェットエリア

ちなみに、ウィジェットエリアの数や、場所は、ワードプレステーマ毎に異なっています。例えば、以前ご紹介した無料のワードプレステーマ「magcast」では、サイトヘッダーの中に広告を設置するウィジェットエリアがあります。

ワードプレステーマのカスタマイズ方法

では実際のカスタマイズ手順を見ていきましょう

ウィジェットエリアを追加する

ウィジェットエリアを追加する方法は意外とシンプルです。子テーマのfunctions.phpに以下を追加してください。

register_sidebarのパラメータ

細かいパラメータの説明は以下の通りです。いろいろ書いていますが、idと、nameさえきちんと変更していればOKです。

$args

(array|string) (Optional) Array or string of arguments for the sidebar being registered.

  • ‘name’
    (string) ウイジェット画面に表示されるウイジェットエリアの名称
  • ‘id’
    (string) ユニークなウイジェットエリアの名称。
  • ‘description’
    (string) ウィジェット画面に表示される説明文言。
  • ‘before_widget’
    (string) HTMLのコード(文字列)を指定すると、このウィジェットが呼び出された際に先に出力される。ここで<DIV>タグなどを指定しても良し、テーマのソースコード内でウィジェットを呼び出す前に指定してもOKです。HTML content to prepend to each widget’s HTML output when assigned to this sidebar. Default is an opening list item element.
  • ‘after_widget’
    (string) こちらは、ウィジェットが呼び出された後に出力されます。HTML content to append to each widget’s HTML output when assigned to this sidebar. Default is a closing list item element.
  • ‘before_title’
    (string) こちらはウィジェット画面でタイトルを指定した場合、そのタイトル文言の前に出力されます。HTML content to prepend to the sidebar title when displayed. Default is an opening h2 element.
  • ‘after_title’
    (string) こちらは、ウィジェット画面でタイトルを指定した場合、そのタイトル文言の後に出力されます。HTML content to append to the sidebar title when displayed. Default is a closing h2 element.

詳しくは、Wordpressをご覧ください。

追加されたウィジェットエリア

上記のコードをfunctions.phpに追記すると、この画面の様に「カスタム広告」と記載されたウィジェットエリアが2つ追加されます。

MAGのウイジェット画面

 

追加したウイジェットエリアを表示するコードを追加する

では、早速追加したウィジェットエリアに登録したウィジェットを表示するようにコードを修正しましょう。

今回は、記事のタイトル下と、本文の最後にウィジェットを表示するようにします。

 

カスタマイズするソースコードはsingle.php

カスタマイズするソースコードの箇所ですが、ブログ記事の場合はsingle.php、固定ページの場合はpage.phpが該当します。

ウィジェットを表示したい箇所に、dynamic_sidebar()でウィジェットエリアを指定

今回は、ブログ記事を定義しているsingle.phpファイルを子テーマにコピーして、ウィジェットエリアを表示する <?php dynamic_sidebar(‘ここにウイジェットエリアのIDを指定’); ?>を該当箇所に記載します。ソースコードをご覧ください。

 

32行目と、39行目が変更箇所です。

記事のタイトル下:<?php dynamic_sidebar(‘custom_ad_after_title’); ?>

31行目で記事タイトルを表示していますので、その直後に広告を表示しています。

本文の最後:<?php dynamic_sidebar(‘custom_ad_after_article’); ?>

34~37行目で記事の本文を表示、そして記事本文のすぐ後の39行目でも広告を表示しています。

実装結果

これがカスタマイズ後のイメージです。

「記事のタイトル下」の広告表示イメージ

タイトル下の広告表示イメージ

「本文の最後」の広告表示イメージ

本文下の広告表示イメージ

まとめ

いかがでしたでしょうか?

  • 広告表示はテキスト ウィジェット内に、広告表示様のタグを登録する
  • ウイジェットを表示するウィジェットエリアを追加する
  • ワードプレステーマのソースコード内に、dynamic_sidebar()を使って、ウィジェットエリアの表示箇所を指定する

以外とシンプルに、広告を表示することができました。

今回のテクニックを応用すると、広告以外にも使えそうですね。



関連記事

  1. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法

    ぺんです。先日公開したこの記事の中で、オリジナルプラグ…

  2. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法

    ぺんです。今回は、ワードプレスの親テーマのウイジットを子テーマで書き…

  3. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

  4. WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

  5. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方

    ぺんです。前回、このブログをエックスサーバー上で運営することは…

  6. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズを指…

コメント

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

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




最近の記事

  1. マイクロソフトアカウントの登録方法
  2. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  3. WordPressのローカル環境を簡単に構築する方法
  4. ウイジェットエリア
  5. 日付の書式がNG
  1. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズ…
  2. WP Responsive Menu

    WordPress

    WP Responsive Menu – スマホ対応のレスポンシブメ…
  3. WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、Wo…
  4. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法
  5. ツール

    Compressor.io (圧倒的に使いやすいオンライン画像圧縮ツール)
PAGE TOP