どや!?サイドバー「最新の投稿」にサムネイル画像の出し方

02 9月

  • このエントリーをはてなブックマークに追加

サイドバー「最新の投稿」にサムネイル画像の出し方

いつも参考にさせていただいているブログ「NewsClipping」に憧れて、サイドバーにサムネイル画像を出してみました。
投稿する度にサムネイル画像を作るのが面倒なため、記事の一番最初の画像を掲載する方法で作業したのでご紹介。
 

①プラグインの準備
ワードプレスプラグインの Post Thumb Revisited をダウンロード。
いつも通り、解凍して wp-content/plugin/ にアップロードします。

プラグインの管理画面から、
・Post Thumb Revisited
を有効化してください。
 
 
②Post Thumb Revisited を設定
設定から POST Thumb を選択します。
Basic options から、自動でサムネイルを保存する場所を設定します。

Post Thumb Revisited を設定

この画像はGoogleGhromeで自動翻訳したものです。
重要なのは、この3つ。

■Base path
自分のサイトのrootからのパスの指定。
デフォルトのままで大丈夫だと思います。

■Full domain name
ドメイン名です。こちらもそのままで大丈夫です。

■Folder name
これはサムネイルを自動生成したら格納されるディレクトリの指定。
このサイトの場合は、「wp-content/uploads/pth」としました。
ここを設定したら、該当のディレクトリにフォルダを作成します。
 
 
③サイドバー(sidebar.php)の表示させたい場所に以下を記述

<dt>最近の投稿</dt>
<dd>
	<?php $posts = get_posts('numberposts=5'); ?>
	<ul>
		<?php foreach($posts as $post): ?>
		<li> 
		<?php the_thumb('link=p&altappend=main_&width=50&height=50'); ?>
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
		<span><?php the_title(); ?></span>
		</a>
		</li>
		<?php endforeach; ?>
	</ul>
</dd>

最新の投稿が5件、サムネイルサイズは50×50px を表示されます。

サイドバーのサムネイル画像
 
 
全て自動でやってくれるので、今後の運用が楽になりますね。
見栄えもガラッと変わって、クリックしてもらえそうです。
皆さんもイメチェンしてみてはいかがでしょうか?
 

トラックバック

  1. WordPress3.0に移行!Twenty Tenテーマをカスタマイズ…

    一月程前に、Wordpress3.0に移行しました。 現在は3.0.1-jaになっています。 アップデートするにあたり、これまでのデータやテーマなどにいろいろと支障があるのか不安でしたが、まったく問題なくあっさり 完了。 いくつかのサイトで試してみましたが、大丈夫そうですね。 WordPress3.0のデフォルトのテーマは「Twenty Ten」というものに変わっています。 これまで、このブログはWordpressのデフォルトテーマを使っていましたが、変わってしまったので、「Twenty Ten」で…


  2. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

コメントを残す

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


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL