Quantcast
Channel: うつしよ »カスタマイズ
Viewing all articles
Browse latest Browse all 3

複数サイズのサムネイル(アイキャッチ画像)を表示させる方法

0
0

WordPress のアイキャッチ画像を使用して、表示箇所 (個別記事、固定ページなど) に応じて、画像サイズの異なるサムネイルを表示させる方法。

◆導入方法(基本的な使い方)

1.テーマの functions.php ファイルに下記のコードを追加。

[PHP]add_theme_support( ‘post-thumbnails’ );[/PHP]

2.次にサムネイルの大きさを設定するため、下記のコードを追加する。

[PHP]set_post_thumbnail_size( $width, $height, $crop_flag );[/PHP]

  • width : 画像の幅
  • height : 画像の高さ
  • crop_flag : 切り抜きモードの指定。「true」を指定すると、設定した縦横比で切り抜かれ、画像サイズの大きさに合わせて縮小される。
    「指定なし(記入なし)」の場合は、リサイズモードになり、設定した縦横比と異なる画像を縮小した時に、サムネイルの幅高さどちらかのサイズに足りなくなる。

[PHP]set_post_thumbnail_size( 100, 100, true ); // 切り抜き[/PHP]

[PHP]set_post_thumbnail_size( 100, 100 ); // リサイズ[/PHP]

palasol 元画像

元画像

palasol 切り抜きモード

切り抜きモード

palasol リサイズモード

リサイズモード

 

 

 

 

3.サムネイルを表示したいテンプレートのループ内に下記のコードを記入。

[PHP]<?php the_post_thumbnail(array(100,100)); ?>[/PHP]

 

4.サムネイルが無い場合に表示される画像ファイルを指定する場合。
サムネイルが無い場合に表示される画像ファイル( no_image.jpg )を テーマの「images フォルダ」 にアップロードしておく。画像ファイルは上記で指定したサイズ(100 x 100)で用意する。
※サムネイルの無い場合に表示される画像ファイル名は、必要に応じて適宜変更してください。

サムネイルを表示したいテンプレートのループ内に下記のコードを記入。
※サムネイルは左寄せになっているので、必要のない場合は削除してください。

[PHP]<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail(array(100,100), array(‘class’ => ‘alignleft’)); ?>
<?php else : ?>
<img src=”<?php bloginfo(‘template_url’) ?>/images/no_image.jpg” alt=”no_image” />
<?php endif; ?>[/PHP]

 

◆複数サイズのサムネイルを表示

1.テーマの functions.php ファイルに下記のコードを追加。

[PHP]add_image_size( $handle, $width, $height, {$hard_crop_switch} ) [/PHP]

  • handle : ハンドル(サムネイル画像サイズの名前)
  • width : 画像の幅
  • height : 画像の高さ
  • hard_crop_switch : 切り抜きモードの指定。

[PHP]set_post_thumbnail_size( 100, 100, true ); // 通常のサムネイル
add_image_size( ‘medium_thumbnail’, 150, 150, true ); // 個別記事、固定ページでのサムネイル[/PHP]

2.サムネイルを表示したいテンプレートのループ内に下記のコードを記入。

[PHP]<?php the_post_thumbnail( ‘medium_thumbnail’ ); ?>[/PHP]

 

※既存の画像(アップロード済み画像)についてはサムネイルは作成されないので注意。
サムネイルを再生成する必要がある場合は、「 Regenerate Thumbnails (Viper007Bond) 」プラグインを使用するといいようだ。

 

 


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images