devinsays/customizer-library

该包已被废弃，不再维护。未建议替代包。

自定义器库 - 一款方便与WordPress自定义器一起工作的库。

维护者

详细信息

github.com/devinsays/customizer-library

主页

源代码

问题

安装: 666

依赖: 0

建议者: 0

安全: 0

星星: 263

关注者: 29

分支: 60

开放问题: 17

v1.3.0 2015-02-08 21:34 UTC

GPL-2.0+ 7ae2a41c54593741beb0c2a78fdf2b97928c96a8

wordpresscustomizer

This package is not auto-updated.

Last update: 2019-02-20 18:15:58 UTC

README

一款方便与WordPress自定义器一起工作的库。

关于

自定义器允许WordPress开发者添加主题和插件选项，但它应该更容易使用。这个库抽象了一些复杂性。

开发者不需要直接向 $wp_customize 对象添加选项，只需定义一个控件和部分的数组，并将其传递给 Customizer_Library 类。

要了解实际操作，请参阅 自定义器库演示 主题。

自定义器库根据传递给它的数组向自定义器添加部分、设置和控件。所有选项都默认进行了清理（尽管您仍然可以传递 sanitize_callback）。所有选项也默认保存为 theme_mods（尽管请关注未来的更新以使其更灵活）。

目前只有一个自定义控件（用于文本区域），但随着库的成熟，将会有更多控件。

自定义器库包括创建内联样式和加载Google字体的额外类和辅助函数。这些函数和类由 The Theme Foundry 为其主题 Make 开发，我发现它们在我自己的项目中非常有用。然而，我正在考虑将它们移动到单独的模块中，以便使核心库尽可能专注。欢迎提供反馈。

安装

如果希望能够在git子模块中拉取更改，可以将 自定义器库 包含在您的项目中。要像在您自己的项目中一样包含它，请导航到目录并使用

git submodule add git@github.com:devinsays/customizer-library customizer-library

选项

自定义器库目前支持以下选项

  • 复选框
  • 选择
  • 单选按钮
  • 上传
  • 图片
  • 颜色
  • 文本
  • 网址
  • 范围
  • 文本区域
  • 选择（字体样式）

部分

部分是方便地将控件分组在自定义器中的方法。

自定义器部分可以定义如下

// Example Section

$sections[] = array(
	'id' => 'example', // Required
	'title' => __( 'Example Section', 'textdomain' ), // Required
	'priority' => '30', // Optional
	'description' => 'Example description', // Optional
	'panel' => 'panel_id' // optional, and it requires WP >= 4.0
);

面板

面板是方便地将不同的部分分组在一起的方法。

以下是一个示例，它向面板添加一个部分，并将一个文本选项添加到该部分中

// Panel Example
$panel = 'panel';

$panels[] = array(
	'id' => $panel,
	'title' => __( 'Panel Examples', 'demo' ),
	'priority' => '100'
);

$section = 'panel-section';

$sections[] = array(
	'id' => $section,
	'title' => __( 'Panel Section', 'demo' ),
	'priority' => '10',
	'panel' => $panel
);

$options['example-panel-text'] = array(
	'id' => 'example-panel-text',
	'label'   => __( 'Example Text Input', 'demo' ),
	'section' => $section,
	'type'    => 'text',
);

自定义器库使用核心函数 $wp_customize->add_panel( $id, $args ); 添加面板，并且所有相同的 $args 都可用。请参阅 codex。

文本

$options['example-text'] = array(
	'id' => 'example-text',
	'label'   => __( 'Example Text Input', 'textdomain' ),
	'section' => $section,
	'type'    => 'text',
);

网址

$options['example-url'] = array(
	'id' => 'example-url',
	'label'   => __( 'Example URL Input', 'textdomain' ),
	'section' => $section,
	'type'    => 'url',
);

复选框

$options['example-checkbox'] = array(
	'id' => 'example-checkbox',
	'label'   => __( 'Example Checkbox', 'textdomain' ),
	'section' => $section,
	'type'    => 'checkbox',
	'default' => 0,
);

选择

$choices = array(
	'choice-1' => 'Choice One',
	'choice-2' => 'Choice Two',
	'choice-3' => 'Choice Three'
);

$options['example-select'] = array(
	'id' => 'example-select',
	'label'   => __( 'Example Select', 'textdomain' ),
	'section' => $section,
	'type'    => 'select',
	'choices' => $choices,
	'default' => 'choice-1'
);

下拉页面

$options['example-dropdown-pages'] = array( 'id' => 'example-dropdown-pages', 'label' => __( 'Example Drop Down Pages', 'textdomain' ), 'section' => $section, 'type' => 'dropdown-pages', 'default' => '' );


### Radio

~~~php
$choices = array(
	'choice-1' => 'Choice One',
	'choice-2' => 'Choice Two',
	'choice-3' => 'Choice Three'
);

$options['example-radio'] = array(
	'id' => 'example-radio',
	'label'   => __( 'Example Radio', 'textdomain' ),
	'section' => $section,
	'type'    => 'radio',
	'choices' => $choices,
	'default' => 'choice-1'
);

