STORK19の子テーマのcssを.minやインライン読み込みに対応させる

STORK19には、親テーマのCSSをstyle.min.css（minify化）で読み込んだり、headにインラインで読み込む機能がある。

ただしこれは親テーマに限った話で、公式で配布されている子テーマのCSSはこの機能に対応していない。

配布されている子テーマ内のコード

子テーマのfunctions.phpを開くと、冒頭に以下のコードが記載されている。

// 子テーマのstyle.cssを後から読み込む
add_action( 'wp_enqueue_scripts', 'stk_add_child_stylesheet' );
function stk_add_child_stylesheet() {
    wp_enqueue_style( 'stk_child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('stk_style')
    );
}

上記のようなコードが記載されている。

この上記のコードを削除して以下のコードに置き換える。

置き換えるコード

// 子テーマのCSSを親テーマのあとに読み込む（.minとインラインに対応）
add_action('wp_enqueue_scripts', 'stk_add_child_stylesheet');
function stk_add_child_stylesheet()
{
    if (!is_admin()) {

        $theme_ver = wp_get_theme();
        $style = get_option('side_options_style_min_css', 'normal') == 'normal' ? 'style' : 'style.min';
        $template_directory = get_stylesheet_directory_uri();

        if (get_option('side_options_style_min_css', 'normal') === 'inline') {

            //データベースキャッシュに値を取得
            $data = get_transient('stk_child_style_css_cache');

            // cacheがない場合
            if ($data === false) {

                load_template(ABSPATH . 'wp-admin/includes/file.php');
                global $wp_filesystem;
                if (WP_Filesystem()) {
                    $data = $wp_filesystem->get_contents("{$template_directory}/style.min.css");
                }

                //取得した値をデータベースキャッシュに保存
                set_transient('stk_child_style_css_cache', $data, 60 * 60 * 4);
            }


            if ($data) {
                $handle = 'stk_child_style';
                $src = false;
                $deps = array('stk_style');
                wp_register_style($handle, $src, $deps);
                wp_enqueue_style($handle);
                wp_add_inline_style($handle, $data);
            } else {
                wp_enqueue_style('stk_child_style', get_stylesheet_directory_uri() . '/' . $style . '.css', array('stk_style'), $theme_ver, 'all');
            }
        } else {
            wp_enqueue_style('stk_child_style', get_stylesheet_directory_uri() . '/' . $style . '.css', array('stk_style'), $theme_ver, 'all');
        }
    }
}

このカスタマイズで、子テーマ使用時にもCSSの圧縮が使える。

インラインで読み込む（キャッシュ使用）を使えば、head内にCSSが読み込まれリクエスト数を減らすことができスコア改善に効果が見込める。