WordPressでカスタム画像サイズを追加する方法

公開: 2020-12-29

カスタマイズした画像サイズをサイトに含めますか？ あなたは正しい場所に来ました。 このチュートリアルでは、WordPressでカスタム画像サイズを追加し、既存の画像サイズに変更を加える方法を紹介します。

デフォルトのWordPress画像サイズは何ですか？

デフォルトでは、すべてのWordPressインストールには3つのカスタムイメージサイズが付属しています。

  • サムネイル– 150 * 150
  • 中– 300 * 300
  • 大– 1024 * 1024

これは、画像をサイトにアップロードすると、コアがそれらのサイズのコピーを自動的に作成することを意味します。 ただし、これらのディメンションがサイトに必要なディメンションではない場合があります。

デフォルトの画像サイズを変更する理由

WordPressが提供するデフォルトの画像サイズは標準ですが、異なる画像サイズが必要になる場合があります。 この場合、カスタムのものを作成する必要があります。 これを行うには、ほとんどの初心者が画像を自分のサイトにアップロードし、WordPressのネイティブサイズ変更機能を使用してフロントエンドの画像のサイズを調整します。

ただし、すべての画像に対して実行する必要がある場合、これは効率的ではありません。 そのため、カスタム画像サイズを追加すると、時間を大幅に節約できます。 このガイドでは、WordPressに新しい画像サイズを含める方法を説明します。これにより、サイトに画像をアップロードするたびに、WordPressは、追加の作業なしで、必要なすべての異なるサイズに画像を自動的に変換します。

一方、サーバースペースを節約する必要のないデフォルトの画像サイズを削除することもできます。 その方法を知っている場合は、このガイドを確認してください。

注：一部のWordPressテーマにはすでにカスタム画像サイズが付属しているため、登録する予定の新しいサイズがまだ利用できないことを確認してください。

デフォルトのWordPress画像サイズを変更する方法

WordPressに含まれているデフォルトの画像サイズをすべて使用しない場合は、新しいサイズを追加する代わりに、それらのサイズを変更できます。 そして、良いニュースは、追加のプラグインやカスタムコードを使用せずにこれを実行できることです。

WordPress管理ダッシュボードで、 [設定]> [メディア]に移動します。 そこで、3つのデフォルトの画像サイズのサイズを変更できます。 ワードプレスのメディア設定

変更する画像サイズに必要な幅と高さを入力するだけです。 たとえば、中サイズの画像を500 * 500pxに変更するとします。 対応するフィールドに新しい値を追加し、[変更を保存]ボタンをクリックします。 新しい画像サイズ

必要に応じて、すべてのデフォルトサイズまたは特定のサイズを変更できます。 WooCommerceショップまたはWordPressサイトにカスタム画像サイズを追加した後、変更を保存し、サムネイルの再生成を検討してください。

WordPressでカスタム画像サイズを追加する方法

デフォルトのサイズを変更する代わりに、WordPressでカスタム画像サイズを追加する場合は、2つのオプションがあります。

  1. 手動で
  2. プラグイン付き

このセクションでは、ニーズとスキルに最適な方法を選択できるように、両方の方法について説明します。

1）カスタム画像サイズを手動で追加する

数行のPHPを使用すると、WordPressサイトにカスタム画像サイズを追加できます。 一部のコアファイルを編集するため、開始する前に、子テーマを作成してサイトの完全バックアップを生成することをお勧めします。 このデモでは、Child ThemifyWordPressプラグインを使用します。

ChildThemifyをインストールしてアクティブ化する

WordPressダッシュボードで、[プラグイン]セクションに移動し、サイトにChildThemifyプラグインをインストールしてアクティブ化します。

子を追加するthemify

カスタム画像サイズの追加

次に、 [外観]> [テーマエディター]に移動します。 ワードプレステーマエディター

デフォルトでは、テーマエディタはstyle.cssファイルをロードしますが、カスタム画像サイズを追加するには、子テーマのfunctions.phpを選択する必要があります。

Functions.phpファイル

fuctions.phpファイルを開いたら、次のコードを貼り付けます。

 add_theme_support( 'post-thumbnails' );

この単純なスクリプトは、インストールでadd_image_size関数を有効にします。 これがないと、追加の画像サイズを作成できません。 コードを貼り付けたら、 [ファイルの更新]ボタンを押します。

WordPressにカスタム画像サイズを追加-functions.phpを更新

ウェブサイトでこの機能を正常に有効にしました。 次に、好みのカスタム寸法を追加する必要があります。 そのために、次のコードを使用します。

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

