WP建站实例教程 – 卡拉科技

2015年6月18日

如何使用Chrome浏览器的审查元素来调整网站CSS

对于使用WordPress主题来建站，难免会遇到想修改部分CSS来调整颜色、字体和边距等，来满足自己的审美，和客户体验。

那于不是很专业的建站者来说（当然专业的建站者更需要Chrome），可视化的操作能让我们更轻松的完成代码修改。

今天我们就以视频教学的方式来教大家如何使用Chrome的审查功能来修改CSS。

2015年6月9日2015年6月9日

第一步：常规设置

在这一栏的设置内分别有：常规、跟踪、安全以及网站管理员工具，这里前三项保持默认即可，如果你有开通以下几个搜索引擎的网站管理员工具那就用上。

第二步：标题 & 元标记

这里通常是设置网站首页Tltle、内页Title以及一些其他细节，需要注意的地方有：

　　Title Separator：网站标题的分隔符，推荐选择“|”，并且一旦决定在今后无论如何都别去改。

　　站内meta设置——归档的子页面使用Noindex：这里推荐一些个人站长博客勾选，能够保证首页权重，其他的自行决定。

首页选项：这里有两个地方可以填写，只要在“元描述模板”中写上网站的描述即可，写描述时可以适当的带上网站标题及关键字，但不可过度堆积，另外根据百度在2013年更新的绿菠萝算法以及2015年更新的瑞丽算法（待参考），建议各位在给网站起标题的时候尽量简洁、有代表性。

　　其他选项：注意下图红色框住的选项，如果你是和本站一样只有一个人在更新文章，那么就勾选，如果你有很多编辑一起更新文章，那么就不用勾选。而关闭日期归档则可以避免搜索引擎收录对用户无用的内页，同时收缩权重，保证重要的页面权重不会被分散。

第三步：XML站点地图

保持默认即可。

第四步：固定链接

这里设置请看下图，跟随本站即可，需要注意的是最后一条“重定向丑陋的URL到漂亮的固定链接。（多数情况下不推荐！）”，这里如果你是新建立几天的博客，那么最好点击勾选，但是如果你已经建立了一段时间了，最好不要勾选。

最好的固定链接应该是以文章名作为URL后缀，在每次写文章时的固定链接改成英文的关键字，如：《安卓平台游戏推荐：愤怒的小鸟，那么这篇文章的固定连接应该是：http://example.com/android-angry-bird .

规范URL设置：这里主要设置让你的URL是以http开头还是https开头，两者区别在于后者更加安全，但是目前还不是非常流行，不过据说谷歌已经打算通过排名的变动引诱加强迫各位站长主动将为数更多的http变成https了，这里选哪个自行决定。参考资料见本文底部。

第五步：内部链接

保持默认或者启用路径均可，最好是有点代码基础的童鞋再来弄这个，小白请勿尝试。

第六步：RSS Feed 内容、第七步：导入 & 导出、第八步：Bulk Editor 均保持默认即可。

第九步：编辑文件

这里的编辑文件其实就是编辑Robots.txt，Robots.txt是网站与搜索引擎协议，它能告诉搜索引擎那些页面你可以收录，那些不可以，具体的编写方法以后再说。

参考资料：

HTTPS（Secure Hypertext Transfer Protocol）–安全超文本传输协议

它是由Netscape开发并内置于其浏览器中，用于对数据进行压缩和解压操作，并返回网络上传送回的结果。HTTPS实际上应用了Netscape的完全套接字层（SSL）作为HTTP应用层的子层。（HTTPS使用端口443，而不是象HTTP那样使用端口80来和TCP/IP进行通信。）SSL使用40 位关键字作为RC4流加密算法，这对于商业信息的加密是合适的。HTTPS和SSL支持使用X.509数字认证，如果需要的话用户可以确认发送者是谁。

转载自：http://www.mywpku.com/

2015年6月9日2015年6月9日

Breadcrumb NavXT使用简介视频教程

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事”汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

更多WordPress插件视频教程请至淘宝教育购买：http://i.xue.taobao.com/detail.htm?courseId=31905

Breadcrumb NavXT是一款非常不错的WordPress页面导航”面包屑”插件，使用Breadcrumb NavXT可以随心所欲地在你的博客中任意位置设置面包屑breadcrumb导航。

第一步，后台搜索Breadcrumb NavXT，直接在线安装；

第二步，将面包屑代码，分别加入类似page.php，single.php和portfolio-single.php；

默认代码：

<div class=”breadcrumbs”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>

改进代码，在首页不显示面包屑：

<div class=”breadcrumbs”>
<?php if(function_exists(‘bcn_display’) && !is_front_page())
{
bcn_display();
}?>
</div>

第三步，Breadcrumb NavXT的设置，注意修改首页TITLE。

