WordPress特集 - カスタム画像サイズの登録

メディアライブラリに画像をアップロードすると、サムネイルサイズや中サイズなど、複数のサイズの画像が自動生成されます。自動生成する画像サイズは、WordPress 標準で決められたサイズの他に追加することができます。

【記事執筆時の環境】
WordPress 5.8

【参考ページ】
Codex 日本語版 - 関数リファレンス/add image size
Code Reference | add_image_size

【参考記事】
WordPress特集 - メディアライブラリ
WordPress特集 - メディア設定

カスタム画像サイズを追加する

functions.php に関数 add_image_size() を使ってコードを記述します。書式は下記になります。

add_image_size( $name, $width, $height, $crop )

下記は3つの画像サイズを追加するコード例です。

small-banner の高さには 9999 を設定していますが、これは制限なしという意味です。これで small-banner は幅の値だけが固定されます。また初期値の 0 でも同様になりますので、9999 は省略しても構いません。

vga と square の第4引数は true にしていますので、指定したサイズで切り抜きを行います。通常は画像の中央位置で切り抜きますが、配列でXポジションとYポジションを指定し、切り抜く位置を指定することができます。

ブロックエディターで画像の選択リストに表示する

画像サイズを追加しても、追加したサイズはブロックエディターで編集時に選択できません。下記コードを functions.php に記述することで、追加した3つのサイズが画像の選択リストに表示されるようになります。

サイズが追加された画像選択リスト

«次の特集記事»
«前の特集記事»

スポンサーリンク

WordPress 特集記事

WordPressの概要

WordPressの仕組み

WordPressのカスタマイズ性

制作環境とインストール

基本設定項目

追加設定項目

Gutenbergエディター

具体的な制作作業

応用・高度機能

実践的なTips

よく使われるテーマ紹介

有用なプラグイン紹介

独自テーマによる制作

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