WordPressの注目のサムネイルと画像サイズの完全ガイド

WordPressの注目のサムネイルと画像サイズの完全ガイド

写真は千の言葉の価値があります---それが不適切にサイズ変更されていない限り、それは少し恥ずかしいです。 WordPressには、画像やサムネイルのサイズを変更するための強力なツールが含まれていますが、それらの処理方法を知っておく必要があります。





WordPressの画像サイズと注目の画像の管理について知っておく必要があるすべてのことを読んでください。





WordPressファイルでのPHPの編集

この投稿には、WordPressのPHPコードが含まれています。テーマに変更を加える前に、無料のPHPクラッシュコースを読むことをお勧めします。





テーマファイルを開くことに抵抗がある場合、または将来のテーマの更新で失われるために開きたくない場合は、 私のカスタム関数 代わりにコードブロックを追加するプラグイン。

https://en-gb.wordpress.org/plugins/my-custom-functions/



WordPressの画像サイズの基本

WordPress管理ダッシュボードでは、おそらくすでに知っているでしょう 設定 >> 半分。

CPUにとってどれくらい暑いですか

WordPressが呼び出す3つのデフォルトの画像サイズは次のとおりです。 サムネイル中くらい 、 と 大きい 。サムネイルサイズには、ここで指定した正確なサイズでトリミングされる特別な設定があります。これは1:1の比率の寸法である必要はありません---好きなように設定できます。





トリミングを有効にすると、画像が拡大縮小されて中央に配置され、収まらないものはすべて破棄されます。

中規模と大規模の設定は、指定するという点で少し異なります。 最大 幅と高さの両方の寸法、および画像はそれに応じて縮小されます。画像が小さすぎると、それらの画像サイズは作成されません。





新しい画像をアップロードすると、元の画像が保存され、フルサイズで投稿に挿入できるようになり、登録されている他の画像サイズが自動的に作成されます。

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

WordPress内でデフォルトで定義されている3つのサイズでは不十分な場合があります。そのため、テーマとプラグインは独自のカスタムサイズを追加できます。テーマファイルの編集に慣れている場合は、これも実行できます。

テーマディレクトリを開き、 関数.php ファイル。追加します 次のコード、 定義する画像サイズごとに1つ:

add_image_size( 'my-thumbnail', 400, 200, true);

新しい画像サイズごとに、名前、幅と高さの寸法、および画像を正確にこのサイズにトリミングする必要があるかどうかが必要です( NS また NS )。テーマまたはウィジェットの構造部分の場合、通常、レイアウトが崩れないようにトリミングする必要があります。

たくさんのカスタム画像サイズを作成したくなるかもしれませんが、慎重に作成する必要があります。定義した各画像サイズは、注目の画像でのみ意図した場合でも、アップロードしたすべての画像に対して生成されます。

したがって、7つのカスタム画像サイズと3つのデフォルト画像がある場合、アップロードする各画像は、それ自体の10個の小さなコピーを生成します。 1つの投稿に10個の画像が埋め込まれている可能性があると考えると、その投稿だけで100個のファイルが作成されます。

カスタム画像サイズを作成して、注目の画像にのみ使用するように指定することはできません。

また、特定のカスタムサイズを使用しなくなり、そのコードを削除(またはテーマを変更)した場合でも、古い画像はサーバーに永久に残ります。 WordPressは未使用の画像を削除しません。 MakeUseOfと同じくらい古い、または同じ大きさのサイトでは、これは、使用されなくなった画像を保存するために数百ギガバイトが無駄になることを意味します。

小規模なサイトの場合、 メディアクリーナー プラグインが役立つ場合がありますが、常に最初に完全バックアップを実行してください。

https://wordpress.org/plugins/media-cleaner/#description

投稿コンテンツで使用するカスタム画像サイズ

デフォルトでは、投稿に画像を挿入するときに、カスタム画像サイズはドロップダウンボックスに表示されません。サムネイル、ミディアム、ラージ、フルサイズのみが表示されます(アップスケールされないため、元の画像のサイズによって異なります)。

カスタムサイズもリストに含める場合は、もう少しコードが必要になります。繰り返しますが、 関数.php ファイル:

function image_sizes_to_mediapicker( $default_sizes ) {
return array_merge( $default_sizes, array(
'my-thumbnail' => __( 'My Thumbail Size' ),
) );
}
add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' );