第四步，用CSS来美化面包屑链接；

个人认为，面包屑导航能够提供很好的用户体验，对SEO也会有很大的帮助。但是对一个小型网站，如果页面总数都不超过20个，盲目的追求这些插件功能是本末倒置的。值得注意的是，很多主题自带面包屑导航。同时，如果用PORTOFOLIO或POST做产品展示时，会发现，进入单篇文章/单篇PORTFOLIO后，面包屑导航是指向category的，而本插件并不能解决这个问题。

那么我们只能使用插件Advance Category Template来改造产品展示页面，从而达到用分类来展示产品，这个插件在GoodSpace和Centum主题都有讲解，使用方法类似，但不完全相同。

2015年6月5日2015年6月6日

WordPress插入表格-TablePress插件推荐

在做WordPress网站时，如果只是写写文章，不至于会需要插入表格。但是在企业站，外贸站时，想插入表格展示产品参数之类的，就是一个非常必要的需求。有时候我们会选择将表格做成图片，这样很不利于SEO。直接复制WORD里的表格又不能正常显示。

所以今天推荐给大家就是表格神器TablePress，

第一步，安装插件；

第二步，新建表格；

第三步，设置表格和填充内容；

第四步，在页面或文章里，插入短代码。

2015年6月5日2015年6月6日

Contact Form 7插件视频教程表单插件

Contact Form 7 是一款简单易用扩展性灵活的WordPress联系表单插件，可以自定义各式各样不同类型的表单功能，而且支持自定义接收邮件，Ajax提交和 jQuery表单插件支持。可结合Akismet过滤垃圾邮件，同时也支持CAPTCHA反垃圾邮件，表单域元素支持各种最常见的：单选框、复选框、文本框、下拉菜单、按钮、文件上传等多种表单域。

第一步，后台安装Contact Form 7

第二步，新建表单

第三步，设置表单

第四步，将短代码插入页面/文章即可

补充：自定义CSS，实现表单外观调整。补充的内容请见（侧边栏和表单的结合）：https://www.kalated.com/1781.html

2015年6月5日2015年6月16日

使用Sticky Popup做侧边停靠联系表单

效果演示：http://www.yobots.org/goodspace/

第一步，安装插件 sticky popup

第二步，基本设置，

注意：A，图标的尺寸是40*40像素，有必要时要用PS进行旋转处理。

B，Popup Top Margin项仅对“左”或“右”位置起作用。

第三步，完成内容填写

注意：如果需要放置表单，需要提前安装Contact Form 7

第四步，自定义CSS使其外观完整。

以下代码是http://www.yobots.org/goodspace/站的，其它网站需要作适当修改。

/*Sticky Popup 插件*/
.sticky-popup-left .popup-image { margin: -8px -135px 0 0 !important;}
/*Sticky Popup 内表单*/
input.mn-kalated, input.me-kalated { width:240px !important; height:20px !important; padding:6px 4px !important; margin: 10px 5px 10px !important;}
textarea.mg-kalated {width:240px !important; height:60px !important; padding:6px 4px !important; margin: 10px 5px 10px !important;}

2015年6月3日

Modernize外贸建站企业建站视频教程

全套高清视频教程购买：http://i.xue.taobao.com/detail.htm?courseId=30344

1-Modernize安装主题和子主题

2-Modernize主题设置之Gerneral

Modernize主题介绍：

目前在ThemeForest网站，Modernize在WordPress主题销售排行中第12名，可见它的欢迎度是极高的。

这套主题支持自适应，WP多语言插件，模块化建站非常方便，SEO优化完善。扁平化设计，高端大气上档次，能够满足中小企业，小商城和个人建站需要，特别适合外贸网站。如果您有WordPress快速建站的需求，强烈推荐您学习本课程。

学习了本课程能达到什么目标：

1，全面了解Modernize的绝大部分特性，节省摸索时间；
2，熟悉使用本主题建站的流程，快速上手；
3，实例操作能够让您跟着学，增加学习信心和兴趣；
4，能够独立建站；

2015年6月3日2015年6月3日

WordPress主题之GoodSpace外贸建站企业建站视频教程

【购买GOODSPACE全套高清视频教程】：http://i.xue.taobao.com/detail.htm?courseId=30779

请注意DEMO地址已经更换到：http://www.yobots.org/goodspace/

GoodSpace主题推出时间较早，有一批死忠粉，自然有它的道理，您不容错过。

这套主题支持自适应，模块化建站非常方便，SEO优化完善。扁平化设计，高端大气上档次，能够满足中小企业和个人建站需要，特别适合外贸网站。如果您有WordPress快速建站的需求，强烈推荐您学习本课程。

本视频实例操作部分讲了很多代码修改定制网站，您不但能定制自己的网站，还能学到更实在的建站实操干货。