ブログ開設・改造

WordPressのテーマ「JIN」で「WordPress Popular Posts」に順位の数字を表示させる方法

以前の記事で書いたとおり、WordPressのテーマを「Simplicity2」から「JIN」に変更しました。

あわせて読みたい
WordPressの有料テーマ「JIN」を選んだたった1つの理由WordPressのテーマを有料テーマの「JIN」に変更しました。 これまでWordPressのテーマは、無料の「Simplicity...

JINは、「設定マニュアル」が大変わかりやすいので、基本的な設定はこれだけを見れば、まったく問題なくカスタマイズできます。

ただ、このマニュアルには載っていない内容で、カスタマイズしたいことがいくつかありました。

そのうち、本記事では、人気記事をサイドバーに表示させるプラグイン「WordPress Popular Posts」に順位の数字を表示させる方法を紹介します。

ちなみに、私はJINで設定しましたが、別にJIN限定の方法ではありません。

1. 「WordPress Popular Posts」に順位を表示させる方法

私は、プログラミングの知識がほとんどないので、ネットで調べるしか方法がないのですが、探してみると「WordPress Popular Posts」に順位を表示させる記事はけっこうありました。

ただ、なぜかどれもうまくいかず、ようやくうまくいった方法が、以下の記事で紹介されていた方法です。

WordPress Popular PostsのデザインをCSSで自由にカスタマイズする|きにぶろぐ.com

ようやく、この記事にたどり着き解決できたので、ホントありがたかったです。

では、手順です。

まずは、プラグイン「WordPress Popular」を追加します。

デフォルトでは以下の左の画像ように順位の表示はされません。

それが、これから紹介するコードを追加すると右の画像のように順位を表示させることができます。

コードは、子テーマの「スタイルシート (style.css)」に追加します。

WordPressの管理画面の「外観」→「テーマの編集」をクリックして、画面右から「style.css」を探してください。

ちなみに、JINの場合、購入したときは親テーマしかダウンロードされていないはずなので、子テーマをインストールしていない場合は、以下からインストールしてください。

親テーマの「スタイルシート (style.css)」を修正するとバージョンアップがあったときに消えてしまいますので子テーマに追加することをオススメします。

JIN【子テーマ】のダウンロード|JIN(ジン)

子テーマの「スタイルシート (style.css)」を開くことができたら、以下のコードをコピペで追加してください。

するとアイキャッチ画像の左上に順位の数字が表示れるはずです。

順位の数字の色や位置はコードを修正すればカスタマイズ可能です。

2. おわりに

JINの設定マニュアルにはのっていない内容でカスタマイズしたいことはいくつかあったのですが、この「WordPress Popular」に順位を表示させる方法が1番苦労しました。

作業はコードを貼るだけなのですが、自分の環境でうまくいくコードが紹介されている記事を探すのに時間がかかりました。

ホントこの記事には感謝しています。

WordPress Popular PostsのデザインをCSSで自由にカスタマイズする|きにぶろぐ.com

JINの他のカスタマイズなどは、以下をご覧ください。

【JIN】タグの記事一覧|いつもていねいに


以上です。

本記事は参考になりましたか?
もし、少しでも参考になったことがあれば、フォロー&シェアしていただけるとうれしいです!!


また、「1分で読める書評ブログ」も運営していますので、興味があれば、ぜひご覧ください。

ABOUT ME
ottaka18
ottaka18
二人の子どもを持つ共働きサラリーマンパパ。現在、小学生と保育園児の子育てに奮闘中です。 本ブログは、PhoneとPCでの情報管理、文章作成、タスク管理がメインテーマのブログです。WorkFlowy、 Evernote、たすくまなどのアプリを使って知的生産のある暮らし(新しい価値を生む暮らし)を目指しています。