1. ホーム
  2. php

[解決済み】子テーマのCSSが親テーマをオーバーライドしない

2022-02-13 08:54:46

質問

twentyseventeenテーマの子テーマを作りました。子テーマのフォルダには、"style.css"と"functions.php"のファイルがあります。style.cssの中には、以下のようなものがあります。

/* 
Theme Name: Personal_theme
Theme URI: http://wordpress:8888/
Description: This is a child theme of twentyseventeen
Author: My name
Author URI: ...
Template: twentyseventeen
Version: 0.1;
*/

.entry-title {
    color: blue;
}

とfunctions.phpの中に記述します。

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get("Version")
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

スタイルに "!important!" を追加すると、動作し、青色になります。インスペクターツールを使うと、子スタイルシートが親の後に読み込まれているのがわかりますが、スタイルは親に上書きされています。Wordpressは初めてなのですが、functions.phpのパラメータのどれかが間違っているのでしょうか?何か変更しなければならないことがありますか?

解決方法は?

この問題は、CSS セレクタが原因である可能性が高いです。 特異性 . 基本的に、親のCSSルールは、あなたが割り当てているルールよりも、その要素にヒットするように狭く調整されています。 親cssよりも具体的なルールを使うか、同じルールを使えば、後から読み込まれた自分のcssが優先されます。