テーマ「Simplicity」には人気記事を表示するウィジェットが準備されています。
ですがそれは「Wordpress Popular Posts」プラグインが必須とのこと。
プラグインを使用せずに表示することはできないか、と思い参考にさせて頂いたのがこちらの記事。
前回の記事で、WordPressのheadタグ内を整理しました。さらに整理するにはプラグインを減らしていく必要がある為、今回はプラグインを使わずに人気記事を表示する方法をご紹介します。
こちらのサイトはお手本にしたいほどスッキリキレイなデザインでした。
まずは functions.php の編集。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// アクセス数の取得 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 "0"; } return $count; } // アクセス数の保存 function set_post_views($postID){ $count_key = "post_views_count"; $count = get_post_meta($postID, $count_key, true); if($count == ""){ $count = 1; delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, "1"); }else{ $count++; update_post_meta($postID, $count_key, $count); //delete_post_meta($postID, $count_key);// カウントをリセットする時に使用 } } |
最後の delete_post_meta は、このカスタマイズの途中で私自身がいろんなページを確認しててpvが偏ってしまったので、一度リセットする時に使いました。（もっとスマートなやり方もありそうですが ^^; ）
そして sidebar.php の編集。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="widget my-popular-posts"> <h3>人気の記事</h3> <?php if( is_single() || is_page() ){ // 記事ページまたは固定ページの場合、アクセス数の保存 set_post_views( get_the_ID() ); } $args = array( "post_type" => array( "post", "page" ), "numberposts" => 10,// 表示件数 "meta_key" => "post_views_count", "orderby" => "meta_value_num", "order" => "DESC", ); $posts = get_posts( $args ); if( $posts ) : ?> <ol> <?php foreach( $posts as $post ) : setup_postdata( $post ); ?> <li> <?php /*<div class="thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( "medium" ); ?></a></div>*/ ?> <p class="title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span>(<?php print get_post_views( get_the_ID() ); ?> pv)</span> </p> </li> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </ol> <?php else : ?> <p class="empty">只今集計中です。</p> <?php endif; ?> </div> |
記事ページに加えて固定ページも集計したかったので、4行目に 「|| is_page()」を追加し、10行目の”post_type”を「array( “post”, “page” )」に変更しました。
それから、数字付きのランキング形式にしたかったため、ul ではなく ol にしました。
丸数字のcssについては下記の記事を参考にしました。
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します
更に、ちょこっと手書き風の丸にしようと思い、こちらを参考に。
最終的なcssはこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#sidebar .widget.my-popular-posts ol { counter-reset: my-counter; list-style: none; padding: 0; } #sidebar .widget.my-popular-posts ol li { margin-bottom: 10px; padding-left: 30px; position: relative; } #sidebar .widget.my-popular-posts ol li:before { content: counter(my-counter); counter-increment: my-counter; color: #333; display: block; float: left; line-height: 22px; margin-left: -30px; text-align: center; height: 22px; width: 22px; border-radius: 100% 80% / 80% 85% 80% 90%; border: 1px solid #333; font-size: 90%; letter-spacing: -2px; text-indent: -2px; } #sidebar .widget.my-popular-posts ol li:nth-child(2n):before { border-radius: 100% 85% / 80% 100% 70% 100%; } #sidebar .widget.my-popular-posts ol li:nth-child(3n):before { border-radius: 80% 90% / 80% 80% 90% 80%; } #sidebar .widget.my-popular-posts ol li span { font-size: 80%; } |
border-radius で歪んだ丸を作る場合のこういった記述を初めて見ました。
どういう仕組みになってるのかよくわからなかったのですが、いつもお世話になっているサイトの下記記事に詳しく書かれていました。
勉強になります！
最終的な表示がこちら。
この記事執筆中に見てくださった方がいる！
嬉しいです。ありがとうございます(^^)
補足
私（管理者）がアクセスしても増えるので、ログインユーザーの場合はカウントしないよう sidebar.php を編集しました。
|
1 2 3 4 5 6 7 |
if ( !is_user_logged_in() ) { // ログインしていない if( is_single() || is_page() ){ // 記事ページまたは固定ページの場合、アクセス数の保存 set_post_views( get_the_ID() ); } } |
