您的浏览器不支持CSS3,建议使用Firfox、Chrome等浏览器,以取得最佳显示效果

网站搭建从零开始(七) WordPress站点的完善

网站搭建从零开始 906℃ 0 3年前 (2014-11-01)

系列博客说明

《网站搭建从零开始》系列博客 http://www.paincker.com/category/mobile-web/website-primer

对于完整的学习,强烈建议先阅读《网站搭建从零开始(〇) 内容概要与学习方法》 http://www.paincker.com/website-primer-0


这篇文章介绍WordPress站点的完善。由于很多操作可能需要自己修改源代码,所以先对相关知识进行简单介绍。建议对上述语言先有简单的了解,在实际使用时,再根据需要再现学现用。对所用到的程序语言和技术有所了解,改代码时就不至于像我一开始那样不知所措了(从对网站毫无了解到一瞬间看到各种完全陌生的语言混合在一起,可能会有点接受不了)。

本文主要是列举一个WordPress站点的完善可能需要考虑的东西并简单介绍,而不对具体的操作进行详细分析,因为网上有很多相关的文章可以参考,没必要再写

基础知识

通常一个网站的整个构建过程中需要大量的技术支持,尤其是用到很多种计算机语言。网站的构建主要分后端和前端两部分,后端代码在服务器上运行,而前端程序源码则通过网络传输到用户的浏览器,由浏览器执行。WordPress站点的页面属于动态页面,也就是说页面是程序动态生成的,不同的人、不同时刻访问同一个网址对应的页面,看到的内容是不一样的。和动态页面相对的是静态页面,静态页面的扩展名一般是html,不需要后端语言动态的生成网页。

后端语言PHP

实现网站后端的语言有很多,如PHP、ASP、Python、Java、Node.js等。以WordPress为例,主要是用PHP完成的,访问数据库会用到一些SQL语言。PHP在WordPress中一方面负责后端数据处理逻辑,另一方面负责前端动态页面代码的生成。PHP可以很容易的嵌入到HTML中,实现PHP和HTML等语言的混合编程。例如:

  1. <html>
  2. <head>
  3. <title>PHP</title>
  4. </head>
  5. <body>
  6. <?php echo '<p>Hello World</p>'; ?>
  7. </body>
  8. </html>

将其保存为php扩展名的文件,放在配置了PHP环境的服务器中,并用浏览器访问此文件,就会执行PHP部分代码,生成相应的Html页面(即前端代码),并传输到浏览器中,由浏览器执行。

更详细的PHP知识可以访问w3school,或者查看PHP官方给出的手册。

后端语言SQL

WordPress访问数据库时会用到SQL语言,SQL语言号称第四代编程语言,语法非常接近自然语言,基本操作学习起来不是很困难。

前端语言HTML、CSS

HTML是浏览器使用的最主要的语言,HTML通过标签表示各种元素,即网站的内容。CSS为层叠样式表,即网站的风格,如文字大小、颜色、排版位置等。目前主流网站一般主要都是采用HTML和CSS实现界面。对于静态网站页面,可以直接将HTML、CSS等文件保存在网站服务器供用户访问,更新页面时直接对网页文件进行修改。

HTML和CSS的语法不是很复杂,学起来也比较容易。严格来说不算编程语言,只是描述性语言。学习的时候需要慢慢熟悉各种标签、属性等,不熟悉的经常查阅资料做参考。

前端语言JavaScript与jQuery程序库、Ajax技术

JavaScript是网页中使用非常多的一种程序语言,可用来实现各种动态效果,执行一些简单的数据操作等,例如注册账号时判断用户填写的邮箱格式是否正确,网页版的计算器等。

jQuery不是编程语言,而是用JavaScript实现的程序库,能很轻松的实现很多常用功能。例如很多网站为了加快网页载入速度,使用jQuery实现图片的延迟加载,只有在访问到图片文件时,图片才会被加载,否则不加载图片,提高了用户体验。

Ajax是一种交互式网页技术,用于实现网页的异步更新。例如我们在访问QQ空间网页时,滚动到最下方,就会加载更多内容,动态更新网页,而不需要跳转页面。

网页访问大致的运行流程

访问WordPress网站时,用户浏览器发出的网址请求被服务器接收到,服务器就会找到相应的页面,通过执行PHP生成HTML页面,这个过程是服务器完成的。然后将HTML页面通过网络发送到浏览器。而浏览器则可以打开HTML、CSS,然后运行JavaScript等语言对页面进行一些修改等操作,然后页面就被显示出来。当用户进行一些操作,例如点击特定的按钮时,JavaScript中设置的监听器函数就会执行,完成响应的操作,例如打开弹出窗口,显示用户登录信息(当然这个不一定都是用JavaScript实现)。

