ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月16日| 3のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

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

1.画像サイズを「フルサイズ」を選択する

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

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

このように設定すると、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倍速いです。 Replace animated GIFs with video for faster page loadsという文によると、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のコメント

コメント

  1. 常によく見がスンデ私本当に悩んでいただろすぐ解決ねありがとうございます。

    応答