WordPress子テーマの作り方

スポンサーリンク
Pocket

 

テーマに変更を加える場合は子テーマ内で変更操作をします。色を変えたり、文字の大きさや装飾して見栄えを変える場合はstyle.cssに追記していきます。HTML部分を変える場合などは、親テーマからphpファイルを子テーマディレクトリにコピーしてから変更を加えます。

下図のような構成になります。

/wp-content/themesディレクトリ内にTwenteen-childというディレクトリを作り、style.css functions.php という2つのファイルを作成します。

 

 

子テーマのディレクトリ名は親テーマの「ディレクトリ名-child」と付けるのが推奨されています。

style.css ファイル

style.cssファイルが無いと子テーマとして機能しません。style.cssのスタイルシートヘッダという部分を読み込んでWordPressが子テーマであると判別してくれるのです。

 

1
2
/*
Theme Name: twentyfifteenの子テーマ
Template: twentyfifteen
*/

・Theme Name:子テーマの名前(日本語可)(Twenty seventeen-child)

・Template:親テーマのテーマディレクトリ名 (Twenty seventeen)

※@import: ~を追加するという設定方法は現在は、この部分をfunctions.phpに記入するのが現在の推奨設定となったようです。

functions.php ファイル

親テーマのstyle.cssと子テーマのStyle.cssを順番に読み込む機能を設定する必要があります。 

 

1
2
3
4
5
6
7
8
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>

 

以上で終了です。コードのコピペでも大丈夫です。

WordPressの管理画面より、ダッシュボードの外観⇒テーマを開くと、作成した子テーマが表示されているので「有効化」ボタンを押すだけです。

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください