responsive pics
Version 1.8.3
ResponsivePicsは、WordPress テーマの作成者がレスポンシブ レイアウトで*画像のサイズを自動的に変更できるようにする WordPress プラグインです。
*ReponsivePics は WordPress wysiwig エディターで画像を処理しません。テーマで画像や写真を使用するテーマ作成者にのみ役立ちます。メディア クエリを介して Retina または HDPI 画像を自動的に処理します。
完全なドキュメントと例については、response.pics を参照してください。
| 前提条件 | 確認方法 |
|---|---|
| PHP >= 5.6.x | php -v |
| Wordpress >= 3.5.x | wp core version |
| WP-Cronが有効になっているか、実際の cron ジョブが設定されている | test WP-Cron |
このプラグインは、コマンドラインまたは WordPress 管理パネルからインストールできます。
Composer を使用して WordPress を管理している場合は、プロジェクトの依存関係にResponsivePicsを追加します。
composer require clarifynl/responsive-pics次に、wp-cli 経由でプラグインを有効にします。
wp plugin activate responsive-pics現在、 <picture>要素と、 <img>要素のsrcsetおよびsizes属性は、 Internet Explorer 11を除くすべての最新ブラウザでサポートされています。
まだサポートされていないブラウザーでピクチャ要素および関連機能のサポートを有効にするには、ポリフィルを使用できます。 Picturefill の使用をお勧めします。
Picturefill をノード モジュールとして Wordpress テーマにインストールするには、テーマ ディレクトリから次のコマンドを実行します。
npm install --save picturefill
yarn add picturefill
そして、テーマのグローバル JavaScript ファイルにパッケージをインポートしますimport 'picturefill';
ResponsivePics は次のデフォルト変数を使用します。
| 変数 | タイプ | デフォルト | 意味 |
|---|---|---|---|
$columns | 番号 | 12 | グリッド レイアウトが使用する列の量 |
$gutter | 番号 | 30 | ピクセル単位のガター幅 (グリッド列間のスペース) |
$breakpoints | 配列 | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | ResponsivePics が画像ソースの作成と提供に使用するメディア クエリ ブレークポイント |
$grid_widths | 配列 | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | ResponsivePics が画像のサイズ変更に使用するレイアウトの最大幅 (ピクセル単位) |
$max_width_factor | 番号 | 2 | 画像ソースのサイズ変更と高さのトリミングに使用する幅の最大係数 |
$lazyload_class | 弦 | lazyload | lazyloadが有効な場合にimgタグに追加される CSS クラス |
$lqip_width | 番号 | 100 | LQIP (低品質画像プレースホルダー) に使用される画像の幅 |
$lqip_class | 弦 | blur-up | LQIP (低品質画像プレースホルダー) が有効な場合にimgタグに追加される CSS クラス |
$image_quality | 番号 | 90 | 画像のサイズを変更するときにWP_Image_Editorで使用される画像圧縮品質 (パーセンテージ) |
$wp_rest_cache | ブール値 | false | WP Rest API 応答ヘッダーでキャッシュを有効にするかどうか |
$wp_rest_cache_duration | 番号 | 3600 | WP Rest API Cache-Control ヘッダーのキャッシュ期間 (max-age) を秒単位で指定します。 |
デフォルトでは、ResponsivePics は以下の定義に Bootstrap 4 SCSS 変数を使用します。
グリッド列の数: $grid-columns: 12;
グリッドのガター幅(ピクセル単位): $grid-gutter-width: 30px;
ピクセル単位のグリッド ブレークポイント:
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);コンテナの最大幅(ピクセル単位):
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
);注: ResponsivePics は、デフォルトの sm グリッド ブレークポイント (= 576px) に基づいて、 xsコンテナーの最大幅 (= 576) を追加します。
ブートストラップのデフォルトをカスタマイズしている場合、または別のグリッド システム (Foundation、Materialize など) を使用している場合、または追加のブレークポイントやコンテナ幅を追加したい場合でも、独自のグリッド変数を ResponsivePics ライブラリに渡すことができます。
これらの行をテーマのfunction.phpに追加し、 ResponsivePicsクラスが存在するかどうかを確認してください。
/*
* Set ResponsivePics variables
*/
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setColumns ( 12 );
ResponsivePics:: setGutter ( 30 );
ResponsivePics:: setBreakPoints ([
' xs ' => 0 ,
' sm ' => 576 ,
' md ' => 768 ,
' lg ' => 992 ,
' xl ' => 1200 ,
' xxl ' => 1400 ,
' xxxl ' => 1600 ,
' xxxxl ' => 1920
]);
ResponsivePics:: setGridWidths ([
' xs ' => 576 ,
' sm ' => 768 ,
' md ' => 992 ,
' lg ' => 1200 ,
' xl ' => 1400 ,
' xxl ' => 1600 ,
' xxxl ' => 1920
]);
ResponsivePics:: setMaxWidthFactor ( 4 );
ResponsivePics:: setLazyLoadClass ( ' lozad ' );
ResponsivePics:: setLqipWidth ( 200 );
ResponsivePics:: setLqipClass ( ' blurred ' );
ResponsivePics:: setImageQuality ( 85 );
ResponsivePics:: setRestApiCache ( true );
ResponsivePics:: setRestApiCacheDuration ( 86400 );
}次のいずれかのヘルパー関数を実行すると、ResponsivePics で使用される変数を取得できます。
ResponsivePics:: getColumns (); // Will return $columns
ResponsivePics:: getGutter (); // Will return $gutter
ResponsivePics:: getBreakpoints (); // Will return $breakpoints
ResponsivePics:: getGridWidths (); // Will return $grid_widths
ResponsivePics:: getMaxWidthFactor (); // Will return $max_width_factor
ResponsivePics:: getLqipWidth (); // Will return $max_width_factor
ResponsivePics:: getLazyLoadClass (); // Will return $lazyload_class
ResponsivePics:: getLqipWidth (); // Will return $lqip_width
ResponsivePics:: getLqipClass (); // Will return $lqip_class
ResponsivePics:: getImageQuality (); // Will return $image_quality
ResponsivePics:: getRestApiCache (); // Will return $wp_rest_cache
ResponsivePics:: getRestApiCacheDuration (); // Will return $wp_rest_cache_duration レスポンシブな<img>要素をテンプレートに挿入するには、 get_image関数またはresponsive-pics/v1/image API エンドポイントを使用可能なパラメーターとともに使用します。
ResponsivePics:: get_image (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
| パラメータ | タイプ | 必須 | デフォルト | 意味 |
|---|---|---|---|---|
| ID | 番号 | はい | WordPress のイメージ ID (例: 1)。 | |
| サイズ | 弦 | はい | 優先画像サイズのカンマ区切り文字列 (例: 'xs-12, sm-6, md-4, lg-3' )。詳細については、「サイズ」セクションを参照してください。 | |
| 作物 | 数値/文字列 | オプション | false | デフォルトの範囲0-2 (例0.75 ) 内の希望の高さの幅のクロップ係数 (オプション) クロップ位置 (例0.75|ct )。詳細については、「トリミング」セクションを参照してください。 |
| クラス | 弦 | オプション | null | img 要素に追加する追加の CSS クラスのカンマ区切り文字列 (例: 'my_img_class'または'my_img_class, my_second_img_class' )。 |
| 遅延ロード | ブール値/文字列 | オプション | false | trueの場合、 lazyloadクラスと data-srcset 属性が有効になります。 native場合、ネイティブのloading="lazy"属性が有効になります。詳細については、「遅延読み込み」セクションを参照してください。 |
| リクイプ | ブール値 | オプション | false | trueの場合、 LQIPクラスと src 属性が有効になります。詳細については、「LQIP」セクションを参照してください。 |
テーマ内のレスポンシブな<img>データを取得するには、 get_image_data関数またはresponsive-pics/v1/image-data API エンドポイントを、利用可能なパラメータid 、 sizes 、 crop 、 classes 、 lazyloadおよびlqipとともに使用できます。
ResponsivePics:: get_image_data (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image-data/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
これは、ブレークポイントごとに利用可能な画像ソース、代替テキスト、MIME タイプ、アルファ チャネルと Lazyload のブール値、lqip 画像の URL、および CSS クラスの配列を含む配列を返します。
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
];テンプレートに応答性の<picture>要素を挿入するには、 get_picture関数またはresponsive-pics/v1/picture API エンドポイントを使用可能なパラメーターとともに使用します。
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| パラメータ | タイプ | 必須 | デフォルト | 意味 |
|---|---|---|---|---|
| ID | 番号 | はい | WordPress のイメージ ID (例: 1)。 | |
| サイズ | 弦 | はい | 優先画像サイズのカンマ区切り文字列 (例: 'xs-12, sm-6, md-4, lg-3' )。詳細については、「サイズ」セクションを参照してください。 | |
| クラス | 弦 | オプション | null | 画像要素に追加する追加の CSS クラスのカンマ区切りの文字列 (例: 'my_picture_class'または'my_picture_class, my_second_picture_class' )。 |
| 遅延ロード | ブール値/文字列 | オプション | false | trueの場合、 lazyloadクラスと data-srcset 属性が有効になります。 native場合、ネイティブのloading="lazy"属性が有効になります。詳細については、「遅延読み込み」セクションを参照してください。 |
| 本質的な | ブール値 | オプション | false | trueの場合、 intrinsicクラスとデータ アスペクト比属性が有効になります。詳細については、「固有アスペクト比」セクションを参照してください。 |
テーマ内のレスポンシブな<picture>データを取得するには、 get_picture_data関数またはresponsive-pics/v1/picture-data API エンドポイントを、使用可能なパラメーターid 、 sizes 、 classes 、 lazyloadおよびintrinsicとともに使用できます。
ResponsivePics:: get_picture_data (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture-data/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
これは、ブレークポイントごとに利用可能な画像ソース、代替テキスト、MIME タイプ、アルファ チャネルと組み込みのブール値、画像 CSS クラスの配列、および img CSS クラスの配列を含む配列を返します。
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' intrinsic ' => ( bool ) $ intrinsic ,
' picture_classes ' => ( array ) $ picture_classes ,
' image_classes ' => ( array ) $ image_classes
];テンプレートにレスポンシブな背景画像を挿入するには、 get_background関数またはresponsive-pics/v1/background API エンドポイントを使用可能なパラメーターとともに使用します。
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| パラメータ | タイプ | 必須 | デフォルト | 意味 |
|---|---|---|---|---|
| ID | 番号 | はい | WordPress のイメージ ID (例: 1)。 | |
| サイズ | 弦 | はい | 優先画像サイズのカンマ区切り文字列 (例: 'xs-12, sm-6, md-4, lg-3' )。詳細については、「サイズ」セクションを参照してください。 | |
| クラス | 弦 | オプション | null | 背景要素に追加する追加の CSS クラスのカンマ区切り文字列 (例: 'my_bg_class'または'my_bg_class, my_second_bg_class' )。 |
テーマ内のレスポンシブな背景画像データを取得するには、 get_background_data関数またはresponsive-pics/v1/background-data API エンドポイントを、使用可能なパラメーターid 、 sizes 、 classesとともに使用できます。
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
これは、ブレークポイントごとに利用可能な背景画像ソース、代替テキスト、MIME タイプ、画像にアルファ チャネルがある場合はブール値、背景の ID、および背景 CSS クラスの配列を含む配列を返します。
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];次の画像ファイル形式がサポートされています。
| ファイル形式 | MIME タイプ | プロパティ |
|---|---|---|
| jp(e)g | 画像/jpeg | |
| ウェブ | 画像/ウェブサイト | Wordpress バージョン 5.8 以降が必要です。 |
| png | 画像/png | PNG にアルファ チャネルが含まれている場合、追加のスタイルを設定するために、追加の'has-alpha'クラスが画像イメージ要素に追加されます。 |
| gif | 画像/GIF | GIF がアニメーション化されるとき (複数のヘッダー フレームがチェックされます)、アニメーションの破棄を防ぐために画像のサイズ変更やトリミングは行われません。 |
他の画像形式の場合、サイズ変更やトリミングは行われません。
次の構文は、 sizesパラメータの各画像サイズに使用できます。
breakpoint:width| パラメータ | タイプ | 必須 | デフォルト | 意味 |
|---|---|---|---|---|
| ブレークポイント | 数値または文字列 | はい | 未定義でwidthが数値の場合、ブレークポイントは幅と同じになります。未定義で、 width列定義である場合、ブレークポイントは対応するブレークポイントになります (たとえば、 width が'xs-8'の場合、ブレークポイントは'xs'になります)。 | |
| 幅 | 数値または文字列 | はい | 列定義は、 $grid_widthsのキーにダッシュと列スパン番号 (例: 'xs-8' ) を加えたものです。列スパン番号の接尾辞が -full (例: 'xs-8-full' ) の場合、列幅は$grid_widthのパーセンテージとして計算されますが、次に一致する$breakpoint幅として計算されます ( .container-fluidの場合と同様) ）。次に一致する $breakpoint幅に基づいて全幅サイズのスパン番号 (例: 'xs-full' ) としてfull使用することもできます。 |
<picture>要素と背景画像はアート向けの画像をサポートしているため、 sizesパラメーターの各画像サイズに対して次の完全な構文を使用できます。
breakpoint:width [/factor|height]|crop_x crop_yサイズ構文では次のパラメータを使用できます。
| パラメータ | タイプ | 必須 | デフォルト | 意味 |
|---|---|---|---|---|
| ブレークポイント | 数値または文字列 | はい | 未定義でwidthが数値の場合、ブレークポイントは幅と同じになります。未定義で、 width列定義である場合、ブレークポイントは対応するブレークポイントになります (たとえば、 width が'xs-8'の場合、ブレークポイントは'xs'になります)。 | |
| 幅 | 数値または文字列 | はい | 画像の希望する（最大）幅（例： 800 ）。列定義は、 $grid_widthsのキーにダッシュと列スパン番号 (例: 'xs-8' ) を加えたものです。列スパン番号の接尾辞が -full (例: 'xs-8-full' ) の場合、列幅は$grid_widthのパーセンテージとして計算されますが、次に一致する$breakpoint幅として計算されます ( .container-fluidの場合と同様) ）。次に一致する $breakpoint幅に基づいて全幅サイズのスパン番号 (例: 'xs-full' ) としてfull使用することもできます。 | |
| 身長 | 番号 | オプション | 画像の望ましい (最大) 高さ (例: 500 )。 | |
| 要素 | 番号 | オプション | デフォルトの範囲0-2 (例: 0.75 ) 内の目的の高さに対する幅のクロップ係数。 | |
| クロップ_x | 数値または文字列 | オプション | c | 水平方向の位置をトリミングします (例: c )。詳細については、「トリミング」セクションを参照してください。 |
| 作物y | 数値または文字列 | オプション | c | 垂直方向のトリミング位置 (例: b )。詳細については、「トリミング」セクションを参照してください。 |
有効な切り抜き位置として次のオプションを使用できます。
水平方向 (x) では、次の切り抜き位置の省略表現を使用できます。
l : 左c ：中央r ：そうですf : 焦点 (詳細については、「焦点」セクションを参照してください)そして垂直方向 (y):
t : トップc ：中央b : 底部垂直方向が設定されていない場合、水平方向xショートカットとして扱われます。
c : 中心中心t : 上部中央r : 右中央b : 中央下l : 左中央f : 焦点 (詳細については、「焦点」セクションを参照してください)有効なトリミング位置構文としてパーセンテージを使用することもできます。
75 10 : 左から 75%、上から 10%25 80 : 左から 25%、上から 80%50 100 : 左から 50%、上から 100% ( center bottom等しい)この場合、座標xとy両方を渡す必要があります。
画像をトリミングしたいが、画像の特定の領域を表示したままにしたい場合は、 f(ocal)短縮表現機能を使用できます。画像のこの焦点領域を設定するために、Wordpress メディア フレームワークのいくつかのビューに焦点ピッカーインターフェイスを追加しました。
Wordpress メディア ライブラリのグリッド ビューでサムネイルをクリックすると、 Attachment detailsモーダルが表示されます。これは焦点を選択するための最も正確なビューです。 
ページまたは投稿でアイキャッチ画像を設定または置換すると、 Featured imageモーダルが表示されます。このビューでは、右側のサイドバーの上部にあるサムネイルで焦点を選択できます。 
WYSIWYG エディターまたはページまたは投稿のメタ フィールドで画像をアップロードまたは編集すると、 Edit imageモーダルが表示されます。このビューでは、左上のサムネイルで焦点を選択できます。 
インターフェースを使用して画像の焦点を設定するには 3 つの方法があります。
これらのオプションの 1 つを使用すると、 responsive_pics_focal_pointという名前の投稿メタ キーが、X 座標と Y 座標をパーセンテージとして含む配列値を使用して添付ファイルに追加または更新されます。
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]この値をテーマ内の他の場所で使用するには、次を呼び出して値を取得できます。
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics関数呼び出しが行われると、このライブラリは、アクション スケジューラを使用して、画像のサイズ変更および/または切り抜きタスクをジョブとしてバックグラウンド プロセス キューに追加します。バックグラウンド処理ライブラリのアクション スケジューラには、スケジュールされた画像サイズ変更ジョブを監視、デバッグし、手動でトリガーするための管理画面が組み込まれています。管理インターフェイスには次の経由でアクセスできます。
Tools > Scheduled Actionsすべてのサイズ変更ジョブは、WordPress イメージ ID によってグループ化されます。
組み込みの WP-Cron を使用している場合、バックグラウンド プロセス キューはページが読み込まれるたびにタスクのみを処理します。
セットアップでWP-Cron無効にし、サーバー上で独自の cron ジョブを使用している場合、アクション スケジューラは、その cron ジョブに設定された間隔を使用して、ジョブの次のバッチを処理します。
define ( ' DISABLE_WP_CRON ' , true );私たち❤️ のように Trellis を使用している場合、デフォルトの cron 間隔は 15 分ごとに設定されています。
これを、WordPress サイトごとのcron_interval (マルチサイトの場合はcron_interval_multisite ) 変数を*/1に設定することで、たとえば 1 分にオーバーライドできます。
たとえば、 trellis/group_vars/development/wordpress_sites.ymlでは次のようになります。
wordpress_sites :
example.com :
site_hosts :
- canonical : example.test
redirects :
- www.example.test
local_path : ../site # path targeting local Bedrock site directory (relative to Ansible root)
admin_email : [email protected]
multisite :
enabled : false
ssl :
enabled : false
provider : self-signed
cache :
enabled : false
cron_interval : ' */1 'この値を変更した後は、忘れずにサーバーを再プロビジョニングしてください。
サイズ変更プロセス中にエラーが発生した場合、または無効な構文がある場合、ResponsivePics はエラーを表示または返します。
ResponsivePics エラー - ブレークポイント xxs は定義されておらず、数値もありません
{
"code" : " responsive_pics_invalid " ,
"message" : " breakpoint xxs is neither defined nor a number " ,
"data" : {
"xs" : 0 ,
"sm" : 576 ,
"md" : 768 ,
"lg" : 992 ,
"xl" : 1200 ,
"xxl" : 1400
}
}次のアクションを使用すると、画像のサイズ変更プロセスのタイムラインに接続できます。これらをテーマのfunctions.phpファイルに配置できます。
responsive_pics_request_scheduledこのアクションは、ResponsivePics が新しい画像サイズ変更リクエストを ActionScheduler キューにスケジュールしたときに起動されます。
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request );$post_id
(整数)添付ファイル ID
$resize_request
(配列)サイズ変更リクエストのパラメータ:
[
' id ' => ( int ) The attachment ID ,
' quality ' => ( int ) The requested image quality,
' width ' => ( int ) The requested image width,
' height ' => ( int ) The requested image height,
' crop ' => ( array ) The requested image crop positions,
' ratio ' => ( float ) The requested image ratio,
' path ' => ( string ) The requested image file path,
' rest_route ' => ( string ) The requested rest api route
]responsive_pics_request_processedこのアクションは、 ActionSchedulerがキュー内の画像サイズ変更リクエストを処理したときに起動されます。
do_action ( ' responsive_pics_request_processed ' , ( int ) $ post_id , ( int ) $ quality , ( int ) $ width , ( int ) $ height , ( array ) $ crop , ( float ) $ ratio , ( string ) $ resize_path , ( string ) $ rest_route );$post_id
(int)添付ファイル ID
$品質
(int)要求された画質
$width
(int) 要求された画像の幅
$身長
(int) 要求された画像の高さ
$crop
(配列) 要求された画像のトリミング位置 (パーセンテージ):
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] $ratio
(float) 要求された画像比率
$resize_path
(文字列) 要求された画像ファイルのパス
responsive_pics_file_saved_localこのアクションは、 ResponsivePicsがサイズ変更された画像ファイルをローカルに正常に保存したときに起動します。
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file );$post_id
(int)添付ファイル ID
$file
(配列)保存されたファイルには以下が含まれます。
[
' path ' => ( string ) The saved image filepath,
' file ' => ( string ) The saved image filename,
' width ' => ( int ) The saved image file width,
' height ' => ( int ) The saved image file height,
' mime-type ' => ( string ) The saved image file mime-type,
' filesize ' => ( int ) The saved image filesize
]responsive_pics_file_s3_uploadedこのアクションは、 WP Offload Media がサイズ変更された画像ファイルを S3 ストレージにアップロードしたときに起動します。
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file );$post_id
(int)添付ファイル ID
$file
(配列) S3 にアップロードされたファイルには以下が含まれます。
[
' path ' => ( string ) The uploaded image filepath,
' file ' => ( string ) The uploaded image filename,
' width ' => ( int ) The uploaded image file width,
' height ' => ( int ) The uploaded image file height,
' mime-type ' => ( string ) The uploaded image file mime-type,
' filesize ' => ( int ) The uploaded image filesize
]responsive_pics_file_deleted_localこのアクションは、 ResponsivePicsがサイズ変更された画像ファイルをローカルで正常に削除したときに起動します。
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file );$post_id
(int)添付ファイル ID
$file
(文字列)削除された画像ファイルのパス
responsive_pics_file_s3_deletedこのアクションは、 WP Offload Media がS3 ストレージ内のサイズ変更された画像ファイルを削除したときに起動します。
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths );$post_id
(int)添付ファイル ID
$file_paths
(配列) S3 ストレージ内の削除され、サイズ変更されたファイル パス。
WP Offload Media (Lite) プラグインをインストールしてアクティブ化すると、このライブラリは自動的に次のことを行います。
注記
Offload Media Lite設定で[サーバーからファイルを削除]オプションが有効になっている場合、このプラグインは、このプラグインによって生成されたサイズ変更/トリミングされた画像を削除しません。
get_picture関数またはget_image関数、またはブール値trueを指定して API エンドポイントでlazyloadオプションを有効にすると、このライブラリは自動的に次の処理を実行します。
<img>要素にlazyloadクラスを追加します。srcset 、画像の<source>または<img>要素のdata-srcset属性と交換します。これにより、Lazysizes などの遅延読み込みプラグインを使用できるようになります。
テーマのfunction.phpのResponsivePicsライブラリに渡すことで、独自の Lazyload クラスを設定することもできます。
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}Lazysizes をWordPress テーマにノード モジュールとしてインストールするには、テーマ ディレクトリから次のコマンドを実行します。
npm install --save lazysizes
yarn add lazysizes
そして、テーマのグローバル JavaScript ファイルにパッケージをインポートします。
import 'lazysizes' ;文字列値nativeを使用してlazyload有効にすると、このライブラリは自動的に次の処理を実行します。
loading="lazy"属性を<img>要素に追加します。 get_image関数または/responsive-pics/v1/image API エンドポイントでlqipオプションを有効にすると、このライブラリは自動的に次の処理を行います。
<img>要素にblur-upクラスを追加します。<img>要素にフォールバックsrc属性を追加し、デフォルト幅 100 ピクセルの低品質のプレースホルダー画像を追加します。これにより、実際の高品質画像が読み込まれる前に、プレースホルダー画像のスタイルを設定できるようになります。
テーマのfunction.php内のResponsivePicsライブラリに渡すことで、独自のlqipクラスを設定することもできます。
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
}get_picture関数または/responsive-pics/v1/picture API エンドポイントでintrinsicオプションを有効にすると、このライブラリは自動的に次の処理を行います。
<picture>要素に追加し、 intrinsic__itemクラスをピクチャー<img>要素に追加します。<source>と<img>要素にdata-aspectratio属性を追加します。これにより、画像の幅から高さを計算したり、lazysizes アスペクト比拡張機能などの組み込みプラグインを使用して高さから幅を計算したりすることで、画像に必要なスペースを事前に占有することができます。
Wordpress テーマでLazysizes アスペクト比拡張機能を使用するには、まず Lazyloading セクションで説明されているようにノード モジュールとしてLazysizes をインストールし、テーマのグローバル JavaScript ファイルに拡張機能をインポートします。
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; ResponsivePicsライブラリで発生した問題は Github に送信してください。
ResponsivePicsは以下によって開発および保守されています。
@monokai（クリエイター）
@twansparant (クリエイター)
コードとドキュメントの著作権はClarifyによる2017-2023です。
コードは MIT ライセンスに基づいてリリースされています。
クリエイティブ コモンズでリリースされたドキュメント。
