疫情之下的苦中作乐
疫情的降临，让我们都来不及防备，而这个时候偏偏正逢新春佳节，本来我们应该走亲访友，却只能憋屈呆在家中，刚开始还好，可以享受一下宅在家里的快乐，渐渐的干什么都没有了趣味。
不知不觉过来这边已经一个月了，其中居家隔离了十七天，后来虽然解除了，但为了自己的安全以及不给社会添乱，基本上也很少出去。小王子学校已安排上了一周半的网课了，如前文所述，远离课本，以培养德智体美劳为主，慢慢的已经开始适应了学习的节奏。因为疫情的原因，工作也受到了影响，相关工厂那边有的开工了有的没有开工，所以事情也没多少。
无聊中没事就折腾了下网站，禁用了一些东西让网站不那么卡，效果如何貌似没啥感觉。接下之前的笔记做下记录吧。
网站最近动态
最近小朋友放假，每天都是各种玩，没啥好写的。就抽时间折腾网站了，改了错错了改，反反复复，尽力改到自己满意为止吧！
增加书单/影单页面
主要是为了记录小王子看书记录和观看影视记录，感觉功能还是很有必要的。所有书籍和影视信息来自豆瓣。
当然网上有各种插件，无奈一直以来不怎么喜欢用插件，喜欢用代码解决。
刚好在牧风大神那里看到了代码实现的方法，在此表示感谢。
1. 申请API
访问网站https://bm.weajs.com申请API Secret, 另外还需要填写你的豆瓣id及昵称，在该网站可同步豆瓣平台标注的电影和书籍信息，也可以在上面标注电影。
2. 引入资源
html
<meta name="referrer" content="never">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iMuFeng/bmdb@1.6.0/dist/Bmdb.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/iMuFeng/bmdb@1.6.0/dist/Bmdb.min.js" /></script>3. 初始化参数
js
<script>
new Bmdb({
type: 'movies',
selector: '.container',
secret: '7bf4205a0a62d00409f3cd70b0736e1a11a9a6a60f7231567f056819787b8096',
noMoreText: '没有更多数据了',
limit: 30
})
</script>4. 使用
电影列表：https://bm.weajs.com/api/movies?page=1&secret=你的secret号&limit=30
电影详细信息：https://bm.weajs.com/api/movies/:movieDoubanId?secret=你的secret号
书籍方法相同。
API Secret申请地址：https://bm.weajs.com
牧风的项目地址：https://github.com/iMuFeng/bmdb
效果如本站：https://www.wanghao.me/wanhuatong
微语增加分页
网站增加微言微语页面
好久没有折腾网站了，偶尔也只是发一些类似流水账似的文章。 并不是没事可写，有时因为是一两句的事感觉没必要写。 于是周末想着是不是该整一个类似朋友圈微博类的页面，用来写一下短心情类的。
php
<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts();if (have_posts()) : while (have_posts()) : the_post(); ?>改成
php
<?php $limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=10 . '&paged=' . $paged);
if (have_posts()) : while (have_posts()) : the_post(); ?>最后把首页分页函数复制过来放到适当位置就可以了。
文章页面增加历史上的今天
主题函数文件functions.php中插入以下代码（代码来自诗梦博客）：
PHP
//历史上的今天
function wp_today(){
global $wpdb;
$post_year = get_the_time('Y');
$post_month = get_the_time('m');
$post_day = get_the_time('j');
$sql = "select ID, year(post_date_gmt) as h_year, post_title, comment_count FROM
$wpdb->posts WHERE post_password = '' AND post_type = 'post' AND post_status = 'publish'
AND year(post_date_gmt)!='$post_year' AND month(post_date_gmt)='$post_month' AND day(post_date_gmt)='$post_day'
order by post_date_gmt DESC limit 5";
$histtory_post = $wpdb->get_results($sql);
if( $histtory_post ){
foreach( $histtory_post as $post ){
$h_year = $post->h_year;
$h_post_title = $post->post_title;
$h_permalink = get_permalink( $post->ID );
$h_comments = $post->comment_count;
$h_post .= "<li><strong>$h_year:</strong> <a href='".$h_permalink."' title='".$h_post_title."' target='_blank'>$h_post_title($h_comments)</a></li>";
}
}
if ( $h_post ){
$result = "<h2>历史上的今天:</h2><ul>".$h_post."</ul>";
}
return $result;
}
function wp_today_auto($content){
if( is_single() ){
$content = $content.wp_today();
}
return $content;
}
add_filter('the_content', 'wp_today_auto',9999);样式根据自己喜好自行编辑。
评论留言人Gravater头像
留言者未申请Gravatar头像，显示的是WordPress自带的默认头像或丑陋的随机图片，如安装一些插件的话，当留言者无Gravatar头像，则以留言者名称第一个字母为头像。
同样不喜欢插件的我在知更鸟大神那里发现了代码的解决方法：
PHP
require get_template_directory() . '/avatar/zm-first-letter-avatar.php';zm-first-letter-avatar.php文件下载地址：
[ypbtn]https://pan.baidu.com/s/1exL_8lThf2fva1wrzGizLA[/ypbtn] 【提取码: 8nxv】
不好的是使用这个后国内gravatar头像缓存加速就失效了。
评论留言验证码
虽然安装了防垃圾留言插件，但还是有漏网之鱼，而且有不健康的信息，考虑到小王子有时会打开网站，所以考虑加严吧。
网上找了好几种代码方式，无奈都失败了。最后请教狗哥终于解决了。
首先为表单增加验证字段，在主题文件functions.php中添加如下代码（也可以放在评论页面下）：
PHP
function verification_fields($fields) {
$num_o = rand(0, 99);
$num_t = rand(0, 99);
$fields['verification'] = '<input name="num_o" value="' . $num_o . '" type="hidden" />' .
'<input name="num_t" value="' . $num_t . '" type="hidden" />' .
'<p class="verification-code"><label for="verification-code">验证：</label>' .
$num_o . ' + ' . $num_t . ' = ' . '<input id="verification-code" name="pcodes" type="text" value="" size="4" /></p>';
return $fields;
}
add_filter('comment_form_default_fields', 'verification_fields');最后给评论表单添加了一个算术运算的验证，然后添加提交评论时验证计算结果的代码，仍然是放在主题文件functions.php中：
PHP
function verification_code() {
if ( ! $user->ID ) {
$num_o = trim($_POST['num_o']);
$num_t = trim($_POST['num_t']);
$pcodes = trim($_POST['pcodes']);
if( $pcodes != $num_o + $num_t ) {
wp_die( __('错误提示：请输入正确的验证码。') );
}
}
}
add_filter('pre_comment_on_post', 'verification_code');样式根据自己主题评论框自行设置吧。
文章索引
比较长的文章查阅起来往下拉比较费时间，于是增加文章索引（目录）就很有必要了。把下述代码放入主题functions.php文件中即可。
PHP
//文章索引
function article_nav($content)
{
$matches = array();
$ul_li = '';
$r = "/<h4>(.*?)<\/h4>/im";
if (preg_match_all($r, $content, $matches)) {
foreach ($matches[1] as $num => $title) {
$content = str_replace($matches[0][$num], '<h4 id="title' . $num . '">' . $title . '</h4>', $content);
$ul_li .= '<li><a href="#title' . $num . '" title="' . $title . '">' . $title . "</a></li>";
}
if (is_singular()) {
$content = '<div id="fn_article_nav"><div id="article_nav_title">文章目录</div><ul>'
. $ul_li . '<li style="text-align:center;border-top:1px #aaa dotted"><a href="#respond">发表评论</a></li></ul></div>' . $content;
}
}
return $content;
}
add_filter("the_content", "article_nav");然后根据自己喜好增加样式：
CSS
/*文章索引*/
.kratos-post-content h4 {
margin: 15px -25px;
padding: 0 20px;
border-left: 5px solid #00a2ff;
background-color: #eee;
font-size: 18px;
line-height: 40px;
}
#fn_article_nav{
float:right;
width:28%;
border-radius: 3px;
box-shadow:0 0 3px #aaa;
line-height:23px;
margin:10px 0 10px 15px;
}
@media (max-width:760px) {
#fn_article_nav{display:none;}
}
#article_nav_title{
font-size:14px;
text-align:center;
line-height:25px;
color:#cc0000;
border-bottom:1px #aaa dotted
}
#fn_article_nav ul{
padding:0!important;
margin:0px!important
}
#fn_article_nav li,#fn_article_nav li a{
font-size:14px;
color:#000000;
list-style:none;
padding:0 3px;
margin:0;
}
外链添加go跳转
看到好多网友有用这个特效，感觉挺酷的。于是试着弄了一个，发现平时很快打开的网站变慢了，影响用户体验，最终还是删除了，如果有兴趣可以试试。
把下面代码扔进主题文件functions.php文件中：
PHP
// 文章内外链添加go跳转
function loper_content_nofollow($content){
preg_match_all('/<a(.*?)href="(.*?)"(.*?)>/',$content,$matches);
if($matches){
foreach($matches[2] as $val){
if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){
$content=str_replace("href=\"$val\"", "href=\"".home_url()."/go/?url=$val\" ",$content);
}
}
}
return $content;
}
add_filter('the_content','loper_content_nofollow',999);
// 评论者链接添加go跳转
function loper_redirect_comment_link($text = ''){
$text = str_replace('href="', 'href="'.get_option('home').'/go/?url=', $text);
$text = str_replace("href='", "href='".get_option('home')."/go/?url=", $text);
return $text;
}
add_filter('get_comment_author_link', 'loper_redirect_comment_link', 5);
add_filter('comment_text', 'loper_redirect_comment_link', 99);然后下载下面文件放入网站下。
[ypbtn]https://pan.baidu.com/s/1UficbpYSnMVuEcj6Ewhx8Q[/ypbtn] 【提取码: ifc8】
使用OL标签时的数字格式
在修改归档页面样式时发现默认的ol标签数字样式太简单了，与后面内容区别不明显，于是修改了一下。
1. CSS样式
CSS
<style>
body {
background-color: #222;
color: #fff;
font-family: 'Average', serif;
}
h1 {
font-family: 'Fjalla One', sans-serif;
font-size: 3em;
}
ol {
counter-reset: my-counter;
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
padding-left: 30px;
position: relative;
}
li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #bada55;
color: #222;
display: block;
float: left;
line-height: 22px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 22px;
border-radius: 50%;
}
</style>2. html内容
HTML
<h1>Styling numbers with CSS counters</h1>
<ol>
<li>小王子 wanghao.me 1</li>
<li>小王子 wanghao.me 2</li>
<li>小王子 wanghao.me 3</li>
<li>小王子 wanghao.me 4</li>
<li>小王子 wanghao.me 5</li>
</ol>纯CSS实现顶部灯笼
过年为了营造一种气氛，于是有大神通过CSS3完美实现顶部灯笼样式。
1. CSS样式：放入样式表中或在header/footer中放入下面的样式：
CSS
.deng-box {
position: fixed;
top: -30px;
left: -10px;
z-index: 9999;
pointer-events: none;
}
.deng-box1 {
position: fixed;
top: -30px;
right: 5px;
z-index: 9999;
pointer-events: none;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -2px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: bold;
line-height: 85px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
2. html代码
HTML
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">宵</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">元</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
除了上述一些折腾，还对一些小细节做了些修改，同时把代码高亮插件换了，之前的插件不知啥原因，显示全乱了。
小王子已上了快二周的网课了，因为是远离课本以德智体美劳为主的，感觉还可以吧。
从下周开始就开始以课本为主了，昨天学校已统计了地址信息并将统一把课本快递到家。
本文最后更新于2021年3月18日，已超过 2 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
那年 • 今日
阿和说道： 
Lvtu说道： 
逆时针说道： 
Mr.Chou说道：