Natural Touring

<?php the_post_thumbnail(); ?>のままだと、img要素がないので、cssでいろいろできない。
これでは不便なので、クラスを付けて表示させるようにしてみる。

タグはこちら
<?php
$thumb = get_the_post_thumbnail($post->ID);$pattern= “/(?<=src=[‘|\”])[^’|\”]*?(?=[‘|\”])/i”;
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];
if($thumb == ”){echo ‘<img class=”thumb” src=”http://www.*******.com/wp-content/uploads/noimage.jpg” />’;
} else {
echo ‘<img class=”thumb” src=” ‘.$theSrc.’ ” “Align=”left”/>’;
}
?>

赤字の部分はアイキャッチ画像がないときに表示する画像。 uploadsに好きな画像を入れればOK。「noimage.jpg」はその画像の名前に置き換える。URLも環境に合わせて変えて下さい。

アイキャッチ画像がないときになにも画像を表示させないのなら、この赤い部分を消せばなにも表示されなくなる。

後はCSSでimg.thumbを指定してレイアウトを整える。この他にもaタグで囲んだり、ulタグでいろいろできますね。

とりあえずはこれで終了です。

さて、前回アイキャッチ画像を利用したサムネイル、タイトル、本文の一覧を表示させましたが、このままではこの一覧からリンクされていないので、今回はリンクを張ってみます。

といっても難しいことはなく、URLを呼び出すコードの<?php the_permalink() ?>を使うだけ。これを使って、例えばタイトルをaタグで囲めばOK。

<a href=”<?php the_permalink() ?>”><?php the_title() ?></a>
こんな感じ。

あとはリンクを付けたいものを同様にaタグで囲むか、上のaタグの中に一緒に入れちゃうか。

こんな感じです。

トップページなどにサムネイル付の投稿一覧を作りたくて色々調べてみた。
例によって自分のための備忘録。

ネットをいろいろ彷徨って調べたのでどのHPか失念してしまいましたが、教えてくれた方々に感謝！

さて、WordPress3.0には「アイキャッチ画像」という機能があり（2.9のときは投稿サムネイル）、これを使って投稿一覧を作っていきます。

まずは、functions.phpに
<?php
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 100, 100, true );
?>
を追加。
100, 100,は画像のサイズなので好きな大きさにして下さい。また、trueは切り抜き、falseにすればリサイズ。

次に、投稿一覧を置きたい場所に下記のコードを挿入。

<?php
$posts = get_posts( “numberposts=5&category=3&orderby=post_date&offset=0” );
foreach ($posts as $post):
setup_postdata($post);
?>

<?php endforeach; ?>

numberposts=5は表示する記事の数。これを変えることで表示数を変えられる。
category=3は表示したいカテゴリーID。すべてのカテゴリーを表示したければ、数字を消す。

あとは<?php endforeach; ?>の上の空いている行に次のコードを挿入していく。
サムネイル表示：　<?php the_post_thumbnail(); ?>
タイトル表示：　　<?php the_title() ?>
記事本文表示：　　<?php the_content(); ?>

これで基本は終わり。一覧が表示されているはずですが、このままではリンクも張られていないし、CSSでいろいろできないので次は応用をやっていきます。