互联网开发 类目

互联网开发的那些事

包含子目录: WordPress, 前端开发, 插件扩展

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

它可以匹配下面的任意一种形式:

https://gist.github.com/dangoakachan/443ca6efa9622deb3131   # a full gist url example
https://gist.github.com/443ca6efa9622deb3131                # but user name is optional

# If the gist contains multiple file, use "?file=youfile" to embed only one 
https://gist.github.com/e59891e80652bb209f8e?file=moderate.list  # embed moderate.list only

查看全文

Alfred workflow: 查询 IP 地址信息

今天给大家分享的 Alfred workflow,是用来查询 IP 地址信息,数据来源为淘宝 IP 地址库

淘宝 IP 地址库开放了查询 IP 的 API 接口,我们可以根据用户提供的 IP 地址,快速查询出该IP地址所在的地理信息和地理相关的信息,包括国家、省、市和运营商。根据官方的介绍,地址库中覆盖的 IP 地址数量以及准确度都很不错。

用法

在此之前,确认你的 Alfred 2 已经激活了 PowerPack 扩展功能。

然后从地址下载 Lookup IP Workflow,双击安装。

在 Alfred 框中输入关键字 lip, 参数可选,例如:

lip  # 查询本机的 IP 地址
lip 199.91.73.222 178.79.131.110  # 查询指定的多个 IP 地址
lip 199.91.73.222,178.79.131.110  # 查询指定的多个 IP 地址
lip 199.91.73.222178.79.131.110  # 查询指定的多个 IP 地址

从上可以看出,对参数格式的要并不高,只要参数中包含至少一个合法的 IP 地址即可。

示例

查询 IP: 42.120.194.11(taobao.com),42.120.158.67(aliyun.com)

alfred-lookup-ip

Alfred workflow: 快速切换 DNS 服务器设置

这是一个 Alfred Workflow,它的作用是通过 Alfred 来快速切换 DNS 服务器设置,默认支持几组常见的热门公共 DNS 服务器。

用法

在此之前,确认你的 Alfred 2 已经激活了 PowerPack 扩展功能。

然后从地址下载 Switch DNS Workflow,双击安装。

打开 Alfred 后,在文本框中输入 "sdns",从下拉列表中选取需要的 DNS 后,回车即可。

预设的 DNS 配置包括:

  • Default DNS: empty
  • Alibaba Public DNS::223.5.5.5 223.6.6.6
  • V2EX Public DNS: 199.91.73.222 178.79.131.110
  • 114 Public DNS: 114.114.114.114 114.114.115.115
  • Google Public DNS: 8.8.8.8 8.8.4.4
  • OpenerDNS: 42.120.21.30

示例

切换到 Alibaba Public DNS:

结果:

alfred-switchdns-result

更新日志

  • 2014.8.2 支持自定义配置 dns 列表

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 时,也顺手加上了这点。效果参考下图:

Snip20131005_9

关键问题:获取访客信息

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

查看全文

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 的数目。最终的显示效果参考本博客:

Snip20131005_7

查看全文

1 2 3 4