WordPress 主题教程：从零开始制作 WordPress 主题

时间：2023-03-08 17:48:26

为什么要开发WordPress主题？

WordPress主题由一系列文件和样式表单组成，这些文件和样式表单共同作用生成WordPress网站的外观。每个主题都不同，用户可以通过这些主题随心所欲地更换自己网站的外观。那么为什么我们要自己开发WordPress主题呢？

  • 为自己的WordPress网站打造独一无二的外观
  • 利用模板、模板标签和WordPress Loop创作不同的网页表现形式和网站外观
  • 为网站特殊功能如类别页面和搜索结果页面提供其它模板
  • 轻松切换两种网站外观设计，或利用主题、样式转换器来改变网站外观
  • 设计WordPress主题，然后公开发布，让大家都看到自己的作品

WordPress主题也有很多好处：

  • 主题将样式表单和模板文件从系统文件中独立出来，这样网站升级时就不会对网站的视觉外观造成大幅影响
  • 每个主题的呈现样式和网页布局都是独一无二的
  • 通过主题更换，WordPress网站可以快速改变其外观
  • 用户再也不必为了让网站表现得清新自然而清除CSS、HTML、PHP代码

我们自己开发WordPress主题原因还在于：

  • 这是一个深入学习CSS、HTML/XHTML、PHP的好机会
  • 同时也是一个积累CSS、HTML/XHTML、PHP实践经验的机会
  • 开发主题可以发挥人的创造性
  • 开发主题是一个充满乐趣的过程（大部分时候）
  • 将主题公开发布，与其他用户分享自己的劳动成果，回馈WordPress社区

创建 WordPress 主题其实不难，只要你从现在开始认真学习这个教程，从零一步一步开始，你就会成为一个 WordPress 主题制作高手，至少你会修改现有主题。

下面是一个从零开始制作 WordPress 主题的教程，它会一步一步教你如何制作 WordPress 主题。  看到一个网上的WordPress蛮好的教程，挺适合初学者。分享一下：

小结：

1. WordPress 主题教程：从零开始制作 WordPress 主题

1）网络上已经有很多关于制作 WordPress 主题的教程，并且 WordPress 官方网站上也有指导文章。但是当你不懂这方面的术语的话，这些教程可能不一定会帮助你，甚至还会误导你，所以这个教程会真正从零开始教你如何创建 WordPress 主题。

2）本地安装 WordPress。

3）服务器上安装一个测试版的 WordPress。

4）代码编辑工具。 NotePad++ ，DW。

5）FTP 工具。

6）至少配备三种浏览器，Microsoft Internet Explorer、Mozilla Firefox、Google Chrome，版本暂时不限，用于测试网页是否显示正常。

2.WordPress 主题里面的模版文件介绍

主题的位置：D:\xampp\htdocs\wordpress\wp-content\themes

创建一个新的文件夹，命名 daliu。

页面

主题文件中是否必须存在

作用

备注

archive.php

非必须

通用文件:标签页、分类页、自定义分类页、存档页

控制存档、分类、日期的输出页面。其实这些内容是可以单独控制的，不过大部分模版都不把它们分开对待。

author.php

非必须

作者存档页

author-bio.php

attachment.php

非必须

附件页

category.php

非必须

分类页

comments.php

content.php

content-link.php

content-none.php

content-page.php

content-search.php

date.php

非必须

时间存档页

footer.php

基本文件

一般是用来输出页脚信息的，比如放些模版作者，版权信息之类。

functions.php

非必须

主题函数文件，自定义头部，进入后台主题设置可以看到，可扩展性相当强。

header.php

基本文件

用来输出标题和菜单项，同时html文件的头信息也放在这

home.php

基本文件

首页

image.php

index.php

必须

通用文件:首页、文章页、分类页、存档页、页面、404页面、搜索结果页、附件页

index.php模板文件灵活易用，可以存储关于页眉、侧边栏、页脚、内容、类别、查找、错误以及访问者请求的页面的所有引用信息。index.php还可以划分成模块化的模板文件，每个模块分担部分系统任务。用户不指定模板文件时，WordPress会使用内置的默认文件。

page.php

基本文件

readme.txt

基本文件

screenshot.png

基本文件

从WP2.0开始，模版选择会提供缩略图，这个文件就是缩略图文件。

给你的主题界面截个图，命名为screenshot.png，大小300 * 225，放置到主题目录下作为主题缩略图

search.php

基本文件

sidebar.php

基本文件

用于输出侧栏内容。

single.php

基本文件

通用文件:附件页、文章页

search.php

基本文件

搜索结果页

style.css

必须

主题样式以及说明文件

所有所有页面的具体表现样式都由这个文件来控制。

tag.php

非必须

标签页

taxonomy.php

非必须

自定义分类页

404.php

基本文件

404出错信息，当访问者输入了一个不存在的地址就会看到这个页面，可以在这里写一些有用的提示，或者直接给个404 error。

必须就是主题必须包含此文件否则无法正常运行,非必须则是可有可无的文件,按需自己求来考虑是否需要创建该文件。通用文件则是可以适用于多种不同类型的文件,我在文件名后面都包含了适用的页面类型。

 3. 开始制作一个简单的主题，需要的文件是 index.php ，style.css 和图screenshot.png

style.css 文件的内容:

/*
Theme Name: 这里填主题名称
Theme URI: 这里填主题介绍的网址，没有就填你的博客网址吧
Description: 这里填主题的简短介绍
Version: 版本号
Author: 作者名
Author URI: 作者的网址
Tags: 标签，多个用半角逗号隔开
*/

 /*

 Theme Name: daliu_it

 Theme URI: http://www.cnblogs.com/liuhongfeng/

 Description: ITbolg

 Version: 1.0

 Author: daliu_it

 Author URI: http://www.cnblogs.com/liuhongfeng/

 */

index.php的基本结构：

index.php 是由 4 个模板文件组成： header.php，index.php，sidebar.php 和 footer.php。

header.php文件的内容：

<?php bloginfo('name'); ?> : 博客名称(Title)
<?php bloginfo('stylesheet_url'); ?> : CSS文件路径
<?php bloginfo('pingback_url'); ?> : PingBack Url
<?php bloginfo('template_url'); ?> : 模板文件路径
<?php bloginfo('version'); ?> : WordPress版本
<?php bloginfo('atom_url'); ?> : Atom Url
<?php bloginfo('rss2_url'); ?> : RSS 2.o Url
<?php bloginfo('url'); ?> : 博客 Url
<?php bloginfo('html_type'); ?> : 博客网页Html类型
<?php bloginfo('charset'); ?> : 博客网页编码
<?php bloginfo('description'); ?> : 博客描述
<?php wp_title(); ?> : 特定内容页(Post/Page)的标题

<!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>

说明：

<?php – 开始 PHP 代码
bloginfo(’stylesheet_url’) – 调用 style.css 文件所在的路径的函数
; – 停止调用函数。分号是用来结束一个 PHP 语句。
?> – 结束 PHP 代码

在index.php文件中的body标签进行演示如何调用这些标签来显示内容：

<body>

1.调用博客链接：

<a href="#"><?php bloginfo('name'); ?></a>

</br>

2.博客名加上链接 ：

<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</br>

3.给博客的标题添加 H1 的标签：

<h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

</br>

4.添加博客描述

<h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<?php bloginfo('description'); ?>

<br/>

5.添加 DIV 标签

<div>

<h1 >

    <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</h1>

<?php bloginfo(’description’); ?>

</div>

<br/>

6.添加 Header DIV 标签

<div id=”header”>

<h1 >

    <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</h1>

<?php bloginfo(’description’); ?>

</div>

<br/>

</body>

 4. 如何调用函数来显示日志和文章等信息。主循环+php函数。

主循环结构：

if(have_posts()) – 检查博客是否有日志。
while(have_posts()) – 如果有日志，那么当博客有日志的时候，执行下面 the_post() 这个函数。
the_post() – 调用具体的日志来显示。
endwhile; – 这里用于关闭 while()
endif; – 关闭 if()

第一，if(have_posts()) 检查博客是否有日志，
第二，while(have_posts()) 执行 the_post() 去调用日志。而 Else 是当博客完全没有日志的时候执行的。

主循环结构代码：

 <?php if(have_posts()) : ?>

 <?php while(have_posts()) : the_post(); ?>

 <?php endwhile; ?>

 <?php endif; ?>

日志相关函数：

<?php the_title(); ?>  用来调用日志标题

<?php the_permalink(); ?>   用来调用每篇日志地址

<?php the_content(); ?>  调用了 日志的内容

<?php the_ID(); ?>  调用日志的ID号

<?php the_title(); ?>   来输出文章标题

<?php echo mb_strimwidth(get_the_title(), 0, 38, '...'); ?>   输出了字符串的第0位到第38位，根据主题的不同可以自行设置该数值，另外多余长度部分使用“…” 代替。

日志的元数据（Postmetadata）：日期（date），分类（categories），作者（author），评论数（number of comments），以及其他和日志有关系的信息。

<?php _e('Filed under:'); ?>   是调用冒号“:”的代码；
<?php the_category(', ') ?>   用来调用日志的在的所有类别；
<?php _e('by'); ?>   。如果你创建的是私人用的的主题， by 外面的 _e() 不是必须的，最后加上 _e() 以便你的主题可翻译化。
<?php the_author(); ?>  输出当前日志作者的名字。
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

