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

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

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

ザ· CSS

ザ· CSS 私が使用したのは次のとおりです. これをテーマのstyle.cssに追加しただけです (というか子供をテーマに – 常に1つを使用することをお勧めします)

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

ノート (1) – 上記 CSS ギャラリー画像にのみ適用されます. ページのどこかに表示されるすべての画像にこの機能が必要になる可能性はほとんどありません。, しかし、あなたはそれをメインコンテンツセクションに望むかもしれません. テーマがこれをどのように構成しているかを確認する必要があります, しかし私の場合、メインコンテンツエリアは “セクション” したがって、次のコードがその仕事をします

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

ノート (2) – このコードはサムネイル画像にのみ適用されます. 中程度の画像の場合は、置き換えます “サイズ-サムネイル” ととも​​に “サイズ-中”, と大規模な “サイズ-大”.

ノート (3) – サムネイルが120x80pxなので、元のサイズの3倍に増やしたい. 私はすでに360のカスタム画像サイズを持っています×240 そのワードプレスは、src-setに含まれている私のために作成します. hi-dpi画面の場合、私が持っているさらに大きな画像サイズもあります (例えば. 720×480). WordPressで追加の画像サイズを作成するのは簡単です – あなたがこれをする必要があるならば、オンラインでたくさんの良いガイドがあります.

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内にあるクラスサムネイルを持つ画像に適用されます – つまり、 – ワードプレスの組み込みギャラリー構造内の画像のみ. ホバーすると、最大幅がから増加します。 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は実行時にすでに利用可能になっているはずです)

画像サイズの追加

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

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

上に、という新しい画像サイズを追加しました “四分の一幅” 最大幅192px、最大高さ144px. 画像はトリミングされません (したがって、最後に偽).

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

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

関数my_custom_image_sizes( $サイズ ) {
    array_mergeを返します( $サイズ, 配列(
        '1/4幅' => __(「クォーター幅」),
    ) );
}

既存の設定を尊重する

あなたがしたいと思うかもしれないもう一つのこと (レスポンシブ画像が適切に機能するようにする) より大きく作成することです (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 この関数を完全に汎用化するには, でもそれを開発していたときはそうしなかったので、それをあなたに任せて理解します!

最後のヒント

もし, 私のような, 新しい画像サイズの独自のフルセットを作成します, あなたはワードプレスがそれ自身の余分な隠されたサイズを作成することを望まないかもしれません. 元の画像に加えて, とサムネイル, 中くらい, と大きな画像, ワードプレスも作成します “サムネイル後”, a “中〜大”, 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を返します($サイズ, [「サムネイル後」]);
});

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

最後の最後のメモ

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

サイズ高さ (4:3)高さ (16:9)高さ (3:2)
四半期192144108128
三番288216162192
ハーフ384288216256
576432324384
フル768576432512
1152864648768
XL153611528641024

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

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

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

下記のコメントで私達にあなたの考えを送ってください! あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.

返信を残す