wordpressのテーマで子テーマを作成して、子テーマでCSSやfunctions.phpを追加してカスタマイズする方法

wordpressのテーマで子テーマを作成して、子テーマでCSSやfunctions.phpを追加してカスタマイズする方法

wordpressでWEBサイトを作成するときは、テーマを使います。

テーマも完全に自分でオリジナルで作る場合は、子テーマも必要ないかもしれませんが、
有料、無料問わず、なにかしらの既成のテーマを利用してブログやホームページを作成する場合、

テーマのバージョンアップなどがあると、テーマをバージョンアップしたときに、折角自分でstyle.cssなどに追加で記載したり変更したカスタマイズ部分が消えてしまうことがあります。
そんな時、子テーマがあれば、親テーマがバージョンアップされても大丈夫です!

そこで、
子テーマの作り方と適用方法について書いてみます。

ワードプレスの子テーマの作り方

たとえば、テーマフォルダ名が「abc」だったとします。
その場合、子テーマフォルダ名を「abc_custom」などと付けます。

そして、そのabc_customの中に、以下の3つのファイルを作成してください。

・style.css
・functions.php
・custom-style.css

それぞれのファイルの中身について

●style.cssの中身↓

/*   
Theme Name: abc Child
Description: abc 子テーマ
Template: abc
*/

●functions.phpの中身

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
function enqueue_my_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // 親テーマのcss
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom-style.css', array('parent-style')); // 子テーマのcss
}

●custom-style.cssの中身

/* 追加でカスタマズしたいCSSをここのファイルに記載してください */

子テーマの適用のやり方

親テーマを適用した後に、子テーマを選択して適用するだけです!

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP