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

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

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

前言

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

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

  1. 主题模板介绍
  2. 制作步骤
  3. 关于主题的函数
  4. 注意

主题模板介绍

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部分：头部、正文内容部分、侧边栏、尾部（一般叫页脚）。

网页结构图 | 小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，基本就剩文章列表内容，可以用循环写列表的每一个内容。

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

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

<!-- 标签等 -->
<p class="sub"><?php the_tags('标签：', ', ', ''); ?> • <?php the_time('Y年n月j日') ?> • <?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?></p>
<?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

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

<?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>标签内容。这里主要是给出了自定义的标题和关键词、描述内容。

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

sidebar.php

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

<!-- 侧边栏 -->
<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>
<!-- 底部 -->
<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.ga/">小TiD笔记</a></div>
        </div>
    </div>
    <div class="copyright">
        <div>Copyright © 2019 <a href="//www.tidnotes.ga" title="小TiD笔记">小TiD笔记</a></div>
        <div>Powered By WordPress | Design By Tidra</div>
    </div>
</div>

<?php wp_footer(); ?>

</body>
</html>

404.php

<?php get_header(); ?>
<h2>Error 404 - Not Found</h2>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

comments.php

<?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的最开始位置，从而造成错误。

本文由 小TiD笔记 发布在小TiD笔记，转载此文请保持文章完整性，并请附上文章来源（小TiD笔记）及本页链接。

原文链接： https://www.tidnotes.ga/2019/11/wordpress-theme-diy.html
扫描分享到社交APP
GitHub建站以及WordPress文章迁移
本文主要介绍利用github搭建个人静态网站，以及怎样将WordPress上的文章转移到github上。 目前 […]
WordPress之主题循环(The Loop)、参数$post及其函数
本文主要介绍主题制作时会用到的循环（The Loop）的使用方法，以及在循环中使用的WordPress函数，解 […]

发表评论

tidra
tidra

热爱技术&设计，简单快乐的一个人

近期文章

分类

工具栏

颜色表、颜色选择器、RGB和Hex互转
最新中国地区省市县行政划分表

标签云

WordPressGutenberg（古腾堡）linuxshell自定义块openwrtJavaScriptddnsGitHub自定义5.2oraclergbhex颜色
夜间模式

本网站主要撰写一些技术文章，内容大多为本人开发或者学习过程的解决方法等。由于个人精力有限，内容更新较慢，如果有什么好的建议或者想要了解的内容可以在网站留言或者发邮件给我，谢谢！

关于我们

常见问题&关于我们
联系我们
admin@tidnotes.ga

友情链接

广工校园作品
Wy博客
Copyright © 2019 小TiD笔记
Powered By WordPress | Design By Tidra | 站点地图