WordPressで注目の画像サイズを変更する方法

注目の画像は、使用しているテーマに応じて、WordPress内でさまざまな方法で使用されます。 ほとんどのテーマは、ホームページやアーカイブページに通常表示される投稿またはページの画像の1つのサムネイルプレビューとして注目の画像を使用します。

この機能はWordPress2.9で導入され、当初は「投稿サムネイル」と呼ばれていました。 現在、ほとんどのWordPressテーマ（私たち自身を含む）は、画像ギャラリー、機能スライダー、ページヘッダー画像など、他の多くの目的で注目画像を使用しています。 たとえば、フルフレームテーマでは、注目の画像が投稿の背景画像になります。

注目の画像はもちろん、クリエイティブや多くの画像を含むWordPressサイトを作成する人にとって非常に重要です。 Graph Paper Pressのテーマで注目の画像を利用するには、投稿エディタの画面の右側にあるリンクから注目の画像を選択するだけです。

テーマに設定されているデフォルトの注目画像サイズが目的に合っている場合は、すばらしいです。 そうでない場合は、コードを少し編集するだけでサイズを変更できます。

注目の画像サイズを変更したいのはなぜですか？ サムネイルギャラリーを大きくしたり小さくしたりする以外に、寸法のアスペクト比を変更したい場合があります。 たとえば、あなたが風景写真家であり、ポートフォリオが広大なパノラマで構成されているとします。 この場合、テーマのデフォルトの注目画像が正方形の場合、画像の大部分が切り抜かれることになります。 これを修正するには、寸法を手動でより適切なものに調整します。

features.phpで注目の画像サイズを変更する

注目の画像のサイズをデフォルトから編集するには、 functions.phpファイルのコードを変更する必要があります。 このファイルにはFTP経由でアクセスするか、WordPressダッシュボードの[外観]>[エディター]で直接編集できます。 私は常に後者よりも前者のアプローチをお勧めします。

このファイルに変更を加える前に、何か問題が発生した場合に備えて、元のバージョンのバックアップがあることを常に確認する価値があります。 コンピューターに元のテーマファイルがまだない場合は、少なくともfunctions.phpファイルをダウンロードして、バックアップフォルダーに保存してください。

注目の画像のサイズを変更するには、2つの方法があります。 比例してサイズを変更するには（つまり、画像の拡大または圧縮を回避するため）、次のコードを使用します。

 set_post_thumbnail_size（50、50）; //幅50ピクセル、高さ50ピクセル、サイズ変更モード

次のコードで画像を切り抜いて、画像のサイズを変更することもできます。

 set_post_thumbnail_size（50、50、true）; //幅50ピクセル、高さ50ピクセル、トリミングモード

これにより、注目の画像のデフォルトサイズが設定されます。

追加の画像サイズの追加

画像サイズごとにコードを1行追加することで、必要な数の画像サイズを追加することもできます。

 add_image_size（'category-thumb'、300、9999）; //幅300ピクセル（および高さ無制限）

次に、次のコードを使用して、テーマテンプレートでこの新しいサイズを使用できます。

 <？php the_post_thumbnail（'category-thumb'）; ？>

この機能は、注目の画像をさまざまな方法で表示する場合に便利です。 たとえば、画像ギャラリーのサムネイルサイズを設定し、投稿ヘッダーのサイズを大きくすることができます。

アップロードする画像は、少なくとも注目の画像に設定したサイズと同じ大きさである必要があることに注意してください。 小さい画像をアップロードすると、画像が拡大され、ピクセル化されてぼやけて見えます。

注目の画像を再構築する

注目の画像サイズを変更すると、コードが変更された時点からのアップロードにのみ影響します。 以前のアップロードは元のサイズで保存されているため、再生成する必要があります。

サイズを変更する画像が数枚しかない場合は、手動で再度アップロードできます。 一握り以上の場合は、サムネイルの再生成などのプラグインを使用して、すべてのハードワークを実行することをお勧めします。 このプラグインには[ツール]メニューからアクセスでき、選択したメディアギャラリー内の1つ以上の画像のサイズを変更します。

子供のテーマで編集内容を将来にわたって利用できるようにする

関数.phpファイルを直接編集する場合の問題は、テーマの新しいバージョンがリリースされ、それをアップグレードする必要がある場合、それらが失われることです。 追加したコードをメモして新しいfunctions.phpファイルに挿入することはできますが、特に多くの編集を行っている場合や、テーマの新しいバージョンが頻繁に出てくる場合は、これは面倒になる可能性があります。

子テーマを使用すると、この問題が解決されます。親テーマが更新されると、子テーマはそのまま残ります。 テーマのコードをfunctions.phpファイル、スタイルシート、またはその他のファイルで編集する場合は、常に子テーマを使用することをお勧めします。

ブログには子テーマを作成するための完全なガイドがすでにありますが、私たちの目的のために知っておく必要があることは次のとおりです。

子テーマを作成するには、FTP経由でサイトに接続し、新しい子テーマ用に/ wp-content /themes/に新しいフォルダーを作成します。 編集するテーマと同じ名前を付け、「-child」を追加するのが一般的な方法です。 例：Awesomeテーマの子テーマを作成している場合は「awesome-child」。

CSSを編集する予定がない場合でも、子テーマフォルダー内にスタイルシートを作成する必要があります。 style.cssという名前の新しいファイルを作成し、次のコードを貼り付けます。

 / *
テーマ名：すごい子
テーマURI：http://example.com/awesome-child/
説明：素晴らしい子のテーマ
著者：グラフ用紙プレス
著者URI：http://example.com
テンプレート：素晴らしい
バージョン：1.0.0
タグ：明るい、暗い、レスポンシブレイアウト、アクセシビリティ対応
テキストドメイン：素晴らしい子
* /

@import url（ "../ awesome / style.css"）;

/*=テーマのカスタマイズはここから始まります
-------------------------------------------------- ------------ * /

必要に応じて、テーマ名やその他の詳細を変更してください。

注目の画像を子テーマに変更する機能を追加するには、新しいfunctions.phpファイルを作成する必要があるため、子テーマディレクトリでこれを実行します。 このファイルは、親テーマのfunctions.phpに加えて読み込まれます。

Functions.phpのテンプレートは次のようになります。

 <？php//PHPタグを開く

// 関数

？>//PHPタグを閉じる

次に、PHPタグの間に画像サイズ変更コードを追加すると、次のようになります。

 <？php//PHPタグを開く

if（function_exists（'add_theme_support'））{
add_theme_support（'サムネイル後'）;
set_post_thumbnail_size（150、150、true）; //デフォルトのサムネイル後の寸法（トリミング）

//追加の画像サイズ
//追加の画像サイズが必要ない場合は、次の行を削除します
add_image_size（'category-thumb'、300、9999）; //幅300ピクセル（および高さ無制限）
}

？>//PHPタグを閉じる

子テーマのコードの作成が完了したら、それをアクティブ化する必要があります。 これは、サイトダッシュボードの[管理パネル]>[外観]>[テーマ]で実行できます。 リストで子のテーマを見つけて、[アクティブ化]をクリックします。

新しいサイズ変更された注目の画像を賞賛する

注目の画像のサイズを変更して新しい画像のサイズを追加するのは非常に簡単な作業ですが、コードを編集する必要があります。 このため、一部のユーザーは画像のサイズ変更を処理するためにプラグインを使用することを好みますが、プラグインを追加することは常にセキュリティ上のリスクです。 内部に入り、このようにコードにいくつかの簡単な変更を加えることは、WordPressの使用に対する自信を築くのに本当に役立ち、テーマをカスタマイズして実際に独自のものにするのが簡単になります。