Modernize主题的短代码使用和自建站问题汇总

通过前面2篇文章的介绍,加上各位自己的摸索,相信你基本熟悉了Modernize主题特性。对于本主题模块化操作,我建议是大家将每个模块都添加一下,尝试着排版来熟悉它的功能。作为本主题的最后一篇介绍,我们讲一下排版时用到的一些短代码,另外还有主题面板里的一些设置。

 1,显示短代码按钮

默认情况下,短代码是隐藏的,如图点击展开所有按钮即可。这些短代码按钮相当于一个快捷操作,不使用这些按钮,我们依然可以在内容区域手动输入。当然了,如果不采用内容区域而采用模块拼接,就不需要了解大部分短代码的功能了。

2014-04-20 20-57-26

2,排版时灵活使用divider和space短代码

默认的DIVIDER代码插入是[divider scroll_text=”SCROLL_TEXT”],可将SCROLL_TEXT改为“Go to Top”,当然也可以不使用这个文字而直接采用[divider],divider的作用是插入分隔线。但在实际操作时会发现,分隔两部分内容时,下面与分隔线的距离太近,显示很不协调。这里我们要使用到space短代码,紧接着上面的短代码加入:[space height=”10″],数值“10”可任意修改。

3,更改portfolio为products

地址栏的URL中显示portfolio总是看着不舒服,改为products会比较顺眼,很高兴的是此主题支持我们在后台修改(很多主题并不支持)。进入主题面板即可看到如图,将其改为products,接着save changes。为确保修改生效,请进入setting ->Permalink,将固定链接先切换到默认项->保存,接着再切换到你预设的项目 ->保存。—-大家一定要注意这个操作,在很多涉及到修改源码/安装插件导致前台页面链接失效(出现404错误)时,这样的操作能够起到重置链接数据的作用。

2014-04-20 21-14-12

4,启用自适应

Modernize是支持自适应的,意思是网站在手机和平板上都能自动适应屏幕而达到很好的浏览体验。默认是关闭这项功能,请进入主题面板开启ENABLE RESPONSIVE项。

5~N,占位编辑(根据用户和留言反馈,我们会将新的知识点归纳在此。欢迎大家在使用中将问题通过评论反馈,不要旺旺或QQ提问,谢谢配合!)

第五节:建立页面和排版内容,幻灯片的使用

回到目录:WordPress快速建站之系列教程

上一节我们简单认识了HTML代码和WordPress主题的短代码,这一节将针对特定主题做一些页面排版的讲解。同时建立页面时,我们需要选择合适的模板,当然这些模板也是主题自带的。我觉得幻灯片也是属于页面排版的一部分,所以将其纳入本节内容。幻灯片插件有很多种,在这之前有一篇关于Revolution Slider幻灯片的使用视频,再次提醒下,幻灯片插件很多,使用方法各异,同时插件不断升级后,界面和功能都会有所增强,所以对这些插件的使用,需要进一步的学习和研究。

1,新建页面

鼠标移至“页面” – “新建页面“,即可点击创建一个页面。键入页面标题,标题下方会自动生成固定链接,当然你可以手动修改,这也是我们建议的操作。在页面的右侧有”发布“,”页面属性“,”特色图像“等,如果没有可以通过后台上方的”显示选项“来设置,如图所示。

新建页面-wordpress后台
新建页面-wordpress后台

2,排版内容

现在就是我们使用短代码大显身手的时候了,当然你得提前准备好文字内容和图片。网站是否好看,很大程度上取决于你的审美、图片是否精美和排版是否合理,多参考一些酷站,力求图文混搭合理,从我的经验来看,很多不懂HTML代码的朋友(设计出身),他们的排版出来的页面却非常精美。关于如何排版,请看视频讲解。

3,幻灯片的使用

有的幻灯片已经与主题整合在一起,只需要在新建页面时设置显示多张图片就可以,而有的主题的幻灯片插件是独立的,新建幻灯片后,再进入页面通过短代码或选项设置即可显示。

最后,因为主题不一样,页面排版中使用的短代码和幻灯片插件使用都不尽相同,需要大家区别对待。我们已经筹划将推出更多的针对特定主题的详细讲解视频,便于大家快速掌握建站技巧。本系列教程属于零起步教程,如果你没有WordPress基础,建议还是要耐心看完接下来的几节内容。

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNzAyMTAw.html

第四节:HTML代码和WordPress主题的短代码如何使用?

回到目录:WordPress快速建站之系列教程

在认识和学习HTML代码和主题短代码前,我们得先了解一下所见即所得编辑器,如图1所示,编辑器上方有很多类似Word里的按钮,用以排版内容,注意在右上角有可视化/文本选项。

图1:所见即所得编辑器(可视化)
图1:所见即所得编辑器(可视化)

虽然主题短代码在可视化状态下是可以看见的,但HTML代码必须在文本状态下才可以看到,如图2所示。

图2:所见即所得编辑器(文本)
图2:所见即所得编辑器(文本)

1,HTML代码

由于种种原因,在可视化状态下编辑内容有时候会出现错位等问题,所以我们不得不切换到文本状态下检查HTML代码是否正确。HTML代码是以”<“和”>”左右尖括号包围的,同时以带“/”来结束的。

加粗代码:
<strong>内容</strong>
斜体代码:
<em>内容</em>
链接代码:
<a href="https://www.kalated.com" target="_blank">卡拉科技</a>

我们可以将HTML代码理解为一个容器,那么大容器里是可以放小容器的,下面的代码是正确的。

<p>这儿是一些内容,对我<strong>加粗</strong></p>

事实上容器是不可以交叉的,如下面的代码就是错误的。

<p>这儿是一些内容,对我<strong>加粗</p></strong>

通常情况下在后台添加和编辑内容并不需要我懂得一丁点儿HTML代码,但上面讲到的这个错误示例经常会遇到,大家需要注意一下。

2,主题定义的短代码

主题定义的短代码其实是一个个函数,只是避免让用户直接面对太多源码而简化的结果。短代码通常是以“[”和“]”包围的,并以“/”结束(有些没有)。由于主题的不同,各自短代码的含义也是不同的,所以在拿到新的主题时,需要对短代码进行详细了解。同样的,上面提到的HTML错误示例也适用这里,短代码也是不允许交叉的,更不允许HTML代码和短代码交叉。

以下代码是错误的:
[list]这儿是一些内容,对我<strong>加粗[/list]</strong>
[list]这儿是一些内容,对我用[red]红色[/list][/red]

以下代码是正确的:
[list]这儿是一些内容,对我<strong>加粗</strong>[/list]
[list]这儿是一些内容,对我[red]<strong>加粗</strong>[/red][/list]

在页面排版中,短代码的使用是非常必要的,也是必须掌握的基本知识。做网站无非是做好框架,填充图片和文字内容,这些都会用到短代码。

更改与说明:在视频中讲到“列”短代码时,由于没有详细查看主题分列规则的说明,所以造成了一定的误区,大家在理解这个主题的分列规则可以通过主题自带的页面说明来理解,请看http://centum.purethemes.wpengine.com/full-width/

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjc5ODMyNzky.html