WordPress搭建我的博客

技术分享8,551 人阅读

写一写我最近都干了什么,先捡捡这几天的吧,记忆还比较清晰,所以说当掌握一个新知识点后还是得花点时间写下博客,不是为了可以获得多少阅读量,是让自己以后忘了可以快速地从博客中找回来。

我这三天我用 WordPress 搭建了我自己的博客网站,之前我是在 cdsn 写的,也没啥人气。wp确实是一个很厉害的博客系统,让不懂代码的人很容易地就搭建了自己的博客,主题、插件都是一键安装,配置也都是可视化的。

我搭建这个博客也都是傻瓜式安装,基本上鼠标点来点去就完成了,有些细节方面就得修改一下代码,也都是一些没啥技术含量的代码。

 

加载慢

这个是由于wp用的头像资源网站被墙了导致我们的头像图片一直无法加载,导致页面一直转圈。

解决方法见我上一篇博客。

 

主题

话说主题是我选得最久的,我选了两天,本来一直在国内网站找,找来找去都不合我意,我的要求也不高,主要简洁大方,稍微能张显点个性就好了,有些入得眼的就要收费的,免费的又很多细节的东西不好。

后面我就在wp后面的主题里面选,不过由于被墙了,所以全部都看不到图片,按网上都的修hosts也解决不了,就不管了,一个一个点,很明显的,国外的主题风格感觉就是不一样,是我喜欢的简洁风,重点都是免费的,最后选了现在这个主题 Sydney,大体上非常符合我的要求(效果可以看我的博客页面),首页大图加大标题,可以稍微张显我的性格,下面的博客列表也是很简洁。

QQ截图20160115094814

就它了,这个主题提供的设置还是非常多的,需要修改代码的就一些英文改成中文的地方。

例如:

1、博客列表,每篇博客的信息显示

QQ截图20160115101053

2、博客内容页,评论区

QQ截图20160115101632

3、还有内容页中,因为我这个是我自己一个人的博客,所以作者用户名就没必要显示了

QQ截图20160115101619

可以在后台 主题 -> 编辑 中进行代码的修改,当然如果在本地的话,我推荐去目录修改。

 

解决博客信息英文跟用户名的问题

文件路径:web根目录\wp-content\themes\sydney\inc\template-tags.php

找到67行 sydney_posted_on 这个函数,按下面所示代码进行修改,后面那个阅读量的,是得结合 WP-postviews 插件的,那个css样式 views-links 也是自己 在style.css里面添加的

 

解决评论区的中文

文件路径:web根目录\wp-content\themes\sydney\comments.php

在28行按下面所示代码修改

 

主题字体

还有一点,这主题默认是使用外国字体,但对我们汉字来说没用,都变成宋体了,我最喜欢的还是微软雅黑,设置这个也是非常简单的,在主题自定义中 Fonts 菜单里在 Body Heading 中的 font family 前面添加 '微软雅黑',

 

微信上显示异常

后来发现在微信打开后会出现一点小小的异常,就是上面说到的博客日期,分类区域信息过长的话,比如我加上了postviews阅读量字段的话,就会导致页面出现横向滚动条,如下图所示,在手机其它浏览器不会,就是在微信里面才会。

6605346733050897912

那怪微信喽?!当然不是,微信怎么可能有错呢。后来经过我研究,可以在主题的 style.css 文件里进行修改

文件路径:web根目录\wp-content\themes\style.css

在1202行按下面所示代码修改

 

Firefox浏览器上显示异常

在火狐浏览器上,在首页一半的地方,就是页面不滚动到顶部的位置上刷新后,第二张封面大图就会出现顶部白边,如下面图所示。

img01

在其它浏览器均不会出现这个现象,但我最喜爱的就是 firefox 了,我是无法忍受我天天使用的浏览器,显示我的博客出现异常的,我无法容忍!

经过我的研究,我发现了,是这个 background-position 属性的原因,这个是在 scroll 滚动事件中动态地修改。

QQ截图20160116000256

其实它的背景图样式已经设置了 background-attachment: fixed 属性的了,这个 background-position 再这样设置我感觉是多此一举,我想会不会是为了不兼容 background-attachment 属性的浏览器吧。

那我干脆把这个事件给它删掉。

文件路径:web根目录\wp-content\themes\sydney\js\scripts.js

找到56行,注释掉其中的 scroll 绑定事件,如下面所示代码

列表导航显示异常

又发现主题显示的一个异常,就是在列表分页处,当窗口缩小时或者用手机看时,就不见了。

QQ截图20160116155853

