• 对于注定会优秀的人来说,他所需要的,只是时间----博主
  • 手懒得,必受贫穷,手勤的,必得富足----《圣经》
  • 帮助别人,成就自己。愿君在本站能真正有所收获!
  • 如果你在本站中发现任何问题,欢迎留言指正!
  • 本站开启了防爆破关小黑屋机制,如果您是正常登录但被关进小黑屋,请联系站长解除!

关于博客上配置的一些小功能汇总

效率工具 eryajf 6个月前 (06-04) 21°C 已收录 10个评论
本文预计阅读时间 4 分钟

很多时候在使用博客的过程中,遇到不少实用而且给力的小工具,这里统一进行记录整理。

1,鼠标指尖贯彻社会主义核心价值观。

之前在浏览某些站点的时候,就看到过人家的站点里鼠标点击之后会显示诸如“富强”,“民主”,“自由”之类的词汇,感觉很高大上额,今天心血来潮也给博客添加了这个功能,网上一找,原来竟是如此简单。

效果展示:

这里可以看到点击之后的核心主机价值观各字的颜色是不停变幻的,这个颜色随机的功能,也是许多介绍这个功能的博客里的代码所不具备的,我找到这个代码也是非常巧合的缘分,其间丢过,后来又费了大劲儿找回来,现在下边保存的就是了,再也不怕丢失了。

接下来就介绍一下这个用代码实现的鼠标点击特效的功能。文章整理自https://www.itfensi.net/article/1417.html

去到主题的根目录下找到 footer.php,打开并添加下边的代码。添加位置如图所示:

添加的代码内容如下:

<!--eryajf 鼠标单击特效-->
<script type="text/javascript"> /* 鼠标特效 */
function getColorRandom(){ /* 随机颜色函数 */
var c="#";
var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
for(var i=0;i<6;i++){
var cIndex= Math.round(Math.random()*15);
c+=cArray[cIndex];
}
return c;
}
var a_idx = 0; jQuery(document).ready(function($)
{
$("body").click(function(e){
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color":getColorRandom()});
$("body").append($i);
$i.animate({
"top": y - 180, "opacity": 0}, 1500,
function() { $i.remove(); }); }); });
</script>

2,更改鼠标样式。

之前在各种博客闲逛的时候,看见过一些变异了的鼠标样式,那时候还不知道鼠标样式这个词儿,而且感觉很多站点设置的鼠标样式并不好看,直到偶然间逛到闲鱼博客,看到了滑稽版的鼠标样式,让我瞬间觉得,这么一个有意思而又可爱的样式,,我也想要。

说干就干,就去百度怎么弄。最后参考了这篇文章:https://www.qcgzxw.cn/1385.html#

