又一次折腾博客,这次换主题了


正如文章标题所说,我又换主题了。上一次换主题是6月份的时候,花钱买了Begin正版主题,刚开始是喜欢Begin大气的风格,功能多,样式好看,特别是方框式的评论框,知更鸟大神真厉害!但是我觉得我希望我博客偏向文字类,而不是“大杂烩”,我喜欢写,喜欢写文章,用Begin的话,就感觉大材小用了;而且Begin主题好多人在用,我也有点审美疲劳了。

之所以看上官方Twenty Twelve主题,是因为我觉得它比较适合文字类的博客,专注写作,写日记,淡淡的风格,我也喜欢;虽然单调但不落俗套。知道我换了主题的几个朋友都说,体验效果更好了(完全没有贬低Begin主题的意思)。这个主题呢,纯代码,图片少,功能少,但是写博客足够了;正因为功能不多,不繁杂,网站速度也有了很大的提高,不过我发现官方主题文件里,注释挺多的。

很早之前就看到许多博主用Twenty Twelve主题,比如说:
土木坛子 夜阑静 尺宅即江湖 灵尘居 佐仔志 ……
以上这些博主用的都是这个主题。简单,不落俗套,文章又写得好,学习的榜样。

明月登楼博主曾说的,博客最主要的还是内容,其余都是修饰,内容才是王道。我也会尽我所能写出好的文章来,让大家不虚此行。

Begin主题修改文章摘要形式

继续魔改我们的Begin主题,这次是修改WordPress自带的摘要样式,先贴出css代码:

/* 摘要 */
/* 修改 */
.abstract {
	color: #999;
	font-size: 14px;
}
/* 修改 */
.abstract fieldset {
	margin: 0 0 10px;
	padding: 5px 15px;
	border: 5px solid #ddd;
	border-radius: 10px;
}
/* 修改 */
.abstract legend {
	padding: 0 5px;
	color: #999;
	font-weight: bold;
	font-size: 18px;
}

将上面的代码粘贴至style.css文件,或后台-外观-主题-自定义,添加css代码。

看看效果:

这是修改之前的
这是修改之后的

是不是特别有立体感,比原先的好看多了。

新版Begin主题侧边栏和两栏标题美化

将侧边栏标题 sidebar h3  位置css修改成如下所示:

  1. #sidebar h3, #sidebar-l h3 {
  2. background: #fff;
  3. height: 37.5px;
  4. line-height: 37.5px;
  5. border-bottom: 1px solid #e2e1e1;
  6. margin: 0 20px 0 20px;
  7. text-align: center;
  8. font-size: 1.8rem;
  9. letter-spacing: 4px;
  10. color: #606777;
  11. }

按照以上css修改后,标题栏位置还多了一个 .title-i  ,后台找到 .title-i  将其隐藏:

  1. .title-i {
  2.     floatleft;
  3.     width16px;
  4.     displaynone;
  5. }

将 .title-i 隐藏后,如下效果图:

然后,如果使用杂志布局的会发现两栏位置前面的标题ICO也会不见了。

接着,将 .cat-box .cat-title a  位置css修改成以下即可。

  1. .cat-box .cat-title a {
  2. float: left;
  3. width: 98%;
  4. margin-left: 20px;
  5. color: #606777;
  6. font-size: 1.8rem;
  7. }

要注意font-size: 1.8rem;是原先的教程中没有的,新版本的Begin主题需要再加入这条代码,不然标题很小。

以上就是美化侧边栏和两栏标题的教程,具体效果请移步至本博客首页查看。

为 WordPress 评论功能增加字数长度限制

这个功能其实实现起来很简单,只要利用好 WordPress 为我们提供的 preprocess_comment 钩子即可,使用这个钩子可以实现对评论内容的各种处理,不管是过滤评论中的恶意链接还是处理特定的垃圾评论,通过 preprocess_comment 钩子我们都可以实现。

将下面的代码添加到当前 WordPress 主题的 functions.php 文件:

/**
* 为WordPress评论功能增加字数长度限制 – 龙笑天下
* https://www.ilxtx.com/limit-wordpress-comment-length.html
*/
function lxtx_set_comments_length($commentdata) {
    $minCommentlength = 5; //最少字數限制,建议设置为5-10个字
    $maxCommentlength = 220; //最多字數限制,建议设置为150-200个字
    $pointCommentlength = mb_strlen($commentdata[‘comment_content’],‘UTF8’); //mb_strlen 一个中文字符当做一个长度
    if ( ($pointCommentlength < $minCommentlength) && !is_user_logged_in() ){
    err(‘抱歉,您的评论字数过少,最少输入’ . $minCommentlength .‘个字(目前字数:’. $pointCommentlength .‘)【登录后无此限制】’);
    exit;
    }
    if ( ($pointCommentlength > $maxCommentlength) && !is_user_logged_in() ){
    err(‘抱歉,您的评论字数过多,最多输入’ . $maxCommentlength .‘个字(目前字数:’. $pointCommentlength .‘)【登录后无此限制】’);
    exit;
    }
    return $commentdata;
}
add_filter(‘preprocess_comment’, ‘lxtx_set_comments_length’);

即可实现对评论字数进行控制。(代码来自龙笑天博客

 

 

让评论框更有趣:评论框加载一言

什么是一言?

一言网(Hitokoto.cn)创立于2016年,隶属于萌创Team,目前网站主要提供一句话服务。动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。*:本段文本源自hitokoto.us.

我在文章末尾已经调用了一言api,具体效果请前往文章末尾翻看。

突发奇想

我也就是突发奇想,想把一言调用至评论框,刷新一下又是一个句子。可惜能力有限,询问朋友也没个结果,最后是群里一位不相识的朋友发给了我教程。

具体教程

在网站header或者footer添加下面的代码

<script>
    $.get("https://v1.hitokoto.cn/",function(data){ 
      $("#comment").text(data.hitokoto);
    });
    $(function(){
      $("#comment").click(function() {
        $(this).select();
      })
    })
</script>

如果你的评论框id不是comment,请参考如下步骤获取 首先右键评论框-审查元素-查看id或者class,选其一即可,之后把获取的id或者class替换到上述代码中的#conment 注意,如果你要用id,请用修改成#你的id名,如果是class,请修改成.你的class名即可 该js需要引入jquery库,如果未能正常显示请注意是否成功引入jquery库或者是否成功匹配评论框id或者class值。(代码来自憶の年

但是,最终我博客还是没有用这个功能。

 

知更鸟主题右侧滚动条按钮美化

代码部署

把下面的代码复制,粘贴到:后台→外观→主题选项→定制风格→自定义样式

  1. /*右侧滚动条美化*/
  2. #scroll{width:32px;float:rightright;position:fixed;rightright:10px;bottombottom:50px;z-index:9999;}#scroll li a{font-size:16px;color:#fff;width:32px;height:32px;line-height:28px;text-align:center;vertical-align:middle;margin-top:4px;display:block;cursor:pointer;border:1px solid #ddd;border-radius:15px;box-shadow:0 1px 1px rgba(0,0,0,0.04);}#scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all .2s ease-in 0s;}.scroll-h{background-color:#ff5e5c !important;}.scroll-c{background-color:#24a5db !important;}.scroll-b{background-color:#ff9531 !important;}#gb2big5{background-color:#aec534 !important;}.qr{background-color:#4a4a4a !important;}.qqonline a{background:#39c!important;}@media screen and (min-width:900px){#scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all 0.2s ease-in 0s;}}.qr-img{position:fixed;background:#fff;bottombottom:50px;rightright:50px;max-width:300px;z-index:9999;display:none;border-radius:4px;padding:10px 10px 2px 10px;animation:fade-in;animation-duration:0.5s;-webkit-animation:fade-in 0.5s;border:1px solid #ddd;box-shadow:0 1px 1px rgba(0,0,0,0.05);}#output img{position:absolute;top:72px;rightright:72px;width:25px;height:25px;}.qr .fa-qrcode{font-size:20px !important;line-height:32px !important;}.qr-img .arrow{position:absolute;font-size:26px;bottombottom:2px;}.arrow-y{color:#fff;rightright:-8px;}.arrow-z{color:#c6c6c6;rightright:-9px;}#output td{border:none;}#output td{padding:0;}.page-template-template-blog #scroll li a.scroll-c,.page-template-template-code #scroll li a.scroll-c,.page-template-template-links #scroll li a.scroll-c,.page-template-template-archives #scroll li a.scroll-c,.page-template-template-cms #scroll li a.scroll-c,.page-template-template-hot #scroll li a.scroll-c,.page-template-template-tag #scroll li a.scroll-c,.page-template-template-tougao #scroll li a.scroll-c,.page-template-template-contact #scroll li a.scroll-c,.page-template-template-message #scroll li a.scroll-c,.page-template-template-baidu #scroll li a.scroll-c{display:none;}

注意:

主题更新后添加了搜索栏目图标,需添加一下css,搜索图标才能上色。

  1. #scroll li a {
  2.     background: #2f9a3c;
  3. }

效果图: