wordpress 自定义主题

温馨提示：本文最后更新于2026年1月1日 10:17，若内容或图片失效，请在下方留言或联系博主。

摘要

自定义 WordPress 主题是指根据网站需求，从零开始创建一个完全符合特定功能和设计要求的 WordPress 主题。自定义主题不依赖于任何现成的主题框架，而是通过编写 PHP、HTML、CSS 和 JavaScript 来实现完整的前端展示和后端功能。

自定义 WordPress 主题的核心...

自定义 WordPress 主题的核心文件包括：

style.css

用于定义主题样式
包含主题信息（如主题名称、作者、描述等）

需要以以下格式开头：

/*
Theme Name: My Custom Theme
Theme URI: http://example.com/my-custom-theme
Author: Your Name
Author URI: http://example.com
Description: A custom WordPress theme.
Version: 1.0
*/

index.php
- 主模板文件，用于显示默认页面内容
- 可以使用 WordPress 的模板标签来动态加载内容
header.php
- 定义网站的头部结构，如 HTML 头部、导航菜单等
- 使用 get_header() 调用
footer.php
- 定义网站的底部结构
- 使用 get_footer() 调用
single.php
- 显示单个文章页面的内容
- 若没有该文件，则默认使用 index.php
page.php
- 显示单独页面的内容
- 若没有该文件，则默认使用 index.php
archive.php
- 显示归档页面（如分类、标签、日期等）
- 若没有该文件，则默认使用 index.php
functions.php
- 定义主题的功能，如注册菜单、小工具、支持的功能（如缩略图、标题标签等）
- 可以使用 add_theme_support() 添加功能支持
sidebar.php
- 定义侧边栏内容
- 使用 get_sidebar() 调用
comments.php
- 定义评论部分的显示方式
- 使用 comments_template() 调用
404.php
- 定义 404 错误页面
- 若没有该文件，则默认使用 index.php
search.php
- 定义搜索结果页面
- 若没有该文件，则默认使用 index.php

常见模板标签

the_title()：显示文章标题
the_content()：显示文章内容
the_permalink()：显示文章链接
the_excerpt()：显示文章摘要
wp_nav_menu()：显示导航菜单
get_sidebar()：调用 sidebar.php
get_header()：调用 header.php
get_footer()：调用 footer.php
wp_reset_postdata()：重置全局变量
query_posts() 或 WP_Query：用于自定义查询

主题功能设置（functions.php）

<?php
function my_custom_theme_setup() {
    // 支持标题标签
    add_theme_support('title-tag');

    // 支持缩略图
    add_theme_support('post-thumbnails');

    // 注册导航菜单
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-custom-theme'),
    ));

    // 支持小工具
    add_theme_support('widgets-block-editor');
}
add_action('after_setup_theme', 'my_custom_theme_setup');

自定义 CSS

在 style.css 中编写样式，可以使用 WordPress 提供的 CSS 类名或自定义类名来控制布局、颜色、字体等。

自定义 JavaScript

可以在 functions.php 中注册脚本，例如：

function my_custom_theme_scripts() {
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_theme_scripts');

主题目录结构

一个典型的自定义 WordPress 主题目录如下：

my-custom-theme/
├── style.css
├── index.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── header.php
├── footer.php
├── sidebar.php
├── comments.php
├── functions.php
├── images/         (可选)
├── js/             (可选)
└── css/            (可选)