WordPress カスタムフィールド値指定ランダムバナーウィジェットの作り方

2018年4月5日

WordPress カスタムフィールド値で指定ランダムバナーウィジェットの作り方

投稿ページ・個別ページのカスタムフィールドの値を利用してランダムバナー広告リストファイルを指定して、ページがロードされる毎に広告が変るウィジェットを作ってみた。主にサイドバーに配置、CSSデザインを変更すれば投稿内でも可能かと。

カテゴリー一覧ページでは『WordPress カテゴリー別ランダムバナー広告ウィジェットの作り方』と同じようにカテゴリースラッグを利用してローテーションバナー広告リストファイルを指定している。

複数カテゴリーを持つ投稿が問題

別段、カテゴリー別ランダムバナー広告ウィジェットでもよかったしそこまでこだわるつもりもなかったのだが、投稿に複数カテゴリーを割り当てた時にWordPressではメインとするカテゴリーを指定できない（できるのかもしれんけど私には到底無理）憤りが沸々と沸いてきたのだった。

SEOの観点からして投稿記事は複数カテゴリにしない方が良い様なんだけど（だったらそうしろよ）、記事の内容的にどうしても複数カテゴリに跨ることがある。複数カテゴリに跨らないように記事を分けて書けばいいのだろうけど（だったらそうしろよ）、備忘録ということで流れ的にどうしても１記事に纏めてしまう私だった。

挙動は、投稿ページ・個別ページではカスタムフィールドで指定したスラッグをもつバナー広告リストファイルを見に行きウィジェットに表示させる。もしカスタムフィールドを追加してなかったら汎用ファイル（all）を見に行ってウィジェットに表示させる。またカスタムフィールドに無い（間違った）スラッグを入力すると何も表示されない。

カテゴリー一覧ページでは、カテゴリー別ランダムバナー広告ウィジェットと同じ様にカテゴリースラッグと同名ファイルを見に行ってウィジェットに表示させる。カテゴリーの数だけバナー広告リストファイルを作らなければいけない手間はそのまんま。ファイルを作ってなければ何も表示されないだけ。

カスタムフィールドで指定ランダムバナー広告ウィジェット

新たにカスタムフィールドで指定ランダムバナー広告ウィジェットを作ってもいいのだが、ウィジェットばっかりうぃじぇっとうぃじぇっと（うじゃうじゃ）あっても仕方ないので、カテゴリー別ランダムバナー広告ウィジェットのコードの一部を変更した。だからウィジェット名や説明はそのまんまである。

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

widgetの作り方自体は同じなので新たにオプション機能をつけて新しくウィジェット作るかもしれんけど多分作らないと思う。ちなみにバナー広告バナー広告といってるけど、アクセス毎に違う文章が表示されるとかもできる。

カスタムフィールド指定ランダムバナーウィジェット化

<?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( 'wig/cat-add', $cat_slug );
}
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' );
}
}
else {
get_template_part( 'wig/cat-add', 'all' );
}
echo $after_widget;
}

}/* class Cat_Ninki_Kiji 終わり */

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

２２行目から３０行目で、'add-type’ というカスタムフィールドの値を利用して、テンプレートパーツ化したバナー広告リストPHPファイルを指定処理をしている。

カスタムフィールド add-type がなかったら ‘cat-add-all.php’ というPHPファイルを指定する。カスタムフィールドadd-typeに無い（間違った）バナー広告リストPHPファイル名を入力してしまうと何も表示されない。

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

上のコードを functions.php の上の方に貼り付ける。'wig/widget’ とか 'cat-add’ とかは、テンプレートパーツ化のページを参考にしてもらって任意に書き換えてOKです。上の場合、テーマフォルダの中のwigフォルダにwidget-cat-add.php というファイル名で保存していることになる。

追記 ひとつのショートコードでランダムバナー広告を管理する仕様に変更 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;
}

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

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

WordPress ショートコードひとつでランダムバナー広告管理 広告表示

バナー広告リストPHPテンプレートパーツファイル作成

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

上の様な バナー広告リストPHPテンプレートパーツファイル を作って、テンプレートパーツ化したカスタムフィールド指定ランダムバナーウィジェットファイルと同じフォルダに、ここではテーマフォルダのwigフォルダに入れるということになる。

ファイル名は cat-add-●●●.php といった具合になる。cat-add-の部分は定型で、ハイフン以降の●●●の部分が任意につけるファイル名（スラッグにあたる部分）、今のところカテゴリー別バナー広告リストファイルを使っているのでカスタムフィールドadd-typeの値にカテゴリースラッグを入力してるということ。

新たにバナー広告リストPHPテンプレートパーツファイルを作って cat-add-new.php としたなら 、カスタムフィールドadd-typeの値に新たに作成したバナー広告リストPHPテンプレートパーツファイルの名のcat-add-以降の new を入力すればそのリストのバナーがランダムに表示される。

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

ショートコードひとつで広告を管理するようにしたので広告リストを作成する必要がある。カテゴリーの場合カテゴリスラッグをファイル名にした広告リストPHPファイルを作成する。例えばwordpressというスラッグのカテゴリがあるなら下のコードのようなwordpress.phpという広告リストPHPファイルを作成してテーマフォルダの任意のフォルダに保存しておく。上のバナー広告リストPHPテンプレートパーツファイルと違ってcat-add-●●●.phpのcat-add-などはいらない。ファイル名はカテゴリスラッグだけで大丈夫。

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

<?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）にあわせて定型（ひな形）にしておけばバナーコードをいれるだけ。１６行目だけ バナー広告リストPHPテンプレートパーツファイル と違うので注意。

投稿の編集でカスタムフィールドを追加

投稿の編集でカスタムフィールドを追加
投稿の編集でカスタムフィールドを追加

投稿の編集で カスタムフィールド add-type を新規追加する。上の画像では一度カスタムフィールドを追加しているので、add-typeを選択できるようになっているが最初の一度は新規追加で追加する必要がある。

カスタムフィールド add-typeにファイル名入力
カスタムフィールド add-typeにファイル名入力

カスタムフィールド add-typeにファイル名を入力。cat-add-●●●.php の●●●の部分となる。存在しないファイル名を入力すると真っ白で何も表示されない。くれぐれ ●●●の部分だけ ということを忘れないようにする。（テーマフォルダの中にフォルダを作って定型的にファイル名を作っている場合）

WPカスタマイズ,アフィリエイトPHP,functions.php,カスタムフィールド,ランダムバナー,ローテーションバナー,ウィジェット,widget

Posted by あれこれ堂