日志的元数据函数参数解释：

调用一个弹出的留言窗口，如果没有激活， 则只是简单的显示留言列表。

No Comments » 是在没有留言的时候显示的。

1 Comment » 是用于当刚好只有1条留言时候。

% Comments &187; 是用于当有多于一条留言的时候。

比如：8 Comments »。百分号 % 用来显示数字。» 是用来显示一个双层箭头 »。

<?php edit_post_link('Edit', ' | ', ''); ?>   当我们以管理员或者作者身份登录的的时候才可见。

简单显示一下基本的日志元数据：

        <p class="postmetadata">

            <?php _e('Filed under:'); ?>

            <?php the_category(', ') ?>

            <?php _e('by'); ?>

            <?php  the_author(); ?><br />

            <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

            <?php edit_post_link('Edit', ' | ', ''); ?>

        </p>

<?php posts_nav_link(); ?> 调用后一页和前一页的链接。

<?php posts_nav_link('in between','befor','after'); ?> 也可以给这个函数3个参数，分别给链接的中间，前面和后面的设置字符第1个参数是显示在后一页和前一页链接的中间。第2个参数显示在前面。第3个参数显示在后面。

说明：
默认情况下，如果没有超过10篇日志的话，是不会显示导航链接，如果没有超过10篇日志，依然想看到导航链接，登录到管理界面，在 设置 > 阅读 页面，把它设置为比所有日志少一篇。如，有6篇日志，就设置为5。

完整的显示一篇日志相关信息：

 <div id=”container”>

 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

      <div class=”post”  id=”post-<?php the_ID(); ?>”>

         <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

     </div>

     <div class=entry>

         <?php the_content(); ?> 

         <p class="postmetadata">

             <?php _e('Filed under:'); ?>

             <?php the_category(', ') ?>

             <?php _e('by'); ?>

             <?php  the_author(); ?><br />

             <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

             <?php edit_post_link('Edit', ' | ', ''); ?>

         </p>

     </div>

 <?php endwhile; ?>

 <?php endif; ?>

     <div class="post" id=”post-<?php the_ID(); ?>” >

             <?php _e('NOT Found'); ?>

     </div>

     <div class="navigation">

         <?php posts_nav_link('in between','before','after'); ?>

     </div>

 </div>

5. 侧边栏，如何显示分类链接。

<?php wp_list_cats(); ?> – 调用分类链接列表

<?php wp_list_pages(); ?>  窗体化（widgetize）侧边栏。

<?php _e('Archives'); ?> – 子标题文本
<?php wp_get_archives('type=monthly'); ?> – 按月调用存档列表链接，并把每个链接放入 <li> 和 </li> 标签中。

<?php get_links_list(); ?>  添加友情链接列表

说明：
默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面，那么你的列表链接列表应该是只有一个链接 Uncategorized。

sort_column=name – 把分类按字符顺序排列
optioncount=1 – 显示每个分类含有的日志数
hierarchial=0 – 不按照层式结构显示子分类，这就解释了为什么子分类链接是列在列表中第一级。
& – 每次增加另一个参数的时候，需在它之前要输入 & 用来把和现有的参数区分开。如 & – 在 sort_column 和 optioncount之间。

<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

有四级页面链接。由于布局或者设计的原因使得不能在侧边栏处理那么多级别的链接。为了限制显示列表的层数，增加了 depth 这个参数，并把它设置为 3：（如果你只有一个 about 页面链接，你将不会注意有什么不同。）

简单的调用一下分类目录：

<div class="sidebar">

<ul>

    <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

    <li>

        <h2><?php _e('Categories'); ?></h2>

            <ul>

                <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

            </ul>

    </li>

</ul>

</div>

完整的调用分类目录，存档，分级页面等信息：

<div class="sidebar">

<ul>

    <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

    <li>

        <h2><?php _e('Categories'); ?></h2>

            <ul>

                <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

            </ul>

    </li>

    <li>

        <h2><?php _e('Archives'); ?> </h2>

            <ul>

                <?php wp_get_archives('type=monthly'); ?>

            </ul>

    </li>

    <?php get_links_list(); ?>

</ul>

</div>

5. 搜索框

<?php include(TEMPLATEPATH . '/searchform.php'); ?>

include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数去调用模板文件是不同的，因为 include() 只是简单导入已经存在的文件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在一个博客上基本不会被改变的。

TEMPLATEPATH – 主题文件夹的位置，这里是：wp-content/themes/daliu_it
‘/searchform.php’ – 文件名：/searchform.php
在 TEMPLATEPATH 和 “/searchform.php” 中间的点把它们连接起来，所以最终得到：wp-content/themes/daliu_it/searchform.php

<div class="sidebar">

<ul>

    <li id="search">

        <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    </li>

    <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

    <li>

        <h2><?php _e('Categories'); ?></h2>

            <ul>

                <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

            </ul>

    </li>

    <li>

        <h2><?php _e('Archives'); ?> </h2>

            <ul>

                <?php wp_get_archives('type=monthly'); ?>

            </ul>

    </li>

    <?php get_links_list(); ?>

</ul>

</div>

6. 日历框

<?php _e('Calendar'); ?>  日历
<?php get_calendar(); ?>  调用日历函数，输出一个日历

<li id=”calendar”>

        <?php _e('Calendar'); ?>

        <?php get_calendar(); ?>

    </li>

7. 元数据：注册，登入，登出。

<?php wp_register(); ?>  这个函数能产生一组 <li> 和 </li> 标签，如果你没有登陆，它显示注册（Register）链接，如果登录了，它显示的是 站点管理（Site Admin）的链接。

<?php wp_loginout(); ?>   不会产生列表元素标签，所以需要我们手工输入列表元素标签，当你没有登录的时候，得到的是 登录（Login） 的链接，当已经登录的时候，得到的是登出（Logout）链接。

<?php wp_meta(); ?>

<li>

        <h2><?php _e('Meta'); ?></h2>

        <ul>

            <?php wp_register(); ?>

        <li>

            <?php wp_loginout(); ?>

        </li>

            <?php wp_meta(); ?>

        </ul>

    </li>

上面的功能基本告一段落了。

上一下完整的代码：

style.css的完整代码如下：

/*

Theme Name: daliu_it

Theme URI: http://www.cnblogs.com/liuhongfeng/

Description: ITbolg

Version: 1.0

Author: daliu_it

Author URI: http://www.cnblogs.com/liuhongfeng/

*/

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>

1.调用博客链接：

<a href="#"><?php bloginfo('name'); ?></a>

</br>

2.博客名加上链接 ：

<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</br>

3.给博客的标题添加 H1 的标签：

<h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

</br>

4.添加博客描述

<h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<?php bloginfo('description'); ?>

<br/>

5.添加 DIV 标签

<div>

<h1 >

    <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</h1>

<?php bloginfo(’description’); ?>

</div>

<br/>

6.添加 Header DIV 标签

<div id=”header”>

<h1 >

    <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</h1>

<?php bloginfo(’description’); ?>

</div>

<br/>

7.主循环代码:

<div id=”container”>

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

     <div class=”post”  id=”post-<?php the_ID(); ?>”>

        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

    </div>

    <div class=entry>

        <?php the_content(); ?> 

        <p class="postmetadata">

            <?php _e('Filed under:'); ?>

            <?php the_category(', ') ?>

            <?php _e('by'); ?>

            <?php  the_author(); ?><br />

            <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

            <?php edit_post_link('Edit', ' | ', ''); ?>

        </p>

    </div>

<?php endwhile; ?>

<?php endif; ?>

    <div class="post" id=”post-<?php the_ID(); ?>” >

            <?php _e('NOT Found'); ?>

    </div>

    <div class="navigation">

        <?php posts_nav_link('in between','before','after'); ?>

    </div>

</div>

8. 侧边栏

<div class="sidebar">

<ul>

    <li id="search">

        <?php include(TEMPLATEPATH . '/searchform.php'); ?>

    </li>

    <li id=”calendar”>

        <?php _e('Calendar'); ?>

        <?php get_calendar(); ?>

    </li>

    <li>

        <h2><?php _e('Meta'); ?></h2>

        <ul>

            <?php wp_register(); ?>

        <li>

            <?php wp_loginout(); ?>

        </li>

            <?php wp_meta(); ?>

        </ul>

    </li>

    <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

    <li>

        <h2><?php _e('Categories'); ?></h2>

            <ul>

                <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>

            </ul>

    </li>

    <li>

        <h2><?php _e('Archives'); ?> </h2>

            <ul>

                <?php wp_get_archives('type=monthly'); ?>

            </ul>

    </li>

    <?php get_links_list(); ?>

</ul>

</div>

</body>

</html>

searchform.php的完整代码如下：

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">

<div>

    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" /><br />

    <input type="submit" id="searchsubmit" value="Search" />

</div>

</form>

8. functions.php 的应用

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

<?php endif; ?>

9. 底部信息，版权之类。

<div id=”footer”>

    <p>

        Copyright &#169; 2014 <?php bloginfo(’name’); ?>

    </p>

</div>

相关文章