一、加入Live 2D血小板(可拖动)
二、使用必应(Bing)美图作为后台登录背景
- 实现方法一
- 实现方法二
三、实现网站在线人数统计
四、添加网站欢迎语弹框,显示天气及地理位置
五、解除蜗牛般默认外网的头像服务器
六、站点登录页面加密

自从博客站点换了新主题之后，随之来的出现了很多的bug，也增加了一些小功能，做了一些加速优化，最后改成了自己满意的样子。这篇文章就用来记录这几天的优化经历吧。我的个人博客网站是：http://qkongtao.cn/

一、加入Live 2D血小板(可拖动)

加入血小板的教程我在很早之前的一篇博客已经做了很详细的教程，具体实现可以参考：

个人网站中：http://qkongtao.cn/?p=465
CSDN中：https://blog.csdn.net/qq_42038623/article/details/105384576

接下来主要来实现怎么让血小板进行拖拽的功能：

这个问题我第一的想法是可以使用我在大二学JS的时候手写过拖拽的原生Demo，实现了三种拖拽的形式。

具体参考我之前的博文：js的成长经历（十）——js事件高级：拖拽

现在想一想这些基础的JS源码实现还是挺重要的。后来也通过查阅资料，也有下面的一种实现块元素拖拽的方法：

//血小板拖动（landlord是块元素的ID）
			var oDiv=document.getElementById("landlord");
			setDragable(oDiv,oDiv);
            function setDragable(drg,mov){
                let drgObj=drg;
                let moveObj=mov||drg;
                function G(o){return document.querySelector(o)}
                //获取元素的纵坐标,距离文档顶部的高度
                function getTop(e) {
                  var offset = e.offsetTop;
                  if (e.offsetParent != null) offset += getTop(e.offsetParent);
                  return offset;
                }
                //获取元素的横坐标,距离文档左边的宽度
                function getLeft(e) {
                  var offset = e.offsetLeft;
                  if (e.offsetParent != null) offset += getLeft(e.offsetParent);
                  return offset;
                }
                //拖放开始
                function dragstart(e){
                    let off={x:e.x-getLeft(moveObj),y:e.y-getTop(moveObj)};
                    moveObj.dragOff=off;
                }
                //拖放结束
                function dragend(e){
                    let off=moveObj.dragOff;
                    moveObj.style.top=e.y-off.y+"px";
                    moveObj.style.left=e.x-off.x+"px";
                }
             
                if(typeof drg !="object")
                    drgObj=G(drg);
                if(typeof mov != "object")
                    moveObj=G(mov||drg);
                drgObj.draggable = true;
                drgObj.style.cursor= "move";
                //监听拖动事件
                drgObj.addEventListener("dragstart",dragstart,true);
                drgObj.addEventListener("dragend",dragend,true);
            }

这种实现方式主要使用了dragstart和dragend事件实现，但是在绑定事件的时候需要做一下兼容。（有兴趣的可以自己去实现一下）

实现效果可以参考我的个人博客：http://qkongtao.cn/

二、使用必应(Bing)美图作为后台登录背景

bing 必应今日美图还是很不错的,非常漂亮,又没有水印,但是一直没找到如何调用出来,谷歌了一下 bing 必应今日美图可以调用。喜欢就不要错过咯！最重要的是它的背景图每天都在自动更换哦~~~

实现方法一

将以下代码加入至主题目录 Functions.php 文件最后面?>标签前（如果没有?>标签，则直接加到最后面）保存（1366*768 分辨率）：

//调用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[1];
    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;background-image:none;}</style>';
}}
add_action('login_head', 'custom_login_head');

实现方法二

能够获取到必应每日高清美图接口（1920*1080 分辨率）：

/**自定义登录界面背景*/
//调用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-image:url('.$imgurl.');-moz-border-image: url('.$imgurl.');}</style>';
    //这里我对background图片的样式进行了调整
    //方便小分辨率屏幕（如手机）显示图片正常，否则会被压缩
}
add_action('login_head', 'custom_login_head');

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

三、实现网站在线人数统计

纯代码实现网站在线人数统计功能，把下方代码添加到你要添加的地方，添加后会在网站根目录自动创建一个maplers.dat文件，用于数据统计。

<?php
//首先你要有读写文件的权限，首次访问肯不显示，正常情况刷新即可
$online_log = "maplers.dat"; //保存人数的文件到根目录,
$timeout = 30;//30秒内没动作者,认为掉线
$entries = file($online_log);
$temp = array();
for ($i=0;$i<count($entries);$i++){
$entry = explode(",",trim($entries[$i]));
if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
}}
array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
$maplers = count($temp); //计算在线人数
$entries = implode("",$temp);
//写入文件
$fp = fopen($online_log,"w");
flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
fputs($fp,$entries);
flock($fp,LOCK_UN);
fclose($fp);
echo "在线人数：".$maplers."人";
?>

比如我就是加在了主题源码下footer.php文件下

