WordPress 分开显示评论与 Pingback

WordPress 中的留言有三种类型,分别是普通评论、Pingback 和 Traceback。Pingback 和 Trackback 都是别人对你文章的引用,两者有一些区别,但是实际上差不多。就我博客上的评论来说 Pingback 类型的居多,因为这种引用是自动完成的。

当你在文章中引用另外一篇文章的地址时,Wordpress 就会给对应的网站发送Pingback,当这些网站收到回复时,就会将 Pingback 的信息显示在评论中。关于这 Pingback 和 Trackback 的更多对比,可以阅读下这篇文章 WordPress中的Ping、Trackback与Pingback:概念、区别与运用

当然,最终是否显示 Pingback/Trackback 类型的评论完全由主题自行决定。有些主题选择干脆只显示普通类型的评论,而有些主题显示全部评论。dangopress 主题选择了后者,这也是大多数主题的方式。但是如果将这几种类型的评论混杂在一起,难免显得有点混乱,所以在这里本文介绍一种将普通评论与 Pingback/Trackback 区分显示的方法,这个方法参考自 WordPress 2.7 Trackbacks 的两种处理方法 - NeoEase

除了做基本的区分之外,我们还希望能够分别显示普通评论与 Pingback/Trackback 的数目。最终的显示效果参考本博客:

继续阅读

dangopress: 简单的自适应主题

dangopress 是我自己独立创作的第一款免费主题,主打简洁风格,双栏布局。主题包含代码高亮、支持第三方 CDN、支持网站统计分析、侧栏跟随等等功能,以及许多细节上的打磨和优化,有兴趣的同学可以下载体验。主题已经上传到 Github,可以免费下载,暂时还没有打算提交到官方主题库中。

我的性子比较喜欢折腾,主题经常换来又换去,下载了别人放出的主题之后,一定要亲手“打磨”过之后才会使用。几次下来,新鲜劲刚过,又开始寻觅新的主题。从开始使用 WordPress 开始,我就有一个愿望可以自己亲手实现一份主题,现在愿望实现了,感觉真不错。

主题的许多素材都是来源自网上,最初原型是来自 牧风 现在的主题,同时也参考了很多 Neoease 博客上的元素。当然还有,例如邮件回复、归档页面、最近评论等等,都来自网上各位同仁的分享。所以主题完成之后,我就立马上传到 Github 上了。

主题安装方法:

  • 推荐 Github Release 页面下载最新版本;
  • 从 Github 下载最新代码:
  • # git clone https://github.com/kodango/dangopress
    

    将 clone 下来的整个目录压缩成 zip 包。

到 WordPress 后台上传安装主题,主题有几个自定义的选项,请自行设置。如果有问题需要帮忙,欢迎在本博客评论。

dangopress 主题特性

dangopress 双栏设计,白底黑字,属于简洁风格。

主题拥有以下特性(包括但不仅限于):

  1. 集成侧栏跟随滚动功能
  2. 支持添加百度分享、百度统计以及 Google Analytics 统计代码,主题后台可配置;
  3. 默认自带代码高亮功能,通过 Google Code Prettify 实现;
  4. 评论支持回复邮件提醒功能,邮件内容已定制;
  5. 支持将博客静态文件上传到 CDN,主题后台可配置 CDN 地址前缀(本博客的一些静态文件都是托管在 OSS 上的,关于 WordPress 使用 OSS 可以参考我之前写得一篇文章);
  6. 侧栏包括最新、随机、置顶以及热评文章,以 Tab 选项卡形式呈现;
  7. 简单的多种宽度设备(手机、平板、电脑)样式自适应,效果见下方;

继续阅读

Yoast Breadcrumbs 文章页面删除标题

Yoast Breadcrumbs是一款很出色的面包屑插件,它可以在文章、分类、归档、搜索等页面显示导航,SEO 的效果也非常好。

装上该插件后,搜索引擎也有很好的理解和展示, 下面是我上一篇文章的 Google 搜索结果:

Snip20130928_3

我博客上安装的是作者的另外一款很有名的插件 WordPress SEO by Yoast,默认集成了Yoast Breadcrumbs的功能。

但是,该插件有一个不足的地方是,在文章页面中,仍然会在导航栏上显示标题,这样标题就在两处地方重复显示了,那么如何解决这个问题,下面我们介绍两种方法。

方法一

在 functions.php 文件中增加以下代码(来自 How to remove page title from breadcrumb):

<?php 
if (function_exists('yoast_breadcrumb')) { 
    $opt = get_option("wpseo_internallinks"); 
    $sep = ( isset($opt['breadcrumbs-sep']) && $opt['breadcrumbs-sep'] != '' ) ? $opt['breadcrumbs-sep'] : '»'; 
    $breadcrumbs = yoast_breadcrumb('', '', false); 
    $linksArr = split($sep, $breadcrumbs); 
    array_pop($linksArr); 
    echo '<nav id="breadcrumbs">'.implode($sep,$linksArr).'</nav>'; 
}
?>

继续阅读

WordPress 侧栏实现 Tab 选项卡

有时候我们希望在侧栏放更多内容,但是容易让侧栏显得过长。网上比较常见的做法是,用 Tab 选项卡的形式将多个小工具合并到一起,例如热门文章、最新文章、随机文章等等,这样同样的空间包含的内容更多,用户体验也增强不少。

网上可以下到不少类似的插件,也有很多非插件的实现方式。我使用了William同学WordPress侧边栏JQuery版TAB选项卡文章中介绍的方法来实现,效果可以看我的博客侧栏:

继续阅读

WordPress 使用阿里云 OSS 作为图床

我一般很少在博客中放置图片,主要原因是没有一个合适的图床。昨天浏览阿里云论坛的时候,无意间看到有oss4wordpress的插件,欣喜之下就决定试试,试用下来效果还是不错的。

独乐乐不如众乐乐,我把昨天折腾的过程记录下来给有需要的人。

OSS 收费情况

OSS 对于新开通的用户有半年的试用时间,试用期间的服务套餐为:

继续阅读

博客侧栏显示文章目录

有些博客文章很长,像我又不喜欢给文章分页,这样一篇博客读下来鼠标要拖很久,读者比较难定位到关心的内容。解决这个问题有很多措施,一种是在文章拖到底部的时候显示一个返回顶部的按钮(做法参考博客添加回到顶部按钮),另外一种是做一个文章目录,这样就比较直观了。

TOC+插件

我之前用Table of Contents Plus插件来实现这个功能,这个插件设置还很多,我之所以选择它,是因为这个插件提供一个文章目录小工具,可以放到侧栏。其它同类的插件或者实现,都是把目录显示在文章内部,比如开头或者结尾,但是在阅读过程中,这其实还是跟没有一样。

继续阅读

WordPress 使用 WP-Emmet 插件

WordPress自带的文章编辑框实在是弱爆了,曾经想换成MarkDown编辑器,但是换上它之后担心以后迁移比较麻烦,毕竟保存在数据库中的内容都是markdown文本,而不是渲染后的HTML文本。

前两天在网上无意间看到一篇讲ZenCoding的新闻,突然想起这个几年前折腾过的神器,想都不想就开始在Wordpress主页上搜索有没有相关的插件了。

ZenCoding现在貌似改成Emmet了,主页为这Emmet — the essential toolkit for web-developers。WP上搜索到一款插件,叫做WP-Emment,这款插件貌似下载的人不多。

继续阅读

博客添加回到顶部按钮

博客的文章往往篇幅比较长,如果访客要访问博客的其它文章(例如通过侧栏的Widgets访问相关的文章)就需要滚动鼠标,移动到页面的头部。比较人性的一个设计是,在页面的底部(或者中靠近下的位置)添加一个“回到页面顶部”的按钮,可以快速定位到文章的顶部位置。

这个功能设计起来不难,可以采用如一文中提到的锚链接形式,例如回到顶部按钮是一个链接:

<a href="#top">Top</a>

将其放到页面底部,点击该链接可以直接定位到页面顶部。但是如果我们不希望用链接来实现呢,而是模拟一个按钮(用span),并且希望按下回到顶部按钮的时候,可以比较平滑地回到顶部,那该怎么做呢?代码非常简单,这里只用到些许的CSS样式以及jQuery代码。

首先在在文章页面body底部添加以下代码(index.php或者single.php):

<span id="back-to-top">Top</span>

为了方便起见,以上按钮的代码在jQuery中创建添加,不需要手动去修改php文件。同时,利用jQuery完成按钮的行为,主要通过监听window的onscroll事件,当滚动距页面顶部超过100px的时候,淡入显示按钮。当滚动距页面顶部少于100px的时候,淡出隐藏按钮。使用jQuery的animate函数,可以实现平滑地滚动效果(利用document.body或者document.documentElement的scrollTop属性完成动画效果)。

添加的jQuery代码如下所示:

/* Add a back to top button */
function back_to_top()
{
    /* Cache back-to-top button object */
    var $top = $('<span id="back-to-top">Top</span>').appendTo('body');

    /* Cross-browser compatible in scrollTop */
    var $body = (!window.opera) ? $('html, body') : (document.compatMode == 'CSS1Compat'
        ? $('html') : $('body'));

    if ($top.length == 0)
         return;
 
    /* Hide back-to-top button at first */
    $top.hide();
 
    /* Fade in back-to-top button when need */
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $top.fadeIn();
        } else {
            $top.fadeOut();
        }
    });
 
    /* Scroll to top when click back-to-top button */
    $top.click(function () {
        $body.animate({ scrollTop: 0 }, 800);
    });
}

back_to_top();

同时在博客样式(style.css)中添加以下自定义的样式内容:

#back-to-top {
    background-color: #F5F5F5;
    bottom: 0;
    box-shadow: 0 0 6px #808080;
    color: #444444;
    padding: 5px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

这里将按钮固定定位到(position: fixed)页面右下角,并且添加边框阴影等效果。

最后附上一段区分外部链接的代码片断(摘自Learning jQuery 3rd edition)

    /* Add tag next to the external link */
    $('.column .post-entry a').not(':has(img)').filter(function() {
        return this.hostname && this.hostname != location.hostname;
    }).addClass('external').attr('target', '_blank');