#WordPress#添加背景音乐plus教程

几天前我写了一篇WordPress自定义美化的文章,文中第三个添加背景音乐的方法我总是觉得不够好,因为添加一首背景音乐每次进入都是响起同一首歌,即便是我特别喜欢,听久了也会觉得很厌,而且原来只实现了音乐,没有添加歌名,访客也不知道正在播放的是什么歌,所以我决定要再改一改。

对于背景音乐这个部件,我心里的构思是有一个音乐库,歌曲由我上传到存储介质中,打开网页部件自动从存储介质中读取所有音乐,并且自动播放第一首,一曲结束播放下一首,部件要能显示正在播放的音乐名,显示所有音乐列表,点击列表中的音乐名能够实现切歌。

怀揣着满满的憧憬,我开始码代码:
显示歌曲名用个span标签来实现,通过innerHTML来进行更改,没什么好说的。
音乐列表用无序列表,项目符号设置为none,有几首歌添加几个li
对每个li添加一个鼠标点击监听事件onclick
js脚本对onclick进行实现,通过li.innerHTML与歌名进行对比,相等既更改Audio标签的src属性,更改歌名,对Audio音频进行重载

代码如下:

&nbsp;&nbsp;正在播放《<span id="nameofmusic">歌名一</span>》
<audio src="歌曲链接一" autoplay="autoplay" controls="controls" loop="loop" preload="auto" id="bgAudio">
你的浏览器不支持背景音乐,请更换浏览器!!!
</audio>
<!--背景音乐音量-->
<script>document.getElementById("bgAudio").volume = 0.2;</script>
<!--音乐列表-->
<ul style="list-style-type: none;">
	<li id="music1" name="music1" onclick="changemusic(this)">歌名一</li>
	<li id="music2" name="music2" onclick="changemusic(this)">歌名二</li>
	<li id="music3" name="music3" onclick="changemusic(this)">歌名三</li>
</ul>
<script type="text/javascript">
	function changemusic(music){
		if(music.innerHTML==("歌名一")){
			document.getElementById("bgAudio").src="歌曲链接一";
			document.getElementById("nameofmusic").innerHTML=("歌名一");
			document.getElementById("bgAudio").load();
		}
		if(music.innerHTML==("歌名二")){
			document.getElementById("bgAudio").src="歌曲链接二";
			document.getElementById("nameofmusic").innerHTML=("歌名二");
			document.getElementById("bgAudio").load();
		}
		if(music.innerHTML==("歌名三")){
			document.getElementById("bgAudio").src="歌曲链接三";
			document.getElementById("nameofmusic").innerHTML=("歌名三");
			document.getElementById("bgAudio").load();
		}
	}
</script>

Before:

After:

这就实现了一个简易的HTML音乐播放器了,问题是并没有达到一开始的构想啊,一开始可是构思着能够从存储介质中读取音频的。
我的音频文件使用的是腾讯云COS对象存储,腾讯云提供了XML API,可惜不会用。

打开XML API链接,显示的内容让我想起了我之前通过必应接口获取每日美图(可参考文章:wordpress使用必应每日一图作登录页面背景/)时也用过类似的XML API,那是不是改一改必应那个php就能实现呢?

经过一番尝试,获得以下代码

<?php
    $str=file_get_contents('XML API链接');
if (preg_match("/music(.+?).mp3/", $str, $matches)) {  //正则表达式获取文件名
    $musicurl='对象存储域名'.$matches[0];  //拼接歌曲URL
}
if ($musicurl) {
    header('Content-Type: audio/mp3');  //浏览器将根据这个属性进行解析
    @ob_end_clean();
    @readfile($musicurl);
    @flush();
    @ob_flush();
    exit();
} else {
    exit('error');
}
?>

以上代码实现了从XML API中读取排在第一位的歌曲,但是只能传递一首歌曲
比如这个示例

“革命尚未成功,同志仍需努力”
暂时只能先这样了,等我研究研究javascript如何读取XML文件中的信息再来战。

#WordPress#使用必应每日一图作登录页面背景

WordPress的登录界面在我第一次看到的时候就忍不住在心里一通吐槽

“这丫也太难看了吧”
“得改得改”
“这个wordpress的logo点击之后居然是跳转到wordpress官网,也忒不要脸了吧”
“路过路过”

记得在还没安装“WordPress”的时候有看到“WordPress使用Bing美图作为登录页面背景”,当时有留意一下,现在该付诸行动美化一下了。

百度了一篇修改的文章1、WordPress 使用必应(Bing)背景美图作为登录页面背景
不过博主使用的是1366*768分辨率的API接口,我想要1920*1080分辨率的图片啊

为了高清,我另外度娘了一下php获取必应每日一图的方法,找到两篇相对有用的文章:
2、5种方法获取Bing每日图片 附送高清API接口及网站背景调用
3、必应每日一图接口 – CSDN博客

缙哥哥博客没有提供php源码,提供了一个接口,对于一个有强迫症并且闲的发霉的人来说,直接调用是多么的不专业多么的无能,万一链接失效,我的设置且不是也没用了吗?所以我找到了第三篇文章,然而第三篇文章也没有提供源码,那就在第一篇文章源码的基础上修改吧

	//调用bing美图作为登录页背景图
	function custom_login_head(){
	$str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?idx=0&n=1');
	if(preg_match("/<url>(.+?)<\/url>/ies",$str,$matches)){
	$imgurl='http://cn.bing.com'.$matches[0];
    	echo'<style type="text/css">body{background: url('.$imgurl.');width:100%;height:100%;background-image:url('.$imgurl.');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('.$imgurl.') 0;background-repeat:no-repeat\9;background-image:none\9;}</style>';
	}}
	add_action('login_head', 'custom_login_head');

需要修改的因该是

	$str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?idx=0&n=1');
	//这里应该是必应每日美图接口
	if(preg_match("/<url>(.+?)<\/url>/ies",$str,$matches)){
	//这里应该是正则表达式获取文件名
	$imgurl='http://cn.bing.com'.$matches[0];
	//这里应该是合成图片URL

分析清楚了,剩下的就是更改这三个地方了,根据第三篇文章我们能够获取到必应每日高清美图接口
http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1
接着是正则表达式,这个东西没接触过啊,只能自己去试一试了
利用站长之家提供的工具:正则测试
最后我用的正则是“/\/(.+?).jpg/”
修改拼接地址http://s.cn.bing.net

所以修改之后的代码应该是这样:

/**自定义登录界面背景*/
//调用bing美图作为登录页背景图
function custom_login_head(){
	$str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
	if (preg_match("/\/(.+?).jpg/", $str, $matches)) {
    	$imgurl='http://s.cn.bing.net'.$matches[0];
	}
    echo'<style type="text/css">body{background: url('.$imgurl.');background-repeat: repeat;background-position:center;background-image:url('.$imgurl.');background-repeat: repeat;background-position:center;-moz-border-image: url('.$imgurl.');background-repeat: repeat;background-position:center;}</style>';
	//这里我对background图片的样式进行了调整
	//方便小分辨率屏幕(如手机)显示图片正常,否则会被压缩
}
add_action('login_head', 'custom_login_head');

将以上代码加入至主题目录 Functions.php 文件最后面?>标签前(如果没有?>标签,则直接加到最后面)保存,WordPress登录界面背景就会每日更新为必应美图啦。

By the way,顺便提供一个获取高清原图的php源码

<?php
    $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
if (preg_match("/\/(.+?).jpg/", $str, $matches)) {
    $imgurl='http://s.cn.bing.net'.$matches[0];
}
if ($imgurl) {
    header('Content-Type: image/JPEG');
    @ob_end_clean();
    @readfile($imgurl);
    @flush();
    @ob_flush();
    exit();
} else {
    exit('error');
}
?>

把以上代码另存为bingpic.php放在服务器网站相应目录,通过访问就能直接调用必应高清图啦!
比如这个示例

至此就全部完成了!!!

——2018年2月26日上午10:58

长期没登陆都没发现必应美图API已经改了,原来的方法已经获取不到高清墙纸了,检查了一下,发现原来的XML还是可用的,应该只是必应的图片库链接改了,试了一下必应的官方官网+图片名,能够正常访问,更新如下:

	$imgurl='http://cn.bing.com'.$matches[0];

——2018年4月1日上午21:28

#WordPressWordPress页脚添加运行时间显示

在网络上访问别人的博客时,发现了一个不错的设置,在文章页脚添加网页计时,记录博客运行时间。看着时间一秒一秒的叠加,成就感油然而生。于是也想在这个博客添加这个计时器,代码也不难,都是学过的,只要找到对的地方添加就好了。

操作如下:
Wordpress后台——>外观——>编辑——>在右边的主题文件中找到【主题页脚 (footer.php)】修改代码如下

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>
	</div><!-- .site-content -->
	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info">
			托管于腾讯云
			<?php
				/**
				 * Fires before the Twenty Fifteen footer text for footer customization.
				 *
				 * @since Twenty Fifteen 1.0
				 */
				do_action( 'twentyfifteen_credits' );
			?>
			<!--以下为计时功能代码-->
			<script language="javascript">
			function tick() {
				var years,days,hours, minutes, seconds;
				var openday = new Date('2008/01/01 00:00');	//这里填写建站时间
				var today = new Date(); //获取系统当前时间
				var total = (today.getTime()-openday.getTime())/1000;
				years=Math.floor(total/31536000);
				total=total-years*31536000;
				days=Math.floor(total/86400);
				total=total-days*86400;
				hours=Math.floor(total/3600);
				total=total-hours*3600;
				minutes=Math.floor(total/60);
				total=total-minutes*60;
				seconds=Math.floor(total);
				timeString = "网站运行:"+years+"年"+days+"天"+hours+"时"+minutes+"分"+seconds+"秒";
				document.getElementById("Clock").innerHTML = timeString;
				window.setTimeout("tick();", 1000);
			}
			window.onload = tick;
			</script>
			<span id="Clock"></span>
			<!--以上为计时功能代码-->
		</div><!-- .site-info -->
	</footer><!-- .site-footer -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>

更改完成别忘了更新文件,再刷新博客,页脚的运行计时就显示出来了

#WordPress#自定义美化

一、自定义鼠标指针

<style>
	*{
		cursor: url('指针链接'), auto; //注意要包含单引号
	}
</style>

鼠标指针的格式:

IE支持cur,ani,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,不支持ani格式,也不支持gif动画格式,因此来说一般将url引用的图片存为ico或cur格式比较好!

W3school:CSS cursor 属性

二、自定义全网页字体

<style>
	*{
		font-family: 微软雅黑;	
	}
</style>

三、添加背景音乐

<!--在Wordpress——>外观——>小工具——>自定义HTML中插入如下代码-->
<audio src="音乐文件链接" autoplay="autoplay" controls="controls" loop="loop" preload="auto" id="bgAudio">
	你的浏览器不支持背景音乐,请更换浏览器!!!
</audio>
<!--设置背景音乐音量-->
<script>document.getElementById("bgAudio").volume = 0.2;</script>

W3school:HTML <audio> 标签

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 “autoplay”,则忽略该属性。

src url 要播放的音频的 URL。

暂时先分享这些吧,后面如果有其他好的美化设置再来更新

未完待续

#WordPress#的#mail#设置

一搭建完博客我迫不及待的把我的博客分享给了几个好友,他们访问我的博客给我提出了一个问题:

“能不能评论?”

我记得我在搭建博客的过程中有看到Wordpress后台是有留言评论功能的,文章预览也看到了一条初始化的评论,但是评论系统是怎样的,访客如何评论,管理员又要如何审核,我不太清楚。于是我进入了博客后台,找了一下[讨论]设置,里面有几个选项是可以勾选的

[评论作者必须填入姓名和电子邮件地址]
[用户必须注册并登录才可以发表评论]

我取消了[评论作者必须填入姓名和电子邮件地址],因为我觉得那样太麻烦了,而且提交的信息也未必真实,但是我又不想有太多垃圾评论,也不想让任何人都能随意评论,所以我勾选了[用户必须注册并登录才可以发表评论],随之而来的就是注册的问题了。
我在后台的[设置]→[常规]里面找到了[成员资格] 任何人都可以注册勾选之后,功能工具里面就多了个注册,登录界面也多了个注册的超链接
点击[注册]之后要求输入用户名和电子邮件

注册确认信将会被寄给您。

注册确认信?难道说还能发送邮件?但是在后台除了看到能通过邮件更新文章,也没看到设置发件的地方?难道说WordPress后台自动配置了邮箱系统?于是我试了下注册,网页显示
“注册确认信已发送”
后台账户管理里面也看到新账号,我兴冲冲的打开了我的邮箱,结果果然是空欢喜一场。
度娘了一下,有
Windows主机PHP不支持mail()函数的说法
那要怎么整?同时看到有很多用其它插件解决的方法,试图参照,安装并按照要求配置了WP Mail SMTP插件,依然无果。一直Dbug:Extension missing: openssl
后来Baidu到这么一篇文章【未解决】给wordpress添加smtp

实在是佩服博主坚持不懈,不断探索的精神???
看到前人尝试这么多次都没解决,我本来也打算放弃的。出于好奇,我度娘了一下“openssl

“Extension missing: openssl”就是扩展丢失:OpenSSL

丢失OpenSSL?

难道这个openssl需要单独在PHP里面开启?为此我又百度了一下,还真给我找到了php开启openssl的方法

去掉“php.ini”里面“;extension=openssl”前面的“;”找到php_openssl.dll,把文件复制的系统盘/WINDOWS\system32\文件夹下,重命名为“openssl.dll”,重启Apache服务。
Email Test

Your email was sent successfully!

成功了,手机也立即收到了测试邮件,奔走相告,普天同庆!
尝试注册 successfully!
至此,WordPress下的mail设置也就算完成了!
另外WordPress还有个“邮件模板”的插件,配合“WP Mail SMTP”使用真的是特别方便,邮件也更加美观!