WordPress 主题教程 #4b：Header 模板 2

名站导航为爱好WordPress网站的朋友们提供,WordPress教程,WordPress安装教程等WordPress教程相关的教程。

header 模板 2是从零开始创建 WordPress网站程序主题教程系列教程的第四篇第二部分。最后说一次，开始之前务必先读下前面的日志。这篇会完成 herder 模板，并且开始介绍 DIV Box 模型。

第1步：开启 XAMPP 和打开 index.php

- 启动 Xampp
- 打开 Tutorial 的主题网站文件夹
- 打开浏览器，在地址栏输入 http://localhost/wordpress网站系统
- 返回主题网站文件夹，用记事本打开 index.php

第2步：给博客的标题添加 h1 的标签

现在，index.php 的具体相关代码是：

<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

给它添加 <h1> 和 </h1> 标签。h1 标签意思是标题一。hTML 一共可以有7级标题：h1，h2，h3，h4，h5，h6。按照默认，h1是字体最大而h6是则最小。

添加之后的的 index.php 网站文件是：
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

保存，返回浏览器并刷新。

第3步：添加博客描述

调用博客的描述，则在博客标题链接的下面输入以下具体相关代码： <?php bloginfo(’description’); ?>。

现在变成了：

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

保存并刷新浏览器，可以看到在博客标题链接的下面出现博客的描述，我们可以到 WordPress网站程序管理后下修改博客的描述。

<?php – 开始 PhP 具体相关代码
bloginfo(’description’) – 调用博客信息，这里的是描述
; – 停止调用
?> 结束 PhP 具体相关代码

第4步：DIV 标签

这步将介绍一个新的标签 — DIV。

给以上具体相关代码添加 <div> 和 </div>标签：

<div>

</div>

保存，刷新浏览器，应该看到没有任何变化

可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开。如果没有对它进行样式化，它无非是单独的具体内容，以后我们可以会用 style.css 这个网站文件去样式化这个无形的盒子。我们可以给 DIV 附上 边框（borders），填充（paddings）, 页边空白（margins），背景颜色（background color），背景图片（background images），以及其他一些东东。

第5步：添加 header DIV 标签

添加 id=”header” 到 DIV 标签，如下：
<div id=”header”>

保存并刷新浏览器。

同样也没有改变，这里给 DIV 标签指定了 ID ，因为将会有更多的 DIV 标签或者无形的盒子，我们使用 ID 来区分！

名站网址导航 WordPress网站程序主题制作教程

WordPress网站程序主题教程 #5：主循环
调用博客日志的主循环（The Loop）是 WordPress网站程序中最重要的 PhP 具体相关代码集，几乎所有的页面都会用到它。这也是从零开始创建 WordPress网站程序主题系列教程的第五篇。在开始继续学习之前,到目前为止，我们已经学到：:,现在让我们开始第五篇：主循环（The Loop）,打开 Xampp，“tutorial”主题网站文件夹，浏览器，并且在浏览器中转到 http://localhost/wordpress网站系统，最后打开 index.php 网站文件。,下面应该是这时候 index.php 网站文件中的具体内容：,记住，为了学习这些具体相关代码，请尽量手工输入而不是拷贝和粘贴。,在 header DIV 标签下添加一个 DIV 标签，并给它的 ID 赋值为 “container”，如下：,
,
,“container” 这个 DIV 标签是用把博客的主要具体内容和其他东西都区分开，比如 sidebar 和 footer 等。,在 Container 的 DIV 标签中添加如下具体相关代码：,<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>,<?php endwhile; ?>,<?php endif; ?>,这段具体相关代码就是 WordPress网站程序中的主循环（The Loop）。在详细解释这些具体相关代码作用之前，我们来看下现在 index.php 所包含的具体相关代码：,你可能已经注意到Container DIV 中的每一行都被缩进了，这是为了更好的组织具体相关代码，更加利于阅读(使用 tab 健而不是空格键进行具体相关代码缩进，)。,刚才发生了什么？,在前面的课程中，我们学习了使用 bloginfo('name') 去调用博客的标题。现在我们将学习在主循环（The Loop）中如何调用日志标题。,在 the_post(); ?> 的后面和 <?php endwhile; ?> 的前面输入 <?php the_title(); ?>（wwwdxvkcom 网站建设）,保存 index.php 网站文件并刷新浏览器，这时候应该看到在博客描述的下方出现 hello World ，默认安装 WordPress网站程序之后，博客只有一篇日志。而我的测试的博客有多篇日志，所以这里有多,把日志标题转变成日志标题链接。还记得怎样吧博客的标题转变成一个链接的？,在<?php the_title(); ?> 两边增加和。,保存并刷新你的浏览器。现在日志的标题都变成了链接了，但是它们并没有指向哪里。为了使得每个标题都能指向正确的日志，我们需要把 # 替换为 the_permalink()。,“><?php the_title(); ?>,the_permalink() 是用来调用每篇日志地址的 PhP 函数。保存并刷新浏览器。,如果只有一个 hello World 标题，把鼠标移到链接上面，观察你的浏览器底部的状态栏，他不再是 http://localhost/wordpress网站系统/#。,如果有不止一个的标题链接，我们将看到每个链接会链到不同的日志或者网页。但是我们的日志标题依然在同一行上面。为了分开它们，在日志标题链接具体相关代码的两边添加
和
标签。,
”><?php the_title(); ?>
,记住 h1 用作你的博客的标题，那是网页的标题。h2 被用作子标题。现在你的日志标题链接是子标题了，每一个都是一行。保存 index.php 网站文件并刷新浏览器，结果如下：,WordPress网站程序主循环就介绍到这里，现在 index.php 网站文件具体内容应该是：,

关于WordPress教程,WordPress安装教程等WordPress教程就说到这里，如果可以帮到大家既可以了。