Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
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でもご覧いただけます。

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

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.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

5件のコメント返信を残す

  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.

      管理者

  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?

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。