在 WordPress 中接入 Codestar Framework 设置面板

在 WordPress 中接入 Codestar Framework 设置面板

Codestar Framework 可以用来为 WordPress 主题和插件创建后台设置面板。接入时先加载框架,再加载自己的设置文件。下面保留文件结构、官方示例接入和自定义设置文件两种写法。

文件目录

把框架放进主题目录前,先了解各目录的作用:

codestar-framework/
├── assets/                 # 后台界面资源
├── classes/                # 核心类
├── fields/                 # 设置字段实现
├── functions/              # 框架函数
├── languages/              # 翻译文件
├── samples/                # 官方设置示例
├── views/                  # 框架后台视图
├── codestar-framework.php  # 框架入口
└── index.php               # 随发行包保留

展开常用资源目录

样式、脚本和语言文件的层级大致如下,具体文件以所用发行包为准:

codestar-framework/
├── assets/
│   ├── css/
│   ├── images/
│   └── js/
├── classes/
├── fields/
├── functions/
├── languages/
│   ├── zh_CN.mo
│   ├── zh_CN.po
│   ├── es_ES.mo
│   └── es_ES.po
├── samples/                # 采用官方示例时会引用这里的文件
├── views/                  # 保留框架视图及其依赖
├── codestar-framework.php
└── index.php

这些目录不是一份可直接裁剪的白名单。views 包含框架后台视图,samples 在使用官方演示配置时也会被引用;不能把未在简表中列出的文件一律删除。接入时保留完整发行包,若要精简,需要逐项核对当前版本的依赖。

使用官方示例设置

将完整的 codestar-framework 文件夹放入当前主题目录,在主题的 functions.php 中加入下面的引用。已有 PHP 开始标签的文件,只粘贴标签之后的语句,不要重复添加 <?php。

<?php
//引用你主题目录[/codestar-framework]下的一个php文件
require_once get_theme_file_path('/codestar-framework/codestar-framework.php');
//引用你主题目录[/codestar-framework/samples]下的一个php文件
//引用你的主题设置文件
require_once get_theme_file_path('/codestar-framework/samples/admin-options.php');

get_theme_file_path() 返回主题内文件的磁盘路径。加载框架后,再加载 samples/admin-options.php,后台便会出现演示设置面板。此写法要求发行包中确实存在该示例文件。

Codestar Framework 官方演示设置面板

使用自己的设置文件

在 codestar-framework 目录内新建 admin-settings 文件夹,再创建 admin-home-settings.php。名称可以自行调整,但后面的引用路径必须保持一致。

在新建的 PHP 文件中填写以下配置:它会创建“主题设置”菜单,并分别在两个分区中放入一个文本字段和一个多行文本字段。

<?php
// Control core classes for avoid errors
if( class_exists( 'CSF' ) ) {

  //
  // Set a unique slug-like ID
  $prefix = 'my_framework';

  //
  // Create options
  CSF::createOptions( $prefix, array(
    'menu_title' => '主题设置',
    'menu_slug'  => 'my-framework',
  ) );

  //
  // Create a section
  CSF::createSection( $prefix, array(
    'title'  => 'Tab Title 1',
    'fields' => array(

      //
      // A text field
      array(
        'id'    => 'opt-text',
        'type'  => 'text',
        'title' => 'Simple Text',
      ),

    )
  ) );

  //
  // Create a section
  CSF::createSection( $prefix, array(
    'title'  => 'Tab Title 2',
    'fields' => array(

      // A textarea field
      array(
        'id'    => 'opt-textarea',
        'type'  => 'textarea',
        'title' => 'Simple Textarea',
      ),

    )
  ) );

}

然后在主题的 functions.php 中使用以下引用。该写法替代上面的官方演示配置引用,两套配置不要为了接入同一个设置页而重复叠加。

<?php
//引用你主题目录[/codestar-framework]下的一个php文件
require_once get_theme_file_path('/codestar-framework/codestar-framework.php');
//引用你主题目录[/codestar-framework/admin-settings]下的一个php文件
//引用你的主题设置文件
require_once get_theme_file_path('/codestar-framework/admin-settings/admin-home-settings.php');
包含 Tab Title 1 和 Tab Title 2 的自定义设置面板

加载后即可在后台看到自定义设置入口。继续添加选项时,沿用分区和字段结构,为不同配置使用唯一的 $prefix 与字段 ID。

项目与许可

框架和标准设置示例属于 Codestar Framework 项目。Copyright 2015–2022 Codestar。项目采用 GPL-2.0 许可,代码复用时保留软件的版权及许可声明。示例沿用上游 Quick Start 的结构,菜单名称改为中文。

官方仓库与 Quick Start · 完整 GPL-2.0 许可证

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容