これは、メディアピッカーリストをフィルタリングすることで機能します。元のサイズリスト配列を、リストしたい新しいサイズとマージします。 「my-thumbnail」と「MyThumbnailSize」をカスタムサイズに変更し、人間が読める形式のわかりやすい名前をリストに追加します。

注目の画像は、投稿に関連付けられた単一の画像ですが、必ずしも投稿のコンテンツに挿入されるとは限りません。これらは、ヘッダー、フロントページ、またはサイドバーのテーマでよく使用されます。ただし、画像のサイズ設定に関しては、通常の画像と同じように扱われます。

定義したすべてのサイズについて、アップロードされた画像はすべて複製され、注目の画像を含めてサイズが変更されます。

Windows10用の最高の無料イコライザー

次のオプションが表示されない場合 注目の画像を設定する 投稿編集画面で、テーマがこの機能をサポートしていない可能性があります。テーマに次の行を追加することで、サポートを強制できます 関数.php ファイルですが、代わりに新しいテーマを見つけることを強くお勧めします。

注目の画像のような基本的なものに対するサポートの欠如は、他の場所で古いコードを示している可能性があります。

add_theme_support('post-thumbnails');

注目の画像を独自のテーマまたはプラグインで使用するには、 the_post_thumbnail() 画像タグを出力する関数:

the_post_thumbnail('my-thumbnail',array('class'=>'my_post_thumbnail_css_class'));

この関数は2つのパラメーターを取ります。探している名前付きサイズ(この場合は「my-thumbnail」)と、カスタムCSSクラスなどの渡したい属性です。

必要なHTMLではなく、注目の画像の実際のURLだけを取得したい場合は、代わりにこれを試してください(この例では中程度の画像サイズを取得します)。

Windows10外付けハードドライブが機能しない
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0];

WordPressのサムネイル画像の再生成

デフォルトの画像サイズを変更したり、カスタム画像サイズを作成したりすると、次の場合にのみ適用されます。 新着 アップロードします。既存の画像はすべて元のサイズのままです。

以前にアップロードした画像のサイズを変更する場合は、プラグインが必要です。 AJAXサムネイルの再構築 再生成するサイズを選択でき、アーカイブをゆっくりと処理します。

https://wordpress.org/plugins/ajax-thumbnail-rebuild/

ただし、知っておくべきいくつかの制限と落とし穴があります。

注目の画像は自動的にサイズ変更できますが、プラグインで投稿コンテンツを書き換えることはできません。たとえば、で投稿に画像を追加した場合 大きい サイズ(当時は500pxだったかもしれません)、の定義を変更します 大きい 投稿の画像サイズは変更されません。投稿を編集して同じ画像を新しいサイズで再挿入しない限り、500pxのままになります。

前述のように、画像サイズが多い場合は、多くの画像が生成されます。ありがたいことに、サムネイルの再構築では、これを次のように制限できます。 注目の画像のみ 。ただし、これは前の画像にのみ適用されることに注意してください。今後のすべての画像アップロードはWordPressによって管理されます。つまり、すべての画像サイズがすべてに対して作成されます。

今はまた学ぶための絶好の機会でしょう JPGとPNGの違い したがって、将来的には最適な形式を使用することがわかります。

WordPressサイトを次のレベルに引き上げる

WordPressテーマを微調整したいですか?テーマでの画像、色、要素の配置の使用は、主にCSSとHTMLによって定義されるため、CSSとHTMLを学習するには、これらのステップバイステップのチュートリアルを確認することをお勧めします。

また、テーマに興味がある場合は、写真ポートフォリオのこれらのクールなWordPressテーマをご覧ください。

WordPressサイトが頻繁にクラッシュしていませんか?お金をかけすぎていませんか? InMotion Hostingのような有名なホスティングサービスに切り替えます(特別なMakeUseOf割引 このリンク )またはBluehost(特別なMakeUseOf割引 このリンク )。

共有 共有 つぶやき Eメール FBIがHiveランサムウェアに対して警告を発した理由は次のとおりです

FBIは、特に厄介なランサムウェアについて警告を発しました。これが、Hiveランサムウェアに特に注意する必要がある理由です。

次を読む
関連トピック
  • プログラミング
  • Wordpress
著者について ジェームズブルース(707件の記事が公開されました)

ジェームズは人工知能の理学士号を取得しており、CompTIA A +およびNetwork +の認定を受けています。ハードウェアレビューエディターとして忙しくないときは、LEGO、VR、ボードゲームを楽しんでいます。 MakeUseOfに参加する前は、照明技術者、英語教師、データセンターエンジニアでした。

ジェームズブルースのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください