阅读数: 190

WordPress 主题教程 #1：介绍

规则 #1： ul（表示无序列表）和 li （表示列表元素）

规则 #2：每个主题至少要有这两个文件 – style.css 和 index.php。index.php 告诉主题中所有的元素如何布局，style.css 则告诉主题中所有的元素该如何展示，以及它们的样式。

WordPress 专业术语：

Template（模板） — 主题中很多地方会重复使用一些代码，所以把它们整合成一个模板，这样就就不必一遍遍输入这些重复代码。
Template file（模板文件） — 一个包含一个或者多个代码集（模板）文件。每个主题是由多个模板文件组成的，比如：index.php，style.css，sidebar.php 等等。
Theme（主题）或者 WordPress theme（WordPress 主题） — 所有你正在使用的文件：文本，图像，代码等等。注意： WordPress theme（主题）和 WordPress template(s)（模板）是两个不同的东西，尽管有些人认为他们一样。
Post（日志或者文章） — 现在你读的就是一篇日志。此外，它是你 blog 的一个简单的条目，如：一个页面或者一篇日记。
Page（静态页面） — 一种特殊的 post，它不是以分类组织的。它有别于你其他的日志。注意：在 WordPress中，page（页面）和 Page（静态页面）是两种不同的东西。

下图就是 WordPress 的层次结构，它简单的向你展示，一旦你主题中的某个文件丢失了，WordPress 主题系统将会使用其他什么模板文件来代替。越靠左越重要。

比如 single.php 模板文件丢失了呢，哪个模板文件它用来显示单一日志页面呢？它会寻找 index.php。

WordPress 主题教程 #2：模板文件和模板

WordPress 博客的每个页面是由多个模板文件组成的，下面是首页的例子：

我们可以看出主题的 index.php 是由 4 个模板文件组成： header.php，index.php，sidebar.php 和 footer.php。

Header 模板文件:

通常在这个文件中包含博客的标题（title）和描述（description）。而且它们通常在整个博客中都是一样的。

Index 模板文件：

这个模板文件包含你的日志的标题，日志的内容（就是每篇日志的文本和图片）和日志的元数据（元数据是每篇日志的额外信息，如作者是谁，日志发布的时间，在哪个分类下，有多少留言等等）。

Sidebar 模板文件:

这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。

Footer 模板文件:

像 header.php 模板文件一样，footer.php 通常不会因为页面的改变而改变，你可以在这里放置任何东西，但是通常是版权信息。

WordPress 主题教程 #3：开始 Index.php

index.php 解释：

<！Doctype> — 指明你用哪种类型的代码来编码你的主题，如果还是不明，就先不用管它的详细意思。

<html> — 网页开始的地方。

<head> — 网页头部开始的地方，每个网页都有一个头部和主体。</head> 是头部结束的地方。

<?php bloginfo(’stylesheet_url’); ?> 是一个 PHP 函数，它能取得 style.css 文件所在的路径，这样主题就能使用 style.css 文件来样式化页面上的所有元素。

任何时候，PHP 代码都是在 <?php 和 ?> 之间的。PHP 代码和 HTML 的代码是不一样的，PHP 是以 <?php 开始，以 ?> 结束的。

<body> – 这是网页主体开始的地方，我们在网页上看到和读到的东西就是主体部分，比如你正在阅读的这个教程说明你在正在看当前这个网页的主体部分。

WordPress 主题教程 #4：Header 模板

调用博客标题：

编辑 index.php 文件。在 <body> 和 </body> 这两个标签之间输入 <?php bloginfo(‘name’); ?>，然后保存它。其中参数 name 代表了它调用的是博客的标题。这个名字是在后台 > 设置 > 常规中设置的站点标题。

若把博客的标题放入超链接中，这时候需要一个 XHTML 标签。

<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

HTML 一共可以有7级标题：H1，H2，H3，H4，H5，H6。按照默认，H1是字体最大而H6是则最小。

给博客的标题添加 H1 的标签，

<h1 ><a name="toc-3"></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

添加博客描述：

<?php bloginfo(’description’); ?>

给以上代码添加 <div> 和 </div>标签：DIV相当于一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开。

<div>
<h1 ><a name="toc-7"></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo(’description’); ?>
</div>

我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 DIV 附上边框（borders），填充（paddings）, 页边空白（margins），背景颜色（background color），背景图片（background images），以及其他一些东东。

给 DIV 标签指定了 ID ，因为将会有更多的 DIV 标签或者无形的盒子，我们使用 ID 来区分！如下：
<div id=”header”>