上传

$options['example-upload'] = array(
	'id' => 'example-upload',
	'label'   => __( 'Example Upload', 'demo' ),
	'section' => $section,
	'type'    => 'upload',
	'default' => '',
);

颜色

$options['example-color'] = array(
	'id' => 'example-color',
	'label'   => __( 'Example Color', 'demo' ),
	'section' => $section,
	'type'    => 'color',
	'default' => $color // hex
);

文本区域

$options['example-textarea'] = array(
	'id' => 'example-textarea',
	'label'   => __( 'Example Textarea', 'demo' ),
	'section' => $section,
	'type'    => 'textarea',
	'default' => __( 'Example textarea text.', 'demo'),
);

选择（字体排印）

$options['example-font'] = array(
	'id' => 'example-font',
	'label'   => __( 'Example Font', 'demo' ),
	'section' => $section,
	'type'    => 'select',
	'choices' => customizer_library_get_font_choices(),
	'default' => 'Monoton'
);

范围

$options['example-range'] = array(
	'id' => 'example-range',
	'label'   => __( 'Example Range Input', 'demo' ),
	'section' => $section,
	'type'    => 'range',
	'input_attrs' => array(
        'min'   => 0,
        'max'   => 10,
        'step'  => 1,
        'style' => 'color: #0a0',
	)
);

内容

$options['example-content'] = array(
	'id' => 'example-content',
	'label' => __( 'Example Content', 'textdomain' ),
	'section' => $section,
	'type' => 'content',
	'content' => '<p>' . __( 'Content to output. Use <a href="#">HTML</a> if you like.', 'textdomain' ) . '</p>',
	'description' => __( 'Optional: Example Description.', 'textdomain' )
);

将 $options 传递给自定义库

在定义所有选项和部分之后，使用自定义库加载它们

// Adds the sections to the $options array
$options['sections'] = $sections;

$customizer_library = Customizer_Library::Instance();
$customizer_library->add_options( $options );

演示

完整的示例代码可以在这里找到： https://github.com/devinsays/customizer-library-demo/blob/master/inc/customizer-options.php

样式

自定义库有一个辅助类来输出内联样式。此代码最初由 The Theme Foundry 开发，用于在 Make 中使用。要了解其工作原理，请参阅 "inc/styles.php"。

CSS 选择器和值像这样传递给 Customizer_Library_Styles 类

Customizer_Library_Styles()->add( array(
	'selectors' => array(
		'.primary'
	),
	'declarations' => array(
		'color' => $color
	)
) );

媒体查询

媒体查询也可以与 Customizer_Library_Styles 一起使用。以下是一个示例，用于在高分辨率设备上输出 logo-image-2x。

$setting = 'logo-image-2x';
$mod = get_theme_mod( $setting, false );

if ( $mod ) {

	Customizer_Library_Styles()->add( array(
		'selectors' => array(
			'.logo'
		),
		'declarations' => array(
			'background-image' => 'url(' . $mod . ')'
		),
		'media' => '(-webkit-min-device-pixel-ratio: 1.3),(-o-min-device-pixel-ratio: 2.6/2),(min--moz-device-pixel-ratio: 1.3),(min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)'
	) );

}

字体

自定义库有一个辅助函数来输出字体堆叠和加载内联字体。此代码也是由 The Theme Foundry 开发，用于在 Make 中使用。您可以在 "inc/mods.php" 中查看字体排队的示例。

function demo_fonts() {

	// Font options
	$fonts = array(
		get_theme_mod( 'primary-font', customizer_library_get_default( 'primary-font' ) ),
		get_theme_mod( 'secondary-font', customizer_library_get_default( 'secondary-font' ) )
	);

	$font_uri = customizer_library_get_google_font_uri( $fonts );

	// Load Google Fonts
	wp_enqueue_style( 'demo_fonts', $font_uri, array(), null, 'screen' );

}
add_action( 'wp_enqueue_scripts', 'demo_fonts' );

字体可以像这样用于内联样式

// Primary Font
$setting = 'primary-font';
$mod = get_theme_mod( $setting, customizer_library_get_default( $setting ) );
$stack = customizer_library_get_font_stack( $mod );

if ( $mod != customizer_library_get_default( $setting ) ) {

	Customizer_Library_Styles()->add( array(
		'selectors' => array(
			'.primary'
		),
		'declarations' => array(
			'font-family' => $stack
		)
	) );

}

变更日志

开发

  • 增强：内容选项（用于帮助文本、HTML 输出等）

1.3.0

  • 增强：添加文本输入选项
  • 增强：在下拉列表中排序系统字体和 Web 字体
  • 增强：从 WP 4.0 开始添加面板支持
  • 增强：添加对 "url" 类型的支持
  • 增强：添加对 "range" 类型的支持
  • 增强：添加对 "dropdown-pages" 类型的支持
  • 更新：更改设置参数的添加方式

1.2.0

  • 增强：允许设置参数
  • 更新：重构界面循环

1.1.0

  • 修复：将 customizer.js 排队相对于库
  • 增强：使用来自核心的新文本区域控件

1.0.0

  • 公开发布