忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ワードプレスでアイキャッチ画像は使ってますか? 私は80%の割合で使用しています! 使い方はサイトによって様々ですが、主に投稿のタイトル画像にしています。 アップする画像のサイズはデジカメで撮った写真や携帯で撮った写真、サイズがバラバラだと思いますが表示させる場所には指定したサイズにアップしたい! そんな時に、画像サイズをリサイズしてくれるコードのメモ書きです。

アイキャッチ画像を表示させる為のコード

まずはfunction.phpにアイキャッチを表示させる為のコードを記述
1 //アイキャッチ画像を使用する
2 add_theme_support('post-thumbnails');
3  
4 //サイズを指定して切り抜きをする(縦:100px 横100px)
5 set_post_thumbnail_size(100, 100, true);
6  
7 //サイズを指定してリサイズさせる(縦:100px 横100px)
8 set_post_thumbnail_size(100, 100);
サイズを指定して切り抜きする場合は 画像の中心からサイズを測って切り取ってくれます。
リサイズさせる場合は、アップした画像の比率に合わせてリサイズされるので 指定したサイズの縦か横のどちらかで足りない状態で表示されます。

表示させたい場所に設定

アイキャッチ画像を表示させたい箇所に以下を書きます。
1 //投稿させたい箇所に以下を書く▼
2  
3 <?php the_post_thumbnail();?>

サイズをリサイズする場合

また、以下のようなパラメータを渡すことができます! ループ内に記述してください。
01 //画像を縦横150pxにリサイズする場合
02  
03 <?php the_post_thumbnail(array(150,150)); ?>
04  
05 //管理画面で設定したサイズを使う場合
06  
07 //サムネイル
08 <?php the_post_thumbnail('thumbnail'); ?>
09  
10 //中サイズ
11 <?php the_post_thumbnail('medium'); ?>
12  
13 //大サイズ
14 <?php the_post_thumbnail('large'); ?>

アイキャッチ画像が無い場合にサンプル画像を表示させる場合

必ずしもアイキャッチがあるとは限らないですよね。 無かった時はもちろん画像が出ないわけでレイアウトも崩れてしまう。 なので、私はいつも以下を使います。 アイキャッチが無い場合も想定して、 ある時は画像を表示させ 無い時は用意しておいた画像を表示させます。 ついでにaltもtitleも設定できます! 150pxでリサイズして title属性、ali属性も書き出し、画像が無い場合は他の画像を表示させる方法
1 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
2 <?php
3 $title= get_the_title();
4 the_post_thumbnail(array( 599,599 ),
5 array'alt' =>$title'title' => $title)); ?>
6 <?php else// サムネイルを持っていないときの処理 ?>
7  
8 <?php endif; ?>
これでスッキリ! いちいち管理画面でサイズを設定しなくっても アイキャッチさえアップすれば思い通りのレイアウトで記事が書けます。 画像はSEO的にもあったほうが良いと言われています。 是非積極的にアイキャッチ画像を使いましょ0!!!
この記事にコメントする
name
title
color
mail
URL
comment
pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (チェックを入れると管理人だけに表示できます)
ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
12 2017/01 02
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]