WordPressのアイキャッチのサイズ指定色々

アイキャッチを表示する画像サイズの指定方法と、複数の画像サイズを指定する方法です。

アイキャッチサイズ基本設定

<?php set_post_thumbnail_size($width,$height,$crop); ?>

$width 横サイズ
$height 縦サイズ
$crop false→長いサイズの方でリサイズ(縮小する) true→指定のサイズで中心部分を切り抜き
function.phpへ記入します。

横600px縦180pxの切り抜きでアイキャッチ画像をつくる指定をfunction.phpへ記入

<?php add_theme_support('post-thumbnails');
//アイキャッチを有効にする
set_post_thumbnail_size('600,180,true'); ?>
//横600px縦180pxの切り抜きでアイキャッチをアップロードする設定

表示するアイキャッチを指定する

指定のidのポストの(そのポストidの)アイキャッチを表示するにはget_the_post_thumbnail

<?php echo get_the_post_thumbnail( $id, $size, $attr ); ?>
//$id  投稿 ID(必須)
//$size  画像サイズ。何も指定しないとサムネイルのサイズ(小サイズ)
//$attr 基本アップロードサイズ以外のサイズを指定。array(100,100)など

現在開いてる記事のアイキャッチを表示するには表示したい場所へ下記を記入します。

<?php echo get_the_post_thumbnail($post->ID); ?>

アイキャッチを複数のサイズでアップロードする

1.画像アップロード時に生成される小中大サイズでアイキャッチを表示する。

小中大のサイズの画像はアップロード時に自動的に生成されているので、表示したいテンプレートに下記のように記入します。

//小サイズ↓
<?php the_post_thumbnail('thumbnail'); ?>
//中サイズ↓
<?php the_post_thumbnail('medium'); ?>
//大サイズ↓
<?php the_post_thumbnail('large'); ?>

2.アップロード時の小中大サイズ以外のサイズでアイキャッチを表示

add_image_size()を使います。

<?php add_image_size($name,$width,$height,$crop); ?>

$name, 名前
$width, 横サイズ
$height, 縦サイズ
$crop 切り抜きモード(true)かリサイズ(false)か

■200px200pxと100px100pxのサイズと通常サイズのアイキャッチ画像をつくる

function.phpへ下記のように記入します。

<?php add_theme_support('post-thumbnails');
//アイキャッチを有効にする
set_post_thumbnail_size(500,500);
//アイキャッチの基本サイズ設定
add_image_size('size1',200,200);
add_image_size('size2',100,100);
//size1とsize2のサイズを作る設定
?>

テンプレートの表示したい場所へ下記のコードを記入します。

<?php echo get_the_post_thumbnail($post->ID, 'size1'); ?>
//サイズ1を表示
<?php echo get_the_post_thumbnail($post->ID, 'size2'); ?>
//サイズ2を表示

Related Article

2 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS