WordPress 主题制作教程(3):搭建环境创建主题基本文件

WP教程 欲思 0评论

之前第二章中已经了解了WordPress的模板文件和页面结构,下面你就要开始写 WordPress 代码了。这里建议在本地电脑上安装 WordPress,而不是安装到服务器上,因为本地更方便测试。

第1步:安装Zerver集成php运行环境

Zerver是一个C#开发的nginx+php+mysql+memcached绿色集成运行环境。对于一些初步的php程序开发运行很方便。

我这边用的是Zerver2.3,最新版本的2.4好像已经出了,大家可以选择性去网上下载。

单击 Zerver.exe 启动后的界面如下图所示:

安装Zerver集成php运行环境

各个服务可以选择性开启和关闭。不用的时候也可以直接退出。网站可以直接放在根目录html文件夹内。

第2步:创建你的主题文件夹

主题安装完成后(如何安装WordPress程序就不说了,这个不知道的,下面也就不用看了)进入你本地安装的 WordPress 主题文件夹。

在..\zerver2.3\html\Demo\wp-content\themes路径文件夹中创建一个新的文件夹,可以任何命名(如果:YusiDemo)。

第3步:创建 index.php 和 style.css 文件

打开EditPlus或者你选择的文本编辑器,把 index.txt 这个文件中的所有内容都拷贝到你的文本编辑器。保存为 index.php。

再另外新建一个文件,直接保存为 style.css 到相同的文件夹下。在style.css中加入css注释(可以自定义):

/*  
Theme Name: YusiDemo
Theme URI: http://.yusi123.com
Description:WordPress Themes 
Version: 1.0
Author: Yusi
Author URL: http://.yusi123.com/
*/

如果你想发布在 WordPress官方主题库里面,你还可以为主题添加一些标签:

/*  
Tags: YusiDemo, wordpress theme, Yusi, Web
*/

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

index.php 解释

创建 index.php 和 style.css 文件

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

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

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

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

所以让我们重新看一下<?php bloginfo(‘stylesheet_url’); ?>

<?php:PHP语句开始。

bloginfo(‘stylesheet_url’):输出博客信息,什么信息呢?括号内的 stylesheet_url 就是 bloginfo的一个参数,它告诉 bloginfo 是样式表(stylesheet)的url地址信息,既然是参数,那一般都不是是单一的, bloginfo 函数的参数除了stylesheet_url 还有很多,例如:name博客名称、description博客描述、url博客URL、charset博客的编码方式等等。

;:结束 bloginfo() 函数,分号同时也是关闭PHP函数的方式之一。

?>:PHP语句结束

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

</body> 是网页主体结束的地方。

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

第4步:安装你的WordPress主题

打开浏览器。在地址栏输入输入 http://localhost/Demo/wp-login.php。登录到你的 WordPress 管理后台。(这里能够看到 WordPress 登录页面是因为你在第1步的时候启动了 zerver。否者的话,在这里你的浏览器会报找不到的错误。)

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

安装你的WordPress主题

注意:你的主题文件没有屏幕缩略图,所以是空白的。没错,我们先启用就可以了。

好了今天就到这里吧。下次再说下面的内容!有任何问题直接在评论里面回复吧!

转载请注明:欲思博客 » WordPress 主题制作教程(3):搭建环境创建主题基本文件

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址