つまづいたところ – 子テーマの有効化でレイアウトが崩れる。。 – wordpress

twentyfifteenの子テーマを作っています。

wordpress/wp-content/themes/

に、子テーマのフォルダ、twentyfifteen_childを作成。

その中に親テーマtwentyfifteenのstyle.cssをコピペ。（FTPで）

テーマの編集で中身を削除して以下を記述。

 

/*

Theme Name:   Twenty Fifteen Child

Template:     twentyfifteen

*/

 

外観→テーマで、子テーマTwenty Fifteen Childを有効化（違和感ありますが、子テーマのスクリーンショット画像は表示されません）

サイトを確認すると、レイアウトがめちゃくちゃ。。

 

style.cssに以下の記述が抜けていました。

 

/*

Theme Name:   Twenty Fifteen Child

Template:     twentyfifteen

*/

 

@import url(“../twentyfifteen/style.css”);

 

さらに調べていると、この方法だと、読み込み時間が少し遅くなるということ。

以下のようにするのが現在の主流みたい。

 

style.css内は以下のようにする。

 

/*

Theme Name:   Twenty Fifteen Child

Template:     twentyfifteen

*/

 

次に、子テーマのフォルダ内にfunction.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’ );

 

}

 

先走って色々といじったりしていたので、問題解決まで3時間くらいかかりましたorz。

初めは極力シンプルにして動作確認するということを再認識させられました。