0WordPressのホバーに拡大画像を表示する

さまざまなウェブサイトに最近行った改善の一環として、ギャラリーの画像にカーソルを合わせると拡大バージョンが表示されるようにしたかった. 基本でこれを行う CSS かなり些細なことです, 元の画像を拡大したくなかった, 私はブラウザに新しいものをつかませたかった (大きい) 画像も…

すべての画像はすでに完全な src-set を提供しているので、私がする必要があったのは、少し jQuery を使用することだけでした。 (とにかくワードプレスによってすでにロードされています) ターゲット表示サイズを変更して、ブラウザに大きな画像をプルさせる. いいことは CSS すぐに機能するため、元のファイルを使用してより大きな画像を取得できます, そして、より高い解像度のファイルがロードされると、品質は一瞬後に改善されます.

ザ CSS

ザ CSS 使ったのは以下の通り. これをテーマのstyle.cssに追加しただけです (またはむしろ子テーマ - 常に1つを使用することをお勧めします)

dt.gallery-icon aimg.size-サムネイル:ホバー
{
変換: 規模(3.0);
}

ノート (1) - 上記 CSS ギャラリー画像のみに適用されます. ページ上の任意の場所に表示されるすべての画像に対してこの機能を望む人はまずいないでしょう。, しかし、あなたはメインコンテンツセクションのためにそれを望むかもしれません. テーマがこれをどのように構成しているかを確認する必要があります, しかし、私の場合、メイン コンテンツ エリアは「セクション」であるため、次のコードがその役割を果たします。

section.entry-content p aimg.size-thumbnail:ホバー
{
変換: 規模(3.0);
}

ノート (2) — このコードはサムネイル画像にのみ適用されます. 中程度の画像の場合は、「size-thumbnail」を「size-medium」に置き換えます, 「size-large」で大きい場合.

ノート (3) — サムネイルが 120x80px なので、元のサイズの 3 倍に拡大したい. ワードプレスが作成する 360×240 のカスタム画像サイズが既にあり、それが src-set に含まれています. hi-dpi スクリーンの場合、私が持っているさらに大きな画像サイズもあります (e.g. 720×480). ワードプレスで追加の画像サイズを作成するのは簡単です。これを行う必要がある場合は、オンラインで優れたガイドがたくさんあります。.

1.5倍または2.0倍にスケーリングしたい場合は、簡単に変更してください。 3.0 望んだ通りに

jQuery

以下を (子) テーマのスクリプトファイル (それが1つあると仮定して). 持っていない場合, 独自の作成, カスタム関数を使用して「キューに入れる」 (子) テーマのfunctions.php

jQuery(資料).レディー(機能(){

  jQuery("dt.gallery-icon aimg.size-サムネイル").ホバー(機能(){
    jQuery(この).attr("サイズ","(最大幅: 360PX) 100vw, 360PX");
    }, 機能(){
    jQuery(この).attr("サイズ","(最大幅: 120PX) 100vw, 120PX");
  });

  //上記を繰り返します 5 変更するさまざまな画像サイズごとにここに行

});

上記のコードは、gallery-icon クラスを持つ dt 内にあるクラス サムネイルを持つ画像に適用されます。つまり、wordpress の組み込みギャラリー構造内の画像にのみ適用されます。. ホバーすると、最大幅が 120 に 360 (私と一致するように3倍の増加 CSS!), 次に、関数の 2 番目の部分で元の状態を復元します。 120 ホバー停止時の幅.

と同じように CSS 上記, 数値を調整して、画像の拡大率を変更できます, そして、あなたは変更することができます dt.gallery-icon a img.size-thumbnail ターゲットにする画像に応じて、異なる要素またはクラスをターゲットにするセクション.

独自のスクリプトをキューに入れる

テーマにスクリプト ファイルがなく、独自のものをエンキューする必要がある場合は、 (子) テーマのfunctions.php (スクリプト ファイル image-zoom.js を呼び出して、テーマのルート フォルダーに保存したとします。)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', 配列( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

上記はあなたのスクリプトを登録します, フッターに, jqueryの後に配置されていることを確認してください (したがって、jquery は実行時にすでに使用可能になっているはずです)

画像サイズの追加

完全を期すために、カスタム画像サイズをワードプレスに追加する方法は次のとおりです. 再び, これをあなたに追加してください (子) テーマのfunctions.php

add_image_size( 「1/4幅」, 192, 144, 偽 );

上記では、最大幅 192px、最大高さ 144px の「1/4 幅」と呼ばれる新しい画像サイズを追加しました。. 画像はトリミングされません (したがって、最後に偽).

画像をアップロードすると、WordPress はこのサイズの画像を自動的に作成するようになりました (すでにアップロードされた画像のサムネイルを再作成するには、サムネイル再構築プラグインを使用する必要があります).

ただし、この新しい画像サイズはエディターに挿入するために表示されません. 利用可能にするには、次のコードを functions.php に追加します。

