0

Zurb Foundation 5 フレームワークと ReduxFramework をテーマ オプション パネルとして使用して WordPress テーマを開発しています。そのため、WordPress テーマの配色を実装するにはさまざまな方法があります。

  1. 異なる配色で異なるスタイル シートを使用する。
  2. CSS クラスと ID の使用
  3. +さらに多くの方法........

でも、こんな風にはしたくない。ReduxFramework は、css ファイルを動的に変更し、クラスまたは ID を書き込むことができます。で、こうしていきたい。したがって、ReduxFramework オプション パネルから Foundation 5 css スタイル シートのクラスと ID を動的に変更できます。変更後、テーマの配色を変更する必要があります。

ファンデーション 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 Development Stack Exchange: . ある評判の良いユーザーから、ここでこの質問をするように勧められました。

4

3 に答える 3

1

@Dovy の答えは基本的に正しいです。私の知る限り、Less バージョンのファンデーションはありません。したがって、Foundation の Sass (SCSS) ファイルと SASS (php) コンパイラが必要になります。

Redux には Sass コンパイラも組み込まれているようです: Redux と Sass

  1. bower install foundationたとえば、WordPress フォルダーで実行することにより、Foundation コードをインストールします。
  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 に答える