web-dev-qa-db-ja.com

Get_theme_mod CSSをスタイルシートに統合しますか？

このコードはテーマカスタマイザからのカスタムCSS選択を追加します。このコードについて私が嫌いなのは、選択範囲を自分のスタイルシートに貼り付けたり、それらを別のスタイルシートに配置したりするのではなく、スタイルタグをサイトのHTMLに直接出力することです。

このCSSをテーマの内部style.cssの最後に貼り付けるか、新しいスタイルシートを生成して配置する方法はありますか？ （あるいはこれは悪い考えでしょうか？）

function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             html, body, .container { background:<?php echo get_theme_mod('primary_color', '#000000'); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');
theme-customizer
3
AndrettiMilas

私はこのワークフローに従って可能であると思います：

  1. テーマのmodがいつ更新され、いつそれが起こったかを見るために 'updated_option' フックにアクションを追加する

    1. style.css を使ってfile_get_contentsの内容を文字列として取得する
    2. カスタマイズを取得し、それらをstyle.css文字列に追加します
    3. file_put_contents を使用して、新しいcssファイルに新しい文字列を書き込み、アクセス可能なフォルダに保存します。
    4. 何かがファイル操作でうまくいかない場合（それは常に起こり得る）、フォールバックとしてOPのコードを使う

  2. カスタマイズされたファイルのURLが存在する場合はそれを返すfilter 'stylesheet_uri' フック

  3. あなたのテーマでは、 get_stylesheet_uri() を使ってスタイルシートがインクルードされていることを確認してください。

だから＃1コードを指す：

add_action( 'updated_option', function( $option ) {
  $theme = get_option( 'stylesheet' );
  if ( $option === "theme_mods_{$theme}" ) {
    my_update_stylesheet();
  }
});

function my_update_stylesheet() {
  $css = @file_get_contents( get_template_directory() . '/style.css' );
  if ( ! $css ) { // if we can't read file use your function in OP as fallback
    add_action( 'wp_head', 'mytheme_customize_css');
  }
  $color = get_theme_mod('primary_color', '#000000');
  $css .= PHP_EOL . sprintf( 'html, body, .container { background:%s; }', $color );
  $upload = wp_upload_dir(); 
  $path = $upload['basedir'] . '/thememod';
  if ( ! is_dir( $path ) ) {
     wp_mkdir_p( $path );
  }
  $newfile = @file_put_contents( $path . '/style.css', $css );
  if ( ! $newfile ) { // if we can't write file use your function in OP as fallback
    add_action( 'wp_head', 'mytheme_customize_css');
  }
}

そしてポイント＃2

add_filter( 'stylesheet_uri', function( $uri ) {
  $upload = wp_upload_dir(); 
  if ( file_exists( $upload['basedir'] . '/thememod/style.css' ) ) {
    $uri = $upload['baseurl'] . '/thememod/style.css';
  }
  return $uri;
});
1
gmazzap