博客启用HTTPS访问

昨天正式启用了网站的HTTPS访问,目前看基本没啥太大的问题,所以接下来把具体的过程整理下。

1、生成SSL证书并部署

我现在用的还是虚拟主机是使用的DirectAdmin面板,它支持一键申请并部署Let's Encrypt证书,这是一个免费的证书,而且DA还支持自动续期,相对来说还是非常方便的。后续如果迁移到另外支持DA的虚拟主机商那里,也可以通过DA面板上的备份再还原的方式保证证书也能顺利迁移。生成证书的界面:

2、修改.htaccess文件

这里主要是最后的三行,强制让http形式的访问跳转到https:

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</ifmodule>

# BEGIN WordPress
# 在`BEGIN WordPress`与`END WordPress`之间的指令(行)是
# 动态生成的,只应被WordPress过滤器修改。
# 任何对标记之间的指令的修改都会被覆盖。
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>

# END WordPress

继续阅读

优雅部署 Google Adsense 广告代码

去年就曾经申请过 Google Adsense 的广告,但是貌似审核没通过,一直留有遗憾(没有尝试过好奇)。今年突然起了兴致重新申请,审核持续了将近一周,意外地竟然通过了。

在申请之前,需要在页面上加上一段代码。最好加到 head 里面,因为 Google Adsense 的代码片段加了 async 属性会后台异步加载,不会影响页面渲染。代码例如:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-xxxxxxxx",
    enable_page_level_ads: true
  });
</script>

其中 "ca-pub-xxxxxxxx" 是你的 publisher id(Adsense 账户里面看到的是没有 ca- 前缀的,搞不懂区别是什么)。

审核通过之后就是可以再 Adsense 网站创建广告单元,然后复制代码到你自己的网站上,不出意外很快就可以显示广告了。广告代码大概是这样子的:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 侧栏自适应2 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="yyyyy"
     data-ad-format="horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

继续阅读

非插件实现面包屑导航功能

最近开始整理 WordPress 的插件,发现有些插件功能越来越重,比如 Yoast SEO 的插件,出于个人洁癖就把他删除了。但是目前网站原来的 Breadcrumbs 导航功能是这个插件提供的,所以就开始查找替换方案。网上搜索发现一片文章介绍的比较具体 --- 《WordPress实现面包屑导航的方法》,博主其实也是参考了国外网友的非插件实现

以下代码都是基于 Dimox 的原创,我只是在他基础上做了微调,改动不大:

继续阅读

WordPress 文章内嵌 Gist 代码

WordPress 内嵌 Gist 链接的方法很简单,将以下代码添加到当前主题的 functions.php 文件中:

/*
 * Embed gists with a URL in post article
 */
function dangopress_embed_gist($matches, $attr, $url, $rawattr)
{
    $embed = sprintf(
        '<script src="https://gist.github.com/%1$s.js%2$s"></script>',
        esc_attr($matches[1]),
        esc_attr($matches[2])
    );

    return apply_filters('dangopress_embed_gist', $embed, $matches, $attr, $url, $rawattr);
}
wp_embed_register_handler('gist', '#https?://gist\.github\.com(?:/[a-z0-9-]+)?/([a-z0-9]+)(\?file=.*)?#i', 'dangopress_embed_gist');

在上面的代码中,我们注册了 Gist 链接的处理方法 dangopress_embed_gist。当我们拷贝 Gist 链接到编辑框时,会调用改方法生成内嵌内容。

Gist 链接是通过注册过程中,指定的正则表达式匹配的:

#https?://gist\.github\.com(?:/[a-z0-9-]+)?/([a-z0-9]+)(\?file=.*)?#i

继续阅读

WordPress 阻挡垃圾评论

我的博客人气一般,但是垃圾评论却特别之多,严重影响我的心情。自从开博客以来,我一直都是通过 Akismet 插件来发现和过滤垃圾评论,效果非常不错,很少有漏网之鱼。但是前两天在阅读了云淡然同学写的文章wp_create_nonce实现wordpress垃圾评论终极防御之后,我突然萌生出自己写一些阻挡垃圾评论策略的想法。

wordpress-spam

下面我介绍几条本博客现在正在使用的阻挡垃圾评论的策略,几天下来效果还可以接受。每一种策略都不是完美的,所以只能多种方式配合使用。当然,道高一尺,魔高一丈,很多策略都必须要不断地改进与完善,并且最好根据自己的情况适当地调整。当然,如果你不想折腾,还是老老实实地使用 Akismet 插件来防护吧,插件的功能更加完善可靠,本文的方法只适合于不想启用过多插件和喜欢折腾的同学。

.htaccess 文件

首先我们可以借助 .htaccess 文件来阻挡部分恶意的垃圾评论,这一类评论往往是通过脚本或者工具自动提交的。请将以下内容添加到网站根目录的 .htaccess 文件中:

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php$
RewriteCond %{HTTP_REFERER} !.*kodango.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) http://%{REMOTE_ADDR}/$ [R=301,L]

上面的几条规则,可以阻挡来源不是你博客,或者 user agent 信息为空的机器人评论。

继续阅读

WordPress 置顶文章推荐

新浪微博的置顶功能相信大家非常熟悉,其实 WordPress 早在 2.7 之后就拥有了文章置顶的功能。但是,实际上这个功能在大多主题上却没太多用武之地。我想其中的一个原因,是很多像我们这样的个人博客,首页基本上只展示最新的5-10篇文章,如果再置顶个几篇,首页的内容基本上就不变了。

不过,如果我们换个角度,把置顶文章从页面中央移到侧栏,这样的 效果应该会不错,首先首页的文章列表中不会受到置顶的干扰,同时位于侧栏的置顶文章又有类似文章推荐的效果,我们动手来试试。

整个解决方案需要考虑到两点:

  1. 首页展示文章的时候要忽略置顶文章,这里的忽略是指不置顶显示;
  2. 侧栏需要增加显示置顶文章列表的小工具;

步骤一:首页忽略置顶文章

在主题的 functions.php 中加入以下代码:

/*
 * Alter the main loop
 */
function dangopress_alter_main_loop($query)
{
    /* Only for main loop in home page */
    if (!$query->is_home() || !$query->is_main_query())
        return;

    // ignore sticky posts, don't show them in the start
    $query->set('ignore_sticky_posts', 1);
}
add_action('pre_get_posts', 'dangopress_alter_main_loop'); 

这里通过指定ignore_sticky_posts为1,查询出的文章列表就会忽略置顶文章。

继续阅读

WordPress 使用 Google Code Prettify 高亮代码

Google Code Prettify 是 Google 开源的一个用于代码高亮的 Javascript 库,支持 C/C++, Java, Python, Ruby, PHP,Javascript 等等常见语言,目前包括 Google Code、Stackoverflow.com 在内的很多网站都在使用它。最吸引人的是,在使用它进行代码高亮时,甚至不需要指明语言类型,Prettify 会自动判断并处理。

google-code-prettify-javascript-syntax-highlighter

使用 Prettify 一般只需要包含两个文件:prettify.js 和 prettify.css,压缩过后的 prettify.js 大小差不多在 15K 左右,非常小巧。

简单使用

在网站页面中引用 Prettify文件:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

同时增加以下代码,让页面加载完成时执行 Prettify:

<script type="text/javascript">
window.onload = function(){prettyPrint();};
</script>

Prettify 会在网页中查找<pre class="prettyprint">...</pre>或者<code class="prettyprint">...</code>包围的代码片断,对它们进行高亮。

继续阅读

WordPress 访客评论显示欢迎信息

最近逛了不少的博客,发现有一个共通的小细节:当你再次访问时,在评论框上方会显示类似“欢迎回来,xxx..”的信息。当时觉得这个想法挺不错的,一定程度上提高了用户体验,因为访客短期内再次访问时,不需要重复输入个人的信息。

关于这个话题,Neoease 有专门写过一篇文章来介绍如何实现 —— 提高 WordPress 访客评论时的用户体验。这次我在制作 dangopress 时,也顺手加上了这点。效果参考下图:

关键问题:获取访客信息

花点时间去研究,其实整个实现过程并不复杂。这里的关键点是,如何判断访客已经在近期发表过评论。

继续阅读