「最近の投稿」を画像つきにしてみた

「最近の投稿」を画像つきにしてみました。最初は画像だけ並べようと思ったけど、やっぱりタイトルも欲しいなと思ってこのレイアウトになりました。忘れないようにメモしておきます。WordPressはいろいろカスタマイズできて楽しい。

まず、「Executable PHP widget」というプラグインをインストールして、ウィジェットでPHPを実行できるようにしました。詳しい使い方はググれば出てくるので省略。

以下のようなコードを入れました。PHPは初心者レベルなので、見た目のスマートさには目を瞑る。

<ul>
<?php query_posts('showposts=8');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(80,80)); ?>
<?php echo ' '; ?>
<?php the_date('n/j'); ?>
<?php echo ' '; ?>
<?php the_title(); ?>
</a>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>

(追記)新規記事立てるほどじゃないのでここに追記しますが、絵は左に、タイトルは右に段組になるように修正しました。ソースは以下。右側にはfloatを設定しないのがポイント。最後のbrはエレガントじゃない気がするけどまあいいか。あと、 the_date() は同じ日付に複数記事がある場合最初の1回しか出力されないようなので、代わりに the_time() を使う。

<ul>
<?php query_posts('showposts=8');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li style="clear: both;">

<div style="float: left; width: 80px; margin-right: 10px;">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(80,80)); ?>
</a>
</div>

<div style="line-height: 1.4em;">
<a href="<?php the_permalink(); ?>">
<?php the_time('n/j'); ?>
<br>
<?php the_title(); ?>
</a>
</div>

</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>

<br style="clear: both;">

これで最新8記事のアイキャッチ画像とタイトルが並ぶようになりました(下の画像を参照)。普通に画像を挿入しただけではダメで、アイキャッチ画像もあわせて設定する必要があります。できればアイキャッチ画像を設定しなくても記事中の最初の画像が出るようにしたいけど、最初からあまりややこしいのに挑戦するのは避けたいのでこれで。全部の記事にアイキャッチ画像を設定しなきゃ統一感がなくなっちゃうのが難点と言えば難点か。

絵は全然関係ないジャンスカ少女です。ジャンスカはあまり描いたことがないので要研究。