必ず実践してね!WordPressの子テーマの作り方

※この記事は僕のいちばん最初に書いた記事であり、とある企画で転載したものですので参考にしないでください。「子テーマ」については、新しく書いたとってもわかりやすい記事がありますので、そちらを参考にしてください↓↓

あわせて読みたい
WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】どうもこんにちは、りゅう(@ryuta_blog)です! WordPressでブログをやっている皆さん! ちゃんと「子テーマ...

 

 

「テーマをカスタマイズする時、子テーマを作って編集するのが推奨されてるけど、面倒臭いから直接親テーマをいじっちゃえ!」

ちょっと待ったーーー!!!!気持ちはわかりますがそれは絶対にNGです。

実は僕もそれなりにCSSの知識はあったので、最初にテーマのカスタマイズをする時に、親テーマのCSSを直接編集したんです。(まさに上の悪魔のような感じでした)でも結果的に実装したCSSがいくら適切に呼び出しても反映されませんでした。

調べたところ、親テーマを直接カスタマイズしてもCSSがうまく動作しない時があるようです。さらに調べてくと親テーマをアップデートした際に、カスタマイズした箇所が全て初期化されるようです。これはつらい。下記に子テーマの作成が必要な理由をまとめておきます。

  • 直接親テーマをカスタマイズしてもうまくCSSが反映されない
  • 親テーマのアップデートの際、CSSファイルが初期化される
  • CSSファイルの編集でミスをするとレイアウトが崩れる(子テーマがあればリスク回避に)

勉強不足でした。そうと分かれば子テーマを作成しない道はないです。初心者の方でも簡単に作成できますので、あまり身構えず気楽に読み進めてください!

なお、今回はX2サーバーを例に子テーマを作成します。利用されているレンタルサーバーによってやり方は多少異なると思いますが、やる事と流れは変わりません。

子テーマのフォルダを作成する

まず利用されているレンタルサーバーにログインし、ファイルマネージャーを開きます。

X2サーバーの場合、サーバー管理ツールにログインし、「FTPアカウント設定」をクリックします。

子テーマのフォルダを作成するドメインを選択します。

ログインをクリックします。

ファイルマネージャーにログインしますので、そこからテーマのフォルダを開きます。テーマフォルダへは、「該当ドメイン → wp-content → themes」の順にクリックします。

開いたテーマフォルダの中に新しく子テーマのフォルダを作成します。「新規作成」をクリックします。

子テーマのファイル名は半角英数字であればなんでも良いですが、親子関係がわかるようにしましょう。今回は twentytwelve の子テーマを作成するので、「twentytwelve-child」とします。ファイル名を入力後、「フォルダ追加」をクリックします。

子テーマのフォルダが追加されているのを確認し、フォルダを開きます。(先ほどの画像にも既に同フォルダが存在しますがきっと気のせいです、次行きましょう)

「style.css」と「functions.php」ファイルを作成する

フォルダを開いたら、先ほどのフォルダ作成の手順で、「style.css 」と「functions.php」の二つのファイルを作成します。※ファイル作成の時はフォルダ追加ではなく、ファイルを追加ですよ!

「style.css」と「functions.php」ファイルを編集する

作成した二つのファイルに必要な情報を入れていきます。

style.cssファイルの編集

ファイル名の右部にある、紙とペンのようなマークをクリックします。「編集モードでファイルを開きます」と表示されるので、「OK」をクリックします。

開いたら、下記のコードを記述し、「上書き保存」をクリックします。

/*
 Theme Name:   twentytwelve-child
 Template:     twentytwelve
*/

ここで注意点ですが、

「Template: ○○○」と「Theme Name:○○○」の○部分はそれぞれ下記に書き換える必要があります。この記述をミスると子テーマとして認識されませんのでご注意ください。

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

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' );
 
}

以上で子テーマの作成が完了しました。うまく作成されているかチェックしてみましょう!

作成した子テーマをWordPress上で有効化する

いよいよ作成した子テーマを有効化します。WordPressの管理画面から「外観 → テーマ」をクリックします。

頑張って作成した子テーマがちゃんとありました!

有効化して完了です。※もしレイアウトが崩れてるようなら、style.cssの記述ミスを疑ってみてください。大文字と小文字の違いが一つでもあるとうまく動きません。

これで親テーマのレイアウトを引き継ぎ、自分好みにカスタマイズしていける子テーマが作成できました。これからカスタマイズする際は、子テーマのCSSを編集するようにしましょう!

カスタマイズするには、管理画面の「外観 → テーマの編集」をクリックします。

まとめ

どうでしたか?やってみるとかなり簡単だったことが実感いただけたと思います。子テーマは、アップデートの際の初期化を防いでくれたり、自身をバックアップとして使うことができるので、新しいテーマを導入する際には、忘れずに子テーマ作成を行いましょう。

また、有料のテーマには初めから子テーマが備わっているものも多くありますので、一度チェックしてみてはいかがでしょうか?

さて、僕も自分のブログをどんどんカスタマイズしていこう。

ABOUT ME
りゅう
2つのサイトを運営するブロガー。 「好きなことでお金は稼げる」ことを証明するために、日々奮闘中! 新卒で入社したIT企業を半年で退職し、「あ、俺組織向いてないわ」と完全に開き直り、今後の人生で自分が楽しいと思える事しかしないと心に誓う。

COMMENT

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