编程马·菜鸟教程

Appearance

10.2 步骤1：搭建主题基础结构 ​

在开始制作简约博客主题之前，我们需要先搭建主题的基础结构，包括创建主题文件夹和核心文件。本章节将详细介绍如何搭建主题的基础结构，为后续的开发工作做好准备。

创建主题文件夹 ​

首先，我们需要在WordPress的主题目录中创建一个新的主题文件夹。

步骤1：定位主题目录 ​

WordPress的主题目录位于 wp-content/themes/ 目录下。在本地开发环境中，你需要找到这个目录。

步骤2：创建主题文件夹 ​

在 wp-content/themes/ 目录下创建一个新的文件夹，命名为 simple-blog。这个文件夹将作为我们的主题目录。

创建核心文件 ​

接下来，我们需要在主题文件夹中创建核心文件，包括 style.css、index.php、header.php、footer.php 和 functions.php。

1. 创建 style.css 文件 ​

style.css 是主题的主样式文件，它包含主题的信息头和样式规则。

css
/*
Theme Name: Simple Blog
Theme URI: https://example.com/simple-blog
Author: Your Name
Author URI: https://example.com
Description: A simple and clean WordPress blog theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simple-blog
Tags: blog, clean, minimal, responsive, white

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* CSS Variables */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --text-color: #333;
    --light-text-color: #666;
    --background-color: #f5f5f5;
    --white: #fff;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --heading-font-family: 'Roboto', sans-serif;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --border-radius: 8px;
    --border-width: 1px;
    --border-color: #ddd;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Header Styles */
.header {
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) 0;
}

/* Footer Styles */
.footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-xl);
}

/* Main Content Styles */
.main-content {
    padding: var(--spacing-xl) 0;
}

/* Sidebar Styles */
.sidebar {
    background-color: var(--white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

/* Post Styles */
.post {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.post-title {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-sm);
}

.post-meta {
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin-bottom: var(--spacing-md);
}

.post-content {
    margin-bottom: var(--spacing-md);
}

.read-more {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease;
}

.read-more:hover {
    background-color: var(--accent-color);
    color: var(--white);
}

/* Responsive Styles */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .post {
        padding: var(--spacing-md);
    }
}

2. 创建 index.php 文件 ​

index.php 是主题的默认模板文件，它将显示文章列表。

php
<?php get_header(); ?>

<main class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <article class="post">
                            <header class="post-header">
                                <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                <div class="post-meta">
                                    <span class="post-date"><?php the_date(); ?></span>
                                    <span class="post-author">By <?php the_author(); ?></span>
                                    <span class="post-category"><?php the_category(', '); ?></span>
                                </div>
                            </header>
                            <div class="post-content">
                                <?php the_excerpt(); ?>
                            </div>
                            <footer class="post-footer">
                                <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                            </footer>
                        </article>
                    <?php endwhile; ?>
                    
                    <!-- Pagination -->
                    <div class="pagination">
                        <?php
                        the_posts_pagination(array(
                            'prev_text' => __('Previous', 'simple-blog'),
                            'next_text' => __('Next', 'simple-blog'),
                            'mid_size' => 2,
                            'screen_reader_text' => __('Posts navigation', 'simple-blog'),
                        ));
                        ?>
                    </div>
                <?php else : ?>
                    <p><?php esc_html_e('No posts found', 'simple-blog'); ?></p>
                <?php endif; ?>
            </div>
            <div class="col-md-4">
                <?php get_sidebar(); ?>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

3. 创建 header.php 文件 ​

header.php 是主题的头部模板文件，它包含网站的头部内容，如导航菜单、网站标题等。

php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Segoe+UI:wght@400;500;700&display=swap" rel="stylesheet">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <!-- Logo -->
                <div class="logo">
                    <a href="<?php echo home_url(); ?>">
                        <?php if (has_custom_logo()) : ?>
                            <?php the_custom_logo(); ?>
                        <?php else : ?>
                            <h1><?php bloginfo('name'); ?></h1>
                        <?php endif; ?>
                    </a>
                </div>
                
                <!-- Navigation Menu -->
                <nav class="main-navigation">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'menu_class' => 'nav-menu',
                        'container' => false,
                        'depth' => 2,
                    ));
                    ?>
                    
                    <!-- Mobile Menu Button -->
                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                        <span class="menu-toggle-icon">☰</span>
                    </button>
                </nav>
            </div>
        </div>
    </header>

4. 创建 footer.php 文件 ​

footer.php 是主题的底部模板文件，它包含网站的底部内容，如版权信息、页脚菜单等。

php
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-info">
                <h3><?php bloginfo('name'); ?></h3>
                <p><?php bloginfo('description'); ?></p>
            </div>
            
            <div class="footer-links">
                <h3>Quick Links</h3>
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'footer',
                    'menu_class' => 'footer-nav',
                    'container' => false,
                    'depth' => 1,
                ));
                ?>
            </div>
            
            <div class="footer-contact">
                <h3>Contact Us</h3>
                <p>Email: info@example.com</p>
                <p>Phone: 123-456-7890</p>
                <p>Address: 123 Main Street, City, State 12345</p>
            </div>
        </div>
        
        <div class="footer-copyright">
            <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
            <?php if (get_option('zh_cn_l10n_icp_num')) : ?>
                <p><a href="https://beian.miit.gov.cn/" target="_blank"><?php echo get_option('zh_cn_l10n_icp_num'); ?></a></p>
            <?php endif; ?>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

5. 创建 functions.php 文件 ​

functions.php 是主题的功能文件，它包含主题的功能代码，如注册导航菜单、注册小工具区域等。

php
<?php
/**
 * Functions.php
 *
 * The main functions file for the theme.
 *
 * @package Simple Blog
 */

/**
 * Sets up theme defaults and registers support for various WordPress features.
 */
function simple_blog_setup() {
    // Add theme support
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('custom-logo');
    add_theme_support('custom-background');
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ));
    
    // Register navigation menus
    register_nav_menus(array(
        'primary' => esc_html__('Primary Menu', 'simple-blog'),
        'footer' => esc_html__('Footer Menu', 'simple-blog'),
    ));
}
add_action('after_setup_theme', 'simple_blog_setup');

/**
 * Enqueues scripts and styles.
 */
function simple_blog_enqueue_scripts() {
    // Enqueue theme styles
    wp_enqueue_style('simple-blog-style', get_stylesheet_uri());
    
    // Enqueue navigation script
    wp_enqueue_script('simple-blog-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true);
    
    // Enqueue comment script
    if (is_singular() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', 'simple_blog_enqueue_scripts');

/**
 * Registers widget areas.
 */
function simple_blog_widgets_init() {
    // Register sidebar widget area
    register_sidebar(array(
        'name' => esc_html__('Sidebar', 'simple-blog'),
        'id' => 'sidebar-1',
        'description' => esc_html__('Add widgets here.', 'simple-blog'),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'simple_blog_widgets_init');

/**
 * Custom excerpt length.
 */
function simple_blog_excerpt_length($length) {
    return 20;
}
add_filter('excerpt_length', 'simple_blog_excerpt_length', 999);

/**
 * Custom excerpt more.
 */
function simple_blog_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'simple_blog_excerpt_more');

6. 创建 sidebar.php 文件 ​

sidebar.php 是主题的侧边栏模板文件，它包含侧边栏的内容，如小工具区域。

php
<aside class="sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <div class="widget">
            <h3><?php esc_html_e('Sidebar Widget Area', 'simple-blog'); ?></h3>
            <p><?php esc_html_e('Add widgets here to appear in your sidebar.', 'simple-blog'); ?></p>
        </div>
    <?php endif; ?>
</aside>

创建 assets 目录 ​

接下来，我们需要创建 assets 目录，用于存放静态资源，如JavaScript文件。

步骤1：创建 assets 目录 ​

在主题文件夹中创建一个 assets 目录。

步骤2：创建 js 目录 ​

在 assets 目录中创建一个 js 目录，用于存放JavaScript文件。

步骤3：创建 navigation.js 文件 ​

在 assets/js 目录中创建一个 navigation.js 文件，用于处理导航菜单的交互。

javascript
// Navigation menu interaction
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
            menuToggle.setAttribute('aria-expanded', !expanded);
        });
    }
});

测试主题 ​

现在，我们已经创建了主题的基础结构和核心文件，接下来我们需要测试主题是否能正常工作。

步骤1：激活主题 ​

在WordPress后台，进入"外观" > "主题"，找到我们创建的"Simple Blog"主题，点击"激活"按钮。

步骤2：添加内容 ​

在WordPress后台，添加一些文章和页面，以便测试主题的显示效果。

步骤3：测试导航菜单 ​

在WordPress后台，进入"外观" > "菜单"，创建一个导航菜单，并将其分配到"Primary Menu"位置。

步骤4：测试侧边栏 ​

在WordPress后台，进入"外观" > "小工具"，向侧边栏添加一些小工具，如"最新文章"、"分类"、"标签云"等。

小结 ​

搭建主题基础结构是主题开发的重要第一步，它为后续的开发工作提供了基础。通过本章节的学习，你应该：

  1. 了解如何创建主题文件夹
  2. 掌握如何创建主题的核心文件，包括 style.css、index.php、header.php、footer.php 和 functions.php
  3. 了解如何创建 assets 目录和 JavaScript 文件
  4. 掌握如何测试主题是否能正常工作

在后续的章节中，我们将继续完善主题的功能，包括编写头部与底部、编写首页、编写文章页与页面等。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建