基本功能

确定好合适的主题

网站搭建好后,如果你需要比较多的自行定制内容,推荐选用一套合适的主题,然后就固定下来不再随便修改。因为很多定制内容都是通过修改主题源码实现的,如果更换主题所有定制的内容就都没了。

网上有一些高手制作的主题功能非常强大,其中有些是收费的,也有一些免费的。但是可能别人制作的主题不是你想要的风格,例如我用的主题就是知名博主知更鸟做的,但是个人更喜欢清新简洁的风格,这个时候就可以通过CSS进行修改,偶尔也需要对HTML和PHP进行少量修改。当然,使用别人的主题,应该尊重原作者的成果,注明原作者和作者的网站链接。

下面所说的很多东西,几乎都可以直接通过修改主题实现,也可以安装插件实现,而有些主题本身就集成了很多强大的功能,不需要自己进行添加。我更推荐直接修改主题实现,因为使用插件会拖慢网站速度,有可能插件和主题之间冲突,而且不同插件显示效果和主题不匹配,最后看着比较乱,一个个插件去修改太麻烦(插件代码也可以修改,但是插件一般更新比较频繁,更新后对插件所做的修改全部失效了)。

网站图标、标题、简介

这个不用多说,网站肯定是要有标题的,并用一句话作为简介,概括网站的核心内容思想等,这样有利于访问者快速了解网站。例如不少网站会以类似“关注互联网创业”“中国最大的*网站”这样的格式来写。另外网站可以做个小图标,这样放在收藏夹里也会好看一点。

版权信息

个人创办的网站,一般不希望别人随便的盗用里面的原创文章,版权信息当然必不可少。你可以安装Add Post URL插件,或者直接修改主题。

另外网站底部一般也会有“版权所有”之类的声明,如果有备案,还会有备案号,这个可以直接修改主题的footer.php文件中的HTML代码。

图片自动加水印

DX-Watermark可以直接在发表文章上传时,自动给图片加上指定的水印,以免随意盗图。不过根据我的实际经验,感觉给图片加水印效果不好。图片大小不同,加的水印大小也不一样;还有水印的颜色如果比较浅,尺寸比较小,有些图片上根本看不见,尺寸过大,或者颜色太深了,例如很深的大红色,会严重影响用户体验。最后我还是决定取消了图片水印。

邮件发送

有的服务器不支持邮件发送,导致WordPress默认的邮件发送工作不正常,导致很多问题,例如用于注册时无法收到登录密码,这时可以通过插件配置邮箱进行发送。

可参考《WordPress通过插件发送邮件》 http://www.paincker.com/wordpress-send-email-via-plugins

编辑器插件

WordPress自带的文章编辑器功能比较少,你可以安装插件加强编辑器功能。CKEditor for WordPress就比较强大,不过似乎配置有点麻烦,还有点兼容方面的问题不想麻烦,后来我改用TinyMCE Advanced。自己编辑文章主要还是用为知笔记,然后离线发布上传的,所以用编辑器主要也只是偶尔进行文章的修改了。

用户交互

分享、喜欢按钮

好的文章,希望读者分享到社交网站,让更多的人看到并增加网站访问量和知名度。可以使用JiaThis插件实现,或修改主题。喜欢按钮也可以插件或修改主题进行实现。

社交化登录、用户模块

你可以考虑让用户直接通过QQ登录你的网站发表评论,非常方便。

关于社交化登录、用户评论方面的东西,可参考《WordPress的用户系统总结》:
http://www.paincker.com/wordpress-user-module

评论框表情

允许用户在评论框使用表情,可以提高用户体验,让评论内容更加丰富。表情图片也可以通过修改主题自行定义,替换掉WordPress自带的不太好看的表情,具体方法请自行搜索。

读者留言板

留言板就是一个可以发表评论的页面,在后台新建页面,命名为留言板即可,并设置显示在菜单中,便于让访客看到。有任何问题都可以在留言板进行评论留言。

访问量统计

访问量统计是各种社交网站和博客网站的标配。可以看到文章的访问数量,对写博客来说算是一个反馈,知道有多少人访问过,还能制作热门排行的侧边工具栏。可以用WP-PostViews,并结合主题的修改实现。

用户体验

面包屑导航栏

面包屑导航栏有助于用户了解当前处于网站的什么位置,能提高用户体验。一般通过修改主题实现。

移动主题切换

移动设备访问网站时,网站应该能对移动设备进行优化,如果你的主题是响应式的,能自动调整,那样挺好。如果不是,你可以考虑对电脑和移动设备甚至平板,使用两套以上的主题,并用WordPress Mobile Themes插件自动切换。

新窗口打开外部链接

个人认为如果文章中有超链接,比较合适的做法是,站内链接直接在当前窗口打开,站外链接则在新窗口打开,但是每次编辑超链接都自己设置太麻烦了。External Links插件就能实现新窗口外链打开功能,并在外链右侧插入一个小图标提醒读者,链接打开的将会是一个外部链接,注意上网安全。

代码语法高亮

如果你做的网站有技术类文章,文中常常少不了程序代码,语法高亮能方便看懂程序。可以选用WP-Syntax插件实现。

加速和优化

图片压缩

图片压缩可以加快网页加载速度,同时节约服务器空间和流量。WP Smush.it可以轻松的压缩图片,既能在上传时自动压缩,也可以压缩已有图片。而Compress PNG for WP则利用TinyPNG网站的API实现了对PNG图片非常好的压缩。

优化数据库

WP-Optimize是一款很好的数据库优化插件,每隔一段时间,对数据库优化一下,删掉不需要的东西,加快了网站速度。

网站加速技术

WP Super Cache是一款网站页面缓存插件,大概意思是缓存一些页面,免得每次访问的时候都动态生成,加快网页访问速度。有关网站加速的技巧,之后我会再写一篇文章进行更详细的介绍。

安全

垃圾评论拦截

你可以用Akismet插件拦截垃圾评论,例如恶意广告,病毒等评论。

网站的安全

BulletProof Security是一款比较强大的安全插件,不妨试一试,虽然刚建立的小站估计也没人会攻击,但是防患于未然总是好的。

禁止非管理员用户进入后台、禁止用户注册

有些人不希望普通用户注册登录后能进入WordPress后台界面,或者认为存在安全隐患,也有观点认为用户注册可能会导致安全问题,因为WordPress的网站管理员和普通注册用户的唯一区别是权限不一样,如果居心不良的人注册用户并突破了权限成为管理员,就能随意修改网站内容。但是禁止用户自行注册似乎有点不妥,而禁止普通用户进入后台会影响注册用户的体验。例如默认的注册密码是随机生成的,普通用户能通过后台修改密码方便记忆,如果禁止进入后台,就无法达到这个目的了。

SEO

网站SEO

SEO是搜索引擎优化的意思,也就是通过优化网站的一些内容,让搜索引擎更快更准确的收录你网站中的东西,这样有利于被更多人访问到。网站SEO实际上比较复杂,并且有专门的人进行研究,甚至成了一门学科,成了一种工作职业,这里我也了解很少,没法做更多介绍,但是推荐一款插件SEO Ultimate,有兴趣可以好好研究下。我用到的这个插件最多的功能是Code Insertor,有时网站验证需要在网页中插入一些代码,但是又不想随便改主题,刚好用这个功能就可以直接插入代码了。

Robots访问记录

一个网站能被搜索引擎搜索到,是因为搜索引擎的网络爬虫(又叫做Robots)访问了你的站点并收录进了搜索引擎的数据库。wp-log-robots可以记录Robots对你的网站页面访问的记录,从而进行SEO优化。而对于新手建站,虽说不一定有很大作用,至少可以满足一下好奇心吧。

网站地图

网站地图也是SEO的一种手段,通过建立一个固定的页面,记录了你的网站所有页面的地址、更新时间等信息,引导Robots对你的网站页面进行收录。推荐使用Google XML Sitemaps,百度也有网站地图插件,但是似乎不会自己刷新,不知道是不是我配置不对。

Ping更新服务

在网站发表一篇新的文章后,你可以通过设置Ping提醒搜索引擎及时收录你的文章。在设置-撰写-更新服务中,添加百度Ping的链接,就可以实现了:
http://ping.baidu.com/ping/RPC2

固定链接设置

文章发表后会有一个链接地址,为了方便被搜索引擎索引到,一般可以设置成固定链接,链接可以用一些英文或拼音缩写表示。最合理的格式网上不同的人意见不一样,个人比较喜欢的是最简单的“网站URL+缩写”的方式,具体可以自行搜索了解。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

0

暂无评论

评论前:需填写以下信息,或 登录

用户登录

忘记密码?