WordPress カテゴリー別ランダムバナー広告ウィジェットの作り方

2018年3月8日

WordPress カテゴリー別ランダムバナー広告ウィジェットの作り方

phpでランダムにバナー広告表示 mt_rand()で個別投稿の属するカテゴリーに関連するバナー広告を、アクセスする度に(ページがロードされる度に)違うバナーで表示するランダムバナー(ローテーションバナー)の仕組みをPHPで作った。その仕組みをウィジェット化してWordPressに取り込んでみた。

functions.phpでウィジェットを登録

カテゴリー一覧ページ個別投稿のサイドバーにカテゴリー別ランダムバナーを表示させる。それ以外のフロントページ(トップページ)や個別ページには汎用のローテーションバナーを表示させる。

例によってfunctions.phpに書き込むので下のページのようにテンプレートパーツにした方が整理整頓できて管理しやすいと私は思うので、下のページで整理整頓してる前提で説明する。

<?php
/* カテゴリー別広告サイドバーウィジェット */
class Cat_Add_Side extends WP_Widget {
public function __construct() {
parent::__construct(
'cat_add_side',
'カテゴリー別広告',
array( 'description' => 'カテゴリー別広告サイドバーウィジェット 投稿の属するカテゴリーによって広告をわける ランダム表示' )
);
}

/* ウィジェットの内容をWebページに出力 */
public function widget($args, $instance) {
extract($args);
echo $before_widget;
if(is_category()){
$category = get_category(get_query_var('cat'),false);
$cat_slug = $category -> slug;
get_template_part( 'hoge/cat-hoge', $cat_slug );
}
elseif (is_single()){
$category = get_the_category();
$cat_slug = $category[0]->slug;
get_template_part( 'hoge/cat-hoge', $cat_slug );
}
else {
get_template_part( 'hoge/cat-hoge', 'all' );
}
echo $after_widget;
}

}/* class Cat_Add_Side 終わり */

/* ウィジェットの登録処理 */
add_action( 'widgets_init', function() {
     register_widget( 'Cat_Add_Side' );
});

本来ならfunctions.phpに直で上のコードを貼り付けるのだが、functions.phpを整理整頓してる場合は新たに上のコードを貼り付けたPHPファイルを作成し、テーマフォルダ内の管理しているフォルダにUTF-8Nで保存する。

例えばウィジェット関連でfunctions.phpから切り分けてテンプレートパーツ化したコードは「hoge」フォルダで管理していて、ウィジェット登録関連のコードはファイル名の頭の部分を「widget」で統一、ファイル名を「cat-add」とした場合、「widget-cat-add.php」というPHPファイルを「hoge」にUTF-8Nで保存する。

続いてfunctions.phpには下のコードを追記する。うまくいくとウィジェット管理画面に「カテゴリー別広告」というウィジェットが現れている。ちなみにこのウィジェットはオプション(表示数指定やウィジェットのタイトル入力など)はない。

get_template_part( 'hoge/widget', 'cat-add' );

個別投稿とカテゴリーページでのカテゴリー情報取得方法の違い

16行目から25行目がキモといった感じ。カテゴリー情報(名前やIDやスラッグなど)を取得するコード(WordPress関数)が、個別投稿とカテゴリーページで異なっている。

詳しくは理解していないが16行目から25行目のようにカテゴリー情報を取得するのが正確だそうだ。is_category()is_single()で条件分岐してそれぞれカテゴリー情報を取得している。

追記 カテゴリー別ランダム広告テンプレートパーツのファイル名取得方法変更 2018/04/05

投稿ページと個別ページで今までは属するカテゴリーのスラッグを利用して広告バナーリストファイルを振り分けていたが、各投稿のカスタムフィールドで指定した広告バナーリストファイルを選択するように変更した。

elseif (is_singular()){
$cat_slug = get_post_meta( get_the_ID() , 'add-type' , true );
if(empty( $cat_slug ) === false){
get_template_part( 'wig/cat-add', $cat_slug );
}
else {
get_template_part( 'wig/cat-add', 'all' );
}
}

functions.phpでウィジェットを登録の16行目から25行目にあたるところを上の様に変更している。詳しくは下記ページを参照ください。

追記2 ひとつのショートコードでランダムバナー広告を管理する仕様に変更 2018/05/25

ひとつのショートコードで新着記事一覧、ランダムバナーなどの広告を一元管理するようにしたので、ウィジェットの内容をWebページに出力の部分を下の様に変更。ランダムバナーリストの指定はカスタムフィールドで指定するのにかわりなし。

/* ウィジェットの内容をWebページに出力 */
public function widget($args, $instance) {
extract($args);
echo $before_widget;
if(is_category()){
$category = get_category(get_query_var('cat'),false);
$cat_slug = $category -> slug;
echo do_shortcode('[add-list type='. $cat_slug.']');
}
elseif (is_singular()){
$cat_slug = get_post_meta( get_the_ID() , 'add-type' , true );
if(empty( $cat_slug ) === false){
echo do_shortcode('[add-list type='. $cat_slug.']');
}
else {
$cat_slug = '●●●';
echo do_shortcode('[add-list type='. $cat_slug.']');
}
}
else {
$cat_slug = '●●●';
echo do_shortcode('[add-list type='. $cat_slug.']');
}
echo $after_widget;
}

カテゴリー一覧ページの場合、カテゴリースラッグのランダム広告リストを指定するようになっている。個別投稿・個別ページならカスタムフィールドで指定したランダム広告リストが使用される。指定されたランダム広告リストがなかったら(作成されてなかったら)、●●●というランダム広告リストが使われる。

ショートコードひとつで広告管理・表示する詳細は下のページを参照。

カテゴリー別ランダム広告テンプレートパーツ作成

上で得たカテゴリー情報のうちカテゴリースラッグをファイル名に利用して、カテゴリー毎に分けた 『 phpでランダムにバナー広告表示 mt_rand() 』 の内容のランダムバナーテンプレートパーツ(PHPファイル)を作成する。

具体的には、仮にカテゴリーのスラッグが「wordpress」で、テーマフォルダの中の「hoge」でカテゴリー毎のランダムバナーテンプレートパーツを管理、ファイル名の頭の部分を「cat-hoge」で統一する場合、「cat-hoge-wordpress.php」というPHPファイルを下の内容で作成して「hoge」フォルダにUTF-8Nで保存する。

<?php
$add_rand = array(
/* WordPressの教本 */  'ここにアフィリエイトバナーコード',
/*  WordPress超入門 */  'ここにアフィリエイトバナーコード',
);
$add_rand = $add_rand[mt_rand(0, count($add_rand)-1)];
echo $add_rand;

個別投稿とカテゴリーページ以外は「cat-hoge-all.php」が選択されるので上の要領でファイルを作成する。ちなみに該当するファイルがない場合はウィジェット部分は真っ白で何も表示されない。(テンプレートパーツがないのだから当たり前か)

アフィリエイトタグだけでは「これはどの広告だ?」とか終了した広告などを削除する場合など広告管理が大変なので、上のコードのようにバナータグの前に簡単な説明を入れてコメントアウトしておけばいいと思う。

追記 ひとつのショートコードで広告を一元管理する仕様に 広告リスト作成 2018/05/25

ショートコードひとつで広告を管理するようにしたので広告リストを作成する必要がある。カテゴリーの場合カテゴリスラッグをファイル名にした広告リストPHPファイルを作成する。例えばwordpressというスラッグのカテゴリがあるなら下のコードのようなwordpress.phpという広告リストPHPファイルを作成してテーマフォルダの任意のフォルダに保存しておく。

個別投稿・個別ページではカスタムフィールドでファイル名を指定する。例えばwordpressという広告リストを表示したいならadd-typeというカスタムフィールドにwordpressと入力しておく。カテゴリ一覧ページ、個別投稿・個別ページで指定した広告リストがない場合、●●●.phpという広告リストがデフォルトで表示される。カテゴリ一覧ページ、個別投稿・個別ページ以外でも●●●.phpが表示される。

<?php
$add_rand = array(

/* WordPressの教本 */
'<div>
ここにアフィリエイトバナーコード
</div>',

/*  WordPress超入門 */
'<div>
ここにアフィリエイトバナーコード
</div>',

);
$add_rand = $add_rand[mt_rand(0, count($add_rand)-1)];
return $add_rand;

‘ ‘ の中にバナーコードを入れて , 区切りで配列の中に入れていく。表示する部分のhtml(css)にあわせて定型(ひな形)にしておけばバナーコードをいれるだけ。

カテゴリー別ランダムバナーウィジェットの応用

ランダムバナー広告としているけど別に広告に限らず何でもランダムに表示できる。「カテゴリー別今おすすめの記事」なんてのもできたりする。

押しの広告などは原始的なやり方だが同じ広告タグを多く入れるとか同じ広告の違うバナーを複数配列に入れるとかすれば表示回数は増える。コードを見直せば表示割合も調整(0から30までは配列0とか)できるだろうがそこまでする気なし。

カテゴリーレベルまで広告を細分化する必要がないのなら、カテゴリースラッグを利用しないでウィジェットオプションでカテゴリーIDとテンプレートパーツを紐付けすればいいかもしれない。まあどちらにしても結構骨が折れるので素直にプラグイン使ってる方が管理は楽だ。