2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(WordPress)の記事

プラグインを使わずに「最近の投稿」ウィジェットにサムネイル画像を追加してみた



デフォルトのウィジットでサイドバーに簡単に表示できる「最近の投稿」にはエントリのタイトルしか表示されないのでサムネイル画像を表示してみようとググってみたら YD Recent Posts with thumbnails というプラグインを見つけた。

けど、レイアウトを調整したりするのに結局ソースをいじらなきゃなんないので、直接 WordPress のファイルを修正してみることに。

# 結局、YD Recent Posts with thumbnails の設定で十分できるようなレイアウトに落ち着いちゃいましたが、Wordpress のお勉強という事で・・。

まずはデフォルトのウィジットを表示している場所を探してみる。

デフォルトのウィジットは、どうやら

/wp-includes/default-widgets.php

で定義されているようなのでそれを編集してみる。600行目あたりの、

class WP_Widget_Recent_Posts extends WP_Widget

というクラスの中の

function widget($args, $instance)

という関数で、<ul><li>タグを生成して表示しているっぽい。以下該当部分のオリジナルのソース。

    have_posts()) : $r->the_post(); ?>

なんで、<a>タグの直前に、

  ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?>

を追加して、<li>タグを閉じる直前に

を追加してフロートを解除する。(class=”clear” はいわゆる clearfix )出来上がりはこんなかんじ。

  • ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?>

っで、スタイルシートに以下を追加。

#sidebar .thumbnail img {
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 5px;
	padding: 5px;
}

これで、最近の投稿にサムネイルが表示されるようになりました。

こんな感じ。

Wordpress の本体をいじるのはあまりよろしくないので素直に YD Recent Posts with thumbnails を使った方が良いと思います。

あくまでお勉強という事で。

でわでわ。






この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.