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

作者 FarLee 2010年4月4日 23:44:23   ‖浏览(11,449)

前两节熟悉了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了:

wordpress 主题 激活

激活Wordpress主题

点击启用,wordpress管理后台告诉你:新主题被启用,去看看样子的网站。或者在新的浏览器窗口输入http://localhost/wordpress,你将看到打开了一个空白页面,没错,就是空白的。

后面的WordPress主题教程我们会不断地将这些空白填充上去,下一节我们介绍header模板。

最后,别忘了在XAMPP 控制面板上关闭Apache和Mysql等服务。不过LAMP 一直开在那里也没关系。

返回WordPress 主题模板教程阅读其他章节。

启用你的WordPress主题


“WordPress主题模板教程3-index.php”文章评论(12)

  1. 我是zblog~~asp的

  2. Толстой тоже писал, но только не все его читали 😉

  3. 楼主写的真好~学习了~谢谢!

  4. xixiisme

    写得太好了,又清楚又容易看懂,现在这么好的教程真是太少了。
    博主提供这么好的东西,真是大好人。

Trackbacks/Pingbacks

  1. Wordpress翻页插件WP-PageNavi分页 - 远方博客
  2. Wordpress翻页插件WP-PageNavi分页插件 | 90年天空
  3. 利用crontab 定时执行php脚本文件 - 暖果 | 精彩互联网
  4. ubuntu 平台利用 crontab 定时执行php脚本文件的方法- 阳光主机网
  5. Ubuntu crontab 定时执行php脚本文件 « Hello-info.com 记录生活中的点点滴滴,分享一些小技巧小经验,关注互联网和搜索引擎
  6. WP-PageNavi分页插件 | JavaShare
  7. Wordpress 升级-简单安全升级wp3.0 – 远方博客 | 第一整站站
  8. crontab

来说兩句