
WPホームページ研究所運営サポートチーム監修のオムスビ(@OMUSUVIcom)です。
以前「ローディング画像を導入するプラグインでGIFアニメーション側の横幅を変更する方法」について解説させていただきました。本日はプラグイン本体側の標準機能としてさまざまな画像サイズ(横幅)に対応できる仕組みを導入する流れをご紹介いたします。カスタマイズしている内容は前回の記事と変わりません。
ローディング画像プラグインをあらゆる横幅サイズに対応させる方法
現時点での最新バージョンは「1.1.3」なので「1.1.4」から正式対応となります。
手順としては下記ですね。
1. 画像の横幅を確認するロジックを入れる
2. 取得した画像サイズから最適な値を算出
3. 計算後にスタイルシートで自動出力する
それぞれカンタンに補足しておきます。
1. 画像の横幅を確認するロジック
イメージの横幅を取得するために使える関数「getimagesize」があります。使い方は下記の通りです。
<?php
$imgfile = 'sample.jpg';
$imgsize = getimagesize($imgfile);
echo '横幅は' . $imgsize[0] . 'です。';
?>
ちなみに下記が実際に出力した状態です。
sample.jpgは横480pxなので正常に取得できていますね。
2. 取得した画像サイズで値を算出
次にどんな画像でも最適な値を算出できる計算式が必要です。
今回はアップロード画像の通常サイズと縮小用サイズをそれぞれ設定。割り切れかなった場合は繰り上げとしています。
3. 計算後にスタイルシートへ出力
最後に計算後の数値をCSS内へ埋め込みます。今回は「echo」で追記。
設定状況に応じてブラウザ側へ出力されてCSSを上書きできればOK。
以上で完了です。
まとめ
本日は「プラグインのバージョンアップ手順」について解説させていただきました。
以前に読者さまより「ローディングプラグインに好きなサイズのGIFアニメーションを使いたい」とリクエストが届いたので設定手順を解説記事で公開いたしました。しかし、メールでやりとりをしていると「あまりCSS追記画面も使ったことがない」と仰っていたので念のためアップデートで対策する流れになりました。
細かい作業をご依頼するよりもシステム側で対応した方がいいケースも多いです。もしさまざまな画像サイズのGIFアニメーションに対応させたい場合は最新バージョン「1.1.4」への更新をお試しくださいませ。
▼管理画面からプラグインを更新する手順
https://wp-labo.com/plugin-update/
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する