wordpress繁體 word繁体字在线转换

好听的网名繁体字

不好意思，打扰一下，以下文字与回答无关！

成都创新互联公司专注于冷水江企业网站建设,响应式网站开发,商城建设。冷水江网站建设公司,为冷水江等地区提供建站服务。全流程定制网站，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

下一篇：WP Theme 教程 #5：主循环

调用你博客日志的主循环（The Loop）是 WordPress 中最重要的 PHP 代码集。这也是关于创建 WordPress 主题系列教程的第五篇。在继续学习之前，我们先复习下到目前为止学

到了什么？

到目前为止，你已经学到：:

规则，结构和 WordPress 主题的层式结构

每个页面有哪些部分组成

如何安装你的主题

如何调用博客的标题和把它做成一个链接

如何调用博客的描述和如何把 header 和其他内容分开

现在让我们开始第五篇：

现在已经打开了 Xampp，“tutorial”主题文件夹，浏览器中打开 以及在文本编辑器中打开 index.php 文件。

下面应该是在你这时候 index.php 文件中的内容：

记住，为了学习这些代码，请手工输入所有的东西，而不是拷贝和粘贴。

第1步

在 header DIV 标签下添加一个 DIV 标签，并给它的 ID 赋值为“container”，如下：

div id=”container”

/div

这个 DIV 标签是用来干什么的呢？它是用于把你的内容和它下面的所有东东都区分开，比如 sidebar 和 footer 这些东东。

第2步

在 Container 的 DIV 标签中添加如下代码：试着完全手工输入这些代码，如果遇到错误，重新再输入一遍。

?php if(have_posts()) : ??php while(have_posts()) : the_post(); ?

?php endwhile; ?

?php endif; ?

手工输入代码可以让你更容易知道每个代码集是干什么的。你刚才输入的是 WordPress 中的主循环（The Loop）。在我解释这些代码作用之前，你的 index.php 应该是这样了：

注意我缩进了 Container DIV 中的每一行。这是为了更好的组织代码。仅仅输入代码是不够的，我们需要组织它们。对于缩进，使用 tab 健而不是空格键。

刚才发生了什么？

if(have_posts()) – 检查你的博客是否有日志。

while(have_posts()) – 如果你有，当你有日志的时候，执行 the_post() 这个函数。

the_post() – 调用具体日志来显示。

endwhile; – 遵照规则 #1，这里用于关闭 while()

endif; – 关闭 if()

注释：并不是所有的代码都需要两部分，为了打开和关闭自己。有些能够自我关闭，这就解释了 have_posts() 和 the_post(); 这两个函数。因为 the_post(); 在 if() 和

while() 的外面，它需要分号去结束或者关闭自己。

第3步

在前面的课程中，你学习了使用 bloginfo(’name’) 去调用你的博客的标题。现在你将学习在主循环（The Loop）中如何调用日志标题。

在 the_post(); ? 的后面和 ?php endwhile; ? 的前面输入 ?php the_title(); ?

保存 index.php 文件，刷新你的浏览器，你应该看到在你博客描述的下方出现 Hello World ，默认情况下，你的博客只有一篇日志。而我的测试的博客有多篇日志，所以我有多

个日志标题。而且因为我所用的日志标题是一样的，并我没有进行组织整理他们，所以它们看起来像很长的一行 Hello World.

第4步

把日志标题转变成日志标题链接。还记得你怎样吧你博客的标题转变成一个链接呢？是在?php the_title(); ? 两边增加 a href=”#” 和 /a。

保存并刷新你的浏览器。现在你的标题变成了链接了，但是它们并没有指向哪里。为了使得每个标题都能指向正确的日志，你需要把 # 替换为 the_permalink()。

a href=”?php the_permalink(); ?“?php the_title(); ?/a

the_permalink() 是用来调用每篇日志地址的 PHP 函数。保存并刷新你的浏览器。如果你只有一个 Hello World 标题，把鼠标移到链接上面，观察你的浏览器底部的状态栏，他

不再是 。

如果你有不止一个的标题链接，你将看到每个链接会链到不同的日志或者网页。但是我们的日志标题依然在同一行上面。为了分开它们，在你的链接代码两边添加 h2 和 /h2

标签。

h2a href=”?php the_permalink(); ?”?php the_title(); ?/a/h2

记住 H1 用作你的博客的标题，那是你网页的标题。H2 被用作子标题。现在你的日志标题链接是子标题了，每一个都是一行。保存 index.php 文件并刷新你的浏览器，观察更改

的结果。

这一篇到此为止。你的 index.php 文件现在应该是：:

注释：如果你还没有创建一些测试的日志来测试你的主题，那么请到管理界面，点击 Write 按钮，并确认你是在 Write Post 页面下，写一篇日志并重复几次。你可以像我一样给

它们唯一的标题 Hello World。

下一篇：WP Theme 教程 #5b：日志内容

在这篇中，我们将解决真正的东西。如何展示你博客的内容？然后你将看到更多的 DIV 标签，用于把博客的内容和在上一篇中创建的日志标题区分开。

（注意：上一篇课程是非常，非常重要的。如果你不是完全明白我上篇所讲的，你需要去重新看一篇和问我问题直到搞明白为止。）

下面开始这篇课程。打开 Xampp ，打开 “tutorial”主题文件夹，打开浏览器，输入地址：，最后用文本编辑器打开 index.php。

第1步

在日志标题代码下面输入 ?php the_content(); ?。

保存并刷新浏览器，你应该在日志标题下面看到了一些文本。

刚才发生什么了?

你使用了 PHP 函数 the_content() 调用了 日志的内容。现在，日志的内容只是一长行的文本，一直到窗口的右边，因为你还没有样式化它。还记得 style.css 这个文件吗？我们以后用它来控制所用元素显示的。

上一篇，我教你输入多篇测试的日志以便可以看到多篇日志的列出的样子。如果你还没有做，那现在就去输入吧，然后返回首页，应该看到多篇日志是这样子的：

继续……

返回你的浏览器，点击查看选择页面源代码。就会弹出一个源代码窗口，如果你使用的是 Internet Explorer，那么弹出的是记事本。

我使用的是 FireFox浏览器，下面是在 FireFox 中显示的样子：

注意到 index.php 文件和源代码之间的区别了吗？你所有的文本，图像和其他附加的东西，所有在那个窗口或者记事本中的东西都是被这个函数 the_content() 调用来的。是不是很有用？不依赖 blogging 软件和具体的 WordPress 模板系统，你应该自己对这些文本和图片进行编码。

还有，有没有注意到我圈出的开启和关闭的P标签。他们都没有在 index.php 文件中出现，但是他们在源代码中出现了。

P 标签，为什么和如何使用？

为什么 – 当你输入你的日志的时候，每次你跳过一行就是一个段落，你需要一个方法去展示？每个段落会在 P （段落，paragraph）标签之间。那就是你能够在你的段落之间有行距的原因。如何 – 非常容易，WordPress 模板系统会帮你产生 P 标签。

第2步

给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上class=”entry”属性，如下：

div class=”entry”

/div

你现在的 index.php 文件应该是：

保存并刷新你的浏览器，你再次去查看源代码，你会发现你的每篇日志内容都被 class=”entry” 的 DIV 标签给围住。

为什么？

第一个原因是，你现在知道日志题目哪里结束还有日志内容哪里开始。第一个原因是这是为了能让 style.css 文件能进行样式话准备的。如果你愿意，你可以样式你的日志的内容而不影响其他别的东西。

id 和 class之间有什么区别呢？

到目前为止，对于每个 DIV 标签，你可以用 id 去命名它。记得 id=”header”吗？那么有什么不同呢？id 是唯一的而class不是。如果你从头到尾浏览你的源代码，你会发现只有一个 id=”header” 和一个 id=”container”，但是有多个 class=”entry”。

那么 header 和 container 能用 class 去取代 id 吗？完全可以。

牢记这一点，你不能重复任何 id。比如，你不能在同一页面上有两个 id=”header”。当你想一遍又一遍重新利用一些东西如日志的题目，那么请使用 class。

第3步:

用一个 DIV 标签把日志的标题和内容一起围住。并把这个 DIV 标签命名为：class=”post”。

div class=”post”

/div

（你可以按照你自己的想法把 class 和 ID 的名字命名成你想要的名字，比如你最喜欢的食物，但是 post 和 entry 更简洁，简单并更容易记，对吧？）

现在你的 index.php 文件为：

这个是经过缩进整理后的版本：

我使用 tab 健而不是空格键在 index.php 文件中产生缩进的。为什么进行组织呢？不像我的屏幕截图上一样，你的代码不会有红色或者绿色的高亮显示，你需要有个能够跟踪你的代码的方法，通过缩进，使你更容易知道哪个 /div 是结束哪个 div。

保存并刷新浏览器，然后查看源代码中的代码。

为什么你要添加另外一个 DIV 标签去围住日志标题和日志内容？

增加这个 DIV class=”entry” 去把日志标题和日志内容区分开。而这个div class=”post”是吧你的日志和其他内容区分开。

这就是这篇教程的所有内容，可能需要更多时间去消化，所以有问题请务必给我留言，下一篇我们将对付日期（date），分类（categories）和评论（comments）。

如果你看到我教程中错误或者不一致的地方，请尽快告诉我以便我能立刻改掉，另外，到目前为止，你觉得我的课程怎么样？是否需要我讲的更具体些，或者它们太长了？

上一篇：WP Theme 教程 #5c：日志元数据

这一篇我们开始解决日志的元数据（Postmetadata）：日期（date），分类（categories），作者（author），评论数（number of comments），以及其他隶属于日志的杂项信息。

我们现在在教程 5C，你可能已经注意到我将会把教程归纳成更大块（更少的步骤）。在开始之前，请打开 Xampp，主题文件夹，浏览器以及 index.php 文件。

先让我们复习下，现在的 index.php 文件应该有下面这些代码了：

第1步

把postmetadata.txt 中的代码拷贝到 ?php the_content(); ? 下面。（注意：在这部分，你只需要拷贝和粘贴。当我把 WordPress 主题放在一起的时候，我也只是拷贝和粘贴这部分代码。再重复一次，你不需要完全理解它，知道每部分代码集干什么已经足够了。

下面的这个屏幕截图为了适应日志的大小裁剪了一部分。注意日志元数据代码的组织和位置。不要把你的代码像下面的截图一样裁剪到 1 Comment 。

保存，刷新你的浏览器，你应该看到：

你同样可以通过查看源代码来看日志元数据是怎样的？还记得怎么样查看源代码吗？在浏览器的菜单：查看 页面源代码。

解释：

p class=”postmetadata” 和 /p – 所有的日志元数据都在一个 class=”postmetadata” 的段落标签中，因为我想把日志元数据和日志内容区分开。如果没有段落标签，日志元数据信息将在日志内容结束的地方继续，这将没有任何间距去区别内容和日志元数据。

?php _e(’Filed under:’); ? – : 是调用冒号“:”的代码；

把Filed under:放入?php _e(’ ‘); ?中不是必须的。你可以简单输入 Filed under:

?php the_category(’, ‘) ? – the_category() 是用来调用你当前日志的在的所有类别的 PHP 函数。如果你把 Filed under: 和 the_category() 放在一起，你可以得到：Filed under: Name of category 1, Name of category 2。the_category() 中的逗号是用来区分类别名。返回日志元数据的屏幕截图，你可以注意到在类别连接中的逗号。

?php _e(’by’); ? – 和 Filed under:一样。如果你创建私人用的的主题， by 外面的 _e() 不是必须的。_e() 是用来创建可以翻译的主题，如果主题被来自不同国家的上百人使用的话，这是非常重要的。如果你是创建公共使用的主题，最后加上 _e() 以便你的主题可翻译化。

?php the_author(); ? – 它是输出当前日志作者的名字。

br / – 如果你想要一个空行，又不想用段落标签来产生行间距，使用 BR。注意斜线 / 。这是能自我关闭的标签。

?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ? – 当弹出留言的功能激活的话，comments_popup_link() 调用一个弹出的留言窗口。如果没有激活，comments_popup_link() 则只是简单的显示留言列表。No Comments » 是在没有留言的时候显示的。1 Comment » 是用于当你刚好有1条留言时候。% Comments 187; 是用于当你有多于一条留言的时候。比如：8 Comments »。百分号 % 用来显示数字。» 是用来显示一个双层箭头 »。

?php edit_post_link(’Edit’, ‘ | ‘, ”); ? – 这个只有当你以管理员身份登录的的时候（译者注释：以编辑者，Editor登录也可以）才可见。 edit_post_link() 只是简单为你显示一个可以用来编辑当前日志的编辑链接，这样可以让你不必去去管理界面搜寻该日志而能直接编辑。edit_post_link() 有三个参数。第一个是用来确定哪个词你将用在编辑链接的链接标题。如果你使用 Edit post，那么将显示 Edit post 而不是 Edit。第二个参数是用来显示在链接前面的字符，在这里是竖线 |，代码就是124;。第三个参数是用于显示在编辑链接后面的字符，在这里没有使用。

登录 WordPress 之后，再返回到首页就可以看到“Edit”的链接和一条竖线。

下一篇：WP Theme 教程 #5d：Else，日志 ID，链接标题

这篇课程将讨论其他3个可以增加到日志中的元素。Else，post ID, 和 链接的 title 值。尽管它们是可选的，但是你几乎可以在我每一个免费的主题中都能找到。

开始之前，不要忘记启动 Xampp。

第1步

在 ?php endwhile; ? 的下面输入以下代码：

?php else : ?

div class=”post”

h2?php _e(’Not Found’); ?/h2

/div

大致如下：

保存，但是你应该注意不到任何变化。我们应该返回教程 #5，主循环，去解释你刚才上面输入的是什么？

这里就是主循环的部分代码：

?php if(have_posts()) : ??php while(have_posts()) : the_post(); ?

?php endwhile; ?

?php endif; ?

第一，if(have_posts()) 检查你的博客是否有日志，第二，while(have_posts()) 执行 the_post() 去调用你的日志。而 Else 是当你的博客完全没有日志的时候执行的。 想一下 while() 和 endwhile; 应该嵌套在 if() 和 else :之间。 这就是为什么 ?php else : ? 应该在 ?php endwhile; ? 之后。

现在你知道什么是 else，当你没有任何日志或者当它找不到任何日志的时候，你想告诉 WordPress 怎么处理呢？让 WordPress 显示错误信息 Not Found，或者其他任何你想要的东西。你可以下载我的任一款主题，看一下它的 index.php文件怎么写的。

在上面的例子中，Not Found 错误信息是在 ?php _e(’ ‘); ? 之中。如我上一篇所说，这不是必需的。

整个信息和代码 Not Found 外面有 h2 和 /h2。这个同样也不是必需的。你可以简单使用：

div class=”post”

Not Found

/div

但是，给这个错误信息使用上 h2 （子标题）标签能够使它更明显，让你访问者注意到这个页面上没有任何东西。

那么 div class=”post” 和 /div 用来做什么的呢？恩，你肯定不想你的错误信息在“茫茫蛮荒之地”之间滞留，对不？你用 div class=”post” 和 /div 标签围住每篇日志。所以同样，尽管是错误信息不是真正的内容，但是它其实是像日志的文本。

第2步

增加 id=”post-?php the_ID(); ?” 到 div class=”post”

保存，然后刷新你的浏览器。然后 查看 页面源代码。你现在会发现现在每篇日志都附加上了一个数字或者说是日志 ID。the_ID() 只是调用每篇日志的 ID；仅此而已。

为什么使用它呢？这是用来定制个别的日志的面貌。后面，当你使用 style.css 文件去告诉你的主题日志将看起像怎么样。如果通过给每篇日志附加唯一的 ID，你就可以针对单独的一篇日志，使得它和其他日志看起来不一样。如果没有 ID，你将没有办法通过 style.css 文件使它和其他日志不一样。

你如何同时把 class 和 id 赋给同一个 DIV 标签呢？DIV 是标签，class 是一个属性，id 也是是一个属性。每个标签能拥有多个属性，如 DIV 就可以同时有 class 和 id这两个属性。（注释：id 是一个 XHTML 属性。the_ID() 是 PHP 函数。他们是不同的，）

第3步

增加 title=”?php the_title(); ?” 到日志的标题链接。

保存并刷新浏览器。然后再去查看你的源代码。 当查看它的源代码，查找任何日志的标题链接。如果日志的标题链接是 Hello World，那么他的左边应该有 title=”Hello World”。

title=”” 是 a（链接）标签的另一个属性。在双引号中的是链接的描述。在这里，每篇日志的标题也是链接的描述。这就是为什么要再次使用 the_title() 这个 PHP 函数。

如果你不使用 the_title() 作为 title=””的值，那么每篇日志标题链接将会有同样的描述。举个例子，如果用 title=”Click me” 取代 the_title()，每篇日志标题链接都将会用 Click me 作为描述。

现在，返回你的网页。把你光标移到任一一篇日志标题连接，描述信息将会弹出，那就是刚刚增加的。增加描述到你的链接是非常有用的，当你其他站点需要扫描你的博客的时候。如 Technorati点抗 ，每次你发表日志的时候，WordPress 通知 Technorati 和其他网站你的博客已经更新了。Technorati 然后就会来到你的博客，扫描它，并索引得到一个你日志的摘要，这其中会包括你链接标题的描述。

下一篇将会涉及到后一页和前一页的导航链接。

在绝大多数的 WordPress blog 的底部中，都会有 Next Page 或者 Previous Page 这些导航链接。你可以通过 WordPress 的模板系统中的 posts_nav_link() 这个函数调用这些链接。在这篇中，只有一个步骤！

真的需要我再次告诉你一次去打开 Xampp，主题文件夹，浏览器和 index.php 文件吗？

第1步（只有一步）

在 ?php endwhile; ? 和 ?php else : ?之间添加如下代码：

div class=”navigation”

?php posts_nav_link(); ?

/div

注意到上面截图中的缩进，我一般使用 tab 健产生缩进来组织代码。

div class=”navigation” – 开始一个名字为 navigation 的 DIV 标签来围住后一页和前一页的链接区域。

?php – 开始 PHP 代码

posts_nav_link() – 调用后一页和前一页的链接。

; – 停止调用。

? – 结束 PHP 代码

/div – 结束名字为 navigation 的 DIV 标签。

效果如下：

保存并刷新，查看后一页或者前一页的链接。默认情况下，如果你没有超过10篇日志的话，是不会显示导航链接。如果你没有超过10篇日志，依然想看到导航链接，登录到管理界面，选择 Options Reading，然后把它设置为比你所有日志少一篇。如，你有6篇日志，就设置为5。

如何定制化 posts_nav_link()：

就像一些在 postmetadata 课程的函数中，你可以给这个函数3个参数，分别为你想显示在后一页和前一页链接的中间，前面和后面的任何字符，如下：

?php posts_nav_link(’in between’,”before’,”after’); ?

第1个参数是显示在后一页和前一页链接的中间。第2个参数显示在前面。第3个参数显示在后面。

这里是一个定制化 posts_nav_link() 的例子：

下一篇：WP Theme 教程 #6：侧边栏

是否你已经很期待学习侧边栏（Sidebar）了呢？可能第一眼，感觉侧边栏很难，其实它根本不难，一旦你掌握了它的结构，就能很快编码和样式化它。

在开始侧边栏之前，这是现在 index.php 文件的样子。

不要忘记打开 Xampp……

第1步

让我们创建一个名字为 sidebar 的 DIV 标签用来围住侧边栏中的所有东西。在 container 的后面和 /body 标签的前面输入以下代码：

div class=”sidebar”

/div

第2步

在新的 sidebar 的 DIV 标签中创建一个新的无序列表。

ul – 开始无序列表

/ul – 结束无序列表

第3步

增加一个列表元素（LI）到无序列表（UL）的中间并把一个子标题添加到这个列表中。

lih2?php _e(’Categories’); ?/h2

/li

注意添加制表符到li 和 /li 标签之前为了组织代码。

li – 开始列表元素

h2 – 开始子标题

?php _e(’Categories’); ? – 输出字符 Categories

/h2 – 结束子标题

/li – 结束列表条目

再次重复一次，如果你只是为自己创建主题，你不需要将 Categories 放入?php e(’ ‘); ?。使用h2Categories/h2 作为你的子标题也完全没有问题。

保存 index.php 文件并刷新你的浏览器。你应该看到 Categories 子标题结构应该这样：

子标题前面的小圆点指明这个子标题是在一个列表元素中（LI）。如果你的无序列表（UL）有两个列表元素，那么将有两个小点。

第4步

在列表条目中添加下面代码

ul

?php wp_list_cats(’sort_column=nameoptioncount=1hierarchical=0′); ?

/ul

这里是上面代码的解释：

ul – 开始另一个无序列表

?php wp_list_cats(); ? – 调用分类链接列表

/ul – 结束无序列表

保存并刷新浏览器。下面是我的分类链接列表的样子：

你默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面，那么你的列表链接列表应该是只有一个链接 Uncategorized。

更进一步的解释：

sort_column=name – 把分类按字符顺序排列

optioncount=1 – 显示在每个分类下面的日志数

hierarchial=0 – 不把子分类放到子列表元素中，这就解释了为什么我的 子分类 链接是列在列表中第一级。

– 每次你增加另一个参数的时候，你需在它之前要输入 用来把和现有的参数区分开。如 在 sort_column 和 optioncount之间。

为什么你不把 ?php wp_list_cats(); ? 放入li 和 /li 标签中呢？

当你使用 wp_list_cats() 这个函数调用链接列表函数的时候，它会自动附上一组 li 和 /li（列表条目）标签在每个链接的左右。查看页面源代码；你可以看到每个连接的周围都已经有一组列表元素的标签。

当你处理侧边栏，无序列表和列表匀速的时候，这是非常重要去记得：

规则 #1：按顺序关闭所有标签。

下一篇：WP Theme 教程 #6b：页面链接列表