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

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

开始 Index.php 是从零开始创建 WordPress网站程序主题系列教程的第三篇。在介绍了 WordPress网站程序主题的一些规则和术语，以及对 WordPress网站程序模板和模板网站文件了解之后，现在是开始动手创建 WordPress网站程序主题了的时候。

在这篇中，你将要着手开始写 WordPress网站程序具体相关代码。这里建议在本地电脑上安装 WordPress网站程序，而不是安装到服务器上，因为本地更方便测试。

第1步：打开 XAMPP 控制面板。

在 XAMPP 网站文件夹（通常是：C:\xampp），双击 xampp-control.exe 将会弹出一个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示：

启动之后你看最小化窗口了。

第2步：创建你的主题网站文件夹。

转到你本地安装的 WordPress网站程序主题网站文件夹，应该在xampp/htdocs/wordpress网站系统/wp-content/themes。创建一个新的网站文件夹，命名为 tutorial。

第3步：创建 `index.php` 和 `style.css` 网站文件。

打开记事本或者你选择的文本编辑器，把 index.txt 这个网站文件中的所有具体内容都拷贝到你的记事本。保存为 index.php。

打开另外一个记事本，直接保存为 style.css 到相同的网站文件夹下.

现在有两个网站文件了: index.php 和 style.css.

index.php 解释：

点击上面的图片查看大图。我会向你解释每个红色圆圈区域是什么意思。

Doctype – 指明你用哪种类型的具体相关代码来编码你的主题。这里你暂时还不用管它的详细意思。

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

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

<?php bloginfo(’stylesheet_url’); ?> 是一个 PhP 函数，它能取得 style.css 网站文件所在的路径，这样主题就能使用 style.css 样式化页面上所有元素。任何时候，PhP 具体相关代码都是在 <?php 和 ?> 之间的。PhP 具体相关代码和 hTML 的具体相关代码是不一样的，在 PhP 中，<?php 代表开始 PhP 具体相关代码而 ?> 是结束 PhP 具体相关代码。

所以：

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

</html> 是网页结束的地方，没有东西在它的后面了。

第4步：创建 style.css。

把 style.txt中所有的具体相关代码拷贝到你的 style.css 网站文件中。保存和关闭它。

第5步：安装你的主题。

打开浏览器。在地址栏输入输入 http://localhost/wordpress网站系统/wp-login.php。登录到你的 WordPress网站程序管理后台。（这里能够看到 WordPress网站程序登录页面是因为你在第1步的时候启动了 Xampp。否者的话，在这里你的浏览器会报找不到的错误。）

在管理界面下到 外观 (Apperance) 菜单并激活名为 Tutorial 的主题。

注意，你的主题网站文件没有屏幕缩略图，所以是空白的。一旦激活了，WordPress网站程序就会告诉你激活信息。

现在打开一个新的浏览器或者标签页（如果你的浏览器支持标签页浏览）并在地址栏输入 http://localhost/wordpress网站系统。你应该得到一个空白页面，恩，完全空白的页面。如果不是，那你就是在错误的页面上了。

你的主题已经创建好了，这就是这个课程，下一步我们将讨论主题头部模板。

不要忘记关闭 Xampp。双击它在任务栏中小图标，点击 Apache 和 MySQL 的停止按钮，然后点击推出。

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

WordPress网站程序主题教程 #4a：header 模板
header 模板是从零开始创建 WordPress网站程序主题系列教程的第四篇。前面我向你讲解了如何安装和启动 XAMPP，安装 WordPress网站程序主题以及介绍了 PhP 语言的最基本语言，这篇我们将继,尽量输入所有具体相关代码而不是直接拷贝我给你的具体相关代码，这样可以让你尽量记住你所学到的的。, ,打开 Xampp，然后打开上次创建的主题网站文件夹，xampp/htdocs/wordpress网站系统/wp-content/themes/tutorial。我们应该看到上次创建的两个网站文件：index.php ,index.php 和 style.css 网站文件的具体内容应该和index.txt和 style.txt一致。,打开浏览器，转到 http://localhost/wordpress网站系统。因为上次安装了一个空白的主题，这时我们应该看到一个空白的页面。,返回主题网站文件夹并打开 index.php 网站文件。,到目前为止，我们已经打开了主题网站文件夹，浏览器和 index.php 网站文件。, ,编辑 index.php 网站文件。在 <body> 和这两个标签之间输入 <?php bloginfo(‘name’); ?>，然后保存它。,返回到浏览器并刷新。这时候我们应该能够看到博客的标题。博客的标题是 Demo Theme Development。,刚才发生什么了？,我们在网页的主体 (body) 之间加入了一行 PhP 具体相关代码到 index.php。bloginfo() 是调用博客的信息的函数。其中参数 name 代表了它调用的是博客的标题。这个名字是在 opti, ,<?php – 开始 PhP 具体相关代码 bloginfo(‘name’) – 调用博客信息，具体是博客的标题。 ; – 结束调用博客信息 ?> – 结束 PhP 具体相关代码,每次我们在 index.php 网站文件中增加或者更改任何东西之后，都可以保存，然后刷新页面去查看结果。,调用了博客的标题之后，接下来就要把博客的标题放入超链接中，这时候需要一个 XhTML 标签。,返回 index.php 网站文件。（wwwdxvkcom 网站建设）,在同一行增加和。此时新行的具体相关代码应该是： <?php bloginfo(‘name’); ?>,返回到浏览器，刷新，然后就可以看到博客的标题变成了链接。, ,现在它是一个链接，但是它没有链接到哪里。因为这个是博客的标题，我们应该让它链接到首页。为此，在 href=后的双引号中输入 <?php bloginfo(‘url’); ?>,保存，现在的具体相关代码应该是： ”><?php bloginfo(‘name’); ?>,返回到浏览器，刷新，当鼠标在链接上面的时候，浏览器的状态栏应该显示 http://localhost/wordpress网站系统,现在点击这个链接，它就会让我们返回首页。可能现在看到还是是相同的页面，但是用 # 或者 http://localhost/wordpress网站系统作为链接地址是完全不一样的。在接下来的课程我们会学到到他们,刚才发生什么了？,我们把网站名字变成了链接，并使它链接到博客的主页。,bloginfo(‘url’) – 调用博客基本信息，具体是首页的的地址或者 URL – 是一个用于添加链接的 XhTML 标签 – 链接的结束标签。否则网页将不知道哪里结束链接，这,最终具体相关代码为： ”><?php bloginfo(‘name’); ?>,意思为：开始一个链接，链接的地址是博客的URL，用 PhP 函数 bloginfo(‘url’) 去调用这个地址或者URL。这个链接的文本是博客的标题并使用 PhP 函数 bloginfo(‘name,这篇主要介绍了 WordPress网站程序主题的 XhTML 具体相关代码，下一篇我们将继续 header 模板。

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