wordpress 主题一步步制作教程!第15课 窗体化侧边栏(图解)

一个适合 Widget 的侧边栏或者说是窗体化(widgetized)的侧边栏几乎是 WordPress 2.0 以后的主题标准。但是首先,什么是窗体化(widgetizing)呢?简单的说,窗体化就是让侧边栏适合 Widget 这个插件(译者注:WordPress 2.2 已经内置了 Wodgets),这个插件让你非常容易就能够重新整理侧边栏的模块。

举个例子说,不用去修改侧边栏的代码去更改分类和存档的位置,你只需要简单把分类和存档列表拖到它们的位置即可。

 

第1步:创建 functions.php 文件

打开记事本,然后把空白文件保存为 functions.php。把 functions.txt 文件中所有的内容拷贝到 functions.php 中。保存并关闭。

回顾一下,现在在“tutorial”主题文件夹下应该有4个文件。

number-of-files.gif

第2步:窗体化侧边栏

直接在侧边栏的第一个 <ul> 标签输入以下代码:

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

widgetize-if.gif

直接在 </ul> 标签之前输入以下代码:

<?php endif; ?>

widgetize-endif.gif

保存 index.php 文件,你将在网页上看不到任何变化直到你装了 Widget 插件。(译者注:WordPress 2.2 之后就不用安装这个插件了)

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/13/wp-theme-lesson-6e-widgetizing-sidebar/

wordpress 主题一步步制作教程!第14课 搜索框和日历(图解)

尽管这篇的题目是 搜索框(Search Form)日历(Calendar),我同样也会介绍 元数据(Meta) 。让我们在这一篇结束常规的侧边栏,然后将在下一篇指出如何窗体化(widgetize)化侧边栏,怎么样?好吧,让我们开始…

 

第1步:增加搜索框

在我给你需要输入的代码之前,打开记事本,然后保存该空白文件为 searchform.php(当然是和 index.php 在同一个文件夹下)。把 searchform.txt 中的内容拷贝到 searchform.php。就是这么多,从现在开始,让 searchform.php 文件保持单独。

在 index.php 文件,在侧边栏的最顶部输入以下代码:

<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

add-search.gif

保存,然后刷新浏览器,结果如下:

search.gif

刚才发什么了呢?

  • <li id=”search”> – 开始一个名字为 search 的列表元素,你给它了一个 ID,你就能够以后样式化它。
  • include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数去调用东东是不同的,因为 include() 只是简单导入已经存在的文件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在一个博客上基本不会被改变的。也就是说,我的搜索框应该看起来很像你的。
  • TEMPLATEPATH – 主题文件夹的位置,wp-content/themes/tutorial
  • ‘/searchform.php’ – 位置和文件的名字,/searchform.php
  • 在 TEMPLATEPATH 和 “/searchform.php” 中间的把他们连接起来,所以最终得到:
    wp-content/themes/tutorial/searchform.php
  • </li> – 结束列表元素

注意,搜索框不像分类,归档,页面或者 Blogroll 一样有子标题。如果你愿意你也可以给它一个子标题,但是基于保持你的常规侧边栏和 widgetized 版本(我们将在下一篇讲述)的侧边栏尽可能接近的考虑,不要给它子标题。

第2步:增加日历

在搜索框或者页面链接列表下面输入以下代码:

<li id=”calendar”><h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li>

add-calendar.gif

保存并刷新浏览器,结果如下:

calendar.gif

发生了什么?

  • <li id=”calendar”> – 开始一个 ID 为 “Calendar” 的列表元素
  • <h2> – 开始一个子标题
  • <?php _e(’Calendar’); ?> – 输出 Calendar 这个词
  • </h2> – 关闭子标题
  • get_calendar() – 使用 get_calendar() 这个 WP 函数调用日历
  • </li> – 结束列表元素

这样日历就完成了

第3步:增加元数据

get_links_list() 函数下输入以下代码:

<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

add-meta.gif

保存并刷新浏览器,结果如下:

(如果你没有登录 WordPress)
meta-logged-out.gif

(如果你已经登录)
meta-logged-in.gif

那么这是怎么回事呢?

你开始一个列表元素(LI),跟着是一个子标题(H2) Meta。在子标题下,你嵌入了一个无序列表(UL)。最后把每个链接都放入了列表元素中(LI)。

wp_register() 这个函数能产生一组 <li></li> 标签,如果你没有登陆,它显示注册(Register)链接,当你登录的时候,它显示的是 管理站点(Site Admin)的链接。
wp_loginout() 不会产生自己的列表元素标签,所以你需要手工输入列表元素标签,当你没有登录的时候,你得到的是 登录(Login) 的链接,当已经登录的时候,你得到的是登出(Logout)链接。
到目前为止,wp_meta() 没有做任何事情,他在网页上和源代码中都不会产生东西,现在不要考虑 wp_meta(),实际上你已经在使用它了。

到此为止,你应完成 Meta 并最终完成了常规的侧边栏。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/13/wp-theme-lesson-6d-search-form-and-calendar/

wordpress 主题一步步制作教程!第13课 存档和链接列表(图解)

这篇课程将比较轻松。你将学到如何调用存档链接列表和 blogroll 链接列表,下一篇将是日历和搜索框。

在开始之前,我想解释下为什么我把我的课程分成比较小的节。你所学的一切都需要几个月时间来消化!所以当我第一次向你展示的时候,你能够理解所有的东西是非常重要的,这样你就不用会去重新学习。

 

第1步 – 增加存档链接。

在侧边栏区域的 Categories 列表下面输入以下代码:

<li><h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>

给上面代码增加制表符空间是用于产生缩进组织代码。看下你的代码是否和下面一样:

add-archives.gif

保存,刷新浏览器。结果如下所示:

archives.gif

发生什么了?

你使用了 wp_get_arhives() 这个 PHP 函数,并用了 type 这个参数以及 monthly 作为它的值按月调用存档列表。

  • <li> – 开始列表元素
  • <h2> – 开始子标题
  • <?php _e(’Archives’); ?> – 子标题文本
  • </h2> – 结束子标题
  • <ul> – 开始在子标题下,在列表标题中的无序列表
  • <?php wp_get_archives(’type=monthly’); ?> – 按月调用存档列表链接,并把每个链接放入 <li></li> 标签中。如果你查看你的源代码,你会看到 wp_get_archives() 为每个链接产生了列表元素(LI)标签,就像 wp_list_cats() 这个函数一样。
  • </ul> – 结束在子标题下的无序列表
  • </li> – 结束列表元素

第2步:增加 blogroll 链接

在存档链接列表下输入以下代码:

<?php get_links_list(); ?>

add-blogroll.gif

保存,刷新,结果如下:

blogroll.gif

默认情况下,我的 blogroll 和你的是没有什么不同,这里是它在源代码中的样子:

blogroll-source.gif

上面的代码完全没有被组织,因为它们是由函数 get_links_list() 产生的,就像上一篇所学的函数 wp_list_pages() 一样,然而它遵循规则 #1,按正确顺序关闭所有的东西。我已经圈出了元素和无序列表的标签让你看得更明显。

这篇到此为止,下篇将介绍日历和搜索框。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/12/wp-theme-lesson-6c-get-archives-and-links/

wordpress 主题一步步制作教程!第12课 页面链接列表(图解)

现在你已经熟悉了侧边栏的结构,接下来我们将继续修改侧边栏,完成页面链接(Page-link)列表。当完成常规的侧边栏之后,我将向你展示如何窗体化(widgetize)你的侧边栏。

在分类链接上面添加以下代码:

<?php wp_list_pages(); ?>

 

wp-list-pages.gif

保存并刷新浏览器。效果如下所示:

wp-list-pages-listing.gif

在默认情况下,你只有一个页面链接,就是 About 链接。我在我的离线的 blog 增加了更多页面和子页面,这就是为什么我有四级页面链接。

到浏览器的菜单 查看 > 页面源代码 可以看到 wp_list_pages() 能够产生完整的结构以及代码,如下:

wp-list-pages-default.gif

第一,它把所有东西放入列表元素标签(LI),第二,它给你的列表一个名字,Pages。第三,它在页面标题下,列表条目内另外增加一个无序列表(UL)。第四,它把每个链接放入到 <li></li>标签之间。

在上面的截图中,注意到“Pages”这个列表标题和“Categories”这个分类链接标题的大小不匹配。

如何使它们匹配呢? 添加 ‘title_li=<h2>Pages</h2>’wp_list_pages() 作为参数。

title-li.gif

保存并刷新浏览器结果如下:

wp-list-pages-listing-2.gif

title_li 是一个用来客户化页面链接列表的标题的参数。<h2>Pages</h2>title_li 这个参数的值

进一步客户化
在我的例子中,我有四级页面链接。由于布局或者设计的原因使得不能在侧边栏处理那么多级别的链接。为了限制显示列表的层数,增加 depth 这个参数到函数 wp_list_pages() 并把它设置为 3

add-depth3.gif

注意,我添加了 depth=3& 而不是仅仅 depth=3。这个 & 在这儿用于把 depthtitle_li 这两个参数区分开。(如果你只有一个 about 页面链接,你将不会注意有什么不同。)

这里是我的列表的不同之处:(对比这个截图和上面的截图。)

wp-list-pages-listing-3.gif

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/11/wp-theme-lesson-6b-page-link-listing/

wordpress 主题一步步制作教程!第11课 侧边栏(图解)

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

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

不要忘记打开 Xampp……

 

第1步

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

<div class=”sidebar”>
</div>

class-sidebar.gif

第2步

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

<ul> – 开始无序列表
</ul> – 结束无序列表

ul.gif

第3步

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

<li><h2><?php _e(’Categories’); ?></h2>

</li>

li-categories.gif

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

<li> – 开始列表元素
<h2> – 开始子标题
<?php _e(’Categories’); ?> – 输出字符 Categories
</h2> – 结束子标题
</li> – 结束列表条目

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

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

h2-categories.gif

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

第4步

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

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>

category-links-add.gif

这里是上面代码的解释:

<ul> – 开始另一个无序列表
<?php wp_list_cats(); ?> – 调用分类链接列表
</ul> – 结束无序列表

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

category-links.gif

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

更进一步的解释:

  • sort_column=name – 把分类按字符顺序排列
  • optioncount=1 – 显示在每个分类下面的日志数
  • hierarchial=0 – 不把子分类放到子列表元素中,这就解释了为什么我的 子分类 链接是列在列表中第一级。
  • & – 每次你增加另一个参数的时候,你需在它之前要输入 & 用来把和现有的参数区分开。如 &sort_columnoptioncount之间。

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

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

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

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

Right and Wrong way to close

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/10/wp-theme-lesson-6-sidebar/

wordpress 主题一步步制作教程!第十课日志导航链接(图解)

在绝大多数的 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>

postsnavlink.gif

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

<div class=”navigation”> – 开始一个名字为 navigation 的 DIV 标签来围住后一页和前一页的链接区域。
<?php – 开始 PHP 代码
posts_nav_link() – 调用后一页和前一页的链接。
; – 停止调用。
?> – 结束 PHP 代码
</div> – 结束名字为 navigation 的 DIV 标签。

效果如下:
nextpage.gif

保存并刷新,查看后一页或者前一页的链接。默认情况下,如果你没有超过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() 的例子:
postnavlink-example-1.gif

 

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/09/wp-theme-lesson-5e-posts-nav-link/

wordpress 主题一步步制作教程!第九课Else,日志 ID,链接标题(图解)

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

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

 

第1步

<?php endwhile; ?> 的下面输入以下代码:
<?php else : ?>

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>

</div>

大致如下:

else.gif

保存,但是你应该注意不到任何变化。我们应该返回教程 #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”>

post-id.gif

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

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

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

第3步

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

the-title1.gif

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

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

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

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

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

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/08/wp-theme-lesson-5d-else-post-id-link-title/

wordpress 主题一步步制作教程!第八课 日志元数据(图解)

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

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

 

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

第1步

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

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

postmetadata-placement.gif

保存,刷新你的浏览器,你应该看到:

postmetadata.gif

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

解释

<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”的链接和一条竖线。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/07/wp-theme-lesson-5c-postmetadata/

wordpress 主题一步步制作教程!第七课 日志内容(图解)

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

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

 

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

第1步

日志标题代码下面输入 <?php the_content(); ?>
adding-the-content.gif

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

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

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

继续……

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

viewsource.gif

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

paragraph-tags.gif

注意到 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.gif

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

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

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

那么 headercontainer 能用 class 去取代 id 吗?完全可以。

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

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

<div class=”post”>

</div>

(你可以按照你自己的想法把 class 和 ID 的名字命名成你想要的名字,比如你最喜欢的食物,但是 postentry 更简洁,简单并更容易记,对吧?)

现在你的 index.php 文件为:

class-post.gif

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

indent.gif

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

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

为什么你要添加另外一个 DIV 标签去围住日志标题和日志内容?
增加这个 DIV class=”entry” 去把日志标题日志内容区分开。而这个div class=”post”是吧你的日志和其他内容区分开。

post-1-and-2.gif

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

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

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/06/wp-theme-lesson-5b-the-content/

wordpress 主题一步步制作教程!第六课 主循环(图解)

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

到目前为止,你已经学到::

 

现在让我们开始第五篇

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

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

indexphp.gif

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

第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 应该是这样了:

the-loop.gif

注意我缩进了 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(); ?>

the-title.gif

保存 index.php 文件,刷新你的浏览器,你应该看到在你博客描述的下方出现 Hello World ,默认情况下,你的博客只有一篇日志。而我的测试的博客有多篇日志,所以我有多个日志标题。而且因为我所用的日志标题是一样的,并我没有进行组织整理他们,所以它们看起来像很长的一行 Hello World.

hello-world.gif

第4步

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

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

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

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

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

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

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

post-title-heading.gif

这一篇到此为止。你的 index.php 文件现在应该是::
end-lesson-5.gif

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

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/05/wp-theme-lesson-5-the-loop/