本文主要介绍WordPress怎样制作自己的主题，同时简单说明以下部分要用到的WordPress函数。

部分文件取自露兜博客， tutsplus。本教程的主题制作主要内容根据本人制作过程和理解，尽量简化制作内容和过程，如果有什么问题可以在文末留言。

最近一段时间，都在忙各种各样的事情没有时间更新博客，同时也在为本站重新设计了一套自定义的主题。这次就来讲讲制作WordPress主题制作要怎么做。

前言

先说一下，制作WordPress主题首先得具备一点的HTML、CSS和PHP的语言基础。下文主要是我制作主题时，理解的最简单的制作WordPress主题的最简方法，如果需要详细的制作结构、步骤等可以查阅官方文件。

文章较长，大家可以根据目录定向查看：

主题模板介绍

tutsplus无偿提供的html模板Aurelius中，包括：首页（index.html）、存档页（archive.html）、页面（page.html）、文章页（single.html）、联系页（contact.html）、无边栏页（full_width.html）、图片（/images/）、样式表（style.css）、缩略图（screenshot.png）。如果自己没有很好的主题构思的话，可以根据 Aurelius 模板改写欸自己的模板。

在官方的模板层次结构中也介绍了各种页面的加载顺序，大家想要了解更详细的内容可以到官方网站中查看相关内容。

WordPress主题模板层次结构可视图 小TiD笔记

考虑一般的使用情况，WordPress主题结构可以简化为下面几部分：

  1. index.php（必需）： 可以简单的理解为负责主页和搜索页显示部分。
  2. style.css（必需）: 主题样式。
  3. page.php： 负责页面显示部分。
  4. single.php： 负责文章显示部分。
  5. archive.php： 负责标签页、作者页、目录页等的显示。
  6. 404.php： 404错误页面。
  7. comments.php： 评论部分，如果需要评论功能。
  8. functions.php： 自定义函数、功能等。
  9. screenshot.png： 主题缩略图。

网页设计的基本结构

一个页面主要分为4部分：头部、正文内容部分、侧边栏、尾部（一般叫页脚）。

WordPress主题模板层次结构可视图 小TiD笔记

头部一般为固定内容，如标题、导航栏、展示区等；侧边栏一般也为固定内容，显示文章导航、目录分类等、可能会根据不同页面做不同显示，但不影响主体的结构构成，所以还是认为为固定部分；尾部同样为固定部分，一般显示站点信息、所有者信息、联系方式、站点所有权等内容；正文内容则需要根据不同的页面显示不同的内容。

所以制作一个主题，一般会将相同的内容独立到一个php文件，减少不同文件相同代码的重复使用。根据我划分的部分，可以分别写header.php、sidebar.php、footer.php三部分插入到每一个页面。

制作步骤

制作步骤一般可以根据下面几部分操作：

  1. 编写静态网页： 包括HTML、CSS。CSS样式表个人觉得在编写静态的时候写好最好，这时候调试、更改都比较方便。
  2. 划分结构： 根据自己设计的主题来划分结构，一般分header.php、sidebar.php、footer.php、正文四部分。
  3. 根据静态网页改写为PHP文件： 将自己写的静态文件一部分一部分慢慢改写为php文件就行了。
  4. 打包上传主题： 将所有改写好的文件和文件夹放在一个文件夹下，文件夹名就是你主题显示的名字，将文件夹上传到 wp-content/themes/ 下就可以在 后台→外观→主题 看到自己制作的主题了。

index.php部分

主页部分一般就是显示文章列表，所以除了引入 header.php 、 sidebar.php 、 footer.php ，基本就剩文章列表内容，可以用循环写列表的每一个内容。

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php get_header(); ?>
<!-- 文章列表 -->
<div class="article-list">
    <!-- 循环读取文章 -->
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post">
                <!-- 标题 -->
                <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <!-- 标签、日期等 -->
                <p class="sub"><?php the_tags('标签：', ', ', ''); ?> • <?php the_time('Y年n月j日') ?> • <?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?></p>
                <!-- 图片 -->
                <?php $large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
                        if ($large_image_url[0] != "") : ?>
                    <img class="thumb" alt="<?php the_title(); ?>" src="<?php echo $large_image_url[0]; ?>" />
                <?php endif; ?>
                <!-- 文章简述 -->
                <?php the_excerpt(); ?>
            </div>
        <?php endwhile; ?>

    <?php else : ?>
        <h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>
        <p>没有找到任何文章！</p>
    <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

page.php 和 single.php

页面和文章页差不多，主要是引入标题、正文内容和评论部分，文章页一般会在标题下加入标签、时间等信息。

page.php
1
2
<!-- 标签等 -->
<p class="sub"><?php the_tags('标签：', ', ', ''); ?> • <?php the_time('Y年n月j日') ?> • <?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?></p>
single.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php get_header(); ?>
<!-- 页面内容 -->
<?php if (have_posts()) : the_post();
    update_post_caches($posts); ?>
    <!-- 标题 -->
    <h2 class="title"><?php the_title(); ?></h2>
    <div class="article">
        <!-- 正文 -->
        <?php the_content(); ?>
        <!-- 评论 -->
        <?php comments_template(); ?>
    </div>
<?php else : ?>
    <div class="errorbox">
        没有找到你想要的页面！
    </div>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

archive.php

标签分类页和主页显示差不多，这里只是多了一个排序选项框，和排序所需要的代码。

archive.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<?php get_header(); ?>
<!-- 页面 -->
<!-- 文章列表 -->
<div class="article-list">
    <div class="sorting">
        <div class="sort-by">
            <h4>排序</h4>
            <ul>
                <li><a <?php if (isset($_GET['order']) && ($_GET['order'] == 'rand')) echo 'class="current"'; ?> href="<?php echo curPageURL() . '?' . http_build_query(array_merge($_GET, array('order' => 'rand'))); ?>">随机阅读</a></li>
                <li><a <?php if (isset($_GET['order']) && ($_GET['order'] == 'commented')) echo 'class="current"'; ?> href="<?php echo curPageURL() . '?' . http_build_query(array_merge($_GET, array('order' => 'commented'))); ?>">评论最多</a></li>
                <li><a <?php if (isset($_GET['order']) && ($_GET['order'] == 'alpha')) echo 'class="current"'; ?> href="<?php echo curPageURL() . '?' . http_build_query(array_merge($_GET, array('order' => 'alpha'))); ?>">标题排序</a></li>
            </ul>
        </div>
        <h4>浏览<?php
                // If this is a category archive
                if (is_category()) {
                    printf('分类</h4>
<h2>' . single_cat_title('', false) . '</h2>');
                    if (category_description()) echo '<p>' . category_description() . '</p>';
                    // If this is a tag archive
                } elseif (is_tag()) {
                    printf('标签</h4>
<h2>' . single_tag_title('', false) . '</h2>');
                    if (tag_description()) echo '<p>' . tag_description() . '</p>';
                    // If this is a daily archive
                } elseif (is_day()) {
                    printf('日期存档</h4>
<h2>' . get_the_time('Y年n月j日') . '</h2>');
                    // If this is a monthly archive
                } elseif (is_month()) {
                    printf('月份存档</h4>
<h2>' . get_the_time('Y年n月') . '</h2>');
                    // If this is a yearly archive
                } elseif (is_year()) {
                    printf('年份存档</h4>
<h2>' . get_the_time('Y年') . '</h2>');
                    // If this is an author archive
                } elseif (is_author()) {
                    echo '</h4><h2>作者存档</h2>';
                    // If this is a paged archive
                } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
                    echo '</h4><h2>博客存档</h2>';
                }
                ?>
    </div>
    <?php
    global $wp_query;

    if (isset($_GET['order']) && ($_GET['order'] == 'rand')) {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array(
            'orderby' => 'rand',
            'paged' => $paged,
        );
        $arms = array_merge(
            $args,
            $wp_query->query
        );
        query_posts($arms);
    } else if (isset($_GET['order']) && ($_GET['order'] == 'commented')) {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array(
            'orderby' => 'comment_count',
            'order' => 'DESC',
            'paged' => $paged,
        );
        $arms = array_merge(
            $args,
            $wp_query->query
        );
        query_posts($arms);
    } else if (isset($_GET['order']) && ($_GET['order'] == 'alpha')) {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array(
            'orderby' => 'title',
            'order' => 'ASC',
            'paged' => $paged,
        );
        $arms = array_merge(
            $args,
            $wp_query->query
        );
        query_posts($arms);
    }
    // 循环读取文章
    if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post">
                <!-- 标题 -->
                <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <!-- 标签、日期等 -->
                <p class="sub"><?php the_tags('标签：', ', ', ''); ?> • <?php the_time('Y年n月j日') ?> • <?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?></p>
                <!-- 图片 -->
                <?php $large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
                        if ($large_image_url[0] != "") : ?>
                    <img class="thumb" alt="<?php the_title(); ?>" src="<?php echo $large_image_url[0]; ?>" />
                <?php endif; ?>
                <!-- 文章简述 -->
                <?php the_excerpt(); ?>
            </div>
        <?php endwhile; ?>

    <?php else : ?>
        <h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>
        <p>没有找到任何文章！</p>
    <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

header.php

头部内容基本是每一页的都要的 <head> 标签内容。这里主要是给出了自定义的标题和关键词、描述内容。

header.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><?php if (is_home()) {
                bloginfo('name');
                echo "  ";
                bloginfo('description');
            } elseif (is_category()) {
                single_cat_title();
                echo "  ";
                bloginfo('name');
            } elseif (is_single()  is_page()) {
                single_post_title();
                echo "  ";
                bloginfo('name');
            } elseif (is_search()) {
                echo "搜索结果";
                echo "  ";
                bloginfo('name');
            } elseif (is_404()) {
                echo '页面未找到!';
            } else {
                wp_title('', true);
            } ?></title>
    <!-- 关键词、描述 -->
    <?php
    if (is_home()  is_page()) {
        $description = '小tid笔记，记录各种技术性文章，为大家提供简单、有效的、易上手的各种技术和便捷功能，有问题随时欢迎留言提问';
        $keywords = 'TiD,小tid,小tid笔记,tidnotes,技术,wordpress,前端,js';
    } elseif (is_single()) {
        if ($post->post_excerpt) { //如果文章摘要存在就以文章摘要为描述
            $description = $post->post_excerpt;
            $description = str_replace("\r\n", "", $description);
            $description = str_replace("\n", "", $description);
            $description = str_replace("\"", "'", $description);
            $description .= '...';
        } else { //如果文章摘要不存在就截断文章前200字为描述
            $description = mb_strimwidth(strip_tags($post->post_content), 0, 200, "");
            $description = str_replace("\r\n", "", $description);
            $description = str_replace("\n", "", $description);
            $description = str_replace("\"", "'", $description);
            $description .= '...';
        }
        $keywords = "";
        $tags = wp_get_post_tags($post->ID);
        foreach ($tags as $tag) {
            $keywords = $keywords . $tag->name . ",";
        }
    } elseif (is_category()) {
        $description = category_description() ? category_description() : single_cat_title('', false);
        $keywords = single_cat_title('', false);
    } elseif (is_tag()) {
        $keywords = single_tag_title('', false);
        $description = "关于标签 " . $keywords . " 的相关文章";
    }
    $description = trim(strip_tags($description));
    $keywords = trim(strip_tags($keywords));
    ?>
    <meta name="description" content="<?php echo $description; ?>" />
    <meta name="keywords" content="<?php echo $keywords; ?>" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <!-- 样式表 -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>

<body>
    <header class="banner banner-pattern-seaOfClouds">
        <h2><?php bloginfo('name'); ?></h2>
        <h3><?php bloginfo('description'); ?></h3>
    </header>

这部分可以根据自己的需要改写侧边栏内容，自己的部分只需要写在 <div class="sidebar"></div> 内就行。

sidebar.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 侧边栏 -->
<div class="sidebar">
    <?php if (!function_exists('dynamic_sidebar')  !dynamic_sidebar('First_sidebar')) : ?>
        <h4>分类目录</h4>
        <ul>
            <?php wp_list_categories('depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0'); ?>
        </ul>
        <h4>最近文章</h4>
        <ul>
            <?php
                $posts = get_posts('numberposts=6&orderby=post_date');
                foreach ($posts as $post) {
                    setup_postdata($post);
                    echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
                }
                $post = $posts[0];
                ?>
        </ul>
    <?php endif; ?>

    <?php if (!function_exists('dynamic_sidebar')  !dynamic_sidebar('Second_sidebar')) : ?>
        <h4>标签云</h4>
        <div class="tag-cloud">
            <?php
                $tags = get_tags();
                foreach ($tags as $tag) {
                    $tag_link = get_tag_link($tag->term_id);
                    echo "<a href='{$tag_link}' title='查看关于“{$tag->name}”的文章' rel='{$tag->name} Tag'>{$tag->name}</a>";
                } ?>
        </div>
    <?php endif; ?>
</div>
footer.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 底部 -->
<div class="footer">
    <div class="footer-item">
        <div class="item">
            <h3>关于我们</h3>
            <div><a href="<?php echo home_url(); ?>/常见问题">常见问题</a></div>
            <div><a href="<?php echo home_url(); ?>/留言板">联系我们</a></div>
        </div>
        <div class="item">
            <h3>友情链接</h3>
            <div><a href="//www.tidnotes.top/">小TiD笔记</a></div>
        </div>
    </div>
    <div class="copyright">
        <div>Copyright © 2019 <a href="//www.tidnotes.top" title="小TiD笔记">小TiD笔记</a></div>
        <div>Powered By WordPress  Design By Tidra</div>
    </div>
</div>

<?php wp_footer(); ?>

</body>
</html>

404.php

404.php
1
2
3
4
<?php get_header(); ?>
<h2>Error 404 - Not Found</h2>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

comments.php

comments.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
    die('Please do not load this page directly. Thanks!');
?>

<!-- 评论区 -->
<div class="comment">
    <?php if ($post->comment_count > 0) : ?>
        <h3 class="comment-title">回复</h3>
        <ol class="commentlist">
            <?php
                if (!empty($post->post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {
                    // if there's a password
                    // and it doesn't match the cookie
                    ?>
                <li class="decmt-box">
                    <p><a href="#addcomment">请输入密码再查看评论内容.</a></p>
                </li>
            <?php
                } else if (!comments_open()) {
                    ?>
                <li class="decmt-box">
                    <p><a href="#addcomment">评论功能已经关闭!</a></p>
                </li>
            <?php
                } else if (!have_comments()) {
                    ?>
                <li class="decmt-box">
                    <p><a href="#addcomment">还没有任何评论，你来说两句吧</a></p>
                </li>
            <?php
                } else {
                    wp_list_comments('type=comment&callback=aurelius_comment');
                }
                ?>
        </ol>
    <?php endif; ?>
    <?php
    if (!comments_open()) :
    // If registration required and not logged in.
    elseif (get_option('comment_registration') && !is_user_logged_in()) :
        ?>
        <p>你必须 <a href="<?php echo wp_login_url(get_permalink()); ?>">登录</a> 才能发表评论.</p>
    <?php else : ?>
        <form id="commentform" name="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
            <h3 class="comment-title">发表评论</h3>
            <div class="comment-list">
                <?php if (!is_user_logged_in()) : ?>
                    <div class="comment-author"><input type="text" name="author" id="author" placeholder="昵称*" value="<?php echo $comment_author; ?>" size="23" tabindex="1" /></div>
                    <div class="comment-email"><input type="text" name="email" id="email" placeholder="电子邮件*" value="<?php echo $comment_author_email; ?>" size="23" tabindex="2" /></div>
                    <div class="comment-url"><input type="text" name="url" id="url" placeholder="网址(选填)" value="<?php echo $comment_author_url; ?>" size="23" tabindex="3" /></div>
                <?php else : ?>
                    <p>您已登录:<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="退出登录">退出 »</a></p>
                <?php endif; ?>
            </div>
            <textarea id="message comment" name="comment" placeholder="评论内容..." tabindex="4" rows="3" cols="40"></textarea>

            <!-- Add Comment Button -->
            <input name="submit" type="submit" id="entry-comment-submit" class="submit-button" value="发表评论">

            <?php comment_id_fields(); ?>
            <?php do_action('comment_form', $post->ID); ?>
        </form>
    <?php endif; ?>
</div>

整合文件下载

以上的基本是按照露兜博客的《WordPress主题制作全过程》更改的，可以点击下载该作者的全部文件自行更改，或者点击链接下载我更改后的主题文件。

关于主题的函数

  • 要包含头部/页眉，请使用 get_header()
  • 要包含侧边栏，请使用 get_sidebar()
  • 要包含页脚，请使用 get_footer()
  • 要包含搜索表单，请使用 get_search_form()
  • 要包含自定义主题文件，请使用 get_template_part()
    • 如文件myheader.php，则引用代码 <?php get_template_part( 'myheader' ); ?> 。注意：文件需要放在该主题的根目录。

主题制作中大多数函数都是在循环（ The Loop ）中实现的，此部分详情请查看《WordPress之主题循环（The Loop）及其函数》。

注意

  • 注意每一部分的划分，尽量将相同的划在同一个php文件中，同时记得标签闭合问题，想header.php和footer.php中分别写是 <html><body> 和 </body></html> 。
  • 像 the_author() 函数一定要写在循环（The Loop）中。
  • 一个页面中尽量只使用一次循环。如果像在header.php中使用了循环，page.php再使用会出现错误，如果需要的话可以使用多次循环解决这个问题。多次循环可以查看《WordPress之主题循环（The Loop）及其函数》，或者官方文件。
  • functions.php文件中，所有函数都应该写在 <?php //注释 ?> 中，注释不要在标签外用 <!-- 注释 --> ，同时是php标签间也尽量不要有空行，否则有可能将空行等内容显示在html的最开始位置，从而造成错误。