HOME  /WordPress(応用)
 /子テーマの設定方法
2020年03月22日

子テーマの設定方法

旧サイトの子テーマの作り方は、親テーマのstyle.cssをそのままコピーして修正する方法で作成しました。

しかしこのやり方は「親テーマ」と「子テーマ」の分離があまり綺麗でありません。

そこで親テーマを「twentytwelve」子テーマを「twentytwelve_child」とする、スマートなやり方を下記に解説します。

1.子テーマの基本構造を作成する

2.子テーマに親のCSSを指定する

3.子テーマのアクティブ化

1.子テーマの基本構造を作成する

①子テーマフォルダ「twentytwelve_child」を新規に作成する。

※ファイル名は何でも良いですが、親テーマフォルダ名の後ろに「_child」を付けるのが良いと思います。

 

②twentytwelve_childフォルダの直下に「style.css」を新規に作成する。

そのファイルの先頭に下記コードを入れる。

/*
Template:twentytwelve
Theme Name:twentytwelve_child
*/

※1.Template:親テーマのフォルダー名を指定します。テンプレート名ではありません。

※2.Theme Name:子テーマのフォルダー名を指定します。

 

2.子テーマに親のCSSを読み込む方法

子テーマに親テーマのCSSを取り込む方法には2つの方法があります。

①親テーマのCSSをコピーして修正する(以前の方法)

②functions.phpで親テーマのCSSを指定する。

そこでここでは②の方法を解説します。

 

2-1.functions.phpで親テーマのCSSを読み込む方法

子テーマ直下に「functions.php」ファイルを作成します。

上記の「functions.php」の先頭に下記を記述します。

//親テーマのスタイルシートを読み込む
function theme_enqueue_styles(){
  wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css' );
} 
add_action('wp_enqueue_scripts', 'theme_enqueue_styles' );

※1.関数名「theme_enqueue_styles」は任意名称です。

※2.wp_enqueue_style()は、スタイルシートを読み込む関数で、これで親テーマにある「style.css」を子テーマに読み込んでいます。

※3.上記の読み込みで「get_template_directory_uri()」を利用している点に注意してください。

 メモ

親テーマと子テーマのファイルの読み込み関数の違い

やりたい事 説明

親テーマのファイル

 

get_template_directory_uri()

例えば、
get_template_directory_uri().’/style.css’は、親テーマにある「’/style.css’」を指します。

子テーマのファイル

 

get_stylesheet_directory_uri()
例えば、
get_stylesheet_directory_uri().’/style.css’は子テーマ(有効化されたもの)にある「’/style.css’」を指します。

 

3.子テーマのアクティブ化

テーマフォルダに「screenshot.jpg」または「screenshot.png」の名前で画像を登録すると、この画像が子テーマの画像になります。

以上の結果、子テーマの中のファイルは下記になります。

 

管理画面の「外観→テーマ」で、子テーマをアクティブ化します。

 

以上で、子テーマの設定が完了しましたので、以降は子テーマをベースにしたプログラム開発がスタートします。

 プログラム作成で気を付ける事※重要
 

CSSは、親テーマのCSS→子テーマのCSSの順番で呼ばれます。
よって子テーマのCSSが優先されます。

 

②一方ファンクションは、子テーマのファンクション→親テーマのファンクションの順番で呼ばれます。
よって親テーマのファンクションが優先されます
子テーマと親テーマに同一名のファンクションがある場合は、親テーマのファンクションをリムーブする処理が必要になります。

 

一般プログラムは、子テーマに該当プログラムが無い場合は、親テーマのプログラムが利用されます。

icon-pencil-square-o

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。