README

高级WordPress自定义控件和设置，以提供更好的用户体验。

要求

需要PHP版本7.2.0或更高。

安装

通过Composer和Packagist安装

$ composer require proteusthemes/wp-customizer-utilities

开始使用类，它们将自动加载（PSR-4）。

文档

控件

• 布局构建器

  jQuery UI slider，您可以选择在滑块中控制多少个手柄。对于创建动态布局非常有用，例如，对于页脚，用户可以配置他们想要的列数以及每列的宽度。

• 渐变

  用于CSS渐变的控件（WordPress默认只支持纯色）。

设置

• 动态CSS

  在定义设置时声明选择器（例如背景颜色等），创建动态CSS。内置了对该颜色的修饰符和媒体查询的支持。

  公共方法

  • get_css_props()

    获取类的整个css_props属性。

  • get_single_css_prop( string $name, DynamicCSS\ModInterface|callable $modifier )

    返回CSS属性的所有变体，具有选择器。可选地通过修饰符过滤。

  • render_css()

    在行内样式（每组选择器在其自己的行）中渲染此设置的整个CSS。对于缓存设置的输出并在WordPress前端输出非常有用。

  修饰符接口 ModInterface

  修饰符类必须实现DynamicCSS\ModInterface。它只有一个方法modify( $in )，该方法接收输入值并返回修改后的值。

  示例

  class MyModClass implements \ProteusThemes\CustomizerUtils\Setting\DynamicCSS\ModInterface {
    public function modify( $in ) {
      return your_modify_function( $in );
    }
  }

  包含的修饰符

  一些修饰符已包含在包中，您可以直接使用它们。

  • ModDarken( $amount ) - 使用$amount加深十六进制颜色（使用phpColors）
  • ModLighten( $amount ) - 使用$amount浅化十六进制颜色（使用phpColors）
  • ModLinearGradient( ModInterface $modifier, $orientation = 'to bottom' ) - 创建CSS线性渐变。第一个颜色是直接使用的，第二个颜色使用$modifier修改。`$orientation`可以是任何有效的CSS方向。
  • ModPrependAppend( $prefix = '', $suffix = '' ) - 向值添加前缀或后缀（或两者都添加）。对于添加`!import`或`url('value')`非常有用。

  使用

  您最有可能附加到customize_register动作的代码示例

  function your_func( $wp_customize ) {
    $darken5  = new \ProteusThemes\CustomizerUtils\Setting\DynamicCSS\ModDarken( 5 );
  
    $wp_customize->add_setting( new \ProteusThemes\CustomizerUtils\Setting\DynamicCSS( $wp_customize, 'nav_bg', array(
      'default'   => '#bada55',
      'css_props' => array( // list of all css properties this setting controls
        array( // each property in it's own array
          'name'      => 'background-color', // this is actual CSS property
          'selectors' => array(
            'noop' => array( // regular selectors in the key 'noop'
              'body',
              '.selector2',
            ),
            '@media (min-width: 900px)' => array( // selectors which should be in MQ
              '.selector3',
            ),
          ),
          'modifier'  => $darken5, // optional. Separate data type, with the modify() method (via implemented interface) which takes value and returns modified value OR callable function with 1 argument
        ),
      ),
    ) ) );
  }
  add_action( 'customize_register', 'your_func' );

  您还必须排队处理通过postMessage处理的实时预览更改的JS文件

  function enqueue_customizer_js() {
    wp_enqueue_script(
      'mytheme-live-customize',
      get_template_directory_uri() . '/vendor/proteusthemes/wp-customizer-utilities/assets/live-customize.js',
      array( 'jquery', 'customize-preview' ),
      false,
      true
    );
  
    wp_localize_script( 'mytheme-live-customize', 'ptCustomizerDynamicCSS', array(
      array(
        'settingID' => 'nav_bg',
        'selectors' => 'body, .selector1, .selector2',
        'cssProp'   => 'background-color',
      )
    ) );
  }
  add_action( 'customize_preview_init', 'enqueue_customizer_js', 31 );