WordPress管理界面开发入门：基于Calypso的Hello World实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00034/article/details/148392798

WordPress管理界面开发入门：基于Calypso的Hello World实现

wp-calypso The JavaScript and API powered WordPress.com 项目地址: https://gitcode.com/gh_mirrors/wp/wp-calypso

前言

对于想要深入了解WordPress管理界面开发的开发者来说，Calypso项目提供了一个绝佳的学习平台。本文将手把手教你如何在Calypso中创建一个简单的"Hello World"功能模块，通过这个实践过程，你将掌握Calypso项目的基本架构和开发流程。

环境准备

在开始之前，请确保你已经完成以下准备工作：

本地开发环境已配置完成
项目依赖已全部安装
开发服务器可以正常启动
你已拥有至少一个WordPress站点并完成登录

创建新功能模块

在Calypso中，功能模块通常被组织为"节(Section)"，每个节代表应用中的一个主要功能区域。创建新节需要完成以下五个步骤：

1. 启用功能开关

首先需要在开发配置中启用新功能：

// config/development.json
{
  "features": {
    "hello-world": true
  }
}

功能开关(Feature Flag)是Calypso中常用的技术，它允许我们在不同环境中灵活控制功能的可见性，非常适合渐进式开发和A/B测试。

2. 创建目录结构

在client/my-sites目录下创建新节的文件夹：

mkdir client/my-sites/hello-world

这种组织方式将我们的新功能归类到"我的站点"大分类下，保持了项目结构的清晰性。

3. 实现控制器

控制器负责处理路由逻辑，创建控制器文件：

touch client/my-sites/hello-world/controller.js

基础控制器实现如下：

export const helloWorld = (context, next) => {
  console.log('Hello, world?');
  next();
};

这里的context对象包含了请求上下文信息，next函数用于继续处理流程。

4. 配置路由

路由配置是新节的核心，创建入口文件：

touch client/my-sites/hello-world/index.js

路由配置示例：

import { isEnabled } from '@automattic/calypso-config';
import page from '@automattic/calypso-router';
import { makeLayout, render as clientRender } from 'calypso/controller';
import { navigation, siteSelection } from 'calypso/my-sites/controller';
import { helloWorld } from './controller';

export default () => {
  if (isEnabled('hello-world')) {
    page('/hello-world/:site?', siteSelection, navigation, helloWorld, makeLayout, clientRender);
  } else {
    page.redirect('/');
  }
};

路由配置中几个关键点：

:site?表示可选站点参数
siteSelection处理站点选择逻辑
navigation添加侧边栏导航
makeLayout和clientRender完成页面渲染

5. 注册新节

最后在client/sections.js中注册新节：

const sections = [
  // ...其他节配置
  {
    name: 'hello-world',
    paths: ['/hello-world'],
    module: 'calypso/my-sites/hello-world',
  }
];

实现视图层

完成基础路由后，我们需要创建实际的页面视图。

1. 创建React组件

创建主视图文件：

touch client/my-sites/hello-world/main.jsx

基础组件实现：

import { Component } from 'react';
import Main from 'calypso/components/main';
import './style.scss';

export default class HelloWorld extends Component {
  render() {
    return (
      <Main className="hello-world">
        <h1 className="hello-world__title">Hello, World!</h1>
      </Main>
    );
  }
}

2. 添加样式

创建样式文件：

touch client/my-sites/hello-world/style.scss

样式定义示例：

.hello-world {
  background-color: #fafafa;
}

.hello-world__title {
  color: #37a000;
  font-size: 3rem;
}

3. 连接控制器

更新控制器以使用新组件：

import HelloWorld from 'calypso/my-sites/hello-world/main';

export const helloWorld = (context, next) => {
  context.primary = <HelloWorld />;
  next();
};