WordPressサイトにクリックして読み込むGIFプレーヤーを追加したいですか?ImagelyのGIF画像は読み込みに時間がかかり、ページスピードやユーザーエクスペリエンスに影響します。多くの人気ブログプラットフォームがアプリでGIFを自動ロードしないのはそのためです。この投稿では、WordPressでGIFのクリックロードを簡単に追加する方法を紹介します。
なぜWordPressでGIFのクリック読み込みを追加するのか?
WordPressにアニメーションGIF画像をよく追加するのであれば、通常の画像よりもサイズが大きいことをすでにご存知でしょう。つまり、読み込みに時間がかかり、サイトのスピードやパフォーマンスに影響します。
WordPressで画像を遅延ロードすることで、この問題に対処しているサイトもあります。しかし、GIFはユーザーがスクロールダウンするにつれて読み込みに時間がかかるため、それでもユーザーの体験に影響を与えます。
Tumblrなどの人気のあるプレーヤーは、この問題を軽減するためにクリックしてロードするGIFプレーヤーを使用しています。GIFアニメーションのすべてのフレームを読み込む代わりに、アニメーションの最初のフレームだけを読み込みます。画像上の再生ボタンやGIFラベルは、ユーザーがクリックしてGIFアニメを表示できることを示しています。
それでは、WordPressサイトにGIFの読み込みボタンを追加する方法を見てみましょう。
WordPressでGIFの読み込みボタンを追加する
まず最初にWP GIF Playerプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。
このプラグインは箱から出してすぐに使えますし、設定もありません。
投稿編集画面に移動して、プラグインの動作を確認することができます。
投稿編集画面では、投稿エディターの上にGIFを追加ボタンがあります。これをクリックすると、メディアアップローダーポップアップが表示され、他の画像と同じようにGIF画像をアップロードすることができます。
アップロードが完了したら、画像の挿入ボタンをクリックしてください。
WP GIFプレーヤープラグインはWordPress投稿エディターに必要なショートコードを追加します。
投稿日:ページを保存し、プレビューボタンをクリックすることで、GIFをクリックして読み込む様子を見ることができます。
投稿日に埋め込まれたGIFはすべて、GIFと書かれたボタンが上に表示されます。ボタンをクリックすると、アニメーションGIFがバックグラウンドで読み込まれ、表示されます。
このプラグインの欠点は、アップロードされた新しいGIFに対してのみ機能することです。通常のWordPressメディアアップローダーを使用してアップロードされたGIFにはクリック・トゥ・ロードは追加されません。つまり、以前にアップロードしたGIFはすべて、読み込みボタンをクリックすることができません。
この投稿が、WordPressでGIFプレイヤーをクリックして読み込む機能を追加する方法のお役に立てば幸いです。WordPressでよくある画像の問題を修正する方法についてのガイドもご覧ください。
この投稿を気に入っていただけたなら、WordPress動画チュートリアルのYouTubeチャンネルをぜひご登録ください。Twitterや Facebookでもご覧いただけます。
Umair
That plugin is no longer available. Any other suggestion?
WPBeginner Support
Not at the moment, we will be sure to keep an eye out for alternatives.
管理者
Cori Ramos
Thank you for telling us about this plugin and for showing us how to use it. I’m going to hang on to this one!
Cori
Shafi Khan
That’s a cool plugin. I wonder if we can customize the button and change it’s location. It would be so cool to have a brand-logo button in the center and a GIF text on top-right corner.
Thanks for sharing.
Vladimir DJurovic
This is quite interesting. I don’t use animated GIFs in my posts yet, but it’s good to know.
Do you know if this approach will work with CDN hosted content?