seothemes/dynamic-stylesheet

WordPress主题或插件中生成动态样式的简单类。

dev-master 2019-05-26 01:10 UTC

This package is auto-updated.

Last update: 2024-09-26 12:29:43 UTC


README

WordPress中生成动态样式的简单类。

关于

此类将尝试将自定义CSS写入到wp-content/cache/目录下的静态文件中。如果没有写入权限,它将加载动态样式表。

安装

Composer(推荐)

从主题或插件的根目录运行以下命令

composer require seothemes/dynamic-stylesheet

手动

loader.php文件复制到主题或插件中的某个位置,然后使用require_once包含它,例如

// Include loader class (not required if using composer).
require_once __DIR__ . 'path/to/loader.php';

使用方法

将自定义CSS字符串传递给Loader类的参数,然后使用run方法加载钩子。建议在也被钩到wp_enqueue_scripts的功能内生成CSS,以便在自定义器中启用实时预览。在初始化Loader类时,也可以指定样式表处理程序和选项名称。

add_action( 'wp_enqueue_scripts', 'prefix_custom_css', 15 );
/**
 * Generate custom CSS and add inline styles to Customizer preview.
 *
 * @since 1.0.0
 *
 * @return string
 */
function prefix_custom_css() {
	$custom_color = get_option( 'custom-color', '#eee' );
  
	$custom_css   = 'body { background-color: ' . $custom_color . ' !important; }';

	if ( is_customize_preview() ) {
		wp_add_inline_style( 'my-prefix', $custom_css );
	}

	return $custom_css;
}

// Initialize Loader class (pass custom CSS as parameter here).
$dynamic_css = new SeoThemes\DynamicStylesheet\Loader( prefix_custom_css(), 'my-prefix' );

// Load hooks.
$dynamic_css->run();

测试

自定义器设置

为了测试自定义器设置是否正常工作,添加以下代码片段

add_action( 'customize_register', function ( $wp_customize ) {
	$wp_customize->add_setting( 'custom-color', [
		'type' => 'option',
	] );

	$wp_customize->add_control( new \WP_Customize_Color_Control( $wp_customize, 'custom-color', [
		'label'    => 'Custom Color',
		'section'  => 'colors',
		'settings' => 'custom-color',
	] ) );
} );

这将向自定义器的颜色部分添加一个简单的颜色控制。如果更改没有应用,请尝试清除浏览器缓存。