WordPress纯代码:为你的WordPress文章页面添加视频链接框


为文章页面添加视频链接框的作用:

今天君子不器在写一个91prom视频mp4地址解析的时候,顺手写了一下,准备把视频解析功能直接整合到自己正在用的这个WordPress主题里面,这样自己想要看的时候方便点,顶多就是多设置一下,防止被别人看到。

对于为WordPress文章发表页面添加一个视频链接框这个功能,不管你需不需要,但你至少要了解他,因为这个框框可以做的事情太多了,下面君子不器会一一说到的。

WordPress新建文章页面添加视频链接库的实现方法:

这个其实很简单,不过在说之前,还是先来看下截图好了。

WordPress纯代码:为你的WordPress文章页面添加视频链接框

上图中所展示的就是这个视频链接库的效果,这个其实没什么稀奇的,因为这个功能很多主题里面其实都有,实现起来也简单,就是几段代码而已,前提就是你得会灵活运用。

WordPress纯代码实现:

请将下面君子不器贴出的代码复制一下,然后粘贴到你当前WordPress主题的模板函数(functions.php)文件中保存即可。

/***************************************************************************
 ** 作者:君子不器
 ** 网站:Junzibuqi.Com
 ** 日期:2016年11月2日
 ** 说明:视频连接地址
****************************************************************************/

// 注册视频地址框
function junzibuqi_video_url_box() {
	add_meta_box('junzibuqi_video_url', '视频链接地址', 'junzibuqi_video_url_set_box', 'post', 'normal', 'high');
}
add_action('add_meta_boxes', 'junzibuqi_video_url_box');

// 输出视频地址框
function junzibuqi_video_url_set_box($object) {
	wp_nonce_field(basename( __FILE__ ), 'junzibuqi_video_url_nonce'); ?>
	<p>
		<label for="buqi_video_url">视频链接地址:</label>
		<input type="text" class="large-text" name="buqi_video_url" id="buqi_video_url" value="<?php echo esc_attr(get_post_meta($object->ID, 'buqi_video_url', true)); ?>">
    </p>
    <?php
}

// 保存视频地址框
function junzibuqi_video_url_save_box($post_id) {
	// 验证
	if (!isset($_POST['junzibuqi_video_url_nonce']) || !wp_verify_nonce($_POST['junzibuqi_video_url_nonce'], basename( __FILE__ ))) return;

	// 如果没有编辑权限则返回
	if (!current_user_can('edit_post')) return;
	// 原本是用foreach循环保存字段,但这里只有一个就直接这么写了,如果你写了多个则可以用foreach
	$value = $_POST['buqi_video_url'];
	$key = 'buqi_video_url';
	$exist_value = get_post_meta($post_id, $key, true);
	if ($value && $exist_value == '') {
		add_post_meta($post_id, $key, $value, true);
	} 
	elseif ($value && $value != $exist_value) {
		update_post_meta($post_id, $key, $value, $exist_value);
	} 
	elseif ($value == '' && $exist_value) {
		delete_post_meta($post_id, $key, $exist_value);
	}
}
add_action('save_post', 'junzibuqi_video_url_save_box');

将上述代码保存好之后,你就可以直接打开WordPress新建文章页面看到下面的视频连接地址框了。

WordPress代码调用方式:

如果要调用写文章时填写的视频地址也很简单,直接在文章页面模板(single.php)使用下面代码调用即可。

<?php echo get_post_meta(get_the_ID(),'buqi_video_url',true);?>

上面的调用方法会直接把你发表文章是填写好的内容显示出来,不过你也可以对此进行扩展。

比如像君子不器下面贴的代码,先判断文章是否填写了视频地址,如果填写了则直接插入一个视频,如果没填写则显示一句话或者干脆什么都不显示。

<?php
	$buqi_video_url = get_post_meta(get_the_ID(),'buqi_video_url',true);
	if(empty($buqi_video_url)){
		echo '<p>请输入视频地址</p>';
	}else{
		echo '<div class="video"><video id="av" src="' . $buqi_video_url . '" autoplay="autoplay" controls="controls" preload="auto" width="696" height="400" poster="" style="position: absolute;top:0;left: 0;width: 100%;height: 100%"><p>很抱歉,您的浏览器不支持HTML5,请更换一款支持HTML5的主流浏览器!<br />谷歌、360、傲游、火狐等浏览器都支持</p></video></div>';
	}
?>

注意:上面君子不器贴出的代码只是一个示例,你可以根据自己需求进行修改

WordPress功能实现原理:

其实这不是什么复杂的功能,只不过是利用WordPress的自定义字段功能,通过这个功能其实可以实现很多各种不同的功能。

其实WordPress的自定义字段是很强大的,只要你利用好了,可以做的东西就太多了,基本上你可以作出你任何想要的效果。

很多国外主题中看似牛逼哄哄的功能其实都可以通过自定义字段来实现,只不过就看你是否会灵活运用了。

就好比上面君子不器贴出的代码,如果你会运用,那么你可以直接改成下载地址、网站演示、副标题、文章来源之类的功能。

总之呢,代码是死得,人却是活得,你想要怎么改其实都可以,不光是新建文章这里,其实新建页面那个位置也是一样的。

分享您对本文的看法!
喜欢 喜欢
1
喜欢
不懂 不懂
3
不懂
膜拜 膜拜
1
膜拜
蛋疼 蛋疼
4
蛋疼
好奇 好奇
1
好奇
逗比 逗比
1
逗比
有才 有才
1
有才
开心 开心
1
开心
可怕 可怕
1
可怕
WordPress纯代码:为你的WordPress文章页面添加视频链接框

万事不求人,做最全面的自己!

评论 5

    1. 你说网站顶部的那个滚动公告么,我晚点写篇文章发出来吧,至于打赏功能,就是利用Bootstrap的模态框做的,如果你主题引用了Bootstrap,那么可以直接复制我的代码拿过去用的

分享下您的观点

您填写的邮箱不会被公开,邮箱仅用于获取您的Gravatar头像

登录

重置密码

再次尝试?
登录