関数my_custom_image_sizes( $サイズ ) {
    array_mergeを返します( $サイズ, 配列(
        'quarter-width' => _(「クォーター幅」),
    ) );
}

既存の設定を尊重する

あなたがしたいと思うかもしれないもう一つのこと (レスポンシブ画像がうまく機能するようにする) より大きく作成することです (i.e. hi-dpi) を尊重するサムネイルサイズ GUI サムネイルをトリミングするかどうか. これを行うには、以下のコードを使用します。これは、上記のより基本的なものからわずかに変更されていることがわかります

add_image_size( 'resp-thumb-2x', (get_option( 'thumbnail_size_w' ) == 0 ? 0 : 「240」), 160, get_option( 'thumbnail_crop' ) );

上記のコードは 2 物事 - まず、切り抜きオプションが設定されているかどうかを確認します, そしてそれが, 新しいレスポンシブサイズに反映されます. また、幅がに設定されているかどうかを確認します 0 (i.e. 最大なし) その場合、新しいイメージにも最大値はありません. 新しい画像サイズを「resp-thumb-2x」と呼びました。これは、2 倍の大きさのサムネイルの「レスポンシブ」コピーであるためです。 (通常のピクセル密度の 2 倍の hi-dpi 画面用). かなり完全なセットを作るために、他のサイズもいくつか作成しました.

注 — 元のサムネイルは 120×80 だったので、新しいサムネイルは 240×160 にしたいので、指定したサイズになります。 (ハードコードされている). 元のサムネイルに指定された高さと幅の両方を取得し、両方を掛けることができます 2 この関数を完全に汎用にする, しかし、私はそれを開発していたときにそうしなかったので、それを理解するためにあなたに任せます!

最後のヒント

もし, 私のような, 独自の新しい画像サイズの完全なセットを作成します, ワードプレスに独自の余分な隠しサイズを作成させたくない場合があります. 元画像に加えて, そしてサムネイル, 媒体, と大きな画像, wordpressも「ポストサムネイル」を作成, 「中大」, 1536×1536 と 2048×2048. これらは無効になっています 2 さまざまな方法…

を削除するには 1536 と 2048 画像は簡単です

remove_image_size( 「1536x1536」 ); //を削除します 1536 we dont need it
remove_image_size( 「2048x2048」 ); //を削除します 2048 私たちはそれを必要としない

ポストサムとミディアムラージはもう少し複雑です

//remove the built-in medium-large
add_filter('intermediate_image_sizes', 機能($サイズ) {
    array_diffを返します($サイズ, ['medium_large']);
});

//remove the built-in post-thumbnail
add_filter('intermediate_image_sizes', 機能($サイズ) {
    array_diffを返します($サイズ, [「サムネイル後」]);
});

ポストサムネイルを削除すると、エディターの画像ライブラリーに奇妙な影響を与える場合があることに注意してください。.

最後の最後のメモ

画像サイズを決めるとき (より大きな画像の場合, サムネイル) 理想的には、一般的なアスペクト比の画像が常に適切にサイズ変更されるサイズが必要です. そのため、以下のサイズをお勧めします

指定された幅がすべての整数の高さを生成する方法に注意してください 3 最も一般的なアスペクト比の. 次のような幅では得られません 150 または200.

増加のパターンにも注意してください. ジャンプ 2 テーブルの行とサイズが2倍になります! 偶数行 (288,576,1152 と 1535) また、以前のサイズの 1.5 倍であるため、これらは、 50% dpiの増加. このセットを使用することにより 7 ほとんどのビューポートで使用できる幅広いオプションと、ワードプレスが自動的に src-set に追加する応答性の高い画像の適切なセットがあります。これは、品質の低下やトリミングにつながる分数のない一貫したアスペクト比を持つためです。.

現在、サムネイルについては、無制限の幅を許可するか、固定にハードクロップする傾向があります 3:2 比率なので、サムネイルには整数のサイズを使用しますが、最終的にはテーマを微調整し、オプション 48px と 96px 幅を使用して上記のシステムを後方に拡張する可能性があります (これらの間に値がないことに注意してください 2 残念ながらそれはうまくいくでしょう - 私は幅 60 ピクセルのミニ サムネイルを使用しているので、後方に拡張することを選択していません。). 72pxは両方で機能します 4:3 と 3:2 (そして64pxはで動作します 4:3 と 16:9). 私の画像の大部分は私のデジタル一眼レフで撮られているので、これらは通常 3:2 (従来の 35mm フィルムの縦横比と同じ) だから私もこのサイズを使うことができました, その後、大きなサイズでも機能します, 大きいサイズの画像はトリミングされていませんが、私のサムネイルはトリミングされています。, しかし、サムネイルは通常、デザインに合わせて横向きにしたい, だから後ろに伸びていない. うまくいけば、より多くのロゴが利用可能になります SVGさん, そして一度 JPEG-XLは近い将来ブラウザに登場します, これの多くは解決されます.