总结起来也就两步:

  • 1,上传鼠标样式文件到服务器。
  • 2,将上传的在 style.css 里边进行引用。
  • 我就因为上传的鼠标样式的文件不对,导致一直失败,大家可以根据自己的喜好去下载鼠标样式,如果也想要我的这个,那么点击下边链接可以下载。

    文件下载

      文件名称:鼠标样式  文件大小:50K
      下载声明:本站文件大多来自于网络,仅供学习和研究使用,不得用于商业用途,如果有版权问题,请联系博主进行相关处理!
      下载地址:https://pan.baidu.com/s/1xLNIatKR8giMZqY8DZkmug

    关于提取密码,请看下边的介绍。

    注意:本段内容须成功“回复本文”后“刷新本页”方可查看!

    下载之后,上传到服务器的对应目录下。要保证可以通过连接下载到。

    然后在主题根目录下的 style.css 文件开头添加如下代码:

    /** 鼠标样式 开始**/ 
    /** 普通指针样式**/ 
    body {
    cursor: url(http://www.eryajf.net/啦啦啦), default;
    }
     
    /** 链接指针样式**/ 
    a:hover{cursor:url(http://www.eryajf.net/啦啦啦), pointer;}
     
    /** 鼠标样式 结束**/
    
    注意:要将 url 改成你自己的域名以及你的鼠标样式文件所放的位置。

    然后再去浏览器里边刷新,应该就可以了。

    如果,并不可以。那么尝试清除浏览器缓存,以及重启 nginx,等,将缓存释放,再去尝试。

    如果,还不行,那么参考一下:WordPress 解决修改 style.css 不生效问题三步走!这篇文章。

    以上,就实现了如本站的鼠标样式啦。

    当然还有更简单的方式,就是使用插件(Unique Cursor),但是插件里边的有太 low 了,所以就不推荐了哈。

    3,关于右侧侧边栏的 3D 标签云。

    有时候逛别人的站点,看到旁边的标签要么是 3D 的,要么是地图的,很是酷炫,一般效果如下图:

    终于在逛小文博客(原文)的时候看到,原来有一款很不错的汉化插件可以直接实现,那还说什么呢,直接来呗。

    先放出下载链接:

    文件下载

      文件名称:3D 标签云  文件大小:200K
      下载声明:本站文件大多来自于网络,仅供学习和研究使用,不得用于商业用途,如果有版权问题,请联系博主进行相关处理!
      下载地址:https://pan.baidu.com/s/176cqX5222SvC9uJwfeRb6g

    提取码如下所示。

    注意:本段内容须成功“回复本文”后“刷新本页”方可查看!

    使用起来也非常简单,安装并启用,然后在外观—》小工具处就可以看到这款工具了。

    可以自定义其中的宽高以及一些其他简单配置,基本上都是比较简单的。

    4,配置博客有评论微信通知。

    这个功能就简直不要太赞了,也是下午在逛闲鱼博客(原文)的时候看到的功能,当然这个是别人写好的,咱们直接拿过来用的一个功能。

    功能了解

    首先,要完成这个 WordPress 有新评论微信提醒管理员的功能,需要用到这个叫 Server 酱 的东西。

    功能部署

    其实上面已经把方法简单说了一下,事实上部署起来也就是那么简单……这里还是完整梳理一遍。

    1,注册 GitHub 账号(有了就跳过这步)。

    2,用 GitHub 账号登入网站,就能获得一个 SCKEY (在「发送消息」页面)

    3,绑定「Server 酱」:点击「微信推送」,扫码关注同时即可完成绑定。

    4,将获取的 SCKEY ,替换代码中的“你的 SCKEY ”,添加到function.php,保存即可。(代码来自网络,作者不清,知道的可以告知)

    //评论微信推送  
    function sc_send($comment_id)  
    {  
    $text = '博客上有一条新的评论';  
    $comment = get_comment($comment_id);  
    $desp = $comment->comment_content;  
    $key = '你的 SCKEY';  
    $postdata = http_build_query(  
    array(  
    'text' => $text,  
    'desp' => $desp  
    )  
    );  
       
    $opts = array('http' =>  
    array(  
    'method' => 'POST',  
    'header' => 'Content-type: application/x-www-form-urlencoded',  
    'content' => $postdata  
    )  
    );  
    $context = stream_context_create($opts);  
    return $result = file_get_contents('http://sc.ftqq.com/'.$key.'.send', false, $context);  
    }  
    add_action('comment_post', 'sc_send', 19, 2);  
    

    这里就配置成功啦,现在就可以去进行一下测试咯。

    试验。

    我在留言板上做一下留言,然后去微信看看效果。

    ok,大功告成,感谢 server 酱,感谢闲鱼哥!

    5,如何将 404 页面对接到腾讯公益。

    之前在不少地方看过 404 的腾讯公益界面,对于我们这样一个小人物,如果将自己的博客 404 也变成这样一个公益界面,或许能出一份小力,也是莫大的功德。

    其实设置的方法倒是非常简单的。

    首先去到自己博客主题的根目录中。找到 404.php,先备份一下,然后将下边的内容进行替换。

    cp 404.php 404.phpbak
    
    vim 404.php    #添加如下代码
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="description" content="二丫讲梵 导航的 404 错误页面,当您看到这个页面,表示您的访问出错,这个错误是您打开的页面不存在,请确认您输入的地址是正确的!虽然你访问的页面找不回来了,但>是我们可以一起寻找失踪宝贝!" />
    <meta name="keywords" content="404,404 错误页面,二丫讲梵 导航,一起寻找失踪宝贝,404 公益计划" />
    <title>404 - 对不起,您查找的页面不存在 _ 一起寻找失踪宝贝 _boke112 导航</title>
    </head>
    <body>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="点此返回 二丫讲梵首页"></script>
    </body>
    </html>
    

    其中的一些文字,你可以根据自己的需求进行一些小调整。

    效果如下图:


    未完待续。。。


    weinxin
    扫码订阅,第一时间获得更新
    微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

    二丫讲梵 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明关于博客上配置的一些小功能汇总
    喜欢 (3)
    [如果想支持本站,可支付宝赞助]
    分享 (0)
    eryajf
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    (10)个小伙伴在吐槽
    1. eryajf
      查看提取码
      eryajf2018-06-06 18:34 回复 Windows 7 | Chrome 66.0.3359.181
    2. eryajf
      签到成功!签到时间:2018-07-29 12:32:02,每日打卡,生活更精彩哦~
      eryajf2018-07-29 12:32 回复 Windows 7 | Chrome 67.0.3396.99
    3. 支持!
      liqilong2018-08-03 14:08 回复 Windows 7 | Chrome 55.0.2883.87
      • eryajf
        谢谢!
        eryajf2018-08-03 14:09 回复 Windows 7 | Chrome 68.0.3440.75
    4. 不错,学到了
      hero2018-08-13 15:38 回复 Windows 10 | Chrome 63.0.3239.26
      • eryajf
        感谢支持,欢迎以后常来 :cool:
        eryajf2018-08-13 15:53 回复 Windows 7 | Chrome 68.0.3440.106
    5. 这个真的要
      2018-09-23 09:39 回复 Windows 7 | Chrome 63.0.3239.132
      • eryajf
        都是个人在日常维护博客以及使用博客当中遇到的最良心最优秀的配置方案,绝对值得要
        eryajf2018-09-23 09:42 回复 Windows 7 | Chrome 70.0.3538.9
    6. 不错,收着待用
      云南茶网2018-09-29 11:13 回复 Windows 7 | Chrome 63.0.3239.132
      • eryajf
        拿走,别客气 :cool:
        eryajf2018-09-29 11:18 回复 Windows 7 | Chrome 70.0.3538.9