如何在WordPress中为GIF添加点击加载

Do you want to add a click to load GIF player on your WordPress website? Animated GIF images take longer to load which affects page speed and user experience. That’s why many popular blogging platforms don’t auto-load GIFs in their apps. In this article, we will show you how you can easily add click to load for GIFs in WordPress.

您是否要添加单击以在WordPress网站上加载GIF播放器? 动画GIF图像需要更长的加载时间,这会影响页面速度和用户体验。 这就是为什么许多流行的博客平台不会在其应用程序中自动加载GIF的原因。 在本文中,我们将向您展示如何轻松添加点击以在WordPress中加载GIF。

Adding click to load for Gifs in WordPress
为什么要在WordPress中为GIF添加点击加载? (Why Add Click to Load for GIFs in WordPress?)

If you often add animated GIF images in WordPress, then you already know that they are way larger in size than regular images. This means they take longer to load which affects your website speed and performance.

如果您经常在WordPress中添加GIF动画图像 ,那么您已经知道它们的大小比常规图像大得多。 这意味着它们需要更长的时间加载,从而影响您的网站速度和性能

Some websites deal with this by lazy loading images in WordPress. However, this still affects users experience because GIFs take longer to load as the user scrolls down.

一些网站通过在WordPress中延迟加载图像来处理此问题。 但是,这仍然会影响用户体验,因为随着用户向下滚动,GIF需要更长的时间才能加载。

Popular platforms like Tumblr and others use click to load GIF player to mitigate this problem. Instead of loading all frames in a GIF animation, they load just the first frame of the animation. A play button or GIF label on the image indicates that users can click to view the animated GIF.

Tumblr等流行的平台使用click加载GIF播放器来缓解此问题。 而不是加载GIF动画中的所有帧,它们仅加载动画的第一帧。 图像上的播放按钮或GIF标签表示用户可以单击以查看动画GIF。

Paused GIF example

That being said, let’s take a look at how you can add click to load button for GIFs on your WordPress website.

话虽如此,让我们看一下如何在WordPress网站上为GIF添加点击加载按钮。

在WordPress中为GIF添加点击加载 (Adding Click to Load for GIFs in WordPress)

First thing you need to do is install and activate the WP GIF Player plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活WP GIF Player插件。 有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

This plugin works out of the box, and there are no settings for it.

该插件可以直接使用,并且没有设置。

You can head over to the post edit screen to see it in action.

您可以转到帖子编辑屏幕以查看其操作。

Add GIF button in WordPress post editor

On the post edit screen, you will notice the Add GIF button above the post editor. Clicking on it will bring up the media uploader popup where you can upload your GIF images similar to any other image.

在帖子编辑屏幕上,您会注意到帖子编辑器上方的“添加GIF”按钮。 单击它会弹出媒体上载器弹出窗口,您可以在其中上载与其他任何图像类似的GIF图像。

Upload GIFs using the Add Gif button

Once uploaded, you need to click on the Insert image button to continue.

上传后,您需要单击“插入图像”按钮以继续。

The WP GIF player plugin will now add the required shortcode in your WordPress post editor.

WP GIF播放器插件现在将在WordPress帖子编辑器中添加所需的简码

GIF shortcode in WordPress post editor

You can now save your post/page and click on the preview button to see your click to load GIFs in action.

现在,您可以保存您的帖子/页面,然后单击“预览”按钮以查看单击以加载实际运行的GIF。

All the GIFs embedded on your post will now have a button on top of them labeled GIF. Clicking on the button will load the animated GIF in the background and display it.

现在,您帖子中嵌入的所有GIF都将在其顶部带有一个标记为GIF的按钮。 单击该按钮将在背景中加载动画GIF并显示它。

Click to play animated GIF

One downside of this plugin is that it only works for the new GIFs that upload. It will not add click to load for GIFs uploaded using the normal WordPress media uploader. This means all your previously uploaded GIFs will not have the click to load button.

该插件的缺点是它仅适用于上传的新GIF。 对于使用普通WordPress媒体上传器上传的GIF,它不会添加点击加载。 这意味着您以前上传的所有GIF都没有点击加载按钮。

We hope this article helped you learn how to add the click to load GIFs player in WordPress. You may also want to see our guide on how to fix common image issues in WordPress.

我们希望本文能帮助您学习如何在WordPress中添加点击以加载GIF播放器。 您可能还希望查看有关如何解决WordPress中常见图像问题的指南。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-click-to-load-for-gifs-in-wordpress/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值