本来想去 style.css 修改一下样式,但经过一番研究,才发现这应该是这个主题代码的一个小 bug,我看了它的 home.php 文件,里面的分页导航用的是 the_posts_navigation 这个函数,我在 template-tags.php 找到这个函数,但很奇怪,它里面定义的是英文,可我这里显示的是中文,这不应该呀,然后我又试了在这个函数里加减一些东西后刷新看看,居然没影响!

我回到 home.php 用反射查看该函数是哪个文件的(如何用反射查看函数所在文件我会在后面的博客写到),居然是在 wp-includes\link-template.php 文件,是 wp 自带的。。难怪了。

所以我大胆地猜想,这个主题它应该当初对这个函数起错名了,以它的命名规则,这个函数应该是 sydney_posts_navigation 这样的,结果跟 wp 的冲突了,把名字改过来就解决了。

QQ截图20160116165141

不过我不太喜欢这样的分页导航,以我的习惯,向后翻页应该放在右边,前翻页放在左边,这个也看不到多少页,没法直接点击跳转到哪页,所以我干脆把用成 wp 自带的分页函数 the_posts_pagination ,如下所示

就变成下面这个样子了。

QQ截图20160116171358

我再进一步优化样式,在 style.css 里面增加以下样式

就变成下面所示,好,我满意了。

QQ截图20160116171905

 

修改博客导航方向

我对于审美细节方面的要求可能还是比较挑剔的,最近又让我找到主题不满意的地方了,就是博客内容页评论区上面这个前后篇的导航,按我的习惯,应该是日期新的前一篇博客在左边,旧的在右边,要这主题是相反的,难道外国人的习惯跟我不同,算了,我还是得改一下。

QQ截图20160116172444

这个很容易修改,打开 template-tags.php ,在54行,就是在 sydney_post_navigation 这个函数里进行修改。

嗯~~~这样看起来就舒服多了

QQ截图20160116173316

 

 

主题方面这样稍做修改就可以满足我对审美的小小要求了。

 

插件

代码高亮插件

选好主题后,感觉豁然开朗,接下就是把博客移过来,移过来后才发现我少了一个最重要的东西,代码高亮插件。

这儿我推荐 Crayon Syntax Highlighter

一开始我是用 SyntaxHighlighter Evolved 这个的,话说这个用起来也不是很方便,得在文本模式下用[php]这样把代码包裹起来,但这个倒不是我放弃它的最重要的理由,最重要的是用了非自带的主题后,就显示错行了,如下图所示,第1行的代码变到下面去了。

QQ截图20160115111742

虽然可以在设置里选成2.x的版本,不过2的样式不适合我的审美观,最终放弃这个插件。

后来遇到 Crayon 这个插件,简直就是相见恨晚!

首先,它有中文支持的,而且它不用在文本模式下编辑,在编辑窗口就有按钮 QQ截图20160115112237,点开后,全中文支持。

它默认的样式是不怎么好看,可以在设置-Crayon设置界面进行自定义,下面是我喜欢的样式。

QQ截图20160115112435

此插件选项很多,可以支持换行,设置起码行号,展开折叠。。。目前都满足我想到想不到的功能。

对于这个插件,我只能说两个字,完美

 

删除Google字体

一开始在本地打开搏客时,总感觉慢,除了上面提到头像图像导致的慢外,感觉还是得转几下圈圈才加载好,一查看,才知道wp默认加载了在远了fonts.googleapis.com 的字体,对于我们中华儿女来说,微软雅黑才是我们最佳选择。

插件里找到这两个,我用的是第一个 Remove Google Fonts References ,右边我那个我用了没效果。后台是没加载,但前台页面还是有加载

QQ截图20160115123511

 

阅读量插件

对于我这种人气单薄的博客来说,也只能靠点阅读量来安慰一下自己了,wp默认是没有这个功能的,需要自己装插件。

那首选就是 WP-Postviews 了,网上也有说不用插件修改代码就能实现,但我还是喜欢用插件,不过要在页面上显示出来,还是得去加代码,the_view() 这个方法,得加到你需要显示的地方去,我在上面template-tags.php 文件修改中也有提到加在哪里。

插件的设置我只改了这个,其它都是默认的。

QQ截图20160115124815

 

SEO插件

最后就是这个seo了,wp所有页面都不带 descriptionskeywords 这些 meta 标签的,虽然我也不指望能靠博客赚取广告费,但我还是希望可以可能让更多人看到我写的东西。

我用的是 All in one seo 插件,很重要的一点,它有中文支持界面,搜索插件时,它显示的是 多合一SEO集 ,我还以为怎么有国产的插件这么火。

具体seo优化的还是搜索一下网上的资料,因为我对seo的优化的知识也不是很好。我就是在每个博客里提取出关键字放在 keywords,然后写个50字以内的文章摘要放在 descriptions,然后就是祈求百度把我收了吧~~~~