WordPressで追加の画像サイズを作成する方法

先月、TimThumbと呼ばれる有名な画像サイズ変更スクリプトに大きな脆弱性が見つかりました。それ以来、コミュニティは協力して問題を修正してきました。 TimThumbは実行可能なオプションですが、WordPressテーマの開発者は、サードパーティのスクリプトに依存するのではなく、コア機能を使用することに集中する必要があると考えています。この記事では、WordPressで画像サイズを追加する方法を説明します.


WordPressには、投稿画像(別名注目画像)の組み込み機能があります。また、組み込みの関数add_image_size()を使用して、画像のサイズを指定し、トリミングするオプションを提供できます。テーマでこれらのコア関数を使用すると、ほとんどの場合、TimThumbのようなサードパーティスクリプトの必要性を本質的に排除できます.

テーマに追加の画像サイズを登録する

まず、テーマのfunctions.phpファイルに次のコードを配置して、投稿のサムネイルのサポートを追加する必要があります。

add_theme_support( ‘post-thumbnails’);

投稿のサムネイルのサポートを有効にすると、関数add_image_size()で追加の画像サイズを登録する機能を使用できるようになります。 add_image_size関数の使用法は次のとおりです。add_image_size( ‘name-of-size’、width、height、Crop mode);

コード例は次のようになります。

add_image_size( ‘sidebar-thumb’、120、120、true); //ハードクロップモード
add_image_size( ‘homepage-thumb’、220、180); //ソフトクロップモード
add_image_size( ‘singlepost-thumb’、590、9999); //無制限の高さモード

気づいたら、3種類の画像サイズを指定しました。ハードクロップ、ソフトクロップ、無制限の高さなど、さまざまなモードがあります。それでは、各例とそれらをあなたの利益のためにどのように使用できるかを説明しましょう.

ハードクロップモード –お気づきのように、高さの後に「true」という値が追加されています。その真の値は、WordPressに画像を私たちが定義したサイズ(この場合は120 x 120px)にトリミングするように指示しています。これは、テーマデザインで多く使用する方法であり、すべてが均等であり、デザインが壊れていないことを確認します。この機能は、サイズに応じて、画像を横または上と下から自動的にトリミングします。ハードクロッピングの欠点は、画像のどの部分を表示するかを制御できないことです.

Mike Littleによる修正–画像をアップロードし、投稿に挿入する前に、「画像の編集」をクリックして、そこからサムネイルまたは画像全体を変更したり、画像を拡大縮小したり、回転したり、反転したりできます。画像の正確な部分を選択します.

ソフトクロップモード –デフォルトではソフトクロッピングモードがオンになっているため、高さの後に追加された値は表示されません。この方法では、画像を歪めることなく、それに比例して画像のサイズを変更します。したがって、必要な寸法が得られない場合があります。通常、これは幅の寸法と一致し、高さは各画像の比率に基づいて異なります。表示例は次のようになります。

ソフトクロップの例

無制限の高さモード –デザインで使用したい超長尺の画像があるが、幅が制限されていることを確認したい場合があります。この種の画像サイズの主な用途は、インフォグラフィックの投稿です。インフォグラフィックは非常に長く、情報がいっぱいになる傾向があります。単一の投稿ページでそのような画像を強くトリミングすることは、良い考えではありません。ただし、本来、インフォグラフィックはコンテンツの幅よりも広いです。したがって、できることは、高さを無制限にしたままデザインを壊さない幅を指定することです。これにより、すべてのインフォグラフィックを歪みなく表示できます。表示例は次のようになります。

無制限の高さモードの例

WordPressテーマに追加の画像サイズを表示する

目的の画像サイズの機能を追加したので、WordPressテーマでの画像の表示を見てみましょう。画像を表示するテーマファイルを開き、次のコードを貼り付けます。

<?php the_post_thumbnail( ‘your-specified-image-size’); ?>

注:このコードは、ポストループ内に貼り付ける必要があります.

WordPressテーマに追加の画像サイズを表示するために必要なのはこれだけです。あなたはおそらくあなたのニーズに合ったスタイルでそれを包むべきです.

追加の画像サイズの再生成

新しいサイトでこれを行わない場合は、おそらくサムネイルを再生成する必要があります。 add_image_size()関数が機能する方法は、テーマに追加されたポイントからのみサイズを生成することです。そのため、この機能を組み込む前に追加された投稿画像は、新しいサイズになりません。したがって、必要なのは、古い投稿画像の新しい画像サイズを再生成することです。これは、サムネイルの再生成と呼ばれるプラグインによって簡単になります。このプラグインをインストールしてアクティブ化すると、メニューの下に新しいオプションが追加されます:ツール»再生。サムネイル

サムネイルプラグイン画面の再生成

[サムネイルの再生成]アイコンをクリックして、プラグインにその仕事をさせます.

この仕事をすることができるもう一つのプラグインはシンプルな画像サイズです.

投稿コンテンツの追加画像サイズを有効にする

テーマで画像サイズを有効にしても、使用はテーマにのみ限定され、意味がありません。すべての画像サイズは関係なく生成されているので、投稿者が投稿コンテンツ内で使用できるようにしてください。 Simple Image Sizesと呼ばれるプラグインを使用してこれを行うことができます.

このプラグインをインストールしてアクティブ化すると、[設定]»[メディア]ページに新しいオプションが追加されます。テーマで定義したサイズのリストが表示されます。あなたがしなければならないすべては「ポスト挿入に表示する」と言うボックスをチェックすることです.

追加の画像サイズの挿入後

このチェックボックスをオンにすると、投稿コンテンツで著者が使用できる追加のサイズが利用可能になります.

投稿の追加画像サイズ

上の画像に注目してください。テーマで定義したすべての画像サイズが、作成者が必要に応じて投稿コンテンツで使用できるようになっています。.

Simple Image Sizesプラグインを使用すると、WordPressダッシュボードから直接カスタム画像サイズを作成することもできます.

この方法は、すべてのWordPressテーマ開発者のベストプラクティスの下に追加する必要があると考えています。あなたの考えは何ですか?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map