IE･Edgeをobject-fitに対応させる（WordPress編）

CSSのobject-fitプロパティはどんな比率の画像でも縦横比を維持しながらトリミングできるので非常に便利です。

ところがこれはIEには対応していません。対応するためにはobject-fit-imagesというJavaScriptを導入する必要があります。

この記事ではWordPressでスマートに（？）導入する方法をご紹介します。

object-fit-imagesのダウンロードと設置

IEやEdgeをobject-fitに対応させるスクリプトで下記のURLからダウンロードできます。

https://github.com/fregante/object-fit-images

他にも同様なスクリプトはあるのですが、object-fit-images が一番対応する機能が多いので特にこだわりがなければこれが良いと思います。

ダウンロードして解凍すると下図のように沢山のファイルがありますが、使うのはdistの中に入っているofi.min.jsだけです。

ofi.min.jsをテーマフォルダ内の適当なディレクトにコピーしましょう。

この記事で紹介するサンプルコードではテーマフォルダの中にjsという名前のフォルダを作り、そこにコピーしたことを想定しています。

ちなみに、CDNで使うことも可能です。ダウンロードして設置する手間が省けます。CDNを使う場合はファイルパスの部分に下記のURLを使いましょう。

https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js

WordPressでobject-fit-imagesを使うためのコード

functions.phpに下記コードを追加します。ofi.min.jsの設置場所は適宜変更してください。

function my_object_fit_enqueue_scripts() {
	global $is_IE, $is_edge ;
	if ( $is_IE || $is_edge  ) {
		wp_enqueue_script(
			'object-fit',
			get_template_directory_uri() . '/js/ofi.min.js',
			array(),
			filemtime( get_template_directory() . '/js/ofi.min.js' ),
			true
		);
	}
}
add_action( 'wp_enqueue_scripts', 'my_object_fit_enqueue_scripts' );
function my_add_object_fit_scripts() {
	global $is_IE, $is_edge ;
	if ( $is_IE || $is_edge  ) {
		$script = 'objectFitImages();';
	  wp_add_inline_script( 'object-fit', $script );
	}
}
add_action( 'wp_enqueue_scripts', 'my_add_object_fit_scripts' );

CDNを使う場合、my_object_fit_enqueue_scripts()は下記のようになります。

function my_object_fit_enqueue_scripts() {
	global $is_IE, $is_edge ;
	if ( $is_IE || $is_edge  ) {
		wp_enqueue_script(
			'object-fit',
			'https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js',
			array(),
			false,
			true
		);
	}
}

object-fitを適用したい画像に追加するCSSの例

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

コードの解説

このコードはそんなに複雑なことはしていませんが、ポイントとなる部分を詳しく解説します。

ブラウザの判別

$is_IEや$is_edgeはWordPressに組み込まれているブラウザを判別するためのグローバル変数です。

Global Variables « WordPress Codex

IEやEdge以外では余計なスクリプトを読み込みたくないのでif文で条件分岐させています。

スクリプトの読み込み順の制御

wp_add_inline_script()はインラインスクリプトを表示させるためのWordPress関数です。１つめの引数でインラインスクリプトをどのスクリプトの後に追加するかを指定し、２つめの引数で追加するスクリプトを指定します。

wp_add_inline_script() | Function | WordPress Developer Resources

日本語だと下記サイトで詳しく説明されています。
wp_add_inline_script – WordPress私的マニュアル

さて、object-fit-images は下記の順番で処理されなければなりません。

1. ofi.min.jsを読み込み
2. objectFitImages()を実行

そこで、まずobject-fitというハンドル名でofi.min.jsを読み込み、wp_add_inline_script()の１つめの引数にobject-fitを指定することで上記の順番にスクリプトが読み込まれるようにしています。

インラインスクリプトの出力自体はwp_footerフックで出力させることもできますが、wp_add_inline_script()を使うとスクリプトの読み込み順をWordPressに任せることができるので便利です。

object-fitは使いこなすと本当に便利です。

例えば記事一覧にアイキャッチ画像を表示するときに、画像の大きさを揃えるというレイアウトがとても簡単にできます。IEに対応していないことだけを理由に使わないのはもったいないです。是非導入しましょう。