WordPress
アイキャッチ画像を自動的にリサイズする方法！
2012.06.04
ワードプレスでアイキャッチ画像は使ってますか？
私は80%の割合で使用しています！
使い方はサイトによって様々ですが、主に投稿のタイトル画像にしています。
アップする画像のサイズはデジカメで撮った写真や携帯で撮った写真、サイズがバラバラだと思いますが表示させる場所には指定したサイズにアップしたい！
そんな時に、画像サイズをリサイズしてくれるコードのメモ書きです。
アイキャッチ画像を表示させる為のコード
まずはfunction.phpにアイキャッチを表示させる為のコードを記述
//アイキャッチ画像を使用する
add_theme_support('post-thumbnails');
//サイズを指定して切り抜きをする(縦：100px 横100px)
set_post_thumbnail_size(100, 100, true);
//サイズを指定してリサイズさせる(縦：100px 横100px)
set_post_thumbnail_size(100, 100);
サイズを指定して切り抜きする場合は
画像の中心からサイズを測って切り取ってくれます。
画像の中心からサイズを測って切り取ってくれます。
リサイズさせる場合は、アップした画像の比率に合わせてリサイズされるので
指定したサイズの縦か横のどちらかで足りない状態で表示されます。
指定したサイズの縦か横のどちらかで足りない状態で表示されます。
表示させたい場所に設定
アイキャッチ画像を表示させたい箇所に以下を書きます。
//投稿させたい箇所に以下を書く▼ <?php the_post_thumbnail();?>
サイズをリサイズする場合
また、以下のようなパラメータを渡すことができます！
ループ内に記述してください。
//画像を縦横150pxにリサイズする場合
<?php the_post_thumbnail(array(150,150)); ?>
//管理画面で設定したサイズを使う場合
//サムネイル
<?php the_post_thumbnail('thumbnail'); ?>
//中サイズ
<?php the_post_thumbnail('medium'); ?>
//大サイズ
<?php the_post_thumbnail('large'); ?>
アイキャッチ画像が無い場合にサンプル画像を表示させる場合
必ずしもアイキャッチがあるとは限らないですよね。
無かった時はもちろん画像が出ないわけでレイアウトも崩れてしまう。
なので、私はいつも以下を使います。
アイキャッチが無い場合も想定して、
ある時は画像を表示させ
無い時は用意しておいた画像を表示させます。
ついでにaltもtitleも設定できます！
150pxでリサイズして
title属性、ali属性も書き出し、画像が無い場合は他の画像を表示させる方法
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php $title= get_the_title(); the_post_thumbnail(array( 599,599 ), array( 'alt' =>$title, 'title' => $title)); ?> <?php else: // サムネイルを持っていないときの処理 ?> <?php endif; ?>
これでスッキリ！
いちいち管理画面でサイズを設定しなくっても
アイキャッチさえアップすれば思い通りのレイアウトで記事が書けます。
画像はSEO的にもあったほうが良いと言われています。
是非積極的にアイキャッチ画像を使いましょ〜！！！
