【子テーマのVersionは反映されるが、Cssが親テーマになる】WordPressの子テーマ反映

Question

##求めていること

• 反映する方法がわかる検索キーワード
• (解答者さんのお時間があったら)解決方法が乗っているURL
• (もしよければ)解決方法
• (あわよくば)ソースコード

子テーマ(.css)の内容は、親テーマのCssの内容を変更したものを利用しています。

解決の糸口が途絶えている状況です。お力を貸していただければと思います。

###顛末
親テーマのCSSをいじってレイアウト調整してた
↓
別鯖に移転、子テーマを使用することに
↓
いじってた親テーマのCSSの20行目以降

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 ・・・・・・以下略

以降5242行ほどを子テーマにコピペ。
↓
リロードにて確認。追加CSSの内容が反映されていない
↓
デベロッパーツールを使用時、CSS要素の行が親テーマのCSSのものになっていた

####使用親テーマ
TwentyTwentyOne(デフォルトのテーマ)

####(ちなみに)元親テーマにて変更したこと(＝子テーマで実現したいこと)

• ハンバーガーメニューの反映

(Templete内の内容も調整等必要ではあるがこの問題が解決してからで良いと解釈)

• Styl.cssのH2の大きさ変更,幅,フォント等の調整

(子テーマCssが反映されているのであれば変化がおこるはず)

発生している問題・エラーメッセージ

css内容が反映されない。

該当のソースコード

子テーマの.css(最初の18行)

/*
Theme Name:twentytwentyone_child
Template:twentytwentyone
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.

*/

functions

<?php 

//パーマリンクの設定を正常化(固定ページと投稿ページの判別用) 
add_action('parse_query', 'date_base_permalink');

function date_base_permalink($wp_query)
{
    $q = (object)$wp_query->query_vars;
    
    if (!empty($q->year) && !empty($q->monthnum) && !empty($q->day) && !empty($q->minute) && !empty($q->hour)) {
        $wp_query->is_single = true;
        $wp_query->is_singular = true;
        $wp_query->is_archive = false;
    }
}

//以下親テーマStyle.css読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
}

<link rel='stylesheet' id='dashicons-css' href='wp-includes/css/dashicons.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='admin-bar-css' media='all' />
<link rel='stylesheet' id='wp-block-library-css' href='wp-includes/css/dist/block-library/style.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='wp-block-library-theme-css' href='wp-includes/css/dist/block-library/theme.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='parent-style-css' href='wp-content/themes/twentytwentyone/style.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='child-style-css' href='wp-content/themes/twentytwentyone_child/style.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='twenty-twenty-one-style-css' href='wp-content/themes/twentytwentyone/style.css?ver=1.1' media='all' />
<style id='twenty-twenty-one-style-inline-css'>
/*ながいので省略*/

</style>
<link rel='stylesheet' id='twenty-twenty-one-print-style-css' href='wp-content/themes/twentytwentyone/assets/css/print.css?ver=1.1' media='print' />

検証済みの内容

• wp_enqueue_styleの第一引数をparent-styleからtwenty-twenty-one-styleに変更

→変化なし

• ソースコード(.css)の９行目をVer1.2から1.1に変更

→デベロッパーツールで確認したところ、反映されたことを確認。
本来は1.2だが目印として1.1のママにしている(反映完了次第修正予定)

• functions.phpのパーマリンク正常化コードと.css読み込みコードの順番を変更

→変化なし

• スーパーリロード

→変化なし

• 親テーマ.cssの内容を削除

→親テーマ.cssの内容は削除された状態のページが出現。子テーマ.cssの内容は反映されていない。

以上の内容により、優先順位の問題ではないと解釈している。

環境

VSCodeの拡張機能『ftp-simple』を使用。
この拡張機能については、検証過程にて問題は起きていないと推測している。

####参考書籍
WordPressユーザのためのPHP入門

####参考ページ
『子テーマ　反映』などで検索した結果は荒方見てます。

http://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
https://wemo.tech/205
https://www.webdesignleaves.com/pr/wp/

Comments

[CHERRY]

Web ブラウザで表示される HTML で、CSS タグは表示されていますか？

[reiponu]

反応ありがとうございます。
以下の表記になっています。(hrefはドメイン名を省略しております。)

<link rel='stylesheet' id='dashicons-css' href='wp-includes/css/dashicons.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='admin-bar-css' media='all' />
<link rel='stylesheet' id='wp-block-library-css' href='wp-includes/css/dist/block-library/style.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='wp-block-library-theme-css' href='wp-includes/css/dist/block-library/theme.min.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='parent-style-css' href='wp-content/themes/twentytwentyone/style.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='child-style-css' href='wp-content/themes/twentytwentyone_child/style.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='twenty-twenty-one-style-css' href='wp-content/themes/twentytwentyone/style.css?ver=1.1' media='all' />
<style id='twenty-twenty-one-style-inline-css'>
/*ながいので省略*/

</style>
<link rel='stylesheet' id='twenty-twenty-one-print-style-css' href='wp-content/themes/twentytwentyone/assets/css/print.css?ver=1.1' media='print' />

表示されています。
質問欄のほうにも追記します。

Answer 1

自己解決しました。

<link rel='stylesheet' id='parent-style-css' href='wp-content/themes/twentytwentyone/style.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='child-style-css' href='wp-content/themes/twentytwentyone_child/style.css?ver=5.7.1' media='all' />
<link rel='stylesheet' id='twenty-twenty-one-style-css' href='wp-content/themes/twentytwentyone/style.css?ver=1.1' media='all' />

このようになっており、
child-style-cssより先にtwenty-twenty-one-style-cssが来ていた。

なので

<?php // PHP 開始タグ - この前には、空白も含め何も書かないでください。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_parent_theme_file_uri() . '/style.css' );
    //以下追加    
    wp_enqueue_style(
        'twenty-twenty-one-style',get_stylesheet_directory_uri() . '/style.css',array( 'parent-style' ));   
    //ここまで追加

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

とすることで解決。
これによるリスク・懸念が考えられるかは不明。

正午過ぎたらクローズとさせていただきます。