n番目指定ランダム広告挿入機能付き新着・更新記事ウィジェット

n番目指定ランダム広告挿入機能付き新着・更新記事ウィジェット

WordPressで作成したサイトのサイドバーなどにある 最近の新着・更新記事一覧 に、一覧のn番目にランダムバナー広告を挿入する機能付ウィジェットを作る方法。

アドセンス自動広告を試した時に新着・更新記事リストウィジェットにアドセンスがデザインがリストに溶け込むように挿入されているのを見て思いついた。

アドセンス自動広告風 リストに溶け込むランダム広告

巷で噂の アドセンス自動広告 、アドセンスを表示したいサイトページにコードを追加する後はアドセンス側で自動で最適の場所に最適な広告を表示させるというもの。

どえらいとこに広告をねじ込んでくる」「サイトデザインがぐちゃぐちゃになった」「これまでの規約はなんだったの?というくらいアドセンス広告が表示される」等の声が上がっているが、この備忘録でもアドセンス自動広告を試した。

自動広告を試した結果、ヘッダーのサイト名の下にビッグバナーが表示されたり、フッターの下にアドセンス広告が表示されたりとまさにデザイン、レイアウトがぐちゃぐちゃ状態に。その反面、新着記事一覧リストの中に比較的デザインも近い形でリストに溶け込む様にアドセンス広告が表示されていた。

現時点ではアドセンス自動広告はこの備忘録で使えないと私は思ったのですぐに外したが、グーグルが最適と判断して新着一覧リストにアドセンス広告をねじ込んだということは、広告表示に最適な場所ということで、ランダム広告挿入機能付き新着・更新記事ウィジェットを作ってみようと思った次第。

新着・更新記事一覧 ローテーション広告挿入機能付きウィジェット

新着・更新記事一覧 ローテーション広告挿入機能付きウィジェット
新着・更新記事一覧 ローテーション広告挿入機能付きウィジェット

ウィジェット自体は更新順で10件まで設定でき、新着記事に「新着」マークをつける日数指定でき、サムネイルと記事タイトルと抜粋の一部を表示する。広告は2箇所に挿入できる仕様で0入力または未入力で非表示にも設定できる。

指定したn番目の記事に広告を挿入するのとに広告を挿入するのとに分けている。なぜ上下で分けるのか、記事一覧の一番上と一番下に広告を挿入したい場合上下で分けておかないと一番上と一番下に広告を挿入することができないから。

更新順の新着・更新一覧ウィジェットについて詳しいことは、WordPress 最近の新着記事・更新記事の一覧ウィジェット を参照、一覧リストのn番目にランダム広告を挿入について詳しいことは、WordPress 新着記事・人気記事一覧ループのn番目にランダム広告 を参照。

ここでは n番目指定ランダム広告挿入機能付新着・更新ウィジェット のPHPコードのみ掲載。WordPress 最近の新着記事・更新記事の一覧ウィジェットから変更されたり追加された部分を背景の色を赤に変えて表示する。

1 WP_Widgetクラスを継承 Widget名前や説明

<?php
class New_Kousin extends WP_Widget {
function __construct() {
parent::__construct(
'new_kousin',
'最近の新着・更新記事',
array( 
'description' => 
'最近の新着記事・更新記事の一覧ウィジェット' )
);
}

2 ウィジェット内容をランダム広告挿入処理を追加しWebページに出力

/* ウィジェットの内容をWebページに出力 */
public function widget($args, $instance) {
extract($args);
echo $before_widget;
if(!empty($instance['title'])) {
$title = apply_filters('widget_title', $instance['title'] );
}
if ($title) {
echo $before_title . $title . $after_title;
} else {
echo '<h3 class="side-title">最近の新着・更新記事</h3>';
}
$number = $instance['number'] ;
$add_top = $instance['add_top'];
$add_bottom = $instance['add_bottom'];
?>
<div class="ninki-kiji">
<ul>
<?php get_the_ID(); 
$args = array(
'orderby' => 'modified',
'order' => 'DESC',
'posts_per_page' => $number
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post();
$rankcount++; ?>
<?php if ($rankcount == $add_top ): ?>
<?php get_template_part( 'wig/add', 'all1' ); ?>
<?php endif; ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<span class="kousin-kiji">
更新
</span>
<?php else :
$kikan  =  $instance['nichisuu'] ;
$genzai = date_i18n('U');
$koukai = get_the_time('U');
$keika = date('U',($genzai - $koukai)) / 86400 ;
if( $kikan > $keika ) : ?>
<span class="new-kiji">
新着
</span>
<?php endif; ?>
<?php endif; ?>
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumb100'); ?>
<?php endif; ?>
<div class="ninki-kiji-text">
<p><?php the_title(); ?></p>
<p class="new-des"><?php
$str = get_the_excerpt();
$count = 40;
$more = '...';
echo wp_html_excerpt( $str, $count, $more );
?></p>
</div>
</a>
</li>
<?php if ($rankcount == $add_bottom ): ?>
<?php get_template_part( 'wig/add', 'all2' ); ?>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
</div>
<?php echo $after_widget;
}

3 管理画面のウィジェット設定フォーム 上下の広告設定フォーム

/* 管理画面のウィジェット設定フォームを出力 */
public function form($instance) {
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('記事表示件数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('number'); ?>"
name="<?php echo $this->get_field_name('number'); ?>"
value="<?php echo esc_attr( $instance['number'] ); ?>" size="2">
</p>
<p>
<label for="<?php echo $this->get_field_id('nichisuu'); ?>"><?php _e('表示日数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('nichisuu'); ?>"
name="<?php echo $this->get_field_name('nichisuu'); ?>"
value="<?php echo esc_attr( $instance['nichisuu'] ); ?>" size="2">
</p>
<p>
<label for="<?php echo $this->get_field_id('add_top'); ?>"><?php _e('N番目の上に広告 N='); ?></label>
<input type="text" id="<?php echo $this->get_field_id('add_top'); ?>"
name="<?php echo $this->get_field_name('add_top'); ?>"
value="<?php echo esc_attr( $instance['add_top'] ); ?>" size="2">
</p>
<p>
<label for="<?php echo $this->get_field_id('add_bottom'); ?>"><?php _e('N番目の下に広告 N='); ?></label>
<input type="text" id="<?php echo $this->get_field_id('add_bottom'); ?>"
name="<?php echo $this->get_field_name('add_bottom'); ?>"
value="<?php echo esc_attr( $instance['add_bottom'] ); ?>" size="2">
</p>
<?php
}

4 ウィジェットオプション 広告挿入の設定


$instance = $old_instance;
$instance['title'] = sanitize_text_field($new_instance['title']);
$instance['number'] = ctype_digit($new_instance['number']) ? $new_instance['number'] : 5;
/* 記事表示件数11以上の場合10件表示 */
if( $instance['number'] == 0 || 10 < $instance['number']){$instance['number'] = 10 ; };
$instance['nichisuu'] = ctype_digit($new_instance['nichisuu']) ? $new_instance['nichisuu'] : 7;
/* 表示日数30日以上の場合30日表示 */
if( $instance['nichisuu'] == 0 || 30 < $instance['nichisuu']){$instance['nichisuu'] = 30 ; };
/* 上広告未入力(0入力)で表示なし */
$instance['add_top'] = ctype_digit($new_instance['add_top']) ? $new_instance['add_top'] : 0;
/* 上広告記事表示件数より大きい場合一番上に */
if( $instance['add_top'] > $instance['number'] ){$instance['add_top'] = 1 ; };
/* 下広告未入力(0入力)で表示なし */
$instance['add_bottom'] = ctype_digit($new_instance['add_bottom']) ? $new_instance['add_bottom'] : 0;
/* 下広告記事表示件数より大きい場合一番下に */
if( $instance['add_bottom'] > $instance['number'] ){$instance['add_bottom'] =  $instance['number'] ; };
return $instance;
}
}/* class New_Kousin 終わり */

5 ウィジェットの登録処理

add_action(
'widgets_init', 
function() {
register_widget( 'New_Kousin' );
}
);

全く新しくウィジェットを作る場合、上の1~5の黒いコード部分をもれなくつなげて functions.php に追記するか下のページの要領でテンプレートパーツにすればウィジェット管理画面に 最近の新着・更新記事 というウィジェットができてる。

なおfunctions.phpに追記する場合、1の1行目一番上の <?php はいらないはず。テーマに テーマのための関数 (functions.php) というPHPファイルがないというのなら新しく作らなければいけないので<?phpからはじまるけど。

ランダム広告テンプレートパーツを作成

ウィジェットは上の1~5で使えるようになるが広告を挿入するには、ランダム広告と広告管理のテンプレートパーツ を作成しなければいけない。

具体的には、2 ウィジェット内容をランダム広告挿入処理を追加しWebページに出力の29行目、get_template_part( 'wig/add', 'all1') で指定しているランダム広告をN番目指定した記事の上に表示する処理を書いた add-all1.php というテンプレートパーツと、63行目 get_template_part( 'wig/add', 'all2' ) で指定しているランダム広告をN番目指定した記事の下に表示する処理を書いた add-all2.php というテンプレートパーツを作成する必要がある。

ランダム広告を表示させる処理のPHPコード自体はadd-all1.phpもadd-all2.phpも同じで、違うのはローテーションさせる広告リストが違う。上と下の広告がかぶらないようにするために違う広告リストをセットした方がいいんじゃないてこと。

ランダム広告テンプレートパーツ

<?php
$add_rand = array(
/* A8.net 賢威 */ 
'<li>
<a href="ここにアフィリエイトリンク" target="_blank" rel="nofollow">
<span class="new-kiji">
PR
</span>
<img width="100" height="100" src="バナー画像URL" alt="" />
<div class="ninki-kiji-text">
<p>賢威 2万人を超えるユーザーが選んだWordPress SEOテンプレート</p>
<p><span class="pv-data">アクセス数: ∞</span></p>
</div>
</a>
</li>',
/* A8.net Z.com WP */ 
'<li>
<a href="ここにアフィリエイトリンク" target="_blank" rel="nofollow">
<span class="new-kiji">
PR
</span>
<img width="100" height="100" src="バナー画像URL" alt="" />
<div class="ninki-kiji-text">
<p>Z.com WP 低価格なのに高速・多機能・高セキュリティ 月額400円(税別)から</p>
<p><span class="pv-data">アクセス数: ∞</span></p>
</div>
</a>
</li>',
);
$add_rand = $add_rand[mt_rand(0, count($add_rand)-1)];
echo $add_rand;

2行目、配列を $add_rand に入れとく。配列の中身は ‘ ‘ の間に新着・更新記事リストの <li>要素 になるように定型された広告を、カンマ , 区切りで入れてある。3行目、16行目のように簡単な広告の説明をコメントアウトして入れておけば広告の管理が少しは楽かも。

30~31行目、実際にリロードされる度にランダムに広告を選んで表示させる処理をしているのがこの部分。$add_rand に入れた配列の要素の数をカウントして、何番目かをランダムに選んで選ばれた配列要素を表示させるという処理をしている。

広告がかぶらない様に配列要素におのおの違う広告を追加して作成した2つのファイルを、add-all1.phpadd-all2.php として文字コード UTF-8N で、テーマフォルダの wigフォルダ にアップロードしてできあがり。

css 雛形 バナー広告

.ninki-kiji ul {
padding: 0;
list-style: none;
}
.ninki-kiji li {
position: relative;
margin-top: 10px;
padding: 0 5px 10px;
border-bottom: dotted 1px #ddd;
}
.ninki-kiji a {
display: inline-block;
text-decoration: none;
color: #AD3B32;
font-weight: bold;
}
.ninki-kiji a:hover {
background-color: #fafad2;
}
.ninki-kiji a:after {
display: block;
clear: both;
content: '';
}
.new-kiji {
position: absolute;
top: 0;
left: 0;
padding: 1px 5px;
color: #fff;
font-size:0.8em;
background: rgba(255, 0, 0, .85);
}
.kousin-kiji {
position: absolute;
top: 0;
left: 0;
padding: 1px 5px;
color: #fff;
font-size:0.7em;
font-weight:normal;
background: rgba(0, 0, 0, .85);
}
.ninki-kiji img {
float: left;
width: 100px;
height: 100px;
}
.ninki-kiji-text {
font-size: .9em;
margin-left: 110px;
line-height:1.5em;
}
.pv-data {
font-size:12px;
font-weight:normal;
color:#333;
}

css スタイルは上の様な感じ。バナーを左に、右にタイトルと説明(アクセス数: ∞ の部分)<li>要素内をアフィリエイトリンクで丸ごと囲ってる。

<li>要素内をリンクで丸ごと囲ってるのでバナー広告作るのに少し手間。自由テキストアフィリエイトリンクをいちいちつくらなければいけないし、バナーも自作する必要が出てくる(100x100)。自由テキストリンクをつくれない広告は掲載できないので広告が限定されてくるかも。

<li>要素内をリンクで丸ごと囲わなければ、普通に100x100バナー広告テキスト広告でいけるでしょうて話で今更後悔中。発リンクが少なくて済むのでこれでいいんだ!と慰め中。

/* アフィリエイト簡単説明 */ 
'<li>
<a href="アフィリエイトリンク" target="_blank" rel="nofollow">
<span class="new-kiji">
PR
</span>
<img width="100" height="100" src="バナー画像URL" alt="" />
<div class="ninki-kiji-text">
<p></p>
<p><span class="pv-data">アクセス数: ∞</span></p>
</div>
</a>
</li>',

メモ帳とかで雛形作ってそれにあてはめてバナー広告を作成して、テーマの編集でバナー広告を追加したり変更したりすればよろし。使用中のテーマを編集するのは非推奨なようなので最低限編集前にバックアップを。2行目と13行目、‘ ‘で囲む のと カンマ , で区切るのを忘れないように。