网站建设资讯

NEWS

网站建设资讯

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:页面链接列表


文章标题:wordpress繁體 word繁体字在线转换
分享路径:http://njwzjz.com/article/ddecihp.html