wordpress主题开发001——新建主题

最新推荐文章于 2026-05-08 16:52:59 发布

原创最新推荐文章于 2026-05-08 16:52:59 发布 · 761 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文将引导你创建一个专为日常笔记设计的WordPress主题，包括必备文件结构、关键代码片段和自定义功能。从style.css到functions.php，一步步教你如何实现一个响应式、定制化的博客模板。

参考资料

官方文档：

https://developer.wordpress.org/themes/

油管视频：

https://www.youtube.com/watch?v=oTRZYnYQlmo&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE

新建主题所需文件

wp-content\themes\cznoteblog（创建主题文件夹，目录名称选择一个全网唯一的）

style.css（必须），其中包含了主题的meta信息

/*
    Theme Name: CZ Note Blog
    Theme URI: http://www.wudics.com/cznoteblog
    Author: wudics
    Author URI: http://www.wudics.com
    Description: This is a blog theme for daily note.
    Version: 0.1 alpha
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: black, white, responsive, one-colum, two-colums, featured-image, custom-menu, custom-header, post-formats
*/

index.php（必须），如下是示例代码

<?php get_header(); ?>

    <?php
    if (have_posts()):
        while (have_posts()): the_post();
    ?>
            <h3><?php the_title(); ?></h3>
            <small>Posted on: <?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>, in <?php the_category(); ?></small>

            <p><?php the_content(); ?></p>
            <hr />
    <?php
        endwhile;
    endif;
    ?>

<?php get_footer(); ?>

header.php（被index.php加载）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CZ NOTE BLOG</title>
        <?php wp_head(); ?>
    </head>

    <?php
        // 检测后台配置的首页用is_front_page()，检测后台配置的文章页用is_home()
        if (is_front_page()):
            $cznoteblog_classes = array('cznoteblog-class', 'hello-class');
        else:
            $cznoteblog_classes = array('no-cznoteblog-class');
        endif;
    ?>

    <body <?php body_class($cznoteblog_classes); ?>>

        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>

footer.php（被index.php加载）

        <footer>
            <p>my footer</p>
            <?php wp_nav_menu(array('theme_location' => 'secondary')); ?>
        </footer>
        
        <?php wp_footer(); ?>
    </body>
</html>

screenshot.png（1200*900）主题封面

functions.php（钩子函数），如下是自定义加载css、js，以及自定义menus

<?php

function cznoteblog_script_enqueue() {

    wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/cznoteblog.css', array(), '1.0.0', 'all');
    wp_enqueue_script('customjs', get_template_directory_uri() . '/js/cznoteblog.js', array(), '1.0.0', true);

}
add_action('wp_enqueue_scripts', 'cznoteblog_script_enqueue');

function cznoteblog_theme_setup() {

    add_theme_support('menus');

    register_nav_menu('primary', 'Primary Header Navigation');
    register_nav_menu('secondary', 'Footer Navigation');
}
add_action('init', 'cznoteblog_theme_setup');

标签