web-dev-qa-db-ja.com

Retina.js用のWordPressのサイズと名前の画像を作る

私は retina.js が高ピクセル密度のディスプレイ用に機能することを大好きです。基本的に、（<img>またはcss imageを介して）画像アセットをロードするとき、それは@2x接尾辞バージョンの画像があるかどうかをチェックします（例えばlogo.jpgがある場合、それが存在すれば自動的に[email protected]を表示します）。

WordPressの関数the_post_thumbnailを使ってさまざまな画像サイズを定義できますが、@2x接尾辞を付けてそのサイズの2倍のバージョンの画像も作成する方法があるかどうかを知りたいです。

テーマファイルに対してこれを実行するのは簡単ですが、コンテンツ画像に対してもこれを許可するのはかなり素晴らしいでしょう。

functionspost-thumbnailscontent
2
ArleyM

このWordpressプラグインをチェックする

Wp Retina 2X

1
Ravinder Kumar

[OK]をここに私のアドバイスです。

ワードプレスのネイティブメディア設定を使用して、ダブルサイズの画像のコピーを作成するだけです。次に、テンプレートに次のコードを追加します。

<?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?>

<img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/>

ここで私のサムネイル（通常）サイズは300x300pxで、中位のサムネイル（網膜）サイズは600x600pxです。また、それ以外の場合にはretina.jsをロードすることを忘れないでくださいdata-at2x =は機能しません。がんばろう！

0
wp student