wordpress例子 wordpress技巧

wordpress中页面的例子有哪一些

wordpress中页面的例子：

创新互联建站是专业的浦口网站建设公司，浦口接单;提供成都网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行浦口网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

1.关于页面 (1. About Page)。

这是互联网上几乎所有网站的必备页面。您可以将此页面命名为“关于我们”或“关于我”，具体取决于您是企业博客还是单作者个人博客。

2.联系页面 (2. Contact Page)。

您的博客读者，广告客户和潜在的业务合作伙伴都需要找到您的联系信息。联系人页面使用户可以快速轻松地向您发送消息或了解如何与您联系，而无需在您的博客上留下公共评论。

3.免责声明页面 (3. Disclaimer Page)。

如果您通过 WordPress博客在线赚钱，则必须添加免责声明页面。您可以在这里让用户知道您如何通过博客赚钱。例如，如果您展示横幅广告或促销会员产品，则可以通知用户这就是您的内容获利的方式。

4.隐私政策页面 (4. Privacy Policy Page)。

隐私政策页面基本上会告知用户您在网站上收集的数据以及您和其他第三方如何使用此数据。即使您没有收集任何用户数据，您网站上的第三方工具(例如Google Analytics(分析))仍然可以设置Cookie。

软件简介：

WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。

WordPress是一款个人博客系统，并逐步演化成一款内容管理系统软件，它是使用PHP语言和MySQL数据库开发的，用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。

如何用 WordPress 写出一篇“好看”的文章

一篇文章是否好看，无非在于两方面，第一个就是文章本身的内容，另一个就是文章显示的排版布局。笔者博客自创建以来，也已经过去了近两年的时间，这其中积攒了很多在 WordPress 写作的经验，特别是在文字排版这块。回首观看，早期的文章质量比现在的要差远了，本文就是总结一下对于使用 WordPress 写作文章排版的经验。

一些基础知识

在后台编写文章通常使用可视化的编辑器，你看到的排版布局就是比较具体的效果，但实际上数据是用 HTML 结构来记载的。例如，当你回车换行，那么在换行的地方系统就会加上一个段落标签（p），当你插入一个连接的时候，用的就是锚标记（a）。HTML 是具有语义性的，根据 HTML 的语义性写出的一篇文章，对于 SEO 、排版都有好处。此外，WordPress 主题的作者，通常也会针对这些结构进行一些设计和样式处理，会使其显示的效果更好。

用标题划分文章层次

标题标签（hn）是非常重要的一个 HTML 标签，它对于 SEO 也有很重要的作用。通常用它来划分文章的层次。写一篇文章，肯定要有一定的层次，也就是所谓的大论点、小论点等。通常的文章一般具有三个层次：文章标题、大标题、小标题，通常来说，对应的标签是 h1、h2、h3。对于有的主题来说，设计者会用 h2 作为文章标题，这点也需要注意。标题标签一共有六个（h1-6），分别代表不同的重要等级，实际应用当中，只会使用 h1-3。需要注意以下两点：

内文标题层次不要高于文章标题。如果文章标题使用了 h1，那么内文大标题只能使用 h2。

小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次，不能把小标题和大标题的层次混合。

合理的使用标题划分文章层次，可以让文章变得更容易理解，对阅读者和 SEO 都有好处，更有一些插件可以根据文章的标题建立目录层次，例如水煮鱼开发的TOC 文章目录插件。

对于重要的文字进行加重处理

这一点大家都知道，不再赘述。但是要注意的一点，只对非常重要的关键词进行加重，加重的效果通常是文字加粗，这样可以吸引浏览者的目光，如果太多的话，就会分散阅读者的注意力，要尽可能的少。下图就是个加太多的例子。

善用有序和无序列表

如果你在文中写的内容具有明显的并排性，可以作为一个列表，那么一定要使用无序列表（ul）或者有序列表（ol）。无序列表就是指没有顺序的列表。如果你想列举某项产品有什么样的有点，或者是一些赛事列表，那么你应该使用无序列表。有序列表是指一些有顺序的并排信息。如果你想写一下使用某个软件的四个步骤，或者是发布一个有明确顺序的资源列表，那么就用无序列表。

见过很多文章会对一些并排性的内容，手动编写诸如 1、2、3 之类的编号，其实这是错误的，应该使用有序列表， CSS 自动添加编号上去。

善用空格

