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