親テーマのstyle.cssが子テーマを適用した際にも呼び出されるようにするコード

Question

長いタイトルですが、親テーマのstyle.cssが子テーマを適用した際にも呼び出されるようにするコードをfunctions.phpに記入したのですが、親テーマのcssが呼び出せていません。呼び出せていないとは、styleシートが聞いていないつまり色とか全くない状態でhy
参考サイト
僕の認識が正しいか聞きたいのですが、

<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

このコードは、どっちのテーマのfunction.phpに記入するのですか？
私は子テーマのfunction.phpに書いたのですが親テーマのstyle.cssを呼び出せていないもので・・・
また、このコードって最後に

?>

を入れないとダメですよね？笑
閉じタグがないと作動しないと思ったのですが・・・
また、このサイトに書かれているように@importを利用して呼び出す方法は時代遅れですよね?

別のコードで子テーマのfunction.phpに書きましたが、結果は一緒で親テーマのcssが反映されていません。

<?php
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')
    );
}
?>

Comments

[退会済みユーザー]

参考サイトでも書かれていますが、子テーマのstyle.cssは編集済みですか？

[lewishome]

親テーマの定義もしました！

[lewishome]

theme nameとtemplateの両方を書きました。

[退会済みユーザー]

親テーマは何を利用していますか？

[lewishome]

twentytwelveです。

[lewishome]

あの、もしかしてテーマによって出来ないとかあるのですか？ネットで調べると、twentytwelveは子テーマが作成できると書いてありましたが・・・

Answer 1

作成したサイトのソースでこちらの2つが読み込まれていないということでしょうか？

<link rel='stylesheet' id='parent-style-css'  href='http://example.jp/wp-content/themes/twentytwelve/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='twentytwelve-style-css'  href='http://example.jp/wp-content/themes/twentytwelvechild/style.css' type='text/css' media='all' />

これが記載されていない場合、子テーマ自体が作れていないまたは有効化されていない可能性があります。

以下は子テーマの作り方のおさらいです。これ自体はできてるんだよ!という場合はこの回答は無視してください。
まぁ、参考にされているサイトに書いてあるままなんですが……。

フォルダ構成例

-themes
  --twentytwelve（親テーマ フォルダ内省略）
  --twentytwelvechild（子テーマ）
     ---style.css
     ---functions.php

子テーマ側のstyle.cssに↓

/*
 Theme Name:   Twentytwelvechild
 Template:     twentytwelve
*/

子テーマ側の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' );
}

これだけで子テーマの作成はできるはずです。
このfunctions.phpで親テーマのstyle.cssを読み込んでいます。
@importは使いません。

まずこの状態を作り子テーマを有効化します。
サイトを表示し、「親テーマの時と同じレイアウトや色」になっているか確認してください。

親テーマと同じ表示になっていたら子テーマがきちんと使えるか確認するため、
子テーマのstyle.cssに何か追加して確認してみてください。

body{background-color:black;}

とかで良いと思います。（確認できたら消していいです）

あとは親テーマの構成を意識しながらcssの編集やテンプレートの追加などカスタマイズできるはずです。
もちろん、追加は子テーマ側でしてください。

また、functions.phpの最後の?>は不要です。
少し前の記事ですがこんなものがありました。
http://thesaibase.com/php/end-tag
※ここにもありますがHTMLと混在させる場合の ?> は必須です。

<?php
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')
    );
}

こちらの書き方でも ?> は必要ありません。

注意点は
・子テーマとはいえ親テーマのフォルダ内に入れるわけではないところ
・Template:に指定するのは親テーマ名ではなく親フォルダ名
・子テーマフォルダ名に空白を入れない
・子テーマの有効化をしたか
このあたりでしょうか。

インストールした直後の、他に何も編集していない状態のワードプレスで以上の手順を踏み、
twentytwelveを親テーマとしてcssの読み込みを確認しました。

Comments

[lewishome]

すみません、importは使わない方がいいですよね？

[lewishome]

すみません、そのコードは何回もfunction.phpに入力しても親テーマのstyle.cssを読み込みません。
import、これは今主力ではないと聞いたのですが、それはなぜですか？
importを使ったら、サイトは壊れますか？

[dit.]

テーマの編集画面で以下のような記述は出てますか？
「この子テーマは親テーマ Twenty Twelve のテンプレートを引き継ぎます。」
また、functions.phpのところに「テーマのための関数」と書いてありますか？

コメント見て気になったのですが、
「function.php」ではなく「functions.php」なのでファイル名が間違ってないか確認してください。

[dit.]

@importを使ってはいけない理由を簡潔に説明出来ませんが、読み込みの順序や速度で色々あるようです。
「@import デメリット」とかで検索してみてください。

[lewishome]

dit.さん、色々と調べましたが、「functions.php」を「function.php」と書いていたのが原因みたいでした。
大変すみませんでした。
ご指摘、有難うございました。