テーマ　WPTuts　子テーマのcssがアクティブにならない

解決済 maki1463
(@maki1463)

7年、 6ヶ月前

お世話になっております。
親のテーマは以下になります。
Theme Name: WPTuts
Version: 2.0.0
Description: Free WordPress Theme by WPExplorer
Author: WPExplorer
Author URI: http://www.wpexplorer.com
Designed & Developed by WPExplorer
Theme URI: http://www.wpexplorer.com/

こちらに子テーマを作成しました。
ダッシュボードで子テーマの有効には成功しております。
functions.phpに以下を記述しております。
———————
<?php

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles()
{ wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

?>
———————
サイトのソースには

<link rel=’stylesheet’ id=’parent-style-css’ href=’http://nekonoteworks.fem.jp/nekonoteworks/wp-content/themes/wpex-wptuts/style.css?ver=4.6.1′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’style-css’ href=’http://nekonoteworks.fem.jp/nekonoteworks/wp-content/themes/wpex-wptuts_child/style.css?ver=4.6.1′ type=’text/css’ media=’all’ />

のように正常に記述されており、子テーマのURLをクリックすると正常に内容が表示されます。

しかしながら記述した内容がアクティブになりません。
優先順位の問題ではないようです。
なぜそう思うかと申しますと、例えばファイヤーフォックスで要素の調査をした際に
wpex-wptuts_child/style.css?ver=4.6.1
の方のスタイルエディタにてスタイルが0になるのです。
実際には0ではなくとも0と表示されてしまいますが、スタイルエディタでそのcssを表示すると
グレーアウトした状態でcssが表示されます。

これは何が問題でしょうか。
バージョンなどは特に記述しておりませんが、ヘッダーでは自動付与されています。
これらは関係しますか？
http://nekonoteworks.fem.jp/nekonoteworks/
現在テスト公開状態です。

今まで子テーマの作成で@importを使っておりましたが今回はphpでやっております。
ちなみに@importでやったところ子テーマは読み込まれましたが親テーマがうまく読み込まれませんでした。

ちなみに親テーマのディレクトリは
/nekonoteworks/wp-content/themes/wpex-wptuts
子テーマは
/nekonoteworks/wp-content/themes/wpex-wptuts_child
です。

cssには以下を記載しております。
@charset “UTF-8”;
/*———————————————————–

Template: wpex-wptuts
Theme Name: wpex-wptuts_child

/*———————————————————–
h1 a, h2 a, h3 a, h4 a {
color: #bc4569;
}

ちなみに@importを使ったときは
@import url(“../wpex-wptuts/style.css”);
を記述しています。
このときは子テーマのfunctions.phpは削除しております。

いったい何がいけないのか少し困っています。
これまでは子テーマを@importで作成してきた時は特にこのようなことはなかったのですが、、、

長くなりましたが、どうぞよろしくお願いいたします。

10件の返信を表示中 - 1 - 10件目 (全10件中)

oisit
(@oisit)

7年、 6ヶ月前
子テーマ
子テーマのスタイルシートは、通常は自動的に読み込まれます。そうでない場合は、同様にエンキューする必要があります。依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう。詳細についてはこちら :
```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function 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',
        array('parent-style')
    );
}
```
自分はこっちをfunctions.phpにコピーしてます。

あと管理画面の設定＞表示設定＞フロントページの項目あたりの問題かもしれないし、
気が付いてないテーマの設定があるのかもしれない。
トピック投稿者 maki1463
(@maki1463)

7年、 6ヶ月前

お忙しい中お返事ありがとうございます。
書いて頂いたものをfunctions.phpに記述したところ以下のようになぜかchildのスタイルシートが2回記述されます。

<link rel=’stylesheet’ id=’parent-style-css’ href=’http://nekonoteworks.fem.jp/nekonoteworks/wp-content/themes/wpex-wptuts/style.css?ver=4.6.1′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’child-style-css’ href=’http://nekonoteworks.fem.jp/nekonoteworks/wp-content/themes/wpex-wptuts_child/style.css?ver=4.6.1′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’style-css’ href=’http://nekonoteworks.fem.jp/nekonoteworks/wp-content/themes/wpex-wptuts_child/style.css?ver=4.6.1′ type=’text/css’ media=’all’ />

これはこれは同じものを読んでいるので特に問題はないけれど、無駄に読み込んでいると解釈して良いでしょうか。
またやはり現象は変わりませんでした。

お手数をおかけいたしますが、引き続きよろしくお願いいたします。
nobita
(@nobita)

7年、 6ヶ月前
こんにちは、

いろいろ、修正が必要そうですね

親テーマのスタイル
　最初の、テーマ情報のコメントエリアが、閉じていません。この部分はコアが読み込む部分ですので正確な記述をしてください。
```
 Designed & Developed by WPExplorer
```
こういった記述も、コメント欄を分けて記述したほうがいいです。

チャイルドテーマのスタイル

　https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
```
/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/
```
のように、ルールにのっとった記述が必要です。でないとチャイルドテーマとしてCOREが認識できません。

wp_enqueue_style()で、スタイルシートの読みこむ順の指定や、バージョンを記述しておかないと　キャッシュがクリアできなくなったり、スタイル指定が反映しない等、運営が始まってから苦労することになると思います。
oisit
(@oisit)

7年、 6ヶ月前

なるほど、CSSの方の問題でしたか。

トピック投稿者 maki1463
(@maki1463)

7年、 6ヶ月前

nobita様
oisit様

ご両方お忙しい中本当にありがとうございました。
親テーマのテーマ情報部分は見落としておりました。
また子テーマの記述も書き直しました。

バッチリ認識されました。
本当に本当にありがとうございます。

もしよろしければですが、子テーマのバージョンの記載の仕方、そのバージョンをソースに自動で反映させる方法もご教授頂けますでしょうか。

重ねてお手数をおかけして申し訳ございません。
nobita
(@nobita)

7年、 6ヶ月前
以下のようにすると、style.cssのコメント欄に記述したバージョン番号を取得できます。
```
$raindrops_current_data				= wp_get_theme();
$raindrops_current_data_version			 = $raindrops_current_data->get( 'Version' );
```
チャイルドテーマのコメント欄は、以下のようにしておくと
```
/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
Version: 1.433
*/
```
$raindrops_current_data_version で　1.433　が取れるようになります。

CSSのキャッシュが効いてしまって更新されないような場合、コメント欄のバージョン番号を変更すると、キャッシュが切れます。

ちなみに　4.7では
```
 filemtime( get_theme_file_path( 'js/my-script.js' ) )
```
とする事で、ファイル更新日をバージョン番号に使うことが出来そうです。

https://make.wordpress.org/core/2016/09/09/new-functions-hooks-and-behaviour-for-theme-developers-in-wordpress-4-7/
トピック投稿者 maki1463
(@maki1463)

7年、 6ヶ月前

nobita様

ご丁寧なお返事感謝いたします。
以下の記述はどこに追記したら良いのでしょうか。
書いて頂いたリンクを読んでみたのですが、functions.phpに書きなさいと言う事でしょうか。
どのファイルに書けば良いのか、追記なのかなどわからずおります。

$raindrops_current_data = wp_get_theme();
$raindrops_current_data_version = $raindrops_current_data->get( ‘Version’ );

お手数をおかけいたしますが、もう少しお付き合い頂けますでしょうか。

nobita
(@nobita)

7年、 6ヶ月前

theme_enqueue_styles() 内に記述して、バージョンの引数にセットしてください。

トピック投稿者 maki1463
(@maki1463)

7年、 6ヶ月前

お忙しい中何度も本当にありがとうございました。
助かりました！

トピック投稿者 maki1463
(@maki1463)

7年、 4ヶ月前

管理者様へ

こちらに載せたurl部分を削除またはトピックを削除したく思います。
テストサイトのurlではございますが、ドメインが含まれておりますので
検索をするとサイトの名前で上の方に上がってしまいます。
どうかご対応お願いいたします。

10件の返信を表示中 - 1 - 10件目 (全10件中)

トピック「テーマ　WPTuts　子テーマのcssがアクティブにならない」には新たに返信することはできません。

トピックタグ

表示