プラグインを使わずに人気記事のランキングを手書き風丸付き数字で表示

テーマ「Simplicity」には人気記事を表示するウィジェットが準備されています。

ですがそれは「Wordpress Popular Posts」プラグインが必須とのこと。

プラグインを使用せずに表示することはできないか、と思い参考にさせて頂いたのがこちらの記事。

前回の記事で、WordPressのheadタグ内を整理しました。さらに整理するにはプラグインを減らしていく必要がある為、今回はプラグインを使わずに人気記事を表示する方法をご紹介します。

こちらのサイトはお手本にしたいほどスッキリキレイなデザインでした。

まずは functions.php の編集。

最後の delete_post_meta は、このカスタマイズの途中で私自身がいろんなページを確認しててpvが偏ってしまったので、一度リセットする時に使いました。(もっとスマートなやり方もありそうですが ^^; )

※管理者以外をカウントするよう改修しました(→ 補足)

そして sidebar.php の編集。

記事ページに加えて固定ページも集計したかったので、4行目に 「|| is_page()」を追加し、10行目の”post_type”を「array( “post”, “page” )」に変更しました。

それから、数字付きのランキング形式にしたかったため、ul ではなく ol にしました。

丸数字のcssについては下記の記事を参考にしました。

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します

更に、ちょこっと手書き風の丸にしようと思い、こちらを参考に。

最終的なcssはこちら。

border-radius で歪んだ丸を作る場合のこういった記述を初めて見ました。

どういう仕組みになってるのかよくわからなかったのですが、いつもお世話になっているサイトの下記記事に詳しく書かれていました。

要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだ

勉強になります!

最終的な表示がこちら。

この記事執筆中に見てくださった方がいる!

嬉しいです。ありがとうございます(^^)

補足

私(管理者)がアクセスしても増えるので、ログインユーザーの場合はカウントしないよう sidebar.php を編集しました。

スポンサーリンク