采用reduxframework的Zurb Foundation的wp主题无限配色方案

时间:2015-03-31 21:06:06

标签: wordpress wordpress-theming zurb-foundation-5

我正在使用Zurb Foundation 5框架和ReduxFramework作为主题选项面板开发WordPress主题。因此,我可以通过各种方式为WordPress主题实现Color Schemes。

  1. 使用不同颜色方案的不同样式表。
  2. 使用css class和id
  3. +更多方式........
  4. 但是,我不想这样做。 ReduxFramework可以动态更改css文件并编写类或id。我想这样做。所以我可以动态修改ReduxFramework Options面板中的Foundation 5 css样式表类和id。改变之后,它必须改变主题配色方案。

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

    1. 原色
    2. 二次色
    3. 提醒颜色
    4. 成功色彩
    5. 正文字体颜色
    6. 标题字体颜色
    7. 还有什么方法可以修改或更改Redux Framework中Foundation 5 CSS框架附带的每个选项。

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

      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:重新发布。一位知名用户建议我在这里提出这个问题!

3 个答案:

答案 0 :(得分:1)

@Dovy给出的答案是正确的。据我所知,没有基础版的Less版本。所以你需要Foundation的Sass(SCSS)文件和SASS(php)编译器。

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

  1. 安装Foundation代码,例如在WordPress文件夹中运行bower install foundation
  2. 安装php Sass编译器,请参阅:http://leafo.net/scssphp/
  3. 现在在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
            );
        }
    }
    

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我碰巧让它工作从各种评论收集信息,但代码反映了更新版本的redux和基础。共享代码,希望有人发现这个有用的

MoreArgs=list(min=min, max=max)