Codestar Framework

介绍

⚡️ Codestar Framework - 简约实用的wordpress主题选项框架

用于主题和插件的简单轻量级WordPress选项框架。内置具有大量自定义字段和大量选项的面向对象编程范例。允许您将自定义管理，元框，分类法和自定义设置引入所有页面，帖子和类别。它是高度现代和先进的框架。

Codestar Framework 是一款使用率较高的 WordPress 主题选项框架，自从版本升级到2.0后，划分为免费及高级两个版本，免费版只有主题选项框架功能，无自定义、小工具、菜单设置选项等，基本足够用了。

如果想使用早期1.0开源免费版，目前不太好找，这里分享一个1.02版的，应该是1.0的终极版本了。

安装

1、下载Codestar Framework框架（官方）：https://github.com/Codestar/codestar-framework/releases

国内（1.02版集成到主题）扫码搜索Codestar Framework

2、解压后，把inc文件夹复制到自己主题的根目录

3、在自己主题的functions.php文件第一行<?php下面添加以下代码：

require_once get_theme_file_path() .'/inc/cs-framework.php';

插件内使用

require_once plugin_dir_path( __FILE__ ) . 'inc/cs-framework.php';

添加完代码后，在后台——外观下面就会出现“主题设置”选项，点击就可以进入主题设置页面。

✅配置

注意：更多配置详情可参考帮助文件https://t.uip.top/cfk/index.html

修改菜单名称和slug等

配置文件inc\config\framework.config.php

$settings           = array(
  'menu_title'      => '主题设置', //菜单上显示的名称
  'menu_type'       => 'menu', // menu, submenu, options, theme, etc.
  'menu_slug'       => 'tsxxc-sz', //地址栏显示的url
  'ajax_save'       => false, //无刷新保存
  'show_reset_all'  => false, //所有设置默认全部展开展示
  'framework_title' => '主题设置 <small>by tsxxc</small>', //右侧顶部文字设置
);

配置文件inc\cs-framework.php

//这些代码片段是用于配置和定义 Codestar Framework 的各个功能模块的启用状态。
    defined( 'CS_ACTIVE_FRAMEWORK' )   or  define( 'CS_ACTIVE_FRAMEWORK',   true  );//设置为true表示启用Codestar Framework的主框架功能。
    defined( 'CS_ACTIVE_METABOX'   )   or  define( 'CS_ACTIVE_METABOX',     true  );//设置为true表示启用自定义文章类型的元框（Metabox）功能。包含详情页和页面底部自定义字段设置
    defined( 'CS_ACTIVE_TAXONOMY'   )  or  define( 'CS_ACTIVE_TAXONOMY',    true  );//设置为true表示启用自定义分类法（Taxonomy）功能。
    defined( 'CS_ACTIVE_SHORTCODE' )   or  define( 'CS_ACTIVE_SHORTCODE',   false  );//设置为true表示启用短代码（Shortcode）功能。发布文章时的短代码按钮.
    defined( 'CS_ACTIVE_CUSTOMIZE' )   or  define( 'CS_ACTIVE_CUSTOMIZE',   true  );//设置为true表示启用自定义主题定制（Theme Customize）功能。
    defined( 'CS_ACTIVE_LIGHT_THEME' ) or  define( 'CS_ACTIVE_LIGHT_THEME', false );//设置为true表示启用轻量级主题模式。

配置文件inc\cs-framework-path.php

defined( 'CS_VERSION' )    or  define( 'CS_VERSION',    '1.0.2' ); //设置版本号
defined( 'CS_OPTION' )     or  define( 'CS_OPTION',     '_cs_options' ); //用于保存主题或插件选项的数据库选项名称，用这个常量来指定选项在数据库中的存储名称
defined( 'CS_CUSTOMIZE' )  or  define( 'CS_CUSTOMIZE',  '_cs_customize_options' ); //与CS_OPTION类似，这个常量用于指定自定义选项在数据库中的存储名称

注意：如果插件和主题都使用该框架那么需要修改数据库存储字段名称

选项配置

