首页 > wordpress教程 > [亲测有效]wordpress视频自适应代码调整方案
摘要:我们在使用wordpress主题时,无论是在自定义上传视频中、还是在转发类似爱奇艺或是优酷之类的视频网站视频是都会出现一...

我们在使用wordpress主题时,无论是在自定义上传视频中、还是在转发类似爱奇艺或是优酷之类的视频网站视频是都会出现一个视频自适应的问题。那今天大挖给大家提供一个终极的解决方案。而且适用于各种主题只需要了解简单的html操作基础就可以上手。

原理说明
简单的原理,即是为视频链接或是分享过来的视频url手工添加一个样式,样式本身就是自适应的框架而成。那我们原做的是两步,第一在css里面添加一组样式表,第二为了我们在发布文章里使用方便,会在文本编辑器添加按钮。即可。

首先,需要找到主题style.css添加以下css代码:

然后,后台发布视频时,建议以iframe方式引用视频网站的视频,因为iframe方式在pc端和手机端都能完美显示视频,另外2种方式就不一定了!在中文本模式编辑器里用下面的类似方法引用:

为后台文章发布文本编辑器添加按钮
在编辑器添加按钮是减少用户操作成本,如果我们每次上传或是粘贴视频链接都要去复制代码就会使操作步骤过与繁琐,所以我们用一段简单的代码让操作变的得简单

在functions.php中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

好了,一套完美的wordpress主题视频自适应代码解决方案就完成了。是不是很方便,完成后台生成,操作简单,而且完美支持各种视频平台以及自主上传的视频。

分享到:
赞(4) 打赏

作者: 大挖酱

挖主题团队自2014年开始专注于WordPress企业主题设计开发,致力于为更多用户打造出更漂亮、更易用、更专业的网站。距今已累计开发近50款WP主题,付费客户超过5千人。挖主题,是您可以长期信赖的合作伙伴。

付款后联系作者QQ 2243748

支付宝扫一扫

微信扫一扫