Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでGIFのクリック読み込みを追加する方法

WordPressサイトにクリックして読み込むGIFプレーヤーを追加したいですか?ImagelyのGIF画像は読み込みに時間がかかり、ページスピードやユーザーエクスペリエンスに影響します。多くの人気ブログプラットフォームがアプリでGIFを自動ロードしないのはそのためです。この投稿では、WordPressでGIFのクリックロードを簡単に追加する方法を紹介します。

Adding click to load for Gifs in WordPress

なぜWordPressでGIFのクリック読み込みを追加するのか?

WordPressにアニメーションGIF画像をよく追加するのであれば、通常の画像よりもサイズが大きいことをすでにご存知でしょう。つまり、読み込みに時間がかかり、サイトのスピードやパフォーマンスに影響します。

WordPressで画像を遅延ロードすることで、この問題に対処しているサイトもあります。しかし、GIFはユーザーがスクロールダウンするにつれて読み込みに時間がかかるため、それでもユーザーの体験に影響を与えます。

Tumblrなどの人気のあるプレーヤーは、この問題を軽減するためにクリックしてロードするGIFプレーヤーを使用しています。GIFアニメーションのすべてのフレームを読み込む代わりに、アニメーションの最初のフレームだけを読み込みます。画像上の再生ボタンやGIFラベルは、ユーザーがクリックしてGIFアニメを表示できることを示しています。

Paused GIF example

それでは、WordPressサイトにGIFの読み込みボタンを追加する方法を見てみましょう。

WordPressでGIFの読み込みボタンを追加する

まず最初にWP GIF Playerプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。

このプラグインは箱から出してすぐに使えますし、設定もありません。

投稿編集画面に移動して、プラグインの動作を確認することができます。

Add GIF button in WordPress post editor

投稿編集画面では、投稿エディターの上にGIFを追加ボタンがあります。これをクリックすると、メディアアップローダーポップアップが表示され、他の画像と同じようにGIF画像をアップロードすることができます。

Upload GIFs using the Add Gif button

アップロードが完了したら、画像の挿入ボタンをクリックしてください。

WP GIFプレーヤープラグインはWordPress投稿エディターに必要なショートコードを追加します。

GIF shortcode in WordPress post editor

投稿日:ページを保存し、プレビューボタンをクリックすることで、GIFをクリックして読み込む様子を見ることができます。

投稿日に埋め込まれたGIFはすべて、GIFと書かれたボタンが上に表示されます。ボタンをクリックすると、アニメーションGIFがバックグラウンドで読み込まれ、表示されます。

Click to play animated GIF

このプラグインの欠点は、アップロードされた新しいGIFに対してのみ機能することです。通常のWordPressメディアアップローダーを使用してアップロードされたGIFにはクリック・トゥ・ロードは追加されません。つまり、以前にアップロードしたGIFはすべて、読み込みボタンをクリックすることができません。

この投稿が、WordPressでGIFプレイヤーをクリックして読み込む機能を追加する方法のお役に立てば幸いです。WordPressでよくある画像の問題を修正する方法についてのガイドもご覧ください。

この投稿を気に入っていただけたなら、WordPress動画チュートリアルのYouTubeチャンネルをぜひご登録ください。Twitterや Facebookでもご覧いただけます。

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

5件のコメントLeave a Reply

  1. 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.

      Admin

  2. 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

  3. 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.

  4. 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?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.