带有 reduxframework 的 Zurb Foundation 的 wp 主题中的无限配色方案

Question

我正在使用 Zurb Foundation 5 框架和 ReduxFramework 作为主题选项面板开发 WordPress 主题。因此，我可以通过多种方式为 WordPress 主题实施配色方案。

使用具有不同配色方案的不同样式表。
使用 css class 和 id
+更多方式........

但是，我不想这样做。 ReduxFramework 可以动态改变css 文件，写入class 或id。我想这样做。所以我可以从 ReduxFramework 选项面板动态修改 Foundation 5 css 样式 sheet class 和 id。并且改变之后，必须改变Theme color schemes。

Foundation 5 有 6 种主要颜色可供选择。我想从 ReduxFramework 选项面板更改它们。

原色
辅助颜色
警报颜色
成功颜色
Body 字体颜色
Header 字体颜色

还有什么方法可以修改或更改 Redux Framework 中 Foundation 5 CSS 框架附带的每个选项。

请转到这张图片link。 {在新标签页中打开此图片可查看大图}

http://i.stack.imgur.com/YI0aD.png

现在的问题是，我该如何做这些事情？

我知道 PHP、JS、HTML、CSS、MYSQL 等。如果您在回答中描述所有内容，将会更有帮助我.

此问题来自 Unlimited Colour Schemes in wp theme for Foundation 5 - WordPress Development Stack Exchange: RE-POSTED。一位知名用户建议我在这里问这个问题！

Answer 1

嗯，其实这很容易。 Foundation 使用 LESS 或 SCSS 来编译它。他们使用传递给这些编译器的变量。因此，最简单的方法是让 Redux 在这些颜色字段上使用编译器挂钩，重新输出变量文件，然后在 LESS/SCSS 上重新运行编译器。蛋糕。 :)

Answer 2

@Dovy 的回答基本是对的。据我所知，没有 Less 版本的基础。所以你需要 Foundation 的 Sass (SCSS) 文件和一个 SASS (php) 编译器。

似乎 Redux 也内置了一个 Sass 编译器：Redux and Sass

安装 Foundation 代码，例如通过运行 bower install foundation 在您的 WordPress 文件夹中。
安装php Sass编译器，参见：http://leafo.net/scssphp/

现在在你的 Redux 配置文件中添加一个保存钩子：

add_action('redux/options/' . $opt_name . '/saved',  "compile_sass"  );

另见：https://github.com/reduxframework/redux-framework/issues/533

最后在配置文件中加入compile_sass函数（可以以编译动作为例，见：http://docs.reduxframework.com/core/advanced/integrating-a-compiler/）：

function compile_sass($values) {
    global $wp_filesystem;

    $filename = dirname(__FILE__) . '/style.css';

    if( empty( $wp_filesystem ) ) {
        require_once( ABSPATH .'/wp-admin/includes/file.php' );
        WP_Filesystem();
    }

    if( $wp_filesystem ) {
    require "scssphp/scss.inc.php";
    $scss = new scssc();
    $scss->setImportPaths("bower_components/foundation/scss/");

    // will search for `assets/stylesheets/mixins.scss'
    $css = $scss->compile('$primary-color: '.$values['primary-color'].';
    @import "foundation.scss"');

        $wp_filesystem->put_contents(
            $filename,
            $css,
            FS_CHMOD_FILE // predefined mode settings for WP files
        );
    }
}

Answer 3

我碰巧让它工作，从各种评论中收集信息，但代码反映了新版本的 redux 和基础。分享代码希望有人觉得这有用

/* sample redux fields = array(
 array(
        'id'       => 'theme-primary-color',
        'type'     => 'color',
        'title'    => __( 'Add Primary Color', 'theme-redux' ),
        'subtitle' => __( 'Add the theme primary color', 'theme-redux' ),
        'default'  => '#FFFFFF',
        'validate' => 'color',
        'compiler' => 'true',
    ))
*/

add_filter('redux/options/' . $opt_name . '/compiler', 'compiler_action', 10,3);

function compiler_action( $options, $css, $changed_values ) {
  global $wp_filesystem, $kavabase_options;

  $filename = get_template_directory() . '/assets/stylesheets/theme-style.css';

  if( empty( $wp_filesystem ) ) {
    require_once( ABSPATH .'/wp-admin/includes/file.php' );
    WP_Filesystem();
  }

  if( $wp_filesystem ) {
    require_once ( dirname(__FILE__ ) ."/plugins/scssphp/scss.inc.php" );

    //use Leafo\ScssPhp\Compiler; at the beginning of the file

    $scss = new Compiler();

    $scss->setImportPaths(  get_template_directory(). "/inc/foundation-sites/" );
   //$scss->setFormatter( "Leafo\ScssPhp\Formatter\Compressed" );

    $css =  $scss->compile('@import "foundationdependencies.scss"; $theme-primary-color: '.$options['theme-primary-color'].';
      @import "foundationsettings.scss";
      @import "foundationutil.scss";@import "foundation.scss"');

    //var_dump( $scss->getParsedFiles() );

    $wp_filesystem->put_contents(
      $filename,
      $css,
      FS_CHMOD_FILE // predefined mode settings for WP files
    );
  }
}

带有 reduxframework 的 Zurb Foundation 的 wp 主题中的无限配色方案

Unlimited Colour Schemes in wp theme for Zurb Foundation with reduxframework

wordpress

wordpress-theming

zurb-foundation-5