WordPress主題開發入門指南：從零開始構建你嘅網站

準備工作同環境搭建

在开始编写代码之前，你需要一个合适的开发环境。这包括一个本地服务器环境（如XAMPP、MAMP或Local by Flywheel）以及一个代码编辑器（如VS Code、Sublime Text或PHPStorm）。本地服务器环境能够模拟线上服务器，让你在自己的电脑上安全地开发和测试主题，而无需在每次修改后都上传到网络服务器。

核心文件是每个WordPress主题的基石。一个最基础的主题至少需要两个文件：style.css 同埋 index.php。其中，style.css 不仅仅是样式表，它更重要的功能是作为主题的“信息头”，用于向WordPress系统声明你的主题。在这个文件中，你需要通过特定的注释块来定义主题名称、作者、描述、版本等元信息。

此外，虽然不是必须，但强烈建议创建一个functions.php 文件。这个文件是你的主题“功能增强器”，用于添加自定义功能、注册菜单、侧边栏，以及引入其他脚本和样式文件。通过它，你可以扩展主题的能力而无需修改核心文件。

推薦閱讀 WordPress主題開發入門指南：從零開始創建你嘅第一個自訂主題。

现代WordPress主题开发还建议使用子主题（Child Theme）。这是一种在不直接修改父主题文件的情况下，对主题进行自定义和功能添加的安全方法。当父主题更新时，你的自定义内容（保存在子主题中）将得到保留。创建子主题同样需要上述两个核心文件，并在style.css 的样式头中通过Template:字段聲明其父主題。

UltaHost WordPress 主機

30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%

瀏覽該頁面

構建主題嘅核心模板檔案

WordPress使用模板层级（Template Hierarchy）系统来决定对于特定的页面请求，应该使用哪个PHP模板文件来渲染内容。理解这套规则是开发主题的关键。

文章与页面显示模板

最基本嘅模板係single.php同埋page.php，它们分别用于控制单篇博客文章和独立页面的显示。在这些模板中，你会使用一系列WordPress核心函数来循环输出内容。最重要的循环结构通常如下所示：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>

这段代码检查是否有文章，然后进入循环，依次输出文章的标题和内容。函数如the_title()同埋the_content()用于输出对应的数据。

文章列表与存档模板

当用户访问博客首页、分类目录页或作者存档页时，WordPress会使用列表模板。最常见的列表模板是index.php（作为最后的兜底选项）和archive.php。在列表模板中，循环会遍历多篇文章，通常我们使用the_excerpt()来输出文章摘要而非全文。

推薦閱讀 一步步掌握WordPress主題開發：從零開始構建自訂主題。

// 在循环中输出文章列表项
<article>
    <h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
</article>

the_permalink()函数用于获取当前文章的永久链接。

主题的通用组成部分

为了提高代码的复用性和可维护性，你应该将公共的页面部分拆分到独立的模板文件中。这通过get_header(), get_footer(), get_sidebar()同埋get_template_part()等函數來實現。

例如，你嘅header.php文件包含HTML文档的头部、区域以及网站的顶部导航菜单。在single.php中，你只需在开头调用get_header()，WordPress就会自动引入header.php的内容。

hosting.com 共享主機

高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。

瀏覽該頁面

同样，对于在多个地方重复使用的代码块（如文章元信息），你可以将其保存为content.php或template-parts/content.php，然后在主模板中使用get_template_part('template-parts/content', get_post_format());调用它。第二个参数允许你根据文章格式（如图库、引语）加载不同的变体文件（如content-gallery.php）。

使用函数文件增强主题功能

functions.php 文件是主题的“控制中心”，所有不属于直接HTML输出的功能性代码都应放在这里。它会在主题初始化时被WordPress自动加载。

註冊主題功能同選單

一个基础且必要的操作是使用add_theme_support() 函数来声明你的主题支持哪些WordPress功能。例如，启用文章特色图片、自定义菜单和HTML5标记支持是标准做法。

推薦閱讀 WordPress 核心架構同工作原理。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

然后，你可以使用register_nav_menus() 函数来定义主题中可用的菜单位置，例如“顶部主导航”和“页脚导航”。

引入样式表与JavaScript

正确地将CSS和JavaScript文件排入队列（enqueue）是专业开发的关键。这确保了依赖关系正确，并且避免了脚本冲突。绝对不要直接在模板文件中使用或标签引入资源。

InterServer 共享主機

共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。

瀏覽該頁面

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

掛鈎wp_enqueue_scripts 用于在网站前端加载脚本和样式，而get_stylesheet_uri()同埋get_template_directory_uri() 函数能帮你获取主题目录的正确URL。

建立小工具區域

侧边栏或页脚的小工具区域（Widget Areas）为用户提供了通过后台拖拽式界面自定义内容的能力。使用register_sidebar() 函数可以创建一个新的小工具区域。

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧边栏',
        'id'            => 'sidebar-1',
        'description'   => '此区域的小工具将显示在文章和页面侧边。',
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
 'after_widget'  =&gt; '</section>',
 'before_title'  =&gt; '<h2 class="widget-title">',
 'after_title'   =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

注册后，你需要在模板文件（如sidebar.php）入面用dynamic_sidebar('sidebar-1');函数来输出这个区域。

制作响应式布局与样式编写

现代网站必须在各种设备上都能良好显示。这意味着你的主题必须是响应式的。实现响应式设计主要依靠CSS媒体查询（Media Queries）和流动式布局（Fluid Layouts）。

移动优先的样式策略

建议采用“移动优先”的CSS编写策略。即先为移动设备（小屏幕）编写基础样式，然后使用媒体查询逐渐为更大屏幕添加或覆盖样式。

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

这种策略确保了核心内容在所有设备上都可访问，并逐步增强更大屏幕上的体验。

灵活处理图片与媒体

确保图片和嵌入内容（如视频）不会溢出其容器是响应式设计的基本要求。一个简单的通用规则是：

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

这条CSS规则确保媒体元素的宽度不会超过其父容器的宽度，同时高度会按比例自动调整，从而避免布局被破坏。

利用WordPress辅助类与函数

WordPress本身会输出很多有用的CSS类，你可以利用它们进行更精确的样式控制。例如，标签上会添加页面、文章类型的类（如.page, .single-post），以及文章ID类（如.postid-123）。在文章列表的循环中，post_class()函数会为每篇文章的容器输出一系列类名（如文章格式、分类等），这为精细化样式设计提供了极大便利。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

在样式表中，你可以这样定位：

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

摘要

WordPress主题开发是一个将创意、前端技术（HTML、CSS、JavaScript）和后端技术（PHP）相结合的过程。从建立一个包含style.css同埋index.php的基础文件夹开始，逐步学习并实现模板层级系统，将页面拆分为可复用的模板部件。核心的functions.php文件是你扩展主题功能、注册菜单和脚本的舞台。最后，通过响应式的CSS设计，确保你的主题能在从手机到台式机的所有设备上提供优秀的浏览体验。遵循最佳实践，如使用子主题进行修改、正确排入队列脚本和样式，将使你的主题更专业、更安全，并且易于维护。

常見問題

没有PHP基础可以开发WordPress主题吗？

虽然理论上可以只修改HTML和CSS来调整现有主题的外观，但要真正从零开始开发一个功能完整、符合WordPress标准的主题，PHP知识是必不可少的。你需要理解基本的PHP语法、函数调用以及WordPress特有的模板标签和钩子（Hooks）系统。建议至少先学习PHP和WordPress基础模板标签。

主題開發完成之後點樣發布俾其他人用？

在将主题发布到WordPress官方主题目录或商业销售之前，你需要进行严格的测试，并确保它遵循《WordPress主题开发手册》中的编码标准。这包括对代码进行安全审查、确保主题完全响应式、进行国际化（i18n）准备（使用翻译函数如__()同埋_e()），并移除所有调试代码。然后，你可以选择提交到官方目录，或通过自己的网站进行分发。

子主题和父主题更新有什么关系？

子主题的存在是为了安全地修改父主题。当你使用子主题时，你对样式和功能的定制都保存在子主题的文件中。当父主题发布更新时，你只需像更新其他主题一样更新父主题即可。你的子主题文件将保持不变，所有自定义内容都会保留。这是更新核心功能（父主题）而不丢失个性化设计（子主题）的最佳实践。

點樣為我嘅主題加入自訂選項頁面？

为高级主题添加自定义选项页面，通常使用WordPress的设置API（Settings API）或通过集成一个流行的选项框架（如Redux、Kirki或使用Carbon Fields库）来实现。设置API是WordPress核心提供的一套标准化接口，用于安全地创建、验证和保存选项。对于初学者，使用一个成熟的框架可以更快速地构建出用户友好的选项面板，但会增加主题的复杂性和文件体积。