キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

WordPress Popular Posts の人気記事一覧とは別に今見てるカテゴリの人気記事一覧も設置する方法

      2014/10/10

この調子だとイギリスの冬は越せないと思う、キャリコ( @calicocatxyz )です。

外よりも部屋の中の方が寒いという謎の現象が起きてて、ヒートテックのタイツにズボン、半袖 T シャツに長袖のシャツ、インナーダウンにジャケットを着てもまだ寒い… 年内に帰国しても日本は冬の始まりっていう寒さから逃れられない状況にげんなりです ^^;

さて、音楽系の記事を挟みましたが、今日は WordPress Popular Posts のカスタマイズ記事をラテにお願いします。それじゃ、よろしくね♪

こんにちは、ラテにゃ。

先週はトップページの新着記事を非表示にして、サイドバーに人気記事一覧を設置したにゃ。ランキングの順位もつけて見栄えがよくなったし、今回は今見てるカテゴリの人気記事一覧を設置して、せっかくだからついでに順位もつけようと思ってるにゃ。

Ads by Google

今見てるカテゴリの人気記事一覧を設置

php コードを記述する

ハイライトで色を付けた部分がランキングに必要なコードにゃ。1行目で単一記事かカテゴリページかを判定して、トップページと固定ページには表示しないようにしたにゃ。
3~5行目で現在のカテゴリを取得、18行目以降はこんな感じにゃ。

limit

記事の表示数が指定できるにゃ。

range

集計期間が指定できるにゃ。daily 、weekly 、monthly 、all が選べて、24時間、1週間、1ヵ月、累積になるにゃ。

order_by

並び順が指定できるにゃ。comments 、views 、avg が選べて、コメント数順、ページビュー順、閲覧数の平均順になるにゃ。

thumbnail_width

サムネイル画像の横幅が指定できるにゃ。

thumbnail_height

サムネイル画像の高さが指定できるにゃ。

cat

取得するカテゴリ ID が指定できるにゃ。

stats_views

ページビュー数の表示が指定できるにゃ。1は表示、0は非表示になるにゃ。

stats_comments

コメント数の表示が指定できるにゃ。1は表示、0は非表示になるにゃ。

CSS で装飾する

ここからスタートするにゃ。h4 の指定a タグの指定は過去のエントリーで指定したものが反映されてるにゃ。

min-height で記事のタイトルが短くても余白を持つように指定、border-bottom で区切るように指定したにゃ。

これだけでもだいぶ形になってきたけど、一番最後の記事の区切り線が余計にゃ… これも前のエントリーでも説明したけど、非表示にするために次のコードを記述したにゃ。

サムネイルにランキングの順位をつける

前回は参考にしたブログに沿ってカスタマイズしたけど、dl 要素じゃなくて ul のままでも同じことが出来るんじゃにゃいか?っと考えて今回は ul でカスタマイズしてみるにゃ。

php に追記する

これはさっき php コードを記述したハイライトで色を付けた部分にゃ。これも前回のエントリーで説明した通りなんだけど、#popular-post ul li 要素に nunber というクラス名を付与したにゃ。

CSS で装飾する

表示位置の指定

サムネイル画像要素に対する絶対位置への配置指定にゃ。

表示の指定

1~3行目は前回のエントリーで記述した人はコードに書く必要はないにゃ。

ポイントは counter-reset と counter-increment で要素の連番をセットして、z-index で順位がサムネイル画像の手前に配置したにゃ。top と left の値を変えれば好きな場所に表示することが出来るにゃ。キャリコでは17~19行目でランキングの順位を少し透けさせる処理をしてるにゃ。

順位の設定

content で設定した連番の値をセット、さらに背景を指定することで画像を使わずにランキングが出来たにゃ。

ブログでの表示・完成

まとめ

今見てるカテゴリの人気記事一覧は設置できたかにゃ?これが設置できれば場所を問わず、その日の人気記事一覧とか月間ランキングなど簡単に出来るようになるにゃ。効果的に配置することが出来ればブログ内での回遊性も高くなるにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - WordPress

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

Photo credit : freepik
たった3行追加するだけ!パソコンとスマホの表示を別々にしてくれる分岐タグ

そろそろセントラルヒーティングを使ってもいいんじゃないかと思うキャリコ( @ca …

Wordpress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編
WordPress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編

WordPress を使うようになってから PHP を扱うようになったキャリコ( …

WordPress Popular Posts の人気記事サムネイルにランキングの順位をつける方法

ニンニクがないと生きていけないキャリコ( @calicocatxyz )です。 …

超簡単! WordPress で404ページだけアドセンスを非表示にする2つの手順

アドセンスの配置で迷ってるキャリコ( @calicocatxyz )です。 巷で …

WordPress に4行追加するだけ!特殊文字の自動変換機能を停止して文字化けを防ぐ方法

ただ今、旅行サイトを WordPress に移行中のキャリコ( @calicoc …

WordPress で複数のショートコードを作成する方法
WordPress で複数のショートコードを作成する方法

やっと謎が解決、キャリコ( @calicocatxyz )です。 これは絶対ショ …

Photo credit : http://www.kenston.k12.oh.us/
WordPress パンくずリスト決定版!親子関係も作れる完璧なコードは Web デザインレシピに載ってた

ようやくカテゴリとタグの棲み分けがわかってきたキャリコ( @calicocatx …

Photo credit : bluesyemre
WordPress の単一記事でパンくずリストにタグも表示させる方法

イギリスから日本まで3万円で帰れるルートを発見して大喜びのキャリコ( @cali …

WordPress で一部のページにだけ外部ファイルを読み込ませる方法

ここのところ記憶に残る夢といえば泳いでるキャリコ( @calicocatxyz …

WordPress でレスポンシブ対応の無料テーマ【 Point 】を導入して困った5つのこと

他サイト運営で STINGER5 以外のテンプレートを本格的に扱い始めたキャリコ …