【WordPress Popular Post】黄色の警告が出て使えない！改善方法とランキング形式にする方法

 

WordPress Popular Postを使っていたのに↓こんな「黄色の枠で囲われた英語表示」が出て使えなくなった、、、！

この状態から新しいプラグインを入れずにそのまま以前と同じようにwordpress popular postsを使える方法を見つけたので、備忘録としてまとめておきます。

 

ついでに↓のように各記事の左上に１位、２位、３位というのを分かりやすく表示する方法も見つけたので、それもまとめておきます。

 

 

ウィジェットにWordpress Popular Postsを復活させるショートコード

 

wordpress popular postsを復活させるにはショートコードを入力するだけなのでめちゃくちゃ簡単です。

※これをご覧になっている方は既に「wordpress popular posts」のプラグインを導入済みだと思うので、プラグイン自体の導入の仕方は割愛しますね

 

【外観】→【ウィジェット】を開きます。

 

【カスタムHTML】を見つけます。

 

そしてその【カスタムHTML】を任意の場所にドラッグ＆ドロップ、もしくはクリックして移動させます。

ホームページやブログのトップページに置きたいならば【サイドバー】に追加すると良いでしょう。

 

 

そして移動させた【カスタムHTML】に以下のショートコードをコピペします。

※コピペした後に★★★を消してください

1. [w★★★pp range=‘last30days’ thumbnail_width=128 thumbnail_height=72 limit=10 stats_views=0]

※引用させて頂いたサイト：略してブロ戦 様

それぞれ数字の意味は

です。

それぞれ任意の数字を入力すると変更出来ますが、特にこだわりが無ければそのままコピペのみでOKです。

 

コピペするとこんな感じ↓。
保存をお忘れなきよう。

タイトル部分にはお好きな言葉を記入してください。

などなど

 

これで任意の場所に、以前のようにwordpress popular postsでのアクセス数の多い記事が羅列され、黄色枠の警告文も出なくなりました！

 

 

因みに黄色の警告そのものはウィジェットに「wordpress popular posts」を追加していると表示されてしまうので、そのウィジェットそのものを消去すれば警告は出なくなります。

 

 

次に以下↓のように①②③という数字が入ったランキング形式にする方法をまとめておきます。

 

 

綺麗なランキング形式を表示させる方法

 

ランキング形式で１位、２位、３位というのを分かりやすく表示させる方法はCSSをコピペして追加するだけです。簡単！

僕は普通にコピペして特に何の問題も出ておりませんが、念のため。

 

 

まずは【外観】→【追加CSS】

 

お持ちのブログにCSSを追加する画面（赤枠部分）が出ると思うので、そちらに以下のコードをコピペしてください。

 

1. /*ランキング順位表示*/
2. ul.wpp-list li {
3.     border-bottom: 1px dashed #77776E;
4.     position: relative;
5.     list-style: none;
6. }
7. /*記事タイトル*/
8. ul.wpp-list li a.wpp-post-title {
9.     display: block;
10.     text-decoration: none;
11.     font-size: 15px;
12.     color: #333;
13.     margin: 10px 10px 10px 0px;
14. }
15. ul.wpp-list li a.wpp-post-title:hover {
16.     color: #3fa3ff;
17. }
18. /*アイキャッチ*/
19. ul.wpp-list li img {
20.     margin: 10px;
21. }
22. /*ランキングカウンター*/
23. ul.wpp-list li:before {
24.     content: counter(wpp-count);
25.     display: block;
26.     position: absolute;
27.     font-size: 13px;
28.     font-weight: bold;
29.     color: #fff;
30.     background-color: #555;
31.     padding: 3px 10px;
32.     border-radius:50%;
33.     z-index: 1;
34. }
35. /*カウント数*/
36. ul.wpp-list li {
37.     counter-increment: wpp-count;
38. }
39. /*ランキング1〜3の色変更*/
40. ul.wpp-list li:nth-child(1):before{
41.     background-color: #EFAF00;
42. }
43. ul.wpp-list li:nth-child(2):before{
44.     background-color: #9EACB4;
45. }
46. ul.wpp-list li:nth-child(3):before{
47.     background-color: #BA6E40;
48. }

 

 

コピペするとこんな感じ。

 

そして「公開」ボタンを押して先ほどのwordpress popular postsの部分を見てみると、、、

 

１位は金色、２位は銀色、３位は銅色、４位以下は黒色のマークが表示されるようになりました！

 

 

まとめ

 

以上、「wordpress popular posts」の改善方法」に関する備忘録でした。

見栄えが良くなるので周遊率の改善を期待できますね。