WordPressの画像アップロード機能についてまとめる。
WordPressは画像を必ず元のサイズ(フルサイズ)でアップロードする。
またサイズに応じてサムネイル・中サイズ・大サイズの画像をフルサイズのアップロードの際に自動で作成する。
サムネイル・中サイズ・大サイズの設定はダッシュボード [設定] > [メディア]画面で行う。
デフォルトでは以下の値に設定されている。
例えば元画像のサイズが大サイズより大きいときはサムネイル・中サイズ・大サイズ・フルサイズの計4枚の画像をアップロードする[1]。
画像サイズの設定がデフォルトの場合に、画像サイズに応じてアップロードされるファイルを下記にまとめる。
元画像 example.jpg ⇒ アップロード画像 example.jpg(フルサイズ)の計1枚
元画像 example ⇒ アップロード画像 example.jpg(フルサイズ), example-150x○○.jpgの計2枚
元画像 example ⇒ アップロード画像 example.jpg(フルサイズ), example-150x○○.jpg, example-300x○○.jpgの計3枚
元画像 example ⇒ アップロード画像 example.jpg(フルサイズ), example-150x○○.jpg, example-300x○○.jpg, example-1024x○○.jpgの計4枚
WordPress 3.xは画像を表示するための関数を用意している。画像操作関連まとめ | WordPress入門記を参考にしてwp_get_attachment_imageについて記載する。
» Function Reference/wp get attachment image « WordPress Codex
ある投稿($post->ID)におけるアップロード画像をフルサイズ(full)で表示するコード。
<?php $files = get_children('post_parent=' . $post->ID . '&post_type=attachment&post_mime_type=image&orderby=ID&order=ASC'); $keys = array_keys($files); foreach($keys as $key){ $file = wp_get_attachment_image_src($key, 'full'); echo '<img src="' . clean_url($file[0]) . '" />'; } ?>
WordPress 3.xはアイキャッチを指定することができる。アイキャッチ画像に設定した画像の表示はテンプレートタグthe_post_thumbnail [3]が用意されている。
アイキャッチ画像を利用するにはfunction.phpに下記の記述を行う。
add_theme_support( 'post-thumbnails') ); set_post_thumbnail_size(100,100);
1行目はアイキャッチ画像を有効にする処理。2行目はアイキャッチ画像のサイズを設定。アイキャッチ画像を有効にするとアップロードの際にアイキャッチ画像も自動で作成される。元ファイルがexample.jpgの場合は上記の例だとexample-100×100.jpgというファイルがアップロードされる[4]。
» You are here: Home / WordPress 2.9 の新機能の投稿サムネイル画像の使い方WordPress 2.9 の新機能の投稿サムネイル画像の使い方
<?php the_post_thumbnail(); ?>
» テンプレートタグ/the post thumbnail – WordPress Codex 日本語版
the_post_thumbnailを引数なしで呼び出すとfunction.phpのset_post_thumbnail_size(100,100)
で設定したサイズの画像を表示する。
<?php the_post_thumbnail(); ?>
下記のように引数を指定して呼び出すこともできる
the_post_thumbnail('thumbnail'); // ダッシュボード [設定] > [メディア]で指定したサムネイル the_post_thumbnail('medium'); // ダッシュボード [設定] > [メディア]で指定した中サイズ the_post_thumbnail('large'); // ダッシュボード [設定] > [メディア]で指定した大サイズ the_post_thumbnail( array(100,100) ); // 他のサイズ
» テンプレートタグ/the post thumbnail – WordPress Codex 日本語版
[1] 後述のアイキャッチ画像を利用する場合はアイキャッチ画像もアップロードする。
[2] 本記事では横長の画像を想定する。○○は縦の長さ。
[3] the_post_thumbnailは関数名にthumbnailがついているので紛らわしいがアップロードする時の画像サイズ「サムネイル」の画像を取得するものではなくアイキャッチとして設定した画像を取得する関数。
[4] 1024×1024より大きい画像example.jpgをアイキャッチに設定した場合、サーバに保存される画像は example.jpg(フルサイズ), example-100x○○.jpg, example-150x○○.jpg(サムネイル), example-300x○○.jpg(中サイズ), example-1024x○○.jpg(大サイズ)の計5枚。
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。
良い記事をありがとうございます。
勉強になりました!!
コメント by まだまだ勉強中… — 2011-06-24 @ 10:07 AM
まだまだ勉強中さん
コメントありがとうございます。そう言って頂けると励みになります。
コメント by findxfine — 2011-06-25 @ 3:21 PM