WordPress主题模板教程3-index.php

十度 wordpress 2015年12月02日收藏

前两节熟悉了WordPress模板文件结构，接下来我们会依次详细介绍每一个模板文件，这一节就从index.php这个模板文件开始。

现在是停止继续阅读，开始创建自己的Wordpress主题的时候了。在这一节要开始处理各种Wordpress 代码，这也是为什么我们要在本地安装Wordpress 博客的原因，因为在本地电脑上测试代码比在网站服务器上测试要方便很多。

第一步：开启LAMP或Xampp

本地电脑安装了LAMP或WAMP后，一般默认设置是开机自动启动。如果你的设置不是这样的，那就要先开启这些服务(LAMP/Xampp)，这样你的本地电脑就可以当作网站服务器了。

第二步：创建Wordpress主题文件夹

在本地电脑上安装Wordpress博客成功之后，在你的电脑网站目录下找到wordpress/wp-content/themes目录，在themes目录下创建一个文件夹，名称随意比如tutorial。

第三步：创建index.php和style.css文件

创建一个php文件index.php(即名称为index，后缀名为php的文件)。然后用你的代码编辑器(如dreamweaver)打开该文件，将以下代码复制到index.php文件里，并保存文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>

</body>
</html>

如果看不太懂上面的代码，不用管这些代码是什么意思，再新建一个文件style.css(即文件名为style，后缀名为CSS的样式表文件)，style.css文件里复制粘帖如下代码：

/*
Theme Name: Tutorial
Theme URL: http://www.farlee.info/
Description: This is my theme for a tutorial.
Version: 1.0
Author: Farlee
Author URL: http://www.farlee.info/
*/

当然，可以把URL网址和作者换乘你自己的，保存退出。这样就创建好两个文件了：index.php 和style.css。

index.php 和 style.css 文件

下面我们解释一下index.php文件里面的标注为红色的代码是什么意思：

Doctype – 指明你在用什么样的代码来写你的Wordpress 主题代码，在这里Doctype并不重要，这里写出来的原因是告诉大家不用去管它。

<html> 这是我们的网页开始的标记。

<head> 这是网页的头部开始的标记。每一个网页都一个head(头部)和body(主体)。

</head> 这是网页头部结束的标记。

<?php 和 ?> 之间的代码是php代码，这是index.php后缀名为什么要为.php的原因。php代码由<?php 开始，由 ?>结尾，和剩下的那些HTML代码是不同的。

<?php bloginfo(‘stylesheet_url’); ?> 这是一个php函数，调用了style.css文件的位置。这样我们的Wordpress主题就可以链接到这个css样式表文件，因此也就可以用它来设置网页的所有样式了。

<?php 表示开始PHP代码了
bloginfo(‘stylesheet_url’) php函数调用style.css 文件的位置。
; 停止调用style.css，分号在PHP代码中用于结束一断语句代码。
?> PHP代码结束。

<body> 表示网页的主体开始，body部分是我们在网页上可以看到的内容。您正在阅读本文章就表示正在阅读这个网页的body部分了。</body>表示网页主题部分结束。

</html> 表示网页的所有部分结束。后面没有任何代码了。

第四步：启用你的WordPress主题

打开浏览器，输入http://localhost/wordpress/wp-login.php，然后在该页面上你可以登陆本地安装的WordPress 管理后台。如果输入这个网址以后提示找不到该网页Not Found，或者直接转到一个保存文件的对话框，这是因为LAMP/Xampp php开发环境没有搭建成功，或者LAMP/Xampp 服务控制没有开启的原因。

进入到Wordpress 管理后台，点击“外观”，或者点击“更改主题”。就可以看到刚才创建的主题Tutorial了: