WordPressでGIFファイルが動作しない問題

Last Updated: 2023 年 08 月 02 日 3のコメント

WordPressで文やページに移動GIFファイルをアップロードすると、GIFが動作していない問題が発生する可能性があります。 この問題は、GIFファイルを WordPressにアップロードする時のサイズがリサイズされるために発生します。 GIFファイルが動作しない問題が発生した場合、以下の方法に基づいて、画像を挿入すると、問題が解決されています。

WordPressでGIFファイルが動作していない問題の解決方法

WordPressは、画像ファイルをアップロードすると、いくつかのサイズのサムネイルファイルが一緒に生成されます。 GIFファイルをアップロードするときにサイズがリサイズされると、アニメーションのプロパティが破損します。 このため、GIFアニメーションが動作しなくなります。

したがって、元のサイズのGIF画像を挿入すると、問題が解決されます。

[この記事は、2023年8月2日に最後に更新されました。 ]

1.画像サイズを「最大サイズ」(または WordPress バージョンに応じて「フルサイズ」)で選択する

GIFをアップロードするとき、右の 画像ブロック 属性で 画像サイズ(Image size) オプションを「最大サイズ」として選択します。

WordPressでGIFファイルが動作しない問題を解決する

原寸大の本来のハングル翻訳は「フルサイズ」でしたが、数年前に翻訳が変に変わり、「最大サイズ」に変わりました。 今は画像サイズオプションで 「サムネイル」、「普通」、「最大サイズ」、「最大サイズ」が表示されますが、「Large Size」と「Full Size」が同じように「最大サイズ」に翻訳されて混乱しています。 「最大サイズ」がXNUMX回表示されたら、下部の「最大サイズ」を選択します。

フルサイズ翻訳
画像サイズオプション。

このように設定すると、GIFイメージのリサイズされたバージョンではなく、フルサイズの画像が読み込まれます。 その後、問題が修正されて動くGIFが動作します。

例:

2.画像​​の最適化プラグインによって画像がリサイズされていることを確認

上記の方法では、画像サイズオプションを「フルサイズ」に設定してもGIFアニメーションが機能しないという問題が発生することがあります。

この場合、画像がアップロードされると、 画像の最適化プラグイン (Image Optimization Plugin)でサイズがリサイズされていないか確認してください。 一部の画像最適化プラグインでは、元の画像にリサイズするオプションを提供できます。 そのようなオプションがある場合は、そのオプションを無効にします。

3. GIFファイルを属性イメージに指定した場合、

GIFアニメーションファイルを特性イメージ(Featured Image)に設定した場合、テーマに沿って、ブログページやカテゴリページなどで動くGIFが動作しない場合があります。 この場合、テーマのソースファイルからサムネイルを表示するコード部分を適切に変更しなければなら正常に動作します。

たとえば、サムネイルを表示するコード部分を次のように変更することができます。

<?php $thumb_url = get_the_post_thumbnail_url();
	  $thumb_low = strtolower($thumb_url);
	  if (strpos($thumb_low, '.gif') === false) {
	  	$thumb_size = 'large';
	  } else {
	  	$thumb_size = 'full';
	  } ?>

上記のコードで get_the_post_thumbnail_url() 関数はポストサムネイルのURLを返します。 ポストサムネイルのURLを受け取り、URLにGIFがあるかどうかを確認し、GIFがある場合はサムネイルを「フルサイズ」で表示し、アニメーションのプロパティが破損しないようにします。

上記のコードは、例示にすぎません。 テーマに沿って適切に応用してください。

GIFの代替?

参考までにHTML5のタグを利用して、MP4をロードすることがGIFを使用するよりも5〜20倍速いです。 ページの読み込みを高速化するには、アニメーションGIFを動画に置き換えますという文によると、3.7MBのGIFをMP4バージョンに変換すると551 KB、WebMバージョンに変換すると、341 KBにサイズが確認減少します。

次のようなhtmlタグの形式でビデオファイルを挿入すると、動くGIFと同じ効果を得ることができるとします。

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

一部のテーマでは、動画ファイルをサムネイルで表示する機能を提供します。 たとえば、人気の雑誌のテーマである Newspaper (Newspaper)ではPost style default、Post style 1、2、9、10及び11を使用する場合、Featured Video(特性ビデオ)を設定することができます。

WordPress Newspaper テーマでの特性のビデオ設定

参照


3のコメント

コメント