空格是文章中比不可少的一部分，但是很多人用空格的方法是错误的。空格不是用来排版的，它不像是在 Word 之类的软件里面，使用空格在段落的开头空开两格。中文的写作习惯是在文章段落的开头，空开两个字符，这空开的距离，并不应该使用空格来实现，而是使用 CSS 对段落标签增加属性 text-indent 来实现的。这个是主题设计者的工作，如果你用的主题并没有做这个，那就不会自动空开了，你只能自己修改 CSS 或者用空格模拟空出两字的效果，但这是不合理的。

那么空格究竟要用在什么地方呢？用在重要的关键词上面，特别是英文关键词。英文在中文文章中是个不太好处理的东西，绝大多数的作者会直接把英文字母和中文混写在一起，但是这样的显示效果并不好。具体对比效果如下图

在稍微重要的关键词的两边，我加了两个空格，稍稍加一点距离，对于英文单词，除了空格之外还对首字母进行大写，两条文字一对比效果很明显就可以看出来。

标注文章引用内容

有的文章可能会引用一些其他文章的资料、名人名言等，这样就需要选中这块文字，点击“块引用”，这样就可以告诉阅读者，这是一块来自他人的内容，我引用过来的。

用预格式化描述代码等有格式的内容

例如一段代码，通常有换行、空格之类的用来保持代码的结构，如果以普通的文字发布，可能会破坏这个结构，所以要用预格式化。

使用其他修饰的注意事项

其他的文字修饰还有很多，包括：斜体、删除线、下划线、颜色、字体大小等。这些文字修饰要慎用，用多了，会让阅读者感觉杂乱影响阅读心情。就颜色来说，一篇文章中最多不要超过两种颜色。

尽量多的使用图片

虽然不能极端的说没有图片的文章不是好文章，但是一篇好文章是肯定有图片的。文章中的图片主要有以下两个用处：

与文章内容相符增强文章表现力

缓和阅读中的视觉疲惫

所以，文章中，要尽量配图。配图也要跟文章主题相符合，例如：介绍人物的文章，配张人物图片；介绍软件的，配张软件截图；写心情生活类的，可以配张唯美的图片等等。

用心去写文章

一篇文章最吸引人的是文章的内容，再好的排版，没有好的内容，人们也不会去看的。所以要用心去写文章。

写之前有明确的目的（介绍自己的写作排版经验），有一个大体的构思（包括写哪几部分），然后觉得写出来会给阅读者一定的帮助，这时候就开始动手写。写的过程中，按照之前的构思，列出大纲和知识点收集整理相关资料，然后针对每个知识点去截图或者用 PS 作图来更形象的描述这个问题。写完并且上传图片之后，还要反复检查两边，看看是否有废话、错别字以及没介绍清楚的地方。

就本文而言，本人用了两个小时的时间来写作，为写出一篇有价值的文章，付出这些是值得的。

一个反例

下图是从所谓刚子博客上截取的，是一篇被我缩小的文章，整体是一大段文字没有任何的段落层次、修饰、图片，是一个非常好的反例。

如果只是一篇短小的文字，这样是可以的，如果是一篇很长的文字，不免让阅读者疲惫。

写在最后

用 WordPress 写出一篇好看的文章，首先要用心去写，写出一篇高质量、有阅读价值的文章，其次要对文章不同的内容进行修饰。本文就介绍了一些写作经验。

至于文章内容具体的修饰样式，是根据你用的 WordPress 主题而定。本人的原创主题Qetro就对文字的排版进行了一定的优化，如果你的博客写文字比较多一点，不妨试用一下看看效果。

如何在WordPress文章中插入代码

无论你是为WordPress写插件或hack，还是添加有关WordPress的代码片段或其他如HTML，CSS，PHP或javascript的编程代码，如何让插入于日志中的代码有其形而不发生作用对写博客的用户来说是常常遇到的拦路虎。

默认情况下，WordPress会将和自动转换为和，在发表后看起来就是和。如果它发现日志中使用了HTML标签，就会将其当作HTML标签来使用，结果你的文本看起来就很怪异，布局也会弄得一团糟。

网页中代码的使用有两个方面。在段落中使用代码表示正在讨论该段代码，然后是被高亮显示的代码。

段落中的代码

有两种HTML标签可以将文本转为等宽样式，即 code和 tt。而后者现今已基本不使用了，取代它的是用处更大且更富语法意义的 code，它能将计算机代码类的文本与一般语言分辨开来。

此为用于某段落内的代码示例

