画像のアップロードに関するまとめ : WordPress

Tweet

Pocket

WordPressの画像アップロード機能についてまとめる。

アップロードの基本

WordPressは画像を必ず元のサイズ（フルサイズ)でアップロードする。
またサイズに応じてサムネイル・中サイズ・大サイズの画像をフルサイズのアップロードの際に自動で作成する。

サムネイル・中サイズ・大サイズの設定はダッシュボード [設定] > [メディア]画面で行う。
デフォルトでは以下の値に設定されている。

• サムネイル … 幅 150px, 高さ 150px
• 中サイズ … 中サイズ 幅の上限 300px, 高さの上限 300px
• 大サイズ … 大サイズ 幅の上限 1024px 高さの上限 1024px

例えば元画像のサイズが大サイズより大きいときはサムネイル・中サイズ・大サイズ・フルサイズの計4枚の画像をアップロードする^[1]。

アップロードの具体例

画像サイズの設定がデフォルトの場合に、画像サイズに応じてアップロードされるファイルを下記にまとめる。

元画像がサムネイルより小さい場合

元画像 example.jpg ⇒ アップロード画像 example.jpg(フルサイズ)の計1枚

300pxより小さい場合^[2]

元画像 example ⇒ アップロード画像 example.jpg(フルサイズ), example-150x○○.jpgの計2枚

1024pxより小さい場合

元画像 example ⇒ アップロード画像 example.jpg(フルサイズ), example-150x○○.jpg, example-300x○○.jpgの計3枚

1024pxより大きい場合

元画像 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&#91;0&#93;) . '" />';
      }
?>

アイキャッチ画像

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枚。