【僕でも簡単でした】タブ分けしてランキングを表示させよう!

おはようございます、 ふぃる です!

前回の記事に引き続き、

今回も記事のランキング表示について

お伝えしていきます!

前回のおさらい

前回の記事でWordPress Popular Postsという

プラグインをインストールして

サイト内の記事をランキング形式で

表示できるようになったかと思います!

まだ、そこまでできていないよー!という方はこちらからどうぞ!

表示形式に凝ってみたい人は

ランキング形式で表示させることができるようになると

ちょっと凝ったこともしてみたいと思いますよね!

装飾にちょっと変化をつけてみると

見た目もわかりやすくなって良いかもしれませんよ!

今回は2通りのやり方をご紹介していきます!

WordPress Popular Postsをカスタムしよう

前回の記事でインストールしたプラグインですね!

簡単な設定はウィジェット画面でできたと思いますが

ランキング順位ごとに色分けができたらカッコよくないですか?

1位から順番に金→銀→銅という具合にすると

他の記事と差別化できてちょっと豪華になりますよ!

これにはsimplicity2の子テーマをダウンロードして

スタイルシートにCCSコードを入力する必要があります。

は?何言ってるかよくわからんけど??

そんな人でも大丈夫です。

こちらのダウンロードボタンを押してダウンロードして

ダッシュボード

外観

テーマ

新規追加

テーマのアップロード

ダインロードしたファイルを開く

   どこに保存したかわからなくても大丈夫!

   [ダウンロード]→[simplicity2.child]を見つけよう!

アップロードしたら有効化のボタンを押す

外観/テーマの編集

スタイルシートに到着!

/* Simplicity子テーマ用のスタイルを書く */

このような文章がありますのでこれの一段下に

次のコードをコピー&ペーストしてください♪

.widget_popular_ranking ul li:nth-child(1):before{
background-color:#CFB53B;
}
.widget_popular_ranking ul li:nth-child(2):before{
background-color:#bbbbbb;
}
.widget_popular_ranking ul li:nth-child(3):before{
background-color:#C47222;
}

貼り付けられましたらファイルを更新を押しましょう!

これで完了です!

ちなみに、閲覧数が同一だと同じ色になってしまうので

注意が必要です(笑)

記事の装飾ならこれがオススメ!

「 Shortcodes Ultimate 」

様々な機能がまとまっている便利プラグインです!

これとWordPress Popular Postsを連動させて

日間、週間、月間ランキングをタブ形式で表示させるッ!

小難しいことは説明しません!(笑)

「HTML」とか「CCS」とか横文字で言われても…。

僕はよくわからんかったので理解するのに

けっこう苦労しました。

なのでこういった呪文があると思って

特に考えずにコピペしてみましょう!

まずはShortcodes Ultimateをインストールしましょう!

やり方は前回でインストールしたプラグインと同じです!

https://firuaffiliate.com/zakki/rannkinnguhyouzi/#i-10

インストールできたらさっそく設定しましょう!

「ダッシュボード」→「外観」→「ウィジェット」→「利用できるウィジェット」

からShortcodes Ultimateを見つけて

サイドバーのウィジェットエリアの一番上の段に貼り付けましょう!

貼り付けたShortcodes Ultimateの右側にプルダウン下向きのコレ→▼を開くと

文字入力できるスペースがあるので、

次の呪文をコピペしてください!

コピーするときは、[ ]の中の先頭の全角スペースを消してください☆

[ su_tabs active=”1″]
[ su_tab title=”Day”]
[ wpp post_type=”post” thumbnail_width=75 thumbnail_height=75 limit=10 post_html=’
<ul><li>{thumb} {title}</li></ul>’]
[ /su_tab]
[ su_tab title=”Week”]
[ wpp post_type=”post” thumbnail_width=75 thumbnail_height=75 limit=10 post_html=’
<ul><li>{thumb} {title}</li></ul>’ range=”weekly”]
[/su_tab]
[ su_tab title=”Month”]
[ wpp post_type=”post” thumbnail_width=75 thumbnail_height=75 limit=10 post_html=’
<ul><li>{thumb} {title}</li></ul>’ range=”monthly”]
[/su_tab]
[ /su_tabs]

以上!

完成サンプルがこちら↓

DayWeekMonth

この呪文を少し説明すると、

タブで表示させる名前を決めろ!→Dayで

タブの中身はなんにする!→WordPress Popular Posts使ってランキング表示よろ

細かい設定を決めてくれい!→幅やら表示件数やら集計期間を決める

っていうのを3つくりかえしてるんです。

気になる人は解読すると勉強になりますが、

これをしっかり覚えるよりは

わかってる人のマネして作らせてもらって

自分は記事の内容でも考えていた方がいいです←

まとめ

いかがでしたか?

できました?

僕が参考にさせてもらったサイト様のリンク貼っておきますね。。

さて、

ここまで長い文章を読んでくださってありがとうございます。

ためになった!面白かった!

そんな方は、
下のTwitterのボタンを押して下さい。
ツイートで共有していただけると励みになります!

また読みたい!更新頑張れ!
と思ってくれた方。

こちらで記事の更新もお知らせしています。
是非とも下のフォローしよう!ボタンを押して
フォローしてください!

携帯からご覧の方は
サイトページを「ホーム画面に追加」しておけば
次から簡単にアクセスできるようになります!

いいね!やリツイートがあると、窓辺で日向ぼっこしながら喜びます!

それでは!またお会いしましょう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする