web-dev-qa-db-ja.com

@ font-faceが子テーマで壊れています

私のサイトでは、基本構造（bootstrap.min.css）にはBootstrapを使用し、それ以上の機能強化や変更には私自身のスタイルシート（style.css）を使用しています。私は以下のように私のスタイルシートで@font-faceを宣言しました：

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

うまくいっていますが、私の子供のテーマではRobotoフォントがまったくロードされていません。私は以下のように私のスタイルをfunctions.phpにエンキューしました：

function project_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'project_child_theme_enqueue_styles' );

私は私の子供のテーマで@font-faceを親テーマのフォントパスで再宣言することさえ試みました：

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../parenttheme/fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

どちらの方法でもブラウザのコンソールを確認し、フォントファイルに404がないことを確認しました。

どうしましたか？

child-themewp-enqueue-style
1
Mayeenul Islam

問題は@ font-faceにはありません。スタイルシートをエンキューしたfunctions.phpにあります。

あなたの親テーマが以下のようなスタイルシートをキューに入れることだと思います。

<link rel='stylesheet' id='bootstrap-css'  href='http://example.com/wp-content/themes/parenttheme/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='style-css'  href='http://example.com/wp-content/themes/parenttheme/style.css' type='text/css' media='all' />

しかしあなたの子供のテーマで何が起こっているのですか：

<link rel='stylesheet' id='parent-style-css'  href='http://example.com/wp-content/themes/parenttheme/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://example.com/wp-content/themes/childtheme/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='http://example.com/wp-content/themes/parenttheme/bootstrap.min.css' type='text/css' media='all' />

子テーマのコードが優先されるようになったためです。

そのため、以下のようなものが必要になります - 正しいスタイルシート - 依存 - 順序（ 、ここで$deps）：

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('bootstrap') );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );

親スタイルのarray('bootstrap')宣言はブートストラップの後に親スタイルをロードし、子スタイルのarray( 'parent-style' )宣言は親スタイルの後に子スタイルをロードします。

<link rel='stylesheet' id='bootstrap-css'  href='http://example.com/wp-content/themes/parenttheme/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='http://example.com/wp-content/themes/parenttheme/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://example.com/wp-content/themes/childtheme/style.css' type='text/css' media='all' />

親テーマに他のCSSファイルがある場合は、それに応じて正しい依存関係に従ってください。

2
Mayeenul Islam