WordPress开发教程该怎么学？-杰瑞科技汇

WordPress 开发完整指南

本教程将分为以下几个核心部分：

（图片来源网络，侵删）

入门准备：了解 WordPress 开发需要什么，以及如何搭建本地开发环境。
核心概念：深入理解 WordPress 的核心工作原理，如钩子、循环、模板层次结构等。
主题开发：从零开始创建一个完整的 WordPress 主题。
插件开发：学习如何编写功能强大的插件来扩展 WordPress。
进阶与最佳实践：性能优化、安全性、代码规范和调试技巧。
学习资源：推荐官方文档、社区和优秀博客。

第一部分：入门准备

在开始编码之前,你需要准备好两样东西：知识基础和开发环境。

知识基础

HTML (超文本标记语言)：网页的骨架，你需要知道如何创建结构，如 <header>, <nav>, <main>, <article>, <footer> 等。
CSS (层叠样式表)：网页的样式，你需要知道如何选择器、盒模型、Flexbox/Grid 布局等，来美化你的网页。
JavaScript (JS)：网页的交互行为，虽然不是所有开发都要求精通，但了解 JS 基础（如 DOM 操作、事件监听）会让你在开发交互式功能时如虎添翼。
PHP (超文本预处理器)：WordPress 的核心编程语言，你不需要成为 PHP 大师，但必须掌握其基础语法，如变量、数据类型、函数、条件语句、循环、数组、类和对象，这是 WordPress 开发的重中之重。
基础 SQL：了解数据库查询的基本概念，虽然 WordPress 提供了强大的函数来帮你操作数据库，但了解底层原理大有裨益。

开发环境

强烈建议在本地电脑上搭建一个开发环境,而不是直接在线上网站进行开发，推荐工具：

本地服务器环境套件：
- XAMPP / MAMP / WAMP：这些工具一键集成了 Apache (Web服务器)、MySQL (数据库) 和 PHP，对于新手来说最简单。
- Local by Flywheel / LocalWP：专为 WordPress 设计的本地开发工具，界面友好，一键创建和管理多个 WordPress 站点，强烈推荐。
代码编辑器：
- Visual Studio Code (VS Code)：免费、强大、插件生态丰富，是目前最流行的选择。
- Sublime Text / Atom：也是不错的选择。

安装 WordPress

在你的本地环境中创建一个数据库,然后解压 WordPress 文件到你的 Web 服务器根目录（如 htdocs 或 www），通过浏览器访问 http://localhost/你的文件夹名，按照向导完成安装。

第二部分：核心概念

理解这些概念是 WordPress 开发的关键。

（图片来源网络，侵删）

钩子 - Hooks

钩子是 WordPress 的核心机制，允许你在不修改核心文件的情况下，插入或修改功能，它分为两种：

过滤器：用于修改数据，就像一个流水线上的质检员，数据流经这里时，你可以对它进行修改，然后再传出去。
- 函数：add_filter('hook_name', 'your_callback_function', 10, 2);
- 示例：修改文章摘要的长度。
```
function custom_excerpt_length( $length ) {
    return 20; // 设置摘要长度为 20 个单词
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 10 );
```
动作：用于在特定时间点执行一个动作，就像一个定时器，在某个时间点触发一个事件。
- 函数：add_action('hook_name', 'your_callback_function', 10, 2);
- 示例：在 <head> 中添加一个自定义的 meta 标签。
```
function add_custom_meta_tags() {
    echo '<meta name="author" content="Your Name">';
}
add_action( 'wp_head', 'add_custom_meta_tags' );
```

The Loop (WordPress 循环)

循环是 WordPress 显示内容（如文章、页面）的核心，它的工作流程是：

（图片来源网络，侵删）

查询数据库,获取符合条件的文章（首页的所有文章）。
使用 while 循环遍历这些文章。
在循环内部,使用模板标签（如 the_title(), the_content()）来显示每一篇文章的内容。

基本结构：

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <!-- 这里是每一篇文章的内容 -->
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页导航 -->
    <?php the_posts_navigation(); ?>
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

模板层次结构

WordPress 根据你访问的页面类型，自动加载对应的 PHP 文件来渲染页面，这让你可以创建高度定制化的页面。

首页/博客首页:
- home.php
- index.php (home.php 不存在)
单篇文章:
- single-{post-type}.php (single-post.php)
- single.php
- singular.php
- index.php
页面:
- page-{slug}.php (page-about.php)
- page-{id}.php (page-7.php)
- page.php
- singular.php
- index.php
分类/归档页:
- category-{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
404 错误页:
- php

模板标签

这些是特殊的 PHP 函数，用于在主题中输出动态内容。

the_title(): 显示文章标题。
the_permalink(): 显示文章链接。
the_content(): 显示文章内容。
the_excerpt(): 显示文章摘要。
get_header(): 加载 header.php 文件。
get_footer(): 加载 footer.php 文件。
get_sidebar(): 加载 sidebar.php 文件。
wp_head(): 在 <head> 标签中输出 WordPress 自动添加的样式、脚本和 meta 信息。
wp_footer(): 在页面底部输出 WordPress 自动添加的脚本。

第三部分：主题开发

让我们从零开始创建一个名为 "My Awesome Theme" 的主题。

创建主题文件夹和基本文件

在 wp-content/themes/ 目录下创建一个新文件夹，my-awesome-theme，在这个文件夹中，创建以下文件：

style.css (必须): 主题的“身份证”，包含主题信息。
index.php (必须): 如果找不到其他更具体的模板，WordPress 会加载这个文件。
functions.php: 主题的核心功能文件。

编写 `style.css`

这是最重要的文件之一,它定义了你的主题。

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme for learning.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

编写 `index.php`

创建一个基本的 HTML5 结构，并引入 WordPress 循环。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                get_template_part( 'template-parts/content', get_post_format() );
            endwhile;
            the_posts_navigation();
        else :
            get_template_part( 'template-parts/content', 'none' );
        endif;
        ?>
    </main>
    <?php get_sidebar(); ?>
    <footer>
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?></p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

使用 `functions.php` 添加功能

引入样式表和脚本:

function my_theme_enqueue_styles() {
    // 引入父主题样式（如果需要）
    // wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // 引入主题自己的样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

添加主题支持:

function my_theme_setup() {
    // 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );
    // 添加 HTML5 标签支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-awesome-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

创建自定义模板部分: 在 template-parts/content.php 中创建循环内文章的显示结构，然后在 index.php 中使用 get_template_part('template-parts/content') 来调用它，这样代码更整洁。

创建其他模板文件

根据需要创建 header.php, footer.php, sidebar.php, page.php, single.php 等，将 index.php 中的代码拆分到各自的文件中。

第四部分：插件开发

插件用于添加特定功能,而不是改变整个网站的外观。

创建插件文件夹和基本文件

在 wp-content/plugins/ 目录下创建一个新文件夹，hello-world-plugin，在这个文件夹中，创建一个 PHP 文件，hello-world.php。

编写插件头部信息

和主题类似,hello-world.php 的开头需要注释来定义插件信息。

<?php
/**
 * Plugin Name:       Hello World Plugin
 * Plugin URI:        https://example.com/
 * Description:       A simple plugin that says "Hello World!".
 * Version:           1.0.0
 * Author:            Your Name
 * Author URI:        https://example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       hello-world
 * Domain Path:       /languages
 * WC requires at least: 5.0
 * WC tested up to: 6.0
 */

编写插件功能

让我们添加一个在后台显示管理通知的功能。

// 创建一个函数来显示通知
function hwp_display_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p><?php _e( 'Hello World! This is a custom admin notice from my plugin.', 'hello-world' ); ?></p>
    </div>
    <?php
}
// 使用动作钩子，在 admin_notices 这个位置执行我们的函数
add_action( 'admin_notices', 'hwp_display_admin_notice' );

激活这个插件后,你就能在 WordPress 后台看到 "Hello World!" 的通知了。

创建设置页面

一个更复杂的插件通常需要设置页面。

在 functions.php 中添加菜单项和设置字段。
创建一个 HTML 模板文件来显示设置表单。
使用 register_setting() 来保存和处理表单提交的数据。

第五部分：进阶与最佳实践

安全性

数据验证和净化：永远不要相信用户输入，使用 sanitize_text_field(), intval(), esc_url() 等函数来处理所有外部数据。
非ces：在处理表单时，使用 wp_nonce_field() 和 wp_verify_nonce() 来防止跨站请求伪造攻击。
最小权限原则：插件和主题只请求它们需要的权限。
SQL 注入：尽量使用 WordPress 的 $wpdb->prepare() 函数来处理 SQL 查询，而不是直接拼接字符串。

性能优化

缓存：使用 Transients API (set_transient(), get_transient()) 来缓存数据库查询或复杂计算的结果。
图片优化：使用 Smush 或 EWWW Image Optimizer 等插件，或通过代码实现延迟加载。
代码审查：避免在循环内执行不必要的数据库查询。

调试

WP_DEBUG：在 wp-config.php 中将 define('WP_DEBUG', true); 和 define('WP_DEBUG_LOG', true); 打开，所有错误和警告都会被记录到 wp-content/debug.log 文件中。
Query Monitor：一个强大的调试插件，可以显示数据库查询、钩子、缓存、条件标签等信息，是开发者的必备工具。

代码规范

遵循 WordPress 编码标准，让你的代码更易于阅读和维护，可以使用 VS Code 的 Prettier 插件等工具来自动格式化代码。

第六部分：学习资源

官方文档：
- Developer Resources: 最权威、最重要的资源，包含了所有函数、钩子、主题和插件开发的指南。
- Theme Handbook
- Plugin Handbook
视频教程：
- WordPress.tv: 官方视频资源库，有大量 WordCamp 和开发者会议的演讲。
- YouTube: 搜索 "WordPress theme development tutorial" 或 "WordPress plugin development tutorial"，有很多优秀的免费教程。
社区和博客：
- Smashing Magazine: 经常发布高质量的 WordPress 开发文章。
- WPBeginner: 适合新手，有大量的教程和技巧。
- Stack Exchange: WordPress Development Stack Exchange 是你遇到问题时提问的最佳去处。

WordPress 开发是一个广阔的领域，但掌握了以上核心概念和流程，你就可以开始构建自己的主题和插件了，最重要的建议是：多动手实践，从修改现有主题开始，然后尝试创建一个简单的插件，逐步挑战更复杂的项目，祝你开发愉快！

WordPress开发教程该怎么学？

WordPress 开发完整指南

第一部分：入门准备

知识基础

开发环境

安装 WordPress

第二部分：核心概念

钩子 - Hooks

The Loop (WordPress 循环)

模板层次结构

模板标签

第三部分：主题开发

创建主题文件夹和基本文件

编写 style.css

编写 index.php

使用 functions.php 添加功能

创建其他模板文件

第四部分：插件开发

创建插件文件夹和基本文件

编写插件头部信息

编写插件功能

创建设置页面

第五部分：进阶与最佳实践

安全性

性能优化

调试

代码规范

第六部分：学习资源

相关推荐

男士瑜伽入门，哪些基本动作必学？

编写 `style.css`

编写 `index.php`

使用 `functions.php` 添加功能