WordPressで人気記事一覧を画像付きで表示する方法

スポンサーリンク

このブログ「アマモ場」のサイドバーをご覧ください。画像付きで「人気記事」一覧が表示されていますね。これを実現するWordPressのプラグインで実現できます。

wordpressで人気記事一覧を画像付きで表示

人気記事を表示するために2つのプラグインを導入

そのプラグインは、

  • Popular Posts
  • Post-Plugin Library

をインストールします。

(2010年10月23日追記:{custom:post_image}の代わりに、{imagesrc}でも良く、その場合カスタムフィールドを使用する必要がないことが分かりました。めんどくさいことはやめましょう)

WPプラグインの Popular Posts、Post-Plugin Library の導入

まず Popular Posts の以下の部分から、Popular Posts をPC上の任意の場所にダウンロードして解凍します。

wordpressで人気記事一覧をプラグインで表示

また、WordPress ? Popular Posts ≪ WordPress Pluginsの以下の部分から、Post-Plugin LibraryをPC上の任意の場所にダウンロードして解凍します。

wordpressで人気記事一覧をプラグインで表示

上記のプラグイン2つを,wordpressをインストールしたホルダ内の /wp-content/plugins/ にアップロードします。

そして、WPのダッシュボードに戻り、インストール済みプラグイン一覧から、2つのプラグインを有効化します。

プラグインの Popular Postsの設定

次にWPのダッシュボードの左サイドバーに表示される「設定」から「Popular Posts」を選択し、Popular Postsの設定画面に映ります。

wordpressで人気記事一覧をプラグインで表示

Popular Postsの設定画面の「output」をクリック。

wordpressで人気記事一覧をプラグインPopular Postsで表示

次にHTMLを次のように設定します。

wordpressで人気記事一覧をプラグインPopular Postsの設定

上記のoutput template は自分のブログのCSSに合わせます。

たとえば、私の場合は、カスタムフィールドで、フィールド名前「post_image」を設定していています。そのフィールドの値に、記事内の画像の場所URLのttp://URL/image/{画像のファイル名.jpg}の画像のファイル名を記入しておきます。(このブログでの画像のフォルダは http://ブログURL/images/ にしています)以下の通りです。

output template =

<li><p style=”padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 5px; display: inline; float: left; padding-top: 0px”><a href=”{url}” title=”{title}”><img src=http://ブログURL/images/{custom:post_image}.jpg width=”40″ height=”40″ alt=”{title}”></a></p><p style=”height: 50px;”><a href=”{url}”>{title}</a></p></li>

上記の{custom:post_image}に、カスタムフィールの値(画像のファイル名)が入り、画像が表示されるのです。
(2010年10月23日追記:{custom:post_image}の代わりに、{imagesrc}でも良く、その場合カスタムフィールドを使用する必要がないことが分かりました。めんどくさいことはやめましょう)

人気記事一覧の画像表示のためのカスタムフィールドの設定

カスタムフィールドについては以下のように画像のURLを見つけて、カスタムフィールドの値を記入しておきます。(上記の例ではカスタムフィールドの名前は「post_image」にしています。)

wordpressで人気記事一覧を画像付きで、カスタムフィールドの編集

各記事内の表示させたい画像に関して、上記のようにカスタムフィールドを設定しておきます。

Popular Postsをウィジェットで表示

次にウィジェット機能を用いて、人気記事一覧をサイドバーに表示させます。これは簡単ですね。

wordpressで人気記事一覧をプラグインPopular Postsのウィジェット設定

「Popular Posts+」ウイジェットをサイドバーへドラッグ&ドロップします。そして、タイトルと最大記事数を設定すると、めでたく人気記事一覧が、画像付きで表示されます。

wordpressで人気記事一覧をプラグインPopular Postsのウィジェット設定

いかがでしたか?これがWordPressで人気記事一覧を画像付きで簡単に、かつ最短で表示させる方法でした。(ここまで具体的に説明している記事はありませんでした。試行錯誤でできました。←アマモの自画自賛)

アマモ場でWEBの成長を感じた私(アマモ)でした。

スポンサーリンク

フォローする

関連記事

コメント

  1. […] をあらかじめ設定して、記事内の画像のURLを指定しておく必要があります。それに関する記事は、WordPressで人気記事一覧を画像付きで表示する方法 :WordPress|アマモ場をご覧ください! […]

  2. […] さて、このサイトの右のサイドバーにあるとおり「最近の投稿」(Recent Post)をサムネイル画像付きで表示していました。これはWordPressで最近の投稿や特定のカテゴリ内の記事を画像付きでサイドバー表示やWordPressで人気記事一覧を画像付きで表示する方法で紹介した、WPのカスタムフィールド機能で設定していました。 […]

  3. […] Pressで構成していますが、人気記事を画像付きで表示させるために、WordPressで人気記事一覧を画像付きで表示する方法という記事でプラグイン「popular Posts」を使っていることをご紹介し […]

  4. tigpig より:

    はじめまして。
    プラグインを自力で探すのは、なかなか難しいのですが、
    こちらの紹介を拝見し、大変参考になりました。
    シンプルで使いやすそうなので、早速設置してみようと思います。
    ありがとうございました。