WordPressで人気のあるエントリー(記事)を表示してくれるプラグイン『Popular Posts』

このサイトの上部にもある『人気のあるエントリーBEST10』で使用しているプラグインです。

201022269 

最初はショッピングサイトで『人気のある商品ベストテン』を表示するために使ったプラグインなのですが、なかなか面白いのでこのサイトでも使用してみました。

—————– プラグインのインストール ————————–

まずは Post-Plugin Library をダウンロードします。これは Popular Posts を動かすために必要なプラグインになります。

http://rmarsh.com/plugins/post-plugin-library/

のサイトから

201023270 にてダウンロードします。

次に、Popular Posts をダウンロードします。

http://rmarsh.com/plugins/popular-posts-plugin/

から

201023271 をクリックしダウンロードしてください。

ダウンロードしたファイルを解凍しプラグインホルダにアップ、プラグインを『Post-Plugin Library』、『Popular Posts』の順で有効化します。

表示したいテーマファイルの場所に

   <?php popular_posts(); ?>

とコードを付け加えます。

これで表示されます。

201023272

このサイトでは 『Number of posts to show』 表示数をいじったぐらいです。

肝心なのが『Output』タブの表示部です。

Available Tags が使えるタグの一覧になっているので、これを組み合わせ自分なりの表示をカスタマイズしてみてください。

このサイトでは、『Output template:』を

   1: <a href="{url}" title="{title}"><img  src="{imagesrc}" width="45" height="33" ait="{imagealt}" /></a>

『Text and codes before the list:』を

   1: <div id="best"><h4>人気のあるエントリー BEST10</h4>

『Text and codes after the list:』を

   1: </div>

としています。

後はCSSをいじって終了です。

スタイルCSSに以下を追加して終了です。

   1: #best {

   2:     border: 1px solid #AEC1CD;

   3:     padding: 5px 5px 0 5px;

   4:     }

   5:  

   6: #best ul {

   7:     margin: 0;

   8:     padding: 0;

   9:     line-height: 18px;

  10:     list-style: none;

  11:     }

  12:     

  13: #best li {

  14:     list-style: none;

  15:     padding-left: 10px; 

  16: }

  17:  

  18: #best img {

  19:     vertical-align: text-bottom;

  20: }

コメントを残す