WordPressの基本。画像アップロード機能について

WordPressの基本。画像アップロード機能について

エリカ

エリカ

こんにちは、エリカです。

わりと雰囲気で利用しているWordPressの基本機能について、あらためて解説しておきます。

今回は「メディアのアップロード機能」についてです。その中でも特に、画像がアップロードされた時にどういう処理が行われているのか?

よくあるトラブルとその解消法を合わせて見ていきましょう。

指定サイズの画像の作成

まず、画像ファイルをアップロードすると、指定のサイズで画像が自動的に作成されます。

これは「設定メニュー」のメディア設定内で管理されている、サムネイルサイズ、中サイズ、大サイズに指定されているサイズでそれぞれリサイズされます。

初期値は下記のとおりです。 サムネイルサイズが150×150。 中サイズが300×300。 大サイズが1024×1024 (単位はピクセル)。

なので、2048×2048ピクセルの画像をアップロードしてから、アップロードディレクトリを覗いてみると、上記のサイズが付与された画像ファイル名で、それぞれのサイズの画像が作成されているかと思います(実際は上記で指定してない大サイズと中サイズの中間みたいなサイズの画像も作られているかと思いますが、今回は気にしないでおきましょう)。

では、800×800ピクセルの画像をアップロードした場合はどうなるでしょうか? この場合、大サイズの指定サイズを満たさないため画像は作成されません。無理やり引き伸ばして画像が作られるようなことはありません。

よくあるエラー

書き込みできません。

おそらくアップロードディレクトリに書き込みができない状態ですので、パーミッションの設定を見直すといいかもしれません。

HTTPエラー

WebサーバーにNGINXを使っている場合によくあります。PHPでのアップロードサイズの制限は画面上に表示されますが、NGINXにも同じような制限があります。これがPHPの設定を下回っていると、遭遇する可能性が高いエラーです。下記を指定して、PHPの設定より大きいサイズを指定しておきましょう。

client_max_body_size 10M;

アップロードには成功してるようだけど指定サイズの画像が作成されない

GDやImageMagickといった画像編集用のライブラリがサーバーに用意されていないかもしれません。画像のリサイズに必要ですので、サーバー担当者に用意してもらいましょう。

リサイズされた画像の表示

テーマ内でアップロードされた画像へのアクセス方法についてです。

サムネイルを取得する関数群には、だいたいサイズというパラメータを渡すことができます。

ここで指定したパラメータに合わせて、リサイズされた画像を呼び出すことができます。

例えば、サイズに「large」を指定した場合は、大サイズの画像を扱うことができます。では、前述のように大サイズに満たない画像をアップロードして、大サイズが作られていない場合はどうでしょうか? その場合は、指定サイズに最も近いものが割り当てられます。これであれば、フルサイズの画像が表示されることになります。

よくあるトラブル

なんか他と比べてファイル容量が大きい画像が表示されている

フルサイズの画像に比べて、リサイズされた画像は最適化も実施されています。そういった画像に比べると、フルサイズの画像はどうしても容量が大きくなります。なので、できるだけ、リサイズがかかるサイズの画像をアップロードするようにしましょう。テーマで利用する画像のサイズに設定を合わせておくのも大事です。

なんかアップロードする前の画像と色味が違うように見える

GDを利用してリサイズされた画像は、exif情報が取り除かれている可能性が高いです。この場合、カラーの情報などがexifに設定されているとそれが取り除かれてしまうので、exif情報の有無で見た目が変わってしまう場合があります。天地もそうですね。

WP Multibyte Patch有効化のすすめ

日本語版のWordPressであれば、あらかじめインストールされていると思いますが、「WP Multibyte Patch」プラグインは必ず有効化しておきましょう。日本語を含むファイル名をアップロードした場合に、発生する可能性のあるトラブルを未然に防ぐことができますよ。

まとめ

いかがでしょうか? 画像周りはよくわからないことが多いですが、ちゃんと設定しておけるといいですよね。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

ディレクターのエリカです。趣味は美術鑑賞で、絵画や展示などたくさんの作品を眺めるのが好きです。得意料理は「鍋」です。よろしくお願いします。

このメンバーの記事をもっと読む
バックエンドへの道 | 58 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL