web-dev-qa-db-ja.com

Wp_add_inline_styleを使用してカスタマイザスタイルを追加する

私が 以前の質問で言ったように は私が一つのmodに集まるので何百ものmodをテーマにしているので私はすべてのページロードですべてのmodをループする必要はない。

さて、 コーデックスはカスタマイザスタイル を直接頭の中にダンプしていますが、それはそれほどエレガントではありません。既存のスタイルシートに整然とした方法でcssを追加するための wp_add_inline_style があります。これは次のようになり、うまく機能します。

$style = get_theme_mod ('all-mods');
wp_add_inline_style ('my-main-style',$style);

ただし、問題が1つあります。子テーマを作成した場合、インラインスタイルはまだ親スタイルの直後に追加されます。これは、それらがそれらがそれらのスタイルをオーバーライドすることを確認するために親の後にロードされる子テーマcssによって無効にされることを引き起こします。これはユーザーが期待していることではありません。

カスタマイザスタイルは最高の優先順位を持つべきであるので、何らかの方法でそれらが頭にロードされる最後のものであることを確かめなければなりません。 子テーマがアクティブかどうか を検出できますが、インラインスタイルを追加する子スタイルのハンドルを知ることはできません。

現時点で、私は単純に空のcssファイルを定義しました。これを頭の最後でエンキューしてから、インラインスタイルを追加します。しかし、これは洗練されたものからは程遠いので、そもそも私がこの道を選んだのはそのためです。誰かがよりスマートなアプローチを知っていますか？

theme-developmenttheme-customizerwp-enqueue-style
4
cjbj

現在使用されているテーマが子であるかどうか、そうであればインラインCSSを正しいスタイルに向けていることを検出することを試みることができます。私はこの解決策をテストしませんでしたが、良い出発点になるかもしれません。

function mytheme_enqueue_style()
{
    wp_enqueue_style( 'parent-theme-style',get_template_directory_uri() . '/style.css', false );

    if(is_child_theme())
    {
        wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', array('parent-theme-style')  );
    }

    $style = get_theme_mod ('all-mods');
    $where = is_child_theme() ? 'child-theme-style' : 'parent-theme-style';
    wp_add_inline_style( $where, $style );
}

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

注意

get_template_directory_uri()とget_stylesheet_directory_uri()には違いがあります codex

子テーマが使用されている場合、この関数は子のテーマディレクトリURIを返します。子テーマによって上書きされないようにするには、get_template_directory_uri()を使用します。

1
koMah