WordPress 主题教程 #5：主循环

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

在 Container 的 DIV 标签中添加如下输入主循环代码：

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

<?php endwhile; ?>

<?php endif; ?>

if(have_posts()) – 检查博客是否有日志。
while(have_posts()) – 如果有日志，那么当博客有日志的时候，执行下面 the_post() 这个函数。
the_post() – 调用具体的日志来显示。
endwhile; – 遵照规则 #1，这里用于关闭 while()
endif; – 关闭 if()
注释：并不是所有的代码都需要两部分用来打开和关闭。有些代码能够自我关闭，这就解释了 have_posts() 和 the_post(); 这两个函数。因为 the_post(); 在 if() 和 while() 的外面，只需要分号去结束或者关闭。

在主循环（The Loop）中如何调用日志标题？

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

如何进一步把日志标题转变成日志标题链接？

在<?php the_title(); ?> 两边增加 <a href=”#”> 和 </a>。但是它们并没有指向哪里。为了使得每个标题都能指向正确的日志，我们需要把 # 替换为 the_permalink()。

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

the_permalink()是用来调用每篇日志地址的 PHP 函数。

由于日志标题依然在同一行上面。为了分开它们，在日志标题链接代码的两边添加 <h2> 和 </h2> 标签。

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

记住 H1 用作你的博客的标题，那是网页的标题。H2 被用作子标题。

WordPress 主题教程 #6：日志内容

使用一个 DIV 标签把博客日志的内容和日志的标题区分开。

1、首先，在日志标题代码下面输入：<?php the_content(); ?>。

PHP 函数 the_content() 函数调用了 日志的内容，现在，日志的内容只是一长行的文本，一直到窗口的右边，因为我们还没有样式化它。

还记得最开始说到的 style.css 这个文件吗？我们以后用它来控制所有页面元素的显示和布局。

index.php 文件和它的源代码（最终显示的要执行的代码）之间存在什么区别？

源代码中有P标签【P指的是段落（paragraph）标签】。他们都没有在 index.php 文件中出现，但是他们在源代码中出现了。WordPress 模板系统会自动帮我们产生 P 标签。

在index.php文件中，所有的文本，图像和其他东西等所有上图展示的东西都是通过 the_content() 这个函数调用来的。（这样，程序非常简洁清晰）

2、然后，给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上class=”entry”属性。

这样我们就很容易知道日志标题在哪里结束，以及日志内容在哪里开始，这样做也是以后使用style.css 文件对它进行样式化做准备，

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

id 是唯一的而 class不是。如果从头到尾浏览源代码，你会发现只有一个 id="header" 和一个 id="container"，但是有多个 class="entry"。不能重复任何 id，比如，不能在同一页面上有两个 id="header" 。当你想一遍又一遍重新利用一些东西如日志的标题，那么请使用 class。

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

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

增加class=”entry” 这个 DIV 是把日志标题和日志内容区分开，而 class=”post” 这个 DIV 是把当前日志和其他内容区分开。

WordPress 主题教程 #7：日志元数据

日志的元数据（Postmetadata）：日期（date），分类（categories），作者（author），评论数（number of comments），以及其他和日志有关系的信息。

详细解释：

<p class=”postmetadata”> 和 </p> – 所有的日志元数据都在一个 class=”postmetadata” 的段落标签中，因为我们要把日志元数据和日志内容区分开，如果没有段落标签，日志元数据信息将在日志内容结束的地方继续，这样就没有任何间距去区别内容和日志元数据。
<?php _e(‘Filed under:’); ?> – : 是调用冒号“:”的代码；
把Filed under:放入<?php _e(”); ?>中不是必须的，这样主要为了使得 Filed under: 可翻译，如果你的主题不需要支持多语言，可以简单输入 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’, ‘ | ‘, ”); ?> – 这个只有当我们以管理员或者作者身份登录的的时候才可见。 edit_post_link() 只是简单显示一个可以用来编辑当前日志的编辑链接，这样就可以让我们不必去管理界面搜寻该日志就能直接编辑。edit_post_link() 有三个参数。第一个是用来确定哪个词你将用在编辑链接的链接标题。如果你使用 Edit post，那么将显示 Edit post 而不是 Edit。第二个参数是用来显示在链接前面的字符，在这里是竖线 |，代码就是&124;。第三个参数是用于显示在编辑链接后面的字符，在这里没有使用。登录 WordPress 之后，再返回到首页就可以看到“Edit”的链接和一条竖线。

Was this helpful?

0 / 0

【计算机学习】WORDPRESS的首页文件INDEX.PHP介绍