[WordPress] サムネイル(アイキャッチ)画像の設定いろいろ

サムネイルを表示させる方法は比較的簡単に見つかったのですが、
alt や title が画像名になってしまい、不恰好だったので、調べてみました。

まず、サムネイルの表示方法から説明します。

1.サムネイルを表示させる

サムネイルとは、上記画像のように、
画像挿入の時に「アイキャッチ画像として使用」をクリックした時に表示される画像です。

上記サイトに詳しく書いてあるのですが、初心者の私が試したところ、
function.php で設定したとおりにならなかったので、別の方法でサイズ指定しています。

とりあえず、function.php に、

add_theme_support( 'post-thumbnails' );

と記載するところまでは、同じです。
(記載箇所はfunction.phpの一番最後でいいと思います。)

次に、set_post_thumbnail_size( 50, 50, true ); を記載してみたところ、上手くリサイズされなかったので、私は下記のようにテンプレート(index.php など)に直接サイズを書きこむ方法にしました。(下記の場合、150×150px)

<?php the_post_thumbnail( array(150,150); ?>

※デフォルトは<?php the_post_thumbnail(); ?>

2.alt、titleを変更する

上記の記述で表示した場合、画像のaltもtitleも画像名がはいります。
(sample.jpgを指定した場合、sampleと表示されます)

「投稿名を入れたい!」と思った人は私だけではないはずです。
日本語サイト見つからなかったから、海外サイトまで探しに行ったよ!
そして、初めて自分でコードいじったよ!成長した(TワT)/

<?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>

$title= get_the_title() が投稿名を取得。
array( ‘alt’ =>$title, ‘title’ => $title) で$titleを出力してます。

参考サイト

The Ultimative Guide For the_post_thumbnail In WordPress 2.9
(ここのサイトのコメントから探して応用しました)

3.サムネイルがなかった場合、デフォルト画像を表示させる

画像って毎回準備するのは面倒なもの。
サムネイル画像が無い時に、勝手に表示してくれる機能は下記の記述で実現できます!

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="common/img/no_thumb.jpg" alt="no image" title="no image" width="150" height="150" />
<?php endif; ?>
Post to Google Buzz
このエントリーをはてなブックマークに追加
はてなブックマーク - [WordPress] サムネイル(アイキャッチ)画像の設定いろいろ
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

Wordpress

コメントを残す

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

*

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

Spam Protection by WP-SpamFree