配置文件inc\config\framework.config.php

$options[]   = array(
  'name'     => 'quanjupeizhi',   //唯一id
  'title'    => '全局配置',        //菜单显示名称
  'icon'     => 'fa fa-gratipay',   //菜单的图标id
  'fields'   => array(
       //各类选项
       array(   
      'id'      => 'wangzhanguanjianci',
      'type'    => 'text',
      'title'   => '网站关键词',  
      'desc'    => 'ts小陈',
      'default' => '默认文本', // 设置默认值
                        ),
           //各类选项
  )
);

每一个大选项则添加一个$options[]，里边每一个array是选项类型。

type常见字段类型

text: 单行文本输入框，适用于输入简单的文本内容。
textarea: 多行文本输入框，适合输入较长的文本内容，例如描述或说明。
editor: WYSIWYG 编辑器，允许用户输入格式化的文本，类似于 WordPress 编辑器。
image: 图片上传字段，允许用户上传并选择一张图片。
file: 文件上传字段，允许用户上传任意文件。
color: 颜色选择器，允许用户选择颜色，通常以十六进制格式（如 #FFFFFF）返回。
select: 下拉选择框，用户可以从预定义选项中选择一个。
checkbox: 复选框，用户可以选择一个或多个选项。
radio: 单选框，用户可以从多个选项中选择一个。
switch: 开关按钮，用户可以通过切换开关来选择开/关状态。
range: 范围滑块，允许用户选择一个数值范围。
multi_select: 多选下拉框，用户可以从多个选项中选择一个或多个。
date: 日期选择器，用户可以选择一个日期。
time: 时间选择器，用户可以选择一个时间。
datetime: 日期和时间选择器，用户可以选择日期和时间。
upload: 上传字段，用户可以上传文件或媒体。
sortable: 可排序列表，用户可以拖动排序选项。
group: 组合字段，允许用户添加多个字段的组，适合需要重复输入的场景。
accordion: 手风琴式布局，允许用户在多个部分之间切换，适合组织复杂的设置。
tab: 标签式布局，允许用户在不同的选项卡之间切换

修改输出方式

配置文件inc\cs-framework-path.php 这里输出前缀为sc_tsxxc

if ( ! function_exists( 'sc_tsxxc' ) ) {
  function sc_tsxxc( $option_name = '', $default = '' ) {
    $options = apply_filters( 'sc_tsxxc', get_option( CS_OPTION ), $option_name, $default );
    if( ! empty( $option_name ) && ! empty( $options[$option_name] ) ) {
      return $options[$option_name];
    } else {
      return ( ! empty( $default ) ) ? $default : null;
    }
  }
}

调用设置

可以使用以下代码（此处的of_get_option被改成了sc_tsxxc，如有需要请自行修改）：

文本：<?php echo sc_tsxxc( 'text_1' );  ?>
文本区域：<?php echo sc_tsxxc( 'textarea_1' );  ?>
上传并显示连接：<?php echo sc_tsxxc( 'upload_1' );  ?>
按钮型选择器：（开输出1，关为空）<?php echo sc_tsxxc( 'switcher_1' );  ?>
颜色选择器：<?php echo sc_tsxxc( 'color_picker_1' );  ?>
选择框选择器（选中输出1，未选为空）：<?php echo sc_tsxxc( 'checkbox_1' );  ?>
选择框选择器（单选）：<?php echo sc_tsxxc( 'radio_1' );  ?>
下拉框选择器： <?php echo sc_tsxxc( 'select_1' );  ?>，调取的值为array前者字段名称
下拉框选择器（调取的为选中标签id，可用类型有页、帖子、类别、标签、菜单、用户、边栏、角色）： <?php echo sc_tsxxc( 'unique_option_510' );  ?>
输入型数字：<?php echo sc_tsxxc( 'number_1' );  ?>
图像选择（输出为array前者字段名称）：<?php echo sc_tsxxc( 'image_select_1' );  ?>
背景(根据字段输出样式值)：<?php echo sc_tsxxc('background_1')['image'];   ?><?php echo sc_tsxxc('background_1')['position']; ?>
Icon图标：<i class="<?php echo sc_tsxxc( 'icon_1' );  ?>"></i>,需要引入css<br>
组：<?php 
$unique_group_1_array = sc_tsxxc( 'unique_group_1' );
$specific_value = $unique_group_1_array[3]['unique_group_1_switcher'];
echo $specific_value; // 这里应该会输出 12345
?>

注意：要使用echo

文章详情页

1、文章底部自定义字段调用

<?php echo get_post_meta(get_the_ID(), '_custom_post_options', true)['section_4_upload'];?> //调取当前文章的底部自定义字段值
<?php echo get_post_meta(44, '_custom_post_options', true)['section_4_upload'];?>  ////调取指定文章的底部自定义字段值

2、文章底部图片调用（直接显示图片样式）

需要将（inc\config\metabox.config.php）type 改成 image ，upload为选择显示图片链接。

        array(
          'id'    => 'section_4_textarea',
          'type'  => 'image',
          'title' => 'Textarea Field',
        ),

调用代码，以下代码调取结果为图片链接

<?php
// 获取 section_4_upload 字段的附件 ID
$custom_post_options = get_post_meta(get_the_ID(), '_custom_post_options', true);
$attachment_id = $custom_post_options['section_4_upload'];

// 检查是否存在附件 ID
if ( $attachment_id ) {
    // 使用附件 ID 获取图像 URL
    $image_url = wp_get_attachment_url( $attachment_id );
    // 输出图像 URL
    echo $image_url;
} else {
    // 如果没有附件 ID，则输出文章默认缩略图（文章第一张图片）
    echo catch_that_image();
}
?>

✅示例配置

⚡️ 使用介绍中的小陈主题框架

本篇主要介绍小陈主题框架后台各项配置。

选项配置

配置文件inc\config\framework.config.php

$options[]   = array(
  'name'     => 'quanjupeizhi',   //唯一id
  'title'    => '全局配置',        //菜单显示名称
  'icon'     => 'fa fa-gratipay',   //菜单的图标id
  'fields'   => array(
       //各类选项
       array(   
      'id'      => 'wangzhanguanjianci',
      'type'    => 'text',
      'title'   => '网站关键词',      
                        ),
           //各类选项
  )
);

每一个大选项则添加一个$options[]，里边每一个array是选项类型。

调用函数

不带默认值

<?php echo sc_tsxxc( '选项id' );  ?>

带默认值

<?php echo esc_html(sc_tsxxc('text_12')?? '默认值');?>

调取子选项数据

<?php echo esc_html(sc_tsxxc('fieldset_14')['fieldset_14_text'] ?? '');?>

示例选项

调取文字:需使用调取子选项数据，<?php echo esc_html(sc_tsxxc('fieldset_51')['fieldset_51_text'] ?? '');?>

$options[]   = array(
  'name'     => 'shouyepeizhiguanyu',
  'title'    => '首页关于',
  'icon'     => 'fa fa-arrow-right',
  'fields'   => array(
        array(
          'id'        => 'fieldset_51',
          'type'      => 'fieldset',
          'title'     => '创立时间',
          'fields'    => array(
            array(
              'id'    => 'fieldset_51_text',
              'type'  => 'text',
              'title' => '文字',
            ),

文本

使用gallery类型，根据设置的图片id调取图片详情。可适用于轮播图

选项配置

array(
      'id'      => 'wangzhanmiaoshu',
      'type'    => 'text',
      'title'   => '网站描述', 
    ),

前端调用

<?php echo sc_tsxxc( 'wangzhanmiaoshu' );  ?>

多图调用

使用gallery类型，根据设置的图片id调取图片详情。可适用于轮播图

选项配置

array(
          'id'          => 'lunbotu',
          'type'        => 'gallery',
          'title'       => '轮播图设置',
          'add_title'   => '添加图片',
          'edit_title'  => '编辑图片',
          'clear_title' => '删除图片',
        ),

前端调用

<?php 
// 获取画廊数据
$gallery_ids = sc_tsxxc( 'lunbotu' );
if ($gallery_ids) {
    // 获取图片 ID 数组
    $ids = explode(',', $gallery_ids);
    // 循环输出每个图片
    foreach ($ids as $index => $id) {
        // 获取图片 URL
        $image_url = wp_get_attachment_image_url(trim($id), 'full'); // 'full' 可以替换为其他图像尺寸
        // 如果是第一张图片，添加 active 类
        $active_class = ($index === 0) ? 'active' : '';
        ?>
        <div class="item <?php echo esc_attr($active_class); ?>">
            <a href=""><img src="<?php echo esc_url($image_url); ?>">
            </a>
        </div>
        <?php
    }
}
?>

✅ACF

字段组

指定字段输出

直接使用字段密钥输出

the_field('field_67a986a2daac9'); // 直接输出标签组
<?php echo esc_html(get_field('field_67a986a2daac9')); ?>   // 直接输出标签组

文章存在多字段

只输出有内容并且不是数组的字段值，且排除 "产品介绍"

<?php
// 获取当前文章的 ID
$post_id = get_the_ID();
// 获取所有字段对象
$fields = get_field_objects($post_id);
if ($fields) {
    echo '<ul>'; // 开始一个无序列表
    foreach ($fields as $field_key => $field) {
        // 只输出有内容并且不是数组的字段值，且排除 "产品介绍"
        if (!empty($field['value']) && !is_array($field['value']) && $field_key !== '产品介绍') {
            echo '<li>';
            echo '<p>' . esc_html($field_key) . '</p>'; // 输出字段名称
            echo '<span>' . esc_html($field['value']) . '</span>'; // 输出字段值
            echo '</li>';
        }
    }
    echo '</ul>'; // 结束无序列表
} else {
    echo '<p>没有找到任何字段数据。</p>';
}
?>

假设你的字段组中有以下字段名称：field_1 和 field_2。你可以这样做：

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 获取字段组中的字段值
        $field_1 = get_field('field_1'); // 替换为你的字段名称
        $field_2 = get_field('field_2'); // 替换为你的字段名称

        // 检查是否有字段
        echo '<ul class="acf-fields">'; // 使用 <ul> 来输出列表
        if (!empty($field_1)) {
            echo '<li><strong>Field 1:</strong> ' . esc_html($field_1) . '</li>';
        }
        if (!empty($field_2)) {
            echo '<li><strong>Field 2:</strong> ' . esc_html($field_2) . '</li>';
        }
        echo '</ul>';
    endwhile;
endif;
?>

所有字段输出

如果你想获取字段组中所有字段的值，可以使用 get_fields() 函数，它会返回该文章的所有自定义字段。然后你可以遍历这些字段并输出它们：

无内容不输出

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 获取当前文章的所有自定义字段
        $fields = get_fields();
        // 检查是否有字段
        if ($fields && !empty($fields)) {
            echo '<ul class="acf-fields">'; // 使用 <ul> 来输出列表
            foreach ($fields as $field_name => $field_value) {
                // 只输出字段名称和字段值，如果字段值不为空
                if (!empty($field_value)) {
                    echo '<li><strong>' . esc_html($field_name) . ':</strong> ' . esc_html($field_value) . '</li>';
                }
            }
            echo '</ul>';
        }
    endwhile;
endif;
?>

类型为分组

调用方法

<?php echo esc_html(get_field('分组秘钥')['子字段名称']); ?>

注意：子字段名称为设置的字段名称而不是字段的秘钥

画廊字段

调用方法，调取图片rul

<?php
$gallery = get_field('field_67aac2325fc39'); // 替换为您的字段名称
if ($gallery) : ?>
    <?php foreach ($gallery as $image_url) : ?>
           <?php echo esc_url($image_url); ?>  // 图片url
    <?php endforeach; ?>
<?php endif; ?>

✅其他

分类页面包屑

myfunctions中配置，根据实际使用修改custom_breadcrumbs

 <?php  echo custom_breadcrumbs();?>

注意：插件重新启用后会自动重置为默认值