下の画像をよく見ると、含める各カスタムサイズの名前と寸法が追加されていることがわかります。 必要に応じて名前とサイズを変更するだけです。 コードをカスタマイズしたら、 functions.phpファイルに貼り付けて、ファイルを更新します。

WordPressにカスタム画像サイズを追加-カスタム画像サイズを追加

それでおしまい！ WordPressサイトにカスタム画像サイズを正常に追加しました。

これで、画像をアップロードしてサイズオプションをチェックするたびに、WordPressが新しいカスタムサイズで画像のコピーを作成することがわかります。 さらに、サムネイルの再生成プラグインを使用して、画像のサムネイルを作成できます。

WordPressにカスタム画像サイズを追加-カスタム画像サイズを追加

2）プラグインを使用してカスタム画像サイズを作成する

テーマのコアファイルを編集したくない場合は、プラグインを使用してカスタム画像サイズを追加できます。 関数.phpファイルを編集する代わりに、2つの異なるツールを使用してカスタムコードを追加します。

  1. コードスニペット
  2. 画像の再生成と切り抜きの選択。

方法1：コードスニペット

コードスニペットのインストールとアクティブ化

まず、WordPressダッシュボードで[プラグイン]> [新規追加]に移動します。 コードスニペットを検索し、インストールしてアクティブ化します。 コードスニペットワードプレスプラグイン

次に、スニペット設定に移動します。

カスタムスニペットの追加

新しいカスタム画像サイズを追加するには、新しいスニペットを作成する必要があります。 新しいスニペットが追加されました

そのためには、次のコードを使用して、必要に応じて名前とサイズを調整できます。

 add_theme_support（ 'サムネイル後'）;

add_image_size（ 'サムネイル後のサイズ'、800、240）;
add_image_size（ 'ホームページ-親指のサイズ'、220、180）;
add_image_size（ 'fullpage-thumb size'、590、9999）;

スニペットセクションにコードを追加したら、保存します。

コードの確認

すべてが正しく機能することを確認するには、アクティブな画像サイズを確認してください。

新しい画像サイズを追加する

上のスクリーンショットでわかるように、WordPressは追加したばかりのカスタム画像をすでに認識しています。 この方法には少しコーディングが必要ですが、テーマファイルを編集する必要はありません。 さらに、コードスニペットは、子テーマを作成したり、既存のファイルを変更したりせずに、サイトにコードを挿入するための優れた選択肢です。

方法2：画像の再生成と切り抜きの選択

Image Regenerate＆Select Cropは、画像の再生成とトリミングに役立つもう1つの優れたプラグインです。

画像の再生成と選択した切り抜きのインストール

まず、サイトにImage Regenerate＆SelectedCropをインストールしてアクティブにします。 画像クロッパープラグイン

カスタム画像サイズの追加

プラグインをアクティブ化したら、 [設定]> [メディア]に移動します。 フッターには、カスタム画像サイズを追加するための新しいオプションが表示されます。 新しい画像サイズを追加する 新しいカスタムサイズに名前を付け、幅、高さを入力して、切り抜きオプションを選択するだけです。 このデモでは、新しいサイズのテストイメージを呼び出します。 新しいテスト画像 このプロセスを繰り返して、必要な数の画像サイズを追加します。 新しい画像サイズを追加する 一方、追加した画像サイズを削除する必要がある場合は、名前をクリアして変更を保存するだけです。

最終検証

必要な画像サイズを追加したら、サムネイルの再生成設定からWordPressに正しく追加されていることを確認する必要があります。 テスト画像を追加 上記のように、テスト画像が設定に表示されます。これは、テスト画像がサイトに正常に追加されたことを意味します。

画像の再生

さらに、新しいカスタムサイズで古い画像を再生成できます。 これを行うには、 [画像の再生成]に移動し、[切り抜き]> [一般設定]を選択します。 画像を再生する

このプラグインの優れた点の1つは、追加の画像再生プラグインに依存する必要がないことです。 Image Regenerate＆Select Cropは、新しい画像サイズの作成と画像の再生成の両方を処理します。

ボーナス：画像サイズマネージャー

無料のツールの代わりにプレミアムソリューションを好む場合は、Image SizesManagerをチェックしてください。 この手頃な価格のプラグインは13米ドルで、生涯ライセンスと6か月のプレミアムサポートを提供します。

画像サイズマネージャー

