*

WordPress(Stinger5)で簡単に人気記事を表示させる方法

   

-shared-img-thumb-PAK85_color20141206204808_TP_V

こんにちは、川戸です。

今回のテーマは「WordPressで簡単に人気記事を表示させる方法!」

トレンドブログではよくサイドバーに「人気記事ランキング」が表示されていたりしますよね。

見た目にもカッコいいですし、「アクセスしてきたユーザーのページ閲覧数を増やす」という効果が期待できる以上、あなたのブログに導入してみる価値は大!

というわけで、さっそく人気記事を表示させる方法についてチェックしていきましょう!

※なお、今回はテンプレート『stinger5』を使用しています。

 

WordPressで簡単に人気記事を設置!

今回はプラグイン『WordPress Popular Posts』を使って人気記事をブログに設置します。

しかし、ただ『WordPress Popular Posts』をインストール&サイドバー設置しただけでは見た目がイマイチなのでカスタマイズ方法も合わせてご紹介しますね。

 

『WordPress Popular Posts』をインストール

①ワードプレス管理画面のメニューから「プラグイン」⇒「新規追加」をクリック

②次に、画面右上の検索ボックスから『WordPress Popular Posts』を検索

③画面のプラグインの「今すぐインストール」をクリックします

人気

インストールが終わったら、忘れずに「プラグインを有効化」をクリックしておきましょう。

人気2

WordPress管理画面「設定」の中にある「WordPress Popular Posts」をクリックすることで各種設定が行なえますが、基本的には全てデフォルトで問題ないのでスルーします。

 

『WordPress Popular Posts』をサイドバーに設置

WordPress管理画面「外観」の中にある「ヴィジェット」をクリック

画面のように『WordPress Popular Posts』をサイドバーヴィジェットの中までドラッグ&ドロップします。

人気4

次は各種設定です。

とりあえずイジる項目は3つ。

・サイドバーに表示される人気記事ランキングの「タイトル」

・表示される人気記事の「数」

・人気記事を判断するためのアクセスを集計する「期間」

人気5

とりあえず、それぞれ

・タイトル=現在読まれている記事

・表示数=5

・集計期間=直近の1か月間

に設定してみました。

 

次は見た目のカスタマイズ。

以下のようにチェックマークを操作します。

・「Display post thumbnail」にチェックを入れる。

・「Display views」 のチェックを消す。

・「Use custom HTML Markup」にチェックを入れる。

人気6

そうしたら、一度「保存」をクリック。

画面が変化した部分をいじっていきます。

まずは「Display post thumbnail」の項目。

以下のように縦横のサイズを「100ピクセル」に設定します。

人気7

これによって、人気記事のアイキャッチが『stinger5』の「NEW POST」と同じように表示されるのでキレイに見えますよ。

 

次に「Use custom HTML Markup」の項目。

一度すべてのコードを消して、各項目に以下のコードをコピペしていきます。

※「」部分の中をコピペしてください

」…「<div id=”kanren”>」「</div>」

」…以下のコード

<dl class=”clearfix”>
<dt>{thumb}</dt>
<dd>
<h5>{title}</h5>
<p>{stats}</p>
</dd>
</dl>

完成形がコチラ

人気8

こちらもサイドバーの人気記事表示を『stinger5』の「NEW POST」と同じにするためのコードですね。

ここまでの作業が完了したら再度「保存」をクリック。

人気9

以上で「人気記事ランキングの表示」は完了です。

お疲れ様でした。

ブログに戻ってサイドバーをチェックしてみましょう!

 

※こんな風に表示されましたか?

人気10

 

まとめ

「WordPressで簡単に人気記事を表示させる方法!」

今回はただサイドバーに人気記事を表示させるだけでなく『stinger5』の「NEW POST」と同じような見た目にするカスタマイズも紹介しました。

その方が統一感もあってキレイに見えるはずですよ。

プラグイン「WordPress Popular Posts」の設定自体はとっても簡単なので、今すぐあなたのブログに人気記事ランキングを設置してみましょう!

 - WordPress