wordpress优化&修改经历（一）一、加入Live 2D血小板(可拖动)二、使用必应(Bing)美图作为后台登录背景三、实现网站在线人数统计四、添加网站欢迎语弹框,显示天气及地理位置五、解除蜗牛般默认外网的头像服务器六、站点登录页面加密

实现效果如下：

四、添加网站欢迎语弹框,显示天气及地理位置

1.function.php 下添加如下代码：

//网站欢迎语弹框,显示天气及地理位置
function show_addr(){
    $ip = $_SERVER["HTTP_X_FORWARDED_FOR"]; //获取当前位置的ip
    $res0 = file_get_contents("http://ip.taobao.com/service/getIpInfo.php?ip=$ip"); //淘宝的一个接口
    $res0 = json_decode($res0,true);//json转换数组
    //var_dump($res0);
    $host  =  $res0['data']['region'].$res0['data']['city'];//城市地区拼接
    echo "<div id=\"welcome\" style=\"text-align:center;\">欢迎来自 <span class=\"from-url\">".$host."</span> 的网友！<br><center>今日：<iframe width=\"180\"scrolling=\"no\" height=\"18\" frame0\" allowtransparency=\"true\" src=\"https://i.tianqi.com/index.php?c=code&id=1&icon=1&wind=0&num=1\">
</iframe></center><div class=\"closebox\"><a href=\"javascript:void(0)\"οnclick=\"$('#welcome'). slideUp('slow');$('.closebox').css('display','none');\" title=\"关闭\">关闭</a></div></div>";  //输出欢迎语及关闭
}

将以下代码添加到style.css中即可：

#welcome {background:#ffffff;border:0px solid #ffffff;color:#000000;font-size:14px;opacity:0.7;filter:alpha(opacity=70);padding:10px 20px;position:fixed;right:50px;bottom:30px;z-index:99999;border-top-left-radius: 15px;border-bottom-right-radius: 15px;border-top-right-radius: 15px;border-bottom-left-radius: 15px;}
.from-url{color:#3d3b4f;font-weight: 700;}
.closebox{float:center;text-align:center;font-size:16px;margin-top:10px;}

添加调用代码

<?php
if(!wp_is_mobile()){?>
<?php show_addr();?>
<?php }?>

使用效果如下

五、解除蜗牛般默认外网的头像服务器

推荐地址： https://gravatar.loli.net/avatar/

首先找到网站的 Gravatar头像默认地址 https://secure.gravatar.com/avatar/

比如在主题的：(首页) index.php (头部) header.php (模板函数) functions.php (评论) comments.php 等…

Ctrl+F查询类似于 https://secure.gravatar.com/avatar/ 等地址，替换成推荐地址 https://gravatar.loli.net/avatar/

例如本站主题：就在 functions.php 文件中找到 https://secure.gravatar.com/avatar/ 大概在 780行

然后直接把 https://secure.gravatar.com/avatar/ 替换成 https://gravatar.loli.net/avatar/ 即可。

六、站点登录页面加密

我相信许多使用WordPress建站的站长都遇到网站暴力破解攻击。

尽管它们还没有被破解，但是当他们收到登录失败的电子邮件提醒时，常常会感到恐慌。在这种情况下，最好的方法是修改/隐藏我们网站后台登录地址。

WordPress后台的默认登录地址为：/wp-login.php

添加代码更改WordPress登录地址，将下面代码添加到functions.php文件里

//更改WordPress登录地址
add_action('login_enqueue_scripts','login_protection'); 
function login_protection(){ 
	if(($_GET['password'] != '填写自己的密码')) header('Location: http://qkongtao.cn/');
}

添加以上代码后，我们网站的后台登录地址将变为：http://qkongtao.cn/wp-login.php?word=press

如果不是该登录地址，它将跳转到 http://qkongtao.cn/。

目录

一、加入Live 2D血小板(可拖动)

二、使用必应(Bing)美图作为后台登录背景

实现方法一

实现方法二

三、实现网站在线人数统计

四、添加网站欢迎语弹框,显示天气及地理位置

五、解除蜗牛般默认外网的头像服务器

六、站点登录页面加密

继续阅读

TortoiseSVN 简明使用

WORDPRESS中添加备案号，解决备案号未出现的问题

让主题显示WordPress后台添加的ICP备案号让主题显示WordPress后台添加的ICP备案号

关于wordpress建站后在非官方主题下添加网站备案信息

WP Rocket评测：2021年它真的会加速WordPress网站吗？

身份验证失败：修复无法连接到 WordPress SFTP 服务器的严重错误

为什么个人和企业都需要有个网站？

如何在 WordPress 中跟踪第三方域名请求

WordPress 不同页面显示不一样的侧边栏

seo技巧篇

关于如何利用WordPress建立淘宝客的站的做法

【树莓派】树莓派3B安装宝塔面板并配置安装LNMP

欢迎使用CSDN-markdown编辑器个人网站搭建实践The Construction of Personal Website

weDevs如何成功地使用WP Project Manager进行项目管理团队协作

云虚拟主机进入容器时代

门户通专访月光博客：第一博客是如何打造成的