close

WP超强免费后台框架kirki详细解说

WordPress后台框架有很多,如codestar之类的。虽然说本身theme option和metabox 也不是很难,但是用框架的话开发会迅速很多。

我们一个博客主题的自带后台框架开发功能非常全面,下次我们会进行详细解释,本次我们来介绍wordpress一个功能全面的customize api框架,也叫toolkit。官网是https://kirki.org/

kirki简化了wp的customizer api, 并自带30多个控制器。

要使用kirki,首先去官网上下载。目前kirki没有收费版,点击免费版,随便填写注册信息即可。

集成主题方式

Kirki有二种方式可以集成到你的主题当中。一种是作为插件,一种是与主题并入。

如果你用tgmpa或者merlinwp来创建引导页的话,你可以把kirki的插件安装到推荐必须的插件里面去。如果你没用上面的脚本的话,你可以把这段脚本添加到你的网站中来来要求主题强制安装kirki.

脚本用法:从这段脚本复制出来然后创建inc/class-kirki-installer-section.php,然后在functions.php里面加上这段:

include_once get_theme_file_path( 'inc/class-kirki-installer-section.php' );

如何并入到你的主题当中

把kirki文件夹安装到你的主题文件夹当中,然后在functions.php里面引入kirki文件夹下面的插件主要文件kirki.php就可以了。这种方式的话缺少了灵活性。

接下来我们要进行kirki的配置。

当你创建了一个项目之后,你第一件事情要做的就是创建一个配置文件。配置文件允许每一个项目可以使用不一样的设置就像标识符一样。属于配置的字段将继承配置属性。

Kirki::add_config( $config_id, $args );

例子:

Kirki::add_config( 'theme_config_id', array(
	'capability'    => 'edit_theme_options',
	'option_type'   => 'theme_mod',
) );

字段解释:

Arguments

  • capability: any valid WordPress capability. See the WordPress Codex for details.
  • option_type: can be either option or theme_mod. We recommend using theme_mod. If however you choose to use option you need to understand how your data will be saved, and in most cases you will also have to use the option_name argument as well.
  • option_name: If you’re using options instead of theme mods then you can use this to specify an option name. All your fields will then be saved as an array under that option in the WordPress database.
  • disable_output: Set to true if you don’t want Kirki to automatically output any CSS for your config (defaults to false).

创建属于这个配置的字段的方式:

Kirki::add_field( 'theme_config_id', $field_args );

创建panel和section的方式

panel是section的容器,可以群组section,点击这里查看customizer api的介绍。

用kirki创建panel的方式:

Kirki::add_panel( 'panel_id', array(
    'priority'    => 10,
    'title'       => esc_html__( 'My Panel', 'kirki' ),
    'description' => esc_html__( 'My panel description', 'kirki' ),
) );

Kirki::add_panel()method函数跟customizer api的add panel一样的时态。

Section是controls的wrapper,用来群组各类controls. 所有的字段一定要属于这个section.

Kirki::add_section( 'section_id', array(
    'title'          => esc_html__( 'My Section', 'kirki' ),
    'description'    => esc_html__( 'My section description.', 'kirki' ),
    'panel'          => 'panel_id',
    'priority'       => 160,
) );

Kirki::add_section()method函数跟customizer api里面是一样的时态。

Controls

kirki目前提供了30多个controls可以进行创建,是以add field形式。详细点击这里。https://kirki.org/docs/controls/

Kirki创建实例

将kirki文件夹放到framework下面,然后再创建一个theme-customizer文件夹,在里面创建一个options-panel.php的文件。在functions.php里面引入kirki.php文件还有options-panel.php文件。在theme-customizer文件夹下创建各个部分的自定义样式的文件夹,然后再各个文件夹里创建自定义文件。在options-panel里引入各个自定义文件。在framework下面创建customize_options.php文件,放自定义的class. 然后在functions.php文件里引入。

举例

Mayosis_Option::add_config( 'mayo_config', array(
        'option_name'   => 'theme_options', 
        'capability'    => 'edit_theme_options'
    ) );


Mayosis_Option::add_panel( 'header', array(
	'title'       => __( 'Header', 'mayosis' ),
	'description' => __( 'Change Site Header Options here.', 'mayosis' ),
	'priority' => '1',
) );

Mayosis_Option::add_section( 'header-content-main', array(
    'title' => __( 'Layout', 'mayosis-admin' ),
    'panel' => 'header',
    'priority' => '1',
    'description' => __( 'Whole header option here! please check them', 'mayosis-admin' ),
) );

Mayosis_Option::add_field( 'mayo_config', array(
    'type'        => 'radio-image',
    'settings'    => 'header_layout_type',
    'label'       => __( 'Header layout', 'mayosis' ),
    'section'     => 'header-content-main',
    'description'     => 'These are header layouts, we have 2 type of header layouts. You can use standard mode or sidebar mode. After select the mode use header builder to re-aarange the header content',
    'default'     => 'one',
    'choices'     => array(
            		'one'   => get_template_directory_uri() . '/images/Header-1.png',
            		'two'  => get_template_directory_uri() . '/images/Header-3.png',
            	),
) );

Mayosis_Option::add_field( 'mayo_config', array(
    'type'        => 'radio-buttonset',
	'settings'    => 'header_transparency',
	'label'       => __( 'Header Type', 'mayosis' ),
	'section'     => 'header-content-main',
	'default'     => 'normal',
	'description'     => 'Standard work as a normal header.If you want to create transparent header then you should choose the Stacked mode after that down the opacity of header color from every header part.',
	'choices'     => array(
		'normal'   => esc_attr__( 'Standard', 'mayosis' ),
		'transparent' => esc_attr__( 'Stacked', 'mayosis' ),
	),
));

1、将kirki文件夹复制到你自定义主题的文件夹下,然后在functions.php里面引入 kirki/kirki.php。

2、然后在inc文件夹下创建属于自定义class的文件,例如theme-customizer.php。 添加以下代码:并在functions.php里面引入


// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

/**
 * This is a wrapper class for Kirki.
 * If the Kirki plugin is installed, then all CSS & Google fonts
 * will be handled by the plugin.
 * In case the plugin is not installed, this acts as a fallback
 * ensuring that all CSS & fonts still work.
 * It does not handle the customizer options, simply the frontend CSS.
 */
class Abt_Option {

  /**
   * @static
   * @access protected
   * @var array
   */
  protected static $config = array();

  /**
   * @static
   * @access protected
   * @var array
   */
  protected static $fields = array();

  /**
   * The class constructor
   */
  public function __construct() {
    // If Kirki exists then there's no reason to procedd
    if ( class_exists( 'Kirki' ) ) {
      return;
    }
  }

  /**
   * Create a new panel
   *
   * @param   string      the ID for this panel
   * @param   array       the panel arguments
   */
  public static function add_panel( $id = '', $args = array() ) {


    if ( class_exists( 'Kirki' ) ) {
      Kirki::add_panel( $id, $args );
    }
    // If Kirki does not exist then there's no reason to add any panels.
  }

  /**
   * Create a new section
   *
   * @param   string      the ID for this section
   * @param   array       the section arguments
   */
  public static function add_section( $id, $args ) {

    if ( class_exists( 'Kirki' ) ) {
      Kirki::add_section( $id, $args );
    }
    // If Kirki does not exist then there's no reason to add any sections.
  }


  /**
   * Sets the configuration options.
   *
   * @param    string    $config_id    The configuration ID
   * @param    array     $args         The configuration arguments
   */
  public static function add_config( $config_id, $args = array() ) {
    if ( class_exists( 'Kirki' ) ) {
      Kirki::add_config( $config_id, $args );
      return;
    }
  }

  /**
   * Create a new field
   *
   * @param    string    $config_id    The configuration ID
   * @param    array     $args         The field's arguments
   */
  public static function add_field( $config_id, $args ) {
    if($config_id == '') $config_id = $args['settings'];
    
    // if Kirki exists, use it.
    if ( class_exists( 'Kirki' ) ) {
      Kirki::add_field( $config_id, $args );
      return;
    }
  }
}
new Abt_Option();

3、然后创建customizer文件夹,名字可以自定义,存放每个部位的自定义文件。如header、style、fonts、css等。

4、然后创建options-panel.php文件,导入你创建的各个部分的自定义样式php文件,最后在functions.php里面导入options-panel.php文件。

section和control创建实例:

Abt_Option::add_panel( 'other_options_extra', array(
  'title'       => __( 'Other Options', 'Abt' ),
  'description' => __( 'Abt Other Options.', 'Abt' ),
  'priority' => '9',
) );

Abt_Option::add_section( 'social_options_all', array(
  'title'       => __( 'Social Options', 'Abt' ),
  'panel'       => 'other_options_extra',

) );

Abt_Option::add_section( 'disable_extra_features', array(
  'title'       => __( 'Advanced Features', 'Abt' ),
  'panel'       => 'other_options_extra',

) );

Abt_Option::add_section( 'sticky_notification_bar', array(
  'title'       => __( 'Sticky Notification Bar', 'Abt' ),
  'panel'       => 'other_options_extra',

) );



Abt_Option::add_field( 'mayo_config',  array(
  'type'     => 'link',
  'settings' => 'facebook_url',
  'label'    => __( 'Facebook URL', 'Abt' ),
  'section'  => 'social_options_all',
  'default'  => 'https://facebook.com/',
));

5、如果要去除掉原先存在的theme_mod,将下面的代码粘贴到functions.php就可以:

function mayosis_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here

    $wp_customize->remove_section( 'title_tagline');
    $wp_customize->remove_section( 'colors');
    $wp_customize->remove_section( 'header_image');
    $wp_customize->remove_section( 'background_image');
    $wp_customize->remove_section( 'static_front_page');


}
add_action( 'customize_register', 'mayosis_customize_register',50 );


/**
 * Removes the core 'Menus' panel from the Customizer.
 *
 * @param array $components Core Customizer components list.
 * @return array (Maybe) modified components list.
 */
function mayosis_remove_nav_menus_panel( $components ) {
    $i = array_search( 'nav_menus', $components );
    if ( false !== $i ) {
        unset( $components[ $i ] );
    }
    return $components;
}
add_filter( 'customize_loaded_components', 'mayosis_remove_nav_menus_panel' );
Share :