小站优化总结「2」 – 那些踩过的坑

前言

2015年7月份建站只为满足拥有自己网站的小愿望，4篇日记和文章，采用的是默认主题Twenty Fifteen。然后就一直空置，我自己都忘了有这么个地方，直到2017年年末。再次来到自己的博客我投入了更多的精力，让博客看起来不再那么闲置。

首先更换了原本的默认主题，这个主题很适合喜欢简洁、记录为主的我，但原代码当时自带多条广告链接，评论功能也不完善，因此做了一些小的调整和改善，顺便去掉更新推送代码。（主题：Tokin，我没记错的话）

然后就是小功能：说说、评论显示UA信息、相册这些，看似只有几个小块，虽然是站在前任们的肩旁上，折腾起来也是够磨人的。这篇日记算是把我实现过程中碰到的点做个总结。

五、CSS查询笔记

以上弄的这个小功能基本都脱不开CSS样式表。而我一个零基础的中年大叔，要完整吸收学习CSS也是不太可能,,ԾㅂԾ,,没那个精力了。这里主要是用好查询工具：菜鸟工具，我就是菜鸟没错啦！以及W3school。
然后就是一些最基本的可能常用的，比如说以下这些。

1、关于空格
//以下空白符前请加&符号
nbsp; 1字符宽不断行空白
ebsp; 1字符宽是半个空白
emsp; 2字符宽是一个空白
thinsp; 小1字符宽是窄空白

2、关于文本
1. text-align：属性规定元素中的文本的水平对齐方式，有left、right、center、justify、inherit五个取值。分别是左右中两端齐和继承；
2. white-space：对源文档中的空格、换行和 tab 字符的处理，normal、
nowrap、pre。取值为pre时，保留文本中的空格和换行；取值nowrap时为防止元素中的文本换行，除非使用了br；
3. letter-spacing：作用于文本字符间距；
4. word-spacing：作用于文本单词间距；
5. text-transform：取值none、underline、overline、line-through、blink，分别是无、下划线、上划线、删除线、闪烁；
6. text-transform：处理文本的大小写，取值none、uppercase、lowercase、capitalize，分别是原样输出、全大写、全小写、首字母大写。

3、关于边距
padding：属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值，顺序为上右下左。
margin：属性定义元素的外边距。padding 属性接受长度值或百分比值，允许使用负值，顺序为上右下左。

六、其他小应用

1、自定义timeago
之前因为“评论等级和博主认证”的添加，导致评论区的timeago失效，我解决的办法是直接在function.php自定义。然后找comment模板里的评论时间代码替换调用timeago。代码如下：

//自定义timeago
function timeago( $ptime ) {
    date_default_timezone_set ('ETC/GMT');
    $ptime = strtotime($ptime);
    $etime = time() - $ptime;
    if($etime < 1) return '刚刚';
    $interval = array (
        12 * 30 * 24 * 60 * 60  =>  '年前 ('.date('Y-m-d', $ptime).')',
        30 * 24 * 60 * 60       =>  '个月前 ('.date('m-d', $ptime).')',
        7 * 24 * 60 * 60        =>  '周前 ('.date('m-d', $ptime).')',
        24 * 60 * 60            =>  '天前',
        60 * 60                 =>  '小时前',
        60                      =>  '分钟前',
        1                       =>  '秒前'
    );
    foreach ($interval as $secs => $str) {
        $d = $etime / $secs;
        if ($d >= 1) {
            $r = round($d);
            return $r . $str;
        }
    };
}

然后需要找到评论模板里时间调用部分进行修改，我的原本代码如下：

<?php printf( __( '%1$s %2$s&thinsp; ' ), get_comment_date( '', $comment ),  get_comment_time() ); ?>

修改为如下代码：

<?php echo timeago(get_gmt_from_date(get_comment_time('Y-m-d G:i:s'))); ?>

2、自定义“回复可见”
有时候内容可能需要点小神秘的，增加点小互动，那“回复可见”就是你的必备良品。依然是在function.php里进行自定义，代码如下：

//自定义回复可见
function reply_to_read($atts, $content=null) {
extract(shortcode_atts(array("notice" => '<p class="reply-to-read">温馨提示: 此处内容需要<a href="#respond" title="评论本文">评论本文</a>后才能查看.</p>'), $atts));
$email = null;
$user_ID = (int) wp_get_current_user()->ID;
if ($user_ID > 0) {
$email = get_userdata($user_ID)->user_email;
$admin_email = "i.blackberry@outlook.com"; //Email地址更换为你自己的 
if ($email == $admin_email) {
return $content;
}
} else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {
$email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);
} else {
return $notice;
}
if (empty($email)) {
return $notice;
}
global $wpdb;
$post_id = get_the_ID();
$query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";
if ($wpdb->get_results($query)) {
return do_shortcode($content);
} else {
return $notice;
}
} 
add_shortcode('reply', 'reply_to_read');

这个需要用短代码进行调用，另外你评论后下面的短代码和珍藏多年的种子在此送你了，请收好！
评论后刷新可见隐藏内容

3、自定义“评论头像地址”
刚建好网站的时候，你会发现同一个评论者的头像很乱，其实可以调用Gravatar——全球通用头像，这个服务是绑定邮箱的。所以只要评论者使用的相同邮箱，即便在不同网站评论也是固定头像。是不是很Cool！具体代码如下：

//Gravatar头像
function unblock_gravatar( $avatar ) { 
 $avatar = str_replace( array( 'www.gravatar.com', '0.gravatar.com', '1.gravatar.com', '2.gravatar.com' ), 'secure.gravatar.com', $avatar ); return $avatar;
}
add_filter( 'get_avatar', 'unblock_gravatar');

暂时就这些了，我相信这些是每个建站者都会碰到的点。因为自身专业和工作不同，解决只是时间问题，希望每一个建个站的站长都顺利~！

如果我这篇总结有小小的帮助到你，也请别吝啬你的赞，同时也可以评论让我知道确实有所帮助！

Danile_Lxp
05-19