MENU
HOME
TOP

「WordPress」人気記事一覧ウィジェットの作り方「プラグインなし」

まず前提として、カスタムフィールドの値でPVの多い順にソートして表示するだけの単純なものである事と、全期間集計の自動でPV数が更新されるような設定などもありません。

そんな感じで完成度は低いですが、ブログで表示するだけならば十分かなと思います。

関数を作る

カウントの関数を定義

まず、カスタムフィールドの関数を定義しておきます。

以下functions.phpに記述。

function get_post_views( $postID ) {
$count_key = 'post_views_count';
$count = get_post_meta( $postID, $count_key, true );
if ( $count == '' ) {
delete_post_meta( $postID, $count_key );
add_post_meta( $postID, $count_key, '0' );
return "まだアクセスがありません";
}
return $count . '';
}
function set_post_views( $postID ) {
$count_key = 'post_views_count';
$count = get_post_meta( $postID, $count_key, true );
if ( $count == '' ) {
$count = 0;
delete_post_meta( $postID, $count_key );
add_post_meta( $postID, $count_key, '0' );
} else {
$count ++;
update_post_meta( $postID, $count_key, $count );
}
}

BOTなどのアクセスを除外する関数を定義

で、クローラーとかのアクセスはいらないので、それを除外する関数も作っておきます。

function is_bot() {
$ua = $SERVER[HTTP_USER_AGENT];
$bot = array(
'Googlebot',
'Yahoo! Slurp',
'Mediapartners-Google',
'msnbot',
'bingbot',
'MJ12bot',
'Ezooms',
'pirst; MSIE 8.0;',
'Google Web Preview',
'ia_archiver',
'Sogou web spider',
'Googlebot-Mobile',
'AhrefsBot',
'YandexBot',
'Purebot',
'Baiduspider',
'UnwindFetchor',
'TweetmemeBot',
'MetaURI',
'PaperLiBot',
'Showyoubot',
'JS-Kit',
'PostRank',
'Crowsnest',
'PycURL',
'bitlybot',
'Hatena',
'facebookexternalhit',
'NINJA bot',
'YahooCacheSystem',
'NHN Corp.',
'Steeler',
'DoCoMo',
);
foreach( $bot as $bot ) {
if (stripos( $ua, $bot ) !== false){
return true;
}
}
return false;
}

これらのソースですが、あちらこちらで同じものが書かれていて、その元が分かりませんでした。なので、こちらのサイト様のコードを引用させていただきました。

引用元プラグインなしで人気記事一覧ウィジェット化-PV計測保存とPV取得 | WordPress PC WEB あれこれ堂的備忘録

PVを取得する

PVを取得するのに、先ほどの定義した関数など

  • PV関数「set_post_views
  • クローラー除外関数「is_bot
  • ログイン判別の「is_user_logged_in

この3っつを使います。

場所はどこでもいいんすけど、今回はsingle.phpのget_header();の下にでも貼ってしまいましょう。

<?php if( !is_user_logged_in() && !is_bot() ) { set_post_views( get_the_ID() ); } ?>

ウィジェットにする

テンプレート直書きだと管理が面倒になるので、今回はウィジェットにしてしまいます。

以下functions.phpに記述。

class Popular_Posts extends WP_Widget {
function __construct() {
parent::__construct(
'popular_posts',
'*人気記事*',
array( 'description' => 'PV数の多い順で記事を表示' )
);
}
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="number" min="1" max="10" id="<?php echo $this->get_field_id('limit'); ?>"
name="<?php echo $this->get_field_name('number'); ?>"
value="<?php echo esc_attr( $instance['number'] ); ?>" size="3">
</p>
<?php
}
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = is_numeric($new_instance['number']) ? $new_instance['number'] : 5;
return $instance;
}
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="widget-title">人気記事</h3>';
}
$number = !empty($instance['number']) ? $instance['number'] : get_option('number');
?>
<aside class="widget_my_popular_posts">
<ul>
<?php get_the_ID();//記事のPV情報を取得する
$args = array('meta_key'=> 'post_views_count',//投稿数をカウントするカスタムフィールド名
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => $number
);
?>
<!-- カスタムキー(post_views_count)に値があれば表示 -->
<?php
$my_query = new WP_Query( $args );?>
<?php
$posts = get_posts($args);
if($posts) : ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); $loopcounter++; ?>
<li class="clr">
<a href="<?php the_permalink(); ?>">
<!--順位-->
<span class="rank-count r-count<?php echo $loopcounter; ?>">
<?php echo $loopcounter; ?>
</span>
<!--サムネイル画像の追加-->
<?php if (has_post_thumbnail()): // Check if Thumbnail exists?>
<figure class="eyecatch">
<?php the_post_thumbnail(array(130,80)); ?>
</figure>
<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" width="130" height="80" alt="NO_IMAGE" />
</figure>
<?php endif; ?>
<div class="widget-new-entry-title">
<?php the_title(); ?>
<br>
<!--カテゴリ-->
<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</span>
<span class="widget-new-entry-date">
<time class="entry-date datepublished" itemprop="datePublished" datetime="<?php the_time('c') ;?>">
<?php the_time('Y年n月j日') ;?>
</time>
</span>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<!-- カスタムキー(post_views_count)に値がない場合の処理 -->
<?php endif; ?>
</ul>
</aside>
<?php echo $after_widget;
}
}
register_widget('Popular_Posts');

自分用に少し変えただけでほぼほぼこちらのサイト様から引用させて頂きました。

引用元プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加する | Plusers

スタイルを整える

あとは、スタイルを付けるだけです。

style.cssに追記。

.widget_my_popular_posts ul {
list-style: none;
}
.widget_my_popular_posts li {
position: relative;
}
.widget_my_popular_posts a {
text-decoration: none;
padding: 10px 5px;
display: block;
color: #345;
}
.rank-count {
display: none;
}
figure.eyecatch img {
float: left;
margin-right: 1.6%;
object-fit: cover;
width: 128px;
height: 80px;
}
.widget-new-entry-title {
font-size: 13px;
margin-left: 130px;
line-height: 1.6;
font-weight: bold;
}
.widget_my_popular_posts .cat-data {
position: absolute;
left: 6px;
top: 11px;
background: #3f51b591;
color: #fff;
padding: 0 2px;
font-size: 10px;
}
.widget-new-entry-date {
position: absolute;
bottom: 0;
right: 0;
color: #808080;
font-size: 80%;
}
.clr {
display: block;
clear: both;
}
.clr::after {
height: 0;
clear: both;
font-size: 0;
display: block;
content: "";
}

ウィジェットを表示する

プログラムが間違っていなければ、こんな感じでウィジェット追加されています。

これでだいたい以下の画像と同じような表示になっているかと思います。

スタイルは自分用に合わせているので、環境に合わせて変更してください。

自分のプログラムが ちょい複雑だったので 説明が少なかったのと、引用ばっかりですいません。

また少し書き直していこうかと思います。

それではまた(@^^)/~~~

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください