wordpress主题管理面板开发之灵狐框架使用教程

发表评论

A+

所属分类：工具

灵狐框架快速创建wordpress管理后台教程

开始之前先介绍下灵狐框架，

灵狐框架是国内原创开发的一个基于wordpress的主题选项框架，主要功能是为wordpress后台提供一个主题管理的面板，开发者只需要简单的把框架集成到主题，即可使用框架提供的简短代码，快速实现管理面板的开发。

目前灵狐框架已经支持的字段包括：

文本框（text）：用于输入单行文本。
文本区域（textarea）：用于输入多行文本。
开关（switch）：提供开/关的选择。
数字输入框（number）：用于输入数字，可设置最小值、最大值和步长。
媒体上传（media）：支持上传单个图片，并显示预览。
颜色选择器（color）：方便选择颜色。
图片集上传（gallery）：支持上传多个图片，并显示预览。
重复器（repeater）：可以重复添加一组字段。
字段组（group）：将多个字段组合在一起。
日期选择器（date）：用于选择日期。
手风琴（accordion）：将字段分组显示在可折叠的面板中。
富文本编辑器（rich_text_editor）：提供丰富的文本编辑功能。
字体选择器（font_manager）：用于选择字体。

等常用的字段，并且更多字段还在持续开发当中，未来灵狐框架将会是国内最完善和最强大的wordpress选项开发框架。

同时已经集成了图标库和字体库。还有一些经常用到的小功能：

菜单管理自定义字段：可以为菜单项目添加自定义字段。
元框：为文章等内容类型添加自定义元数据。
分类字段：为分类添加自定义字段。
用户字段：为用户添加自定义字段。
小部件：创建自定义小部件。
REST API：支持通过 REST API 访问和管理选项。

更多的介绍请到灵狐框架官网了解和。

好了，现在来说说，如何使用灵狐框架进行wordpress主题开发

首先，你需要在你的主题目录新建一个主题，包括：
style.css
index.php
header.php
footer.php
更多其他页面

如果你觉得手动创建新的主题太麻烦了，你还可以快速创建一个已经包含了大部分基础功能的主题，就是使用灵狐框架官方提供的一个主题生成器工具。

用这个主题生成器只需要输入你的主题名称，主题 Slug，作者，等信息，点击生成主题按钮，即可生成一个已经包含了大部分基础功能的主题包，你不需要从零开始。

生成的主题目录和文件如下图：

你只需要在这个基础上进行定制化开发即可，当然，更多的功能在开发中，未来你不需要自己开发主题，直接使用我们的主题生成器，即可个性化的生成你自己的主题。

把生成的主题解压放到你的主题目录里面。

好了，现在已经有了一个新主题，接下来就进行后台的管理面板开发了。

第一步

现在到灵狐框架官网，把灵狐框架下载下来，解压放到你刚生成的主题目录里面，可以放在主题根目录，也可以放在inc目录，根据你自己喜欢。引入灵狐框架时，需要主要你的文件路径即可。

第二步：引入灵狐框架

复制下面代码添加到主题目录的functions.php文件里面，页可以添加到任何一个你自己创建的设置文件，配置文件里，但是，你需要在functions.php里面引入这个文件，具体看你自己的需要安排，我这里放在inc目录

// 引入灵狐框架
require_once( get_template_directory() . '/inc/fox-framework/fox-framework.php' );

现在你可以进行开发了。

第三步：开发后台管理页面

3-1、创建主题管理选项

复制下面代码添加到上面引入灵狐框架代码的下方

// 这句的意思是开始渲染框架的管理面板
if (class_exists('Fox_Framework')) {
    define('THEME_OPTIONS', 'fox_theme_options');
    // 这里是你要添加的代码，所有的开发代码都在大括号之间添加
}

3-2、先创建一个管理菜单

直接把上面的代码复制过来，如下：

if (class_exists('Fox_Framework')) {
    define('THEME_OPTIONS', 'fox_theme_options');
    // 这里是你要添加的代码，所有的开发代码都在大括号之间添加
    // 注册 "主题设置" 菜单
    add_action('admin_menu', function() {
        add_menu_page(
            '主题设置',   // 这里是在浏览器标签页显示的名称
            '灵狐主题设置',   // WordPress 左侧菜单名称
            'manage_options',
            THEME_OPTIONS,
            array('Fox_Admin', 'render_admin_page'),
            'dashicons-admin-generic',
            59 // 这里是在左侧菜单的位置，数字越小越靠前
        );
    });    
}

名称和位置都可以随便修改，根据你自己主题的名称填写。这样在后台就有一个管理菜单了，如下图：

但是现在你点击主题设置，里面是空的，因为还没有内容，你需要进一步开发字段。

第四步：注册主题设置的菜单和字段

灵狐框架的管理面板特点是，左侧是菜单，右侧是字段内容。在开始注册菜单和字段之前，需要先确保加载js和css文件，以及媒体库可用。代码如下：

// 确保 WordPress 媒体上传功能可用
function fox_theme_enqueue_admin_scripts( $hook) { // 只在后台加载，不影响前台 if ($ hook === 'toplevel_page_fox_theme_options') { // 仅在 "主题设置" 页面
        wp_enqueue_media(); // 关键代码，加载 WordPress 媒体管理器
        wp_enqueue_script('fox-upload-js', get_template_directory_uri() . '/fox-framework/assets/upload.js', array('jquery'), '1.0.0', true);
        wp_enqueue_style('fox-admin-css', get_template_directory_uri() . '/fox-framework/assets/admin.css');
    }
}
add_action('admin_enqueue_scripts', 'fox_theme_enqueue_admin_scripts');

以上代码添加到functions.php里面，引入灵狐框架之前，之后都可以，注意不要添加到大括号里面。

4-1、创建一个“基本设置”菜单

复制下面代码，添加到主题设置菜单下面即可

    // 注册一个管理页面设置菜单
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'page_title' => '我的主题设置', // 管理页面标题
        'title'  => '基本设置',         // 顶级菜单名称，名称根据需要随便取

    ));

这样在管理后天就有一个基础设置了，如下图：

4-2、注册文本字段，注册一个网站欢迎语填写框

接着我们在基础设置里面注册需要的字段，比如注册一个网站单行文本字段，用来填写网站顶部左上角的欢迎语，非常简单，直接在刚注册的基础设置菜单下面添加一个字段函数 'fields' => array()即可，所有基础设置里面需要的字段都在这个()里面注册，代码如下：

    // 注册一个管理页面设置菜单
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'page_title' => '我的主题设置', // 管理页面标题
        'title'  => '基本设置',         // 顶级菜单名称
        'fields' => array(
            array(
                'id'   => 'site_Welcome',  // 字段id名
                'type'  => 'text',      // 字段类型，text表示单行文本框，textarea多行文本
                'title'  => '网站欢迎语', // 字段名称，显示在管理面板
                'desc'    => '显示在左上角的欢迎语。',
                'default'  => '请输入欢迎语',              
        )
    ));

最终效果如下图：

4-3、注册一个媒体字段，网站logo

现在来注册一个网站logo，用来上传logo图片，很简单，只需要把刚才的网站欢迎语复制，然后在下面添加一个字段即可。

    // 注册一个管理页面设置菜单
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'page_title' => '我的主题设置', // 管理页面标题
        'title'  => '基本设置',         // 顶级菜单名称
        'fields' => array(
            array(
                'id'   => 'site_Welcome',  // 字段id名
                'type'  => 'text',      // 字段类型，text表示单行文本框，textarea多行文本
                'title'  => '网站欢迎语', // 字段名称，显示在管理面板
                'desc'    => '显示在左上角的欢迎语。',
                'default'  => '请输入欢迎语',              
        )
            array(
                'id'   => 'site_logo',  
                'type'  => 'media',      
                'title'  => '网站logo',            
        )        
    ));

不同的是，你需要把'id' => 'site_Welcome',修改下'id' => 'site_logo',
把'type' => 'text',修改为'type' => 'media',
media是灵狐框架的媒体字段，关于字段名称，你可以在灵狐框架官网查询

'title' => '网站欢迎语',修改为：'title' => '网站logo',
'desc'，'default'说明文字和默认文字根据你自己的需要，如果不需要注册时可以不用。

最终效果如图：

为了让你理解，我们在来注册一个多行文本字段，来填写网站公告

            array(
                'id'   => 'site_notice',  // 字段id名
                'type'  => 'textarea',      // 字段类型，text表示单行文本框，textarea多行文本
                'title'  => '网站公告', // 字段名称，显示在管理面板
                'default'  => '请输入公告内容',                 
        )

最终效果：

如果像用富文本，只需要把'type' => 'textarea',修改为：'type' => 'rich_text_editor',看效果

好了，用什么字段，你自己去注册吧。接下来我们再注册一个菜单，SEO设置

这里我们需要在基础设置的外面添加一个“seo设置菜单”

第五步：注册“SEO设置”菜单

到这里相信你已经会使用灵狐框架了，这里只需要重复前面的步骤即可，这样必须要在基础设置的外面添加，比如：

    // 注册基础设置菜单
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'page_title' => '我的主题设置', // 管理页面标题
        'title'  => '基本设置',         // 顶级菜单名称，名称根据需要随便取

    )); 
    // 注册SEO设置菜单
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'title'  => 'SEO设置',         // 顶级菜单名称，名称根据需要随便取

    ));

注意： 'page_title' => '我的主题设置', 这句可以不用了，因为在前面已经注册了设置面板的标题了。

接下来就是往seo设置菜单下面添加需要的字段了，我这里添加：网站seo标题，网站描述，关键词作为演示，直接看最终代码：

<?php

// 确保 WordPress 媒体上传功能可用
function fox_theme_enqueue_admin_scripts( $hook) { // 只在后台加载，不影响前台 if ($ hook === 'toplevel_page_fox_theme_options') { // 仅在 "主题设置" 页面
        wp_enqueue_media(); // 关键代码，加载 WordPress 媒体管理器
        wp_enqueue_script('fox-upload-js', get_template_directory_uri() . '/inc/fox-framework/assets/admin.js', array('jquery'), '1.0.0', true);
        wp_enqueue_style('fox-admin-css', get_template_directory_uri() . '/inc/fox-framework/assets/admin.css');
    }
}
add_action('admin_enqueue_scripts', 'fox_theme_enqueue_admin_scripts');

// 引入灵狐框架
require_once( get_template_directory() . '/inc/fox-framework/fox-framework.php' );

// 这句的意思是开始渲染框架的管理面板
if (class_exists('Fox_Framework')) {
    define('THEME_OPTIONS', 'fox_theme_options');
    // 这里是你要添加的代码，所有的开发代码都在大括号之间添加

    // 注册 "主题设置" 菜单
    add_action('admin_menu', function() {
        add_menu_page(
            '主题设置',   // 这里是在浏览器标签页显示的名称
            '灵狐主题设置',   // WordPress 左侧菜单名称
            'manage_options',
            THEME_OPTIONS,
            array('Fox_Admin', 'render_admin_page'),
            'dashicons-admin-generic',
            59 // 这里是在左侧菜单的位置，数字越小越靠前
        );
    });  

    // 注册一个管理页面设置菜单
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'page_title' => '我的主题设置', // 管理页面标题
        'title'  => '基本设置',         // 顶级菜单名称，名称根据需要随便取
        'fields' => array(
            array(
                'id'   => 'site_Welcome',  // 字段id名
                'type'  => 'text',      // 字段类型，text表示单行文本框，textarea多行文本
                'title'  => '网站欢迎语', // 字段名称，显示在管理面板
                'desc'    => '显示在左上角的欢迎语。',
                'default'  => '请输入欢迎语',              
            ),
            array(
                'id'   => 'site_logo',  
                'type'  => 'media',      
                'title'  => '网站logo',            
            ),
            array(
                'id'   => 'site_notice',  // 字段id名
                'type'  => 'rich_text_editor',      // 字段类型，text表示单行文本框，textarea多行文本
                'title'  => '网站公告', // 字段名称，显示在管理面板
                'default'  => '请输入公告内容',                 
            )
        )
    ));  
    // SEO设置
    Fox_Framework::createSection(THEME_OPTIONS, array(
        'title'  => 'SEO设置',
        'fields' => array(
            array(
                'id'   => 'site_name',  // 字段id名
                'type'  => 'text',      // 字段类型，text表示单行文本框，textarea多行文本
                'title'  => '网站名称', // 字段名称，显示在管理面板
            ),
            array(
                'id'   => 'site_keyword', 
                'type'  => 'text',
                'title'  => '网站关键词',
                'desc'    => '多个关键词请用英文逗号分割。',
                'default'  => '关键词1,关键词2,关键词3,关键词4',
            ),
            array(
                'id'   => 'site_describe',
                'type'  => 'textarea',
                'title'  => '网站描述',
            ),
        ),

    ));                   

}

最终后台效果：

好了，现在后台管理页面和字段都有了，接下来就是怎么在前端模板中显示这些字段了。

第六步：前端模板调用后台字段内容

我将用网站logo，seo设置里面的标题，描述，关键词来演示。

首先要在前端模板中读取后台的字段数据，把下面代码添加到模板文件的最上面，例如header.php里面

<?php
//读取数据表
global  $fox_framework_options; // 读取网站logo字段$ site_logo = $fox_framework_options['site_logo'] ?? '';
?>

然后在需要调用网站logo的地方使用：

来获取后台的logo图片地址，完整代码如下：

<img src="<?php echo esc_url( $site_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>">

调用seo标题，关键词，描述

<?php
global  $fox_framework_options; // 读取网站logo字段$ site_logo =  $fox_framework_options['site_logo'] ?? ''; // 读取seo设置的网站名称，关键词，描述$ site_name =  $fox_framework_options['site_name'] ?? '';$ site_keyword =  $fox_framework_options['site_keyword'] ?? '';$ site_describe = $fox_framework_options['site_describe'] ?? '';
?>

在前端模板中调用seo设置

        <title><?php echo esc_html( $site_name ?? ''); ?></title> <meta name="keywords" content="<?php echo esc_html($ site_keyword ?? ''); ?>">
        <meta name="description" content="<?php echo esc_html($site_describe ?? ''); ?>">

其他字段的调用方法一样，但是灵狐框架还有很多高级的用法，在后面的文章中再分享。

比如使用灵狐框架的字段依赖功能，在后台可以打开和关闭公告等，更多教程请关注灵狐框架官方网站或者公众号。

今天的分享就到这里