wordpress默认主题Twenty Twelve的修改和安装插件

一直在寻找简洁大气的Wordpress主题,最后才发现官方自带的Twenty Twelve主题本身已经够简洁了。于是基于wordpress 3.6版,对Twenty Twelve 1.2版主题,安装了一些插件和进行了一些修改:

0. 默认的反垃圾评论插件Akismet就不说了

1. 文本编辑器增强”TinyMCE Advanced”

WordPress默认的文本编辑器功能太简单了,这个”TinyMCE Advanced”插件可以增强文本编辑器的功能,在设置选项里面还可以自定义出现哪些标签。

2. 语法高亮插件”SyntaxHighlighter Evolved”

码农必备,SyntaxHighlighter设置选项里面选择Version 2.X,这样代码就能自动换行,看起来舒服点。此外,在设置选项最后面还有些用法示例。

3. SEO插件”All In One SEO Pack”

能够对每个页面添加meta等信息,让网页更容易被Google等搜索引擎检索到。

4. Google XML Sitemaps

可以产生网站的sitemaps文件,如https://zhoukaibo.com/sitemap.xml,对搜索引擎更友好点。

5. 中文摘要插件”wp-chinese-excerpt”

使用摘要插件的原因是为了让摘要保留格式输出,而不是文本输出。而且这个插件还可以设置“首页摘要长度”,“存档页摘要长度”,“是否more标签优先”等,使用很方便。

6. 分页导航插件”WP-PageNavi”

这个插件可以产生漂亮的分页导航,需要将主题文件functions.php中的:

<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>

修改为:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

注意:代码中必须为英文字符,否则插件不生效。还可以安装与WP-PageNavi配套的WP PageNavi Style插件,能提供更美观的页码样式。

7. 相关文章插件”WordPress Related Posts”

可以对相关文章设置图片缩略图,我选择的是”Plain”文字模式。有个选项”Auto Insert Related Posts…”勾上后会自动在文章后面加上相关文章。否则,就要自己添加代码

<?php wp_related_posts() ?>

到你想要显示的地方。

8. 统计文章浏览数量插件”WP-PostViews”

WP-PostViews插件可以统计每篇文章的浏览数量。在“外观”->“小工具”下会自动添加一个名为“Views”的模块,拖到边栏上就能显示出网站最热门的文章了。至于显示的样式可以修改插件的设置“Post Views Options”里面的“Most Viewed Template:”。

在每篇文章后面显示本文的阅读数,需要修改Twenty Twelve主题下的content.php文件:
找到这两行:

<footer class="entry-meta">
    <?php twentytwelve_entry_meta(); ?>

在后面加上一行:

<?php if(function_exists('the_views')) { the_views(); } ?>

显示的样式通过设置里的”Views Template:”进行控制。

9. 静态缓存插件”WP Super Cache”

WP Super Cache插件可以将网页直接生成HTML文件,这样Web服务器就不用每次都解析PHP脚本,用户直接访问的是静态文件,能显著的提速Wordpress博客的访问速度。

10. 增加页面宽度
Twenty Twelve主题的最大宽度为960像素,对现在的大显示器来说有点窄。
1). 修改style.css,找到如下代码(Line 1431-1436):

.site {
        margin: 0 auto;
        max-width: 960px;
        max-width: 68.571428571rem;
        overflow: hidden;
}

修改为1000像素,71.42857142rem(根据字体大小算出来的:1000/14 = 71.42857142)

.site {
        margin: 0 auto;
        max-width: 1000px;
        max-width: 71.42857142rem;
        overflow: hidden;
}

2). 修改ie样式表
打开css/ie.css,找到如下代码(line44-50):

.site {
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    margin: 48px auto;
    max-width: 960px;
    overflow: hidden;
    padding: 0 40px;
}

将960px修改为1000px就可以了。

11. 去除网页右侧sidebar超链接的下划线,鼠标悬停时才显示下划线
修改style.css中对应行如下:

.widget-area .widget a {
	color: #757575;
	text-decoration: none;
}
.widget-area .widget a:hover {
	color: #21759b;
	text-decoration: underline;
}

12. 增加”回到顶部”功能
有时候文章太长,读到最后一行后想快速回到顶部。网上的方法是增加top.js和top.png,然后在footer.php里面加行代码。我直接使用了wp-auto-top这个插件,使用起来很方便,显示位置设置“相对网页正中间线距离 45%”比固定像素会好点。

13. 让google的搜索结果可以显示google+上的个人资料,这个纯粹为了好玩 🙂
1). 需要有google+账号
2). 修改一下google+网站的撰稿者部分,添加你的博客或个人网站链接。 设置位置: google+ > 个人资料 > 简介 > 链接。
3). 修改header.php,在

	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

后面增加一行:

	<link rel="author" href="https://plus.google.com/108167088471194840207?rel=author" />

4). 通过google的Structured Data Testing Tool可以看到最终显示效果

14. 为文章增加内部链接
在文章内部增加关键词的内部链接对搜索引擎更友好,“WP Keyword Link”插件可以全自动的实现这个功能。在安装插件后可以打开“自动把文章的标签当作关键词”的开关,或者手工添加关键词、链接和属性。对于贴了代码的文章,需要勾上“跳过pre标签”,不然文章格式会乱。此外,这个插件还可以支持中文。

15. 使用免费的CDN加速
偶然看到一篇将使用免费CDN为wordpress博客加速的文章,于是试了下“七牛云存储”。wordpress上安装插件“wpjam-qiniu”,插件装好后设置下在七牛绑定的域名,插件带详细图文使用说明:“七牛镜像存储 WordPress 插件:一键实现 WordPress 博客静态文件 CDN 加速。”

主题截图:
wordpress默认主题Twenty Twelve修改

发表评论

电子邮件地址不会被公开。 必填项已用*标注