大家好，这里是关于[wordpress使用视频当做页面背景，可用来做首页视频背景]，[WP主题开发17：给wordpress主题trans添加主题设置页面#学浪计划#]问题的解答，希望对您有所帮助。如果你还想了解更多这方面的信息，请关注本站其他相关内容，共同学习吧！

wordpress使用视频当做页面背景，可用来做首页视频背景

2020年8月18日教程大全wordpress,WordPress教程,wordpress视频背景,首页视频背景

wordpress使用视频当做页面背景，可用来做首页视频背景

准备工作：

1.准备一个用来当做背景的视频，建议文件尽可能小。也可以转码成webm的格式

2.准备一张图片作为视频的预览图，在视频加载出来之前会显示这个预览图。

3.下载安装一个免费插件Video Background

兼容手机和PC端。如果页面中的文字因为视频背景看不清楚的话，可以给文字做一些特效，来加强显示效果。自由发挥吧。

1.视频素材

视频文件这里大家自己找就可以了。图片可以直接截一个视频里的图。也可以找个其他地方的图片，都没关系。建议是使用视频第一帧图片，这样不会给访客有突兀感。

2.安装Video Background插件

教程会使用一个免费插件，Video Background，这个插件在WP官方插件市场里就可以下载安装，免费版就够用。安装后启用即可。此插件无需设置。

3.创建页面

然后我们在wordpress后台新建一个页面。

1.选择我们要在网页显示的区域，这里可以参考插件官方教程：寻找显示容器

这里简单介绍下。我们可以先预览创建的页面。按浏览器F12，点击控制栏左上角的小箭头来选择要显示的区域。

选择的区域会显示蓝色覆盖。左键单击，就会显示对应区域的网页代码。

复制ID后面的那个字符。将其填入Container，填入时，在字符前面加一个英文#。

到这你就可以预览看一下页面效果了。过程挺简单的。

怎么当做首页视频背景？

在后台-设置-阅读设置里面将页面设为首页就可以了。选择时候记得选择合适的区域来显示视频。

WP主题开发17：给wordpress主题trans添加主题设置页面#学浪计划#

在前面的章节中，我们已经完成了wordpress主题trans的前端页面的动态模板的创建，我们创建了公共模板：头部模板、侧边栏模板、底部模板，我们完成了首页模板、列表页模板、文章详情页模板。但是，有一些细节问题，我们还没有处理好，如：logo图片如何修改？底部的一些信息如何修改？网站的关键词与描述在哪添加？当然，这些东西，我们可以手动添加到模板代码中，但是，在后期操作中就比较麻烦，难道每次修改时，我们都要去修改模板代码吗？如果用户是一个不懂代码的人，该如何操作呢？这时，如果在trans主题的后台有一个界面可以设置这些东西就好了，那样，不管你懂不懂代码，都可以操作。所以，我们将带着在大家来给trans主题添加一个主题设置页面。

第一步：给后台外观导航添加一个“主题设置”子菜单。

在trans主题的functions.php文件中添加如下代码：

//在后台“外观”菜单中添加 【主题设置】 这个子菜单function Themes_Set(){ add_theme_page( 'title标题', '主题设置', 'administrator', 'ashu_slug','ssmay_set'); }add_action('admin_menu', 'Themes_Set'); function ssmay_set(){ //主题设置函数 include("theme_set.php");//这里是我人创建的一个php文件，用来设置选项内容 }

这里我用到了wordpress的几个函数：

add_theme_page()：给“外观”导航创建子菜单；参数解说：参数1-----标题的内容参数2-----显示在后台左边菜单的标题参数3-----访问这个页面需要的权限参数4-----别名，需要独一无二哦参数5-----执行的函数（我们自定义的函数）

add_action()：这是一个添加勾子的函数，这里将“Themes_Set”函数添加到“admin_menu”后台菜单的勾子中。

这时，我们还不能测试，因为theme_set.php我们还没有创建，会报错的。

第二步：在trans主题目录下创建一个主题设置文件。

在主题文件夹里创建一个新文件——theme_set.php，也就是主题设置内容界面文件。在这个文件中添加如下测试代码：

<h2>我是trans主题设置</h2>

这时，我们打开后台的外观，可以看到一个“主题设置”的子菜单，点击“主题设置”，右侧内容栏会显示“我是trans主题设置”，就表示我们添加设置功能成功了，如下图：

第三步：能主题设置界面添加设置表单。

接下来，我们就可以在后台“主题设置”的右侧内容栏中添加我们想要的设置表单内容了。在theme_set.php添加如下代码：

< style>.theme_set{ width:98%; }.theme_set h2{ font-size:20px; }.theme_set dl{ margin-top:20px; }.theme_set dd{ margin:5px 0; }.theme_set dd input[type=text]{ width:50%; }.theme_set dd textarea{ width:50%; }.theme_set dd img{ margin-bottom:-30px; }</style>

< div class="theme_set">< form action="" method="post" enctype="multipart/form-data">< h2>主题设置</h2> < dl>< dt>网站Logo：</dt>< dd> < input type="file" name="logo"> </dd></dl>< dl><dt>网站备案号：</dt><dd><input type="text" name="beian" value=""></dd></dl><dl>< dt>网站地图链接：</dt>< dd><input type="text" name="map" value=""> </dd></dl>< dl>< dt>网站关键词：</dt>< dd><input type="text" name="keywords" value=""></dd></dl>< dl>< dt>网站描述：</dt>< dd>< textarea name="description" ></textarea></dd></dl>< dl>< dt>分享代码：</dt>< dd>< textarea name="share" ></textarea></dd></dl>< dl>< dt>文章页广告代码：</dt>< dd>< textarea name="ad_single" ></textarea></dd></dl>< dl>< dt></dt>< dd><input type="submit" name="theme_set" value="提交"></dd></dl></form></div>

这时，主题设置界面的展示效果如下图，还只是一个静态界面，没有任何动态交互功能：

第四步：给上面的表单添加PHP处理代码。

在theme_set.php页面的顶部添加表单提交后的处理代码，如下：

< ?phpif($_POST['theme_set']){ $attachment_id = media_handle_upload( 'logo', 0 ); //上传图片，返回的是 附件的ID $logo_url = wp_get_attachment_url($attachment_id); //获取 图片的地址if($logo_url){update_option("logo_img",$logo_url); //如果图片地址在在，就将图片的地址写入到数据库}update_option("beian",$_POST["beian"]); //更新数据表中的备案字段的值update_option("map",$_POST["map"]); update_option("keywords",$_POST["keywords"]);update_option("description",$_POST["description"]);update_option("share",stripslashes($_POST["share"]));update_option("ad_single",stripslashes($_POST["ad_single"]));

}

$logo_img = get_option("logo_img"); ?>

这里，我们又用到了wordpress的几个函数：

wp_get_attachment_url()：获取附件的路径地址，参数是附件的ID。media_handle_upload()：上传文件的函数，返回上传附件的ID。参数1：< input name="logo">的name值；参数2：文章ID，如果是0，表示不是文章。update_option()：更新wp_options数据表中的选项。参数1：数据表中的字段名；参数2：字段的值。

完成了这一步，我们就可以在后台的主题设置界面上传logo图片和添加相关信息了。

第五步：在设置表单中显示已添加的数据。

通过上面的步骤，我们只可以添加数据到数据库，但在下一次进入到这个主题设置界面时，我们并不知道有没有添加数据，因为，表单仍然是空的，它没有从数据库中调用相应的数据，这样就不友好了。所以，这里，我们要让表单中显示我们已添加到数据库中的数据。把表单的部分代码修改成如下代码：

< dl>< dt>网站Logo：</dt>< dd> < input type="file" name="logo"> < img src="<?php echo $logo_img; ?>" height=50 ></dd></dl>< dl>< dt>网站备案号：</dt>< dd><input type="text" name="beian" value="<?php echo get_option("beian"); ?>"></dd></dl>< dl>< dt>网站地图链接：</dt>< dd>< input type="text" name="map" value="<?php echo get_option("map"); ?>"> </dd></dl>< dl>< dt>网站关键词：</dt>< dd>< input type="text" name="keywords" value="<?php echo get_option("keywords"); ?>"></dd></dl>< dl>< dt>网站描述：</dt>< dd>< textarea name="description" ><?php echo get_option("description"); ?></textarea></dd></dl>< dl>< dt>分享代码：</dt>< dd>< textarea name="share" ><?php echo get_option("share"); ?></textarea></dd></dl>< dl>< dt>文章页广告代码：</dt>< dd>< textarea name="ad_single" ><?php echo get_option("ad_single"); ?></textarea></dd></dl>

这样，我们在后期进入这个主题设置界面后，在表单中就会显示已添加的数据和已上传的图片了。如下图所示：

​通过上面的五大步骤，我们成功地为wordpress主题trans的后台添加了主题设置功能。在下一节中，我们再来介绍，如何在前端的代码中调用这些设置页面所设置的数据。本节我们就介绍到这里，如果喜欢我的课程，别忘了帮我“点赞、评论、收藏”哦。谢谢参阅。