用以描述WordPress中的 codeindex.php/code,

codesidebar.php/code及 codeheader.php/code

模板文件。如果你希望在文字周围使用标签以使它们看起来如代码一般，此方法就很有用，但如果你想展示如HTML的标签的话该如何是好呢？

在 codeheader.php/code模板文件中，查找 code div class="header"/code 部分以修改 code h1/code标题栏。使用 code标签是无法告知WordPress将HTML参考从日志中分离开的。它会看到 code标签，然后看到div，因此它就会在网页中新建一个容器作为应答。WordPress会认为你实际上是在使用HTML标签，不小心使用h1这样的标签就能搞砸整个网页布局和设计初衷。

若要让WordPress将此识别为段落中的代码的话，可以使用字符实体或扩展字符来表示其前后的左右箭头。

在 codeheader.php/code模板文件中，

查找 codediv class="header"/code

部分以修改h1标题栏。

默认情况下，WordPress会将任何以http:开头的文本转换为链接。如果你要为WordPress网站内特定文章做链接，而不使用并将其转为链接的话，你可以使用扩展字符来代替右斜杠，这样一来WordPress就不会“看到”该链接了。

...在日志中使用

使用链接到某特定的WordPress日志....

以下列出一些最常用的HTML字符实体：

/ = /

] = ]

[ = [

" = "

' = '

后文给出了相关资源，它将帮助你将HTML标签转为字符实体，因此你就无需劳神背下这些字符代码了。

使用PRE标签

要使得代码可以被复制粘贴到其他代码或模板文件中的话，可以使用 pre这个HTML标签。

pre标签指示浏览器使用等宽的代码字体，并完完全全地将 pre标签内的内容复制下来。每个空格，分行，以及代码都被完整地复制一遍。

h3Section Three Title/h3

pThis is the start of a

a title="article on relationships" href="goodtalk.php"

good relationship/a between you and I....

使用 pre标签看起来并不美观，但却能达到目的。后文将给出解决外观问题的例子。它会将代码原原本本地展示出来。

我们这里说原原本本，事实也是如此。如果你的代码行非常长，它就会伸到页面外面去，因为并无任何指示告知它进行换行。以下给出一个例子：

h3Section Three Title/h3

pThis is the start of a a title="article on relationships" href="goodtalk.php"good relationship/a

between you and I and I think you should read it because it is important that

we have these little a title="article on communication" href="communication.php"conversations/a

once in a while to let each other know how we feel....

看起来很不舒服吧。要避免这种代码窜出屏幕的现象，就要进行分段。但在哪进行分段并放入段行标签可没那么容易决定下来的。

如果你熟悉编程语言的话，就知道在何处断行而不会弄砸一行代码。但如果你不知道在何处断行的话，就进行实验吧。将代码写入后，进行断行并进行测试。如果代码能够起效的话，就是要这种断行形式。否则的话就请尝试其他的断行位置。

如果你的代码行很长，可以考虑只显示一小部分代码，然后在网站上的文本或PHP文件中给出完整代码段的链接，也可以使用用于临时展示代码的在线pastebin。

代码的疑难排解

在WordPress日志中写代码可谓一项挑战，它会覆盖WordPress的默认风格。如果你在日志中写代码时遇上麻烦的话，下面这些内容可能会对你有帮助。

代码中的引号

在日志中写进代码时常遇到的问题是，WordPress会将代码中的直引号转换为文字处理程序中出现的弯引号。用于实现功能的代码不应当具有这种弯引号，而应该保持原有的直引号。

你可以使用 pre标签来避免出现这种情况，或使用字符代码来表示引号也可以解决此问题：

p class="red"

即可写为 p class="red" 但如果你是在首次发布某页面之后进行编辑的话，html代码编辑器就会用自带的符号替换所有的实体。因此，如果你使用" 来表示引号的话，它们会变为"，而当你保存的时候它们就会被转换掉。

定制代码标签的风格

默认情况下，使用 pre和 code会将文本显示为等宽样式的字体，并使用body标签的字号。如果你想使用不同的字号，然后让这些标签呈现出不同的颜色或风格。

在WordPress外观主题文件夹的style.css风格页中，为这两类标签添加风格。举例如下：

pre{border: solid 1px blue;

font-size: 1.3 em;

color: blue;

margin: 10px;

padding:10px;

background: #FFFFB3}

code{font-size:1.2em;

color: #008099}

使用 code将会是上面的样子，而使用pre则会是如下形式：