他のプラグインと同様に、テーマファイルを編集したりコードを追加したりすることなく、カスタム画像サイズを作成できます。 さらに、ショートコードを使用してトリミングされた画像を表示できます。 このプラグインの良いところは、サイトに画像サイズを追加しないため、WordPressが追加の画像を生成しないため、サーバーのディスク容量を節約できることです。

サムネイルの再生

WordPressサイトでカスタム画像サイズを作成すると、サーバーはそれに応じてすべての新しい画像を変換します。 ただし、既存の画像はトリミングされません。 そのためには、サムネイルの再生成と呼ばれるツールを使用する必要があります。

再生成サムネイルのインストールとアクティブ化

まず、サイトにプラグインをインストールしてアクティブ化します。

WordPressにカスタム画像サイズを追加-サムネイルを再生成

[ツール]セクションの下に、プラグインの設定が表示され、すべてのメディアファイルまたは注目の画像のみを再生成できます。

WordPressにカスタム画像サイズを追加-メイン設定

最近WordPressテーマを変更した場合は、すべての注目画像のサムネイルを再生成することをお勧めします。 一方、新しいカスタムイメージサイズを既存のメディアファイルに適用する必要がある場合は、[すべてのXX添付ファイルのサムネイルを再生成]オプションを選択します。 プラグインが再生を開始し、数分後、準備が整います。

注：新しく登録されたカスタム画像サイズが表示されない場合は、サーバーのキャッシュが原因です。 その場合は、WordPressのキャッシュをクリアすることをお勧めします。

デフォルトの画像サイズを削除する

WordPressに画像をアップロードすると、デフォルトで、サーバーは3つの異なるサイズで画像のコピーを自動的に生成します。

  • サムネイル
  • 中くらい
  • 大きい

これはサーバーのスペースを占有するため、これらのデフォルトの画像サイズの一部を削除して、画像のコピーが大量に作成されないようにすることができます。 これは、WordPress管理ダッシュボードを介して手動で、またはプログラムで行うことができます。 両方の方法の詳細については、このガイドを参照してください。

推奨事項

この投稿を締めくくる前に、いくつかの推奨事項があります。

子テーマを作成する

前述のように、コーディング方法を使用してWordPressサイトでカスタム画像サイズを作成する場合は、子テーマを使用することをお勧めします。 そうしないと、親テーマのfunctions.phpファイルを変更すると、次にテーマを更新したときにすべてのカスタマイズが失われます。

画像圧縮プラグインの使用を検討してください

カスタムサイズが多数あるということは、アップロードした画像のコピーがサーバーに多数作成されることを意味し、これがサーバーのストレージに影響を与える可能性があります。 通常、ホスティング会社はユーザーの計画に従ってディスクスペースの使用を制限しているため、スペースを節約するために画像圧縮プラグインを使用することをお勧めします。 私たちの経験では、ShortPixelは画像を圧縮するための優れたツールです。 このプラグインはセットアップと使用が簡単で、貴重なサーバースペースを節約するのに役立ちます。

さらに、画像最適化プラグインを使用できます。 Jetpackは優れたオプションであり、ユーザーにイメージCDN（コンテンツ配信ネットワーク）も提供します。

結論

要約すると、WordPressにはデフォルトで3つのカスタム画像サイズが付属しています。 ただし、WordPressサイトにカスタム画像サイズを追加して、必要に応じて調整することができます。 このガイドでは、それを行うための2つの方法を見てきました。

  1. 手動で
  2. プラグイン付き

サイトにプラグインをインストールしたくない場合は、手動による方法が最適です。 数行のコードで、Webサイトにカスタム画像サイズを含めることができます。

一方、コアファイルの編集に不安がある場合は、プラグインの1つを使用してください。 コードスニペットはカスタムコードを追加するための基本的なプラグインですが、画像を再生成するには画像再生成プラグインが必要です。 対照的に、Image Regenerate＆Selected Cropは、カスタム画像サイズを追加して画像を再生成するのに役立ちます。

最後に、Image Sizes Managerは、追加の画像サイズを生成する代わりに、一部の画像のサイズを変更できるプレミアムツールです。 サイトにカスタム画像サイズを追加する他の方法を知っていますか？

どの方法を使用しますか？ 以下のコメントセクションでお知らせください。 新しい画像サイズを作成したばかりで、古いサムネイルを削除する必要がある場合は、3つの異なる方法を説明しているこのガイドを確認してください。

製品に画像を含める方法をお探しの場合は、WooCommerce製品に画像を追加する方法に関するガイドをご覧ください。