本文主要介绍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笔记</figure>

考虑一般的使用情况,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笔记</figure>

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

所以制作一个主题,一般会将相同的内容独立到一个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主题制作全过程》更改的,可以点击下载该作者的全部文件自行更改,或者点击链接下载我更改后的主题文件。

关于主题的函数

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

注意

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

原文链接: https://www.tidnotes.ga/2019/11/wordpress-theme-diy.html