【子テーマって?】初心者のためのWordPress子テーマの作り方!functions.phpとcssで解決します。

こんにちは、クリブロ です!

今回はWordPressの子テーマについて、超わかりやすく解説いたします。

結論、functions.phpcssという2つのファイルを作成するだけで解決します。

いろんなサイト見ても、結構「どゆことだ?」ってなることが多いので、初心者でもわかるようにシンプルかつ丁寧に解説したいと思います!

この記事は、

 のアイコン画像 

そもそも子テーマって何かわからん!

 のアイコン画像 

どうやって子テーマを作れば良いんだろぉ〜〜??

って方のための記事となっております。

目次

【そもそも子テーマとは?】子テーマを作る理由

子テーマとは、簡単にいうと既存テーマを自分好みに安全にカスタマイズするために用意するものとなります。

WordPressテーマには、親テーマ、子テーマと呼ばれるものがありますが、

  • 親テーマ → そのテーマ自体のこと。基本のテーマ。
  • 子テーマ → カスタマイズ用に作成するテーマ。

ということになります。

 のアイコン画像 

なんで、基本のテーマにそのまま上書きしちゃいけないの〜〜?

って思う方もいるかと思いますが、その理由は直接テーマを編集してしまうと弊害が起こるからです。

それは、テーマがアップデートされると変更が失われるというものです。

既存のWordPressテーマというのは、
WordPressの仕様の変更や、新しい機能の追加のために適宜アップデートされます。

そのアップデートごとに、自分が独自で修正・変更した点が消されてしまっては、大変ですよね?

なので、子テーマでカスタマイズしよう!ということになります。

つまり、子テーマでカスタマイズすることで、

  • バージョンアップにも耐えれる(子テーマを使用すればテーマの変更は確実に保持される。)
  • 簡単に、気兼ねなく自分のカスタマイズが書ける
  • テーマの重要な記述を消してしまうリスクが低くなる
  • 親テーマをベースにするので開発時間を短縮できる
  • WordPressのテーマの適切な開発を学べる

と言ったメリットがあります!

クリブロのアイコン画像クリブロ

親テーマで骨格をバックアップした上で、子テーマで自分好みにカスタマイズするイメージだね!

子テーマの仕組みについて

WordPressテーマ内のファイルは基本的に、「親テーマ→子テーマ」の順に読み込まれます

つまり、子テーマは親テーマを継承後に反映されるということです。

そうすれば既存テーマのコードが反映しながら自分のコードを上書けるためです。

例えば、固定ページのテンプレートである「page.php」が親テーマにあるとしても、
子テーマにも「page.php」があれば、子テーマの「page.php」が反映されます。

これは固定ページに限らず、基本的にはどのテンプレートファイルでも子テーマが上書きされます!

CSSの場合は”上書き”ではなく、”追加”となりますので、ご注意を!
親テーマのCSSはそのまま反映された上で、子テーマのCSSが追加されるイメージです。

クリブロのアイコン画像クリブロ

基本的には子テーマが優先されると覚えておこう!

【これで解決!】子テーマの作り方

結果からいうと、style.cssfunctions.phpを用意する。」これだけです。

詳しく見ていきましょう!

子テーマのフォルダを用意する

WordPressテーマ内のthemesフォルダの直下に「(親テーマ名)-child」の名前で、
新規フォルダを作成しましょう!

名前については、絶対ではないですが、暗黙の了解的にこの形がベターです。

例えば「creblo」っていう親テーマであれば、「creblo-child」みたいな感じです!

style.cssを作成する

新規作成した子テーマフォルダ内に「style.css」という名前でCSSファイルを作成します。
style.cssのコードの記述例を以下に載せておきますね!

/*
 Theme Name:   Creblo Child ←子テーマ名 ※必須
 Theme URI:    http://creblo-themes/creblo/ ←テーマのサイトURL
 Description:  Creblo Child Theme ←テーマの概要
 Author:       Creblo ←テーマの制作者
 Author URI:   https://creblo.com/ ←テーマのサイトURL
 Template:     creblo ←親テーマのディレクトリ(フォルダ)名 ※必須
 Version:      1.0.0 ←バージョンの数字
*/

基本的には、

  • Theme Name → 子テーマ名
  • Template → 親テーマのフォルダ名

の2点が記述されていれば、OKです!

あとは親テーマのcssの読み込みと、追加したいcssを記述しましょう!

なので、最低限の記述で子テーマでcssを上書きするなら、こうです。

/*
Theme Name: Creblo Child
Template: creblo
*/
 
/* ↓追加したいスタイルを記述↓ */
 
h1 {
    width: 100%;
}

functions.phpを作成する

次に同じく子テーマフォルダ内に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' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

これで子テーマを認識させることができます!

クリブロのアイコン画像クリブロ

コピペで簡単!あとは子テーマ有効化するだけ!

子テーマを有効化する

子テーマの認識はできたので、あとは管理画面の「外観 > テーマ」から、子テーマを有効化しましょう!

うまくできていれば、子テーマが表示されているはずです!

有効化したら、追加でcssなどを記述して反映を確かめてみてくださいね!

既に子テーマが用意されている場合

既存テーマの中には元々、子テーマが用意されているパターンのものもありますので、
その場合は、その子テーマフォルダをthemesフォルダの直下に配置して、有効化してあげるだけでOKです!

まとめ

今回は子テーマがなんなのか、何のために作成するか、そして作成の手順について解説いたしました!

自分も最初の頃は、「なんのこっちゃ?」って感じでしたが、実際にやってみると案外カンタンにできちゃうものなので、
これを機にWordPressテーマをカスタマイズしてみてください!

今回の記事がわかりやすかったら、是非SNSなどでシェアいただけると幸いです〜。

クリブロのアイコン画像クリブロ

子テーマを使いこなして、WordPressカスタマイズしてみよう!

この記事を書いた人

フリーランスとして、Web制作全般に携わっております。
日々クリエイティブなことに触れるなかで、皆さんにもクリエイティブで心を豊かにできればと思い、このサイトを立ち上げました。
-いつもの日々に、クリエイティブを。-

コメント

コメントする

目次
閉じる