0

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

  1. 使用具有不同配色方案的不同样式表。
  2. 使用 css 类和 id
  3. +更多方法............

但是，我不想这样做。ReduxFramework 可以动态更改 css 文件并写入 class 或 id。我想这样做。所以我可以从 ReduxFramework Options 面板动态修改 Foundation 5 css 样式表类和 id。并且更改后，必须更改主题配色方案。

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

  1. 原色
  2. 次要颜色
  3. 警报颜色
  4. 成功颜色
  5. 正文字体颜色
  6. 标题字体颜色

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

请转到此图片链接。{在新标签中打开此图片以获得更大的视图}

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

现在的问题是，我该怎么做这些事情？

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

这个问题是从Foundation 5 的 wp 主题中的 Unlimited Color Schemes 重新发布的 - WordPress 开发堆栈交换：。一位知名用户建议我在这里问这个问题！

4

3 回答 3

1

@Dovy 给出的答案是正确的。据我所知，没有更少版本的基础。因此，您将需要 Foundation 的 Sass (SCSS) 文件和 SASS (php) 编译器。

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

  1. 安装 Foundation 代码，例如bower install foundation在您的 WordPress 文件夹中运行。
  2. 安装一个 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
        );
    }
}
于 2015-05-05T10:20:16.183 回答
0

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

于 2015-04-01T15:20:25.837 回答
0

我碰巧让它从各种评论中收集信息，但代码反映了新版本的 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
    );
  }
}
于 2017-07-27T22:19:48.453 回答