これから仮想通貨はじめるなら、コインチェック

[み]WordPressプラグインPopular Postsでアイキャッチ画像を表示する。

今回の記事は完全にみはら用のメモです。
みはら.comのサイドバーに表示している「人気の記事」はPopular Postsというプラグインを使っています。
「最新の記事」のように、記事のアイキャッチ画像を表示させたいと思ってGoogle先生に質問しまくった結果です。

Popular Postsをインストール

まずは、インストール。
ダッシュボードのプラグイン→新規追加→検索「Popular Posts」で。
Popular Postsを動かすには、Post Plug-in Libraryも必要なのでいっしょにインストール。

プラグインを弄る

弄るのはPost Plug-in Libraryの中のoutput_tags.php。
このファイルの中に以下を追加。
[cc] function otf_postthum($option_key, $result, $ext) {
$post_id = $result->ID;

if(has_post_thumbnail($post_id)){
$str = get_the_post_thumbnail($post_id, ‘post-thumbnail’);
}
return $str;
}
[/cc] 追加するのはどこでもだいじょぶです。
プラグインを弄るのはこれでおしまい。

Output templateを弄る

最後に、どんなカンジに出力すんのよ?っていうOutput templateを弄る。
デフォルトでは
[cc]

  • {link}
  • [/cc] ってなってます。

    これを、
    [cc]

  • {postthum}
    {link}
  • [/cc] とすると、記事のアイキャッチ画像が出力されます。

    さらに、テーマにあわせてCSSを弄ります。
    いま使ってるSightっていうテーマは、デフォルトで「Sight Recent Posts」っていうウィジェットがあるんで、これに合わせていきます。
    で、結果がこちら。
    [cc]

  • {postthum}
    {link}
  • [/cc] そうです。
    ただ単に、class名をそのまんまくっつけただけですね。

    ひとつだけ困ったのが、アイキャッチ画像がどうしても縦にびろーーーーんとなってしまうところ。
    ということで、CSSをいじります。
    [cc] .rpthumb img {
    width: 50px;
    margin-right: 15px;
    float: left;
    }
    [/cc] ここに、
    [cc] height: 50px;
    [/cc] を追加して完成です。

    とは言え、テーマを変えたらまたいろいろ弄らないとダメですね。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です