このサイトはWordpressのテンプレートを作成して紹介したり、自分の好きなテーマを紹介するためのサイトです。テーマの紹介ですからサイトのイメージをサムネイルで見せたいのでトップページに手動で追加していました。

ただもう手動でやるのがだんだんめんどくさくなってきたので自動出力に変更しました。トップページにて確認してもらうとわかるのですが下記のようにテンプレートの画像が一覧表示されてます。もちろんタイトルなども出力できますので不動産サイトを作るときには便利かもしれません。

このサイトの元テーマはWordPressビジネス用テンプレートセット001です。フリー素材屋Hoshinoさんデザインのテーマだと下記の追加ソースコードはそのまま使えると思いますが、その他のテーマだと若干の変更が必要です。

index.phpに追加したコード

<div id=”henoji”>
<h2>WordpressでWebサイトを作ろう！<span>最新リリースのWordPressテンプレート！日本語テーマです。</span></h2>
<?php
$posts = get_posts(‘numberposts=12&category=1‘);
global $post;
?>
<?php
if($posts): foreach($posts as $post): setup_postdata($post); ?><div class=”box4″><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php get_thumbnail($post->ID, ‘thumbnail’, ‘alt=”‘ . $post->post_title . ‘”‘); ?></a></div>
<?php endforeach; endif;
?>
<div class=”btn_s”><a href=”<?php bloginfo(‘url’); ?>/category/theme”>＞＞テーマ一覧はコチラ</a></div>
</div>

※赤色の数字の箇所は変更してください。numberposts=12は、12記事の画像を表示するということですので10記事の画像を表示したい場合は10に変更してください。category=1は、カテゴリのIDです。表示させたいカテゴリのIDを入力してください。

CSSに追加したコード

#content #henoji{
margin-top: 1px;
margin-bottom: 15px;
border: 1px solid #D8D8D3;
background-image: url(img/side_inbox.gif);
background-repeat: repeat-x;
background-position: bottom;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#content .box4 {
text-align: center;
width: 160px;
float: left;
margin: 5px;
background-color: #ffffff;
}

.box4 a img {
background-color: #FFFFFF;
padding-top: 2px;
padding-right: 1px;
padding-bottom: 2px;
padding-left: 1px;
border: 1px solid #E2DBCD;
}
.box4 a:hover img {
border-right-color: #D7C693;
border-bottom-color: #D7C693;
border-left-color: #D7C693;
}
#content .box4:hover {
border-top-color: #D7C693;
border-right-color: #D7C693;
border-bottom-color: #D7C693;
border-left-color: #D7C693;

}

これから現在の配布テーマをバージョンアップしたり新しいテーマをリリースしたり頻繁に行う予定なのでちょっと楽になりました。

もしこの記事を読まれて実際にやってみて表示されないなどの問題がありましたらお気軽にコメントまで！