HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

WordPressで子テーマを作って既存の親テーマをカスタマイズする方法と理由

約8分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

WordPressで子テーマを作って既存の親テーマをカスタマイズする方法と理由
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

WordPressをカスタマイズしたいけどどうすればいいか分からない。。。

子テーマをカスタマイズすれば良いと聞いたことがあるが、どうやって子テーマを作るの?

あと、なんで親テーマをカスタマイズしたらいけないか理由も教えて欲しい。

今回の記事では、WordPress初心者向け子テーマを作って既存の親テーマをカスタマイズする方法をご紹介し、なぜ親テーマをカスタマイズしてはいけないか理由をご紹介します!

WordPressをカスタマイズする際には、この子テーマを必ず作ってテーマを編集する必要があり、これをしないと、、、

  • 親テーマをアップデートした際にカスタマイズしたデータが消える
  • サイトの表示がうまくいかない

このような原因にもなります!

こんな方にオススメ
  • WordPress初心者の方
  • WordPressの親テーマをカスタマイズしたい方
  • WordPressの子テーマの作り方を知りたい方

WordPressについてあまり詳しくない方は下記の記事をまずはご覧ください!

→ 【初心者向け】WordPressとは?できること、使う前の基礎知識を解説

WordPressの子テーマとは?作る理由

WordPressのテーマにはそもそも2つのタイプがあり、、、

  • 親テーマ・・・メインのテーマ
  • 子テーマ・・・カスタマイズ用のテーマ(親テーマを部分的に編集する)

この2つのタイプがあります。

人気のWordPressテーマや、ブロガー向けのWordPressテーマにはこの子テーマというのがほとんど作られており、親テーマ同様にインストールして使用することができます。

子テーマがあるWordPressテーマの例
  • Cocoon:最強のブロガー向け無料のテーマ(僕のサイトでも使用しています)
  • JIN:人気No1のブロガー向け有料テーマ

プログラミング知識のない、ブロガー向けのWordPressテーマには子テーマがあるケースが多いですが、商用利用可能のテーマやビジネス向けのテーマはオリジナル性を持たせるためプログラマーがカスタマイズする必要があるので、「子テーマは自分で作ってね!」というケースが多いです。

子テーマがないWordPressテーマの例
  • Xeory:バズ部が提供する商用利用可能の無料テーマ
  • Bizvektor:ザ!コーポレートサイトを作りたいときに使うシンプルな無料テーマ

親データでカスタマイズするとアップデート時に問題が!

ネコ君
ネコ君

なんで親テーマでカスタマイズしたらダメなの?

Hiko
Hiko

親テーマを直接編集すると後からトラブルが起きてしまいます!

WordPressのテーマは、開発者が定期的にアップデートを行います。

アップデートする際には親テーマを更新するわけですから、もし親テーマをカスタマイズしてしまうと、アップデートする際にカスタマイズ内容が更新されてしまいます。

つまり、子テーマを作ってカスタマイズすることにより、親テーマをアップデートしてもカスタマイズ内容が上書きされることがありません。

その他のメリットとしては、子テーマをカスタマイズした際に、もし何か表示崩れが起きたり記事が正しく表示されなくなってどうしようもないときでも親テーマを有効化すればデフォルトの状態に戻すことが可能です。

子テーマでカスタマイズすることにより、親テーマのアップデートの際にカスタマイズ内容が上書きされることを防ぐことができる!

WordPressで子テーマを作って既存の親テーマをカスタマイズする方法

Hiko
Hiko

では、実際に手を動かしながら子テーマを作っていきましょう!

とっても簡単なので、安心してください!

子テーマを作ってカスタマイズする大まかな流れ
  1. 子テーマのフォルダを作る(親テーマ名+-child)
  2. style.cssを作る
  3. functions.phpを作る
  4. テーマ管理画面で有効化
  5. 編集したいファイルを編集していきカスタマイズする

1.子テーマのフォルダを作る(親テーマ名+-child)

まず始めに、子テーマのファイルをまとめるために子テーマのフォルダを作成します。

(※今回はバズ部のXeoryExtensionを例に解説していきます!)

themesフォルダの中に、親テーマのフォルダが入っているので同じディレクトリの場所に、

親テーマの名前+ -childで名前をつけて子テーマフォルダを作成します。

この子テーマフォルダの中に、カスタマイズしていくファイルを格納していきます。

2.style.cssを作る

次に作成した、子テーマフォルダの中(xeory_extension-child)にstyle.cssファイルを作成します。

そして作成したstyle.cssファイル内に下記のコードを記入します!

@charset "UTF-8";
/*
Theme Name: XeoryExtension-child
Description: Xeoryの子テーマ
Author: バズ部
Template: xeory_extension
*/
/* all display
-------------------------------------------------- */
Theme Name子テーマの名前を記入します(必須)
Description子テーマの説明文(必須ではない)
Author開発者の名前(必須ではない)
Template親テーマのフォルダ名(超重要)

style.cssの冒頭にこのように記入します。

Templateの部分は、一つでもスペルミスがあると正しく子テーマが認識されないので、注意してください!

3.functions.phpを作る

次に、親テーマのデータを継承するために子テーマフォルダ内にfunctions.phpファイルを作りコーディングしていきます。

そして、作成したfunctions.phpに下記のコードをコピペします。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.css、functions.phpに記載するコードは、

https://developer.wordpress.org/themes/advanced-topics/child-themes/

こちらのWordPress公式サイトから引用しています。

Hiko
Hiko

これで、子テーマの完成です!次に管理画面から有効化します!

4.テーマ管理画面で有効化

次に作成した子テーマフォルダをWordPressの管理画面から有効化していきます。

このように、管理画面に進むと子テーマが表示されていると思うので、有効化します。

子テーマが表示されていない場合は、style.cssとfunction.phpの記載ミスが原因なので、もう一度チェックするようにしましょう!

5.編集したいファイルを編集していきカスタマイズする

主にカスタマイズする内容として多いのが、、、

  • style.cssを編集してデザインをカスタマイズする
  • header.phpやfront-page.phpのHTMLやPHPコードを編集する

この2つが主にカスタマイズする内容だと思います。

この.cssファイルと.phpファイルをカスタマイズする際には特徴と注意点があって、、、

  • style.css→親テーマのstyle.cssに追加する形になる
  • .phpファイル→親テーマの.phpファイルに上書きする形になる

この特徴をしっかりと覚えておきましょう!

style.cssに追加でコードを書きカスタマイズ

「ここの背景色を変えたいな!」「このレイアウトを変更したいな!」などのスタイルをカスタマイズする際には、子テーマ内のstyle.cssにCSSでコーディングしていけばOKです!

←このように好きなスタイリングをしていってデザインをカスタマイズしていきます!

header.php(.php系のファイル)をカスタマイズ

header.phpなどの.phpファイル系をカスタマイズする際にはいくつかポイントがあります。

  1. 親テーマの.phpファイルを子テーマ内に複製する
  2. htmlやphpを編集していく

このように、新規で子テーマ内にheader.phpと作成するのではなく、親テーマのheader.phpを複製する必要があります。(コピペでもOK)

まず始めに、カスタマイズしたい.phpファイルを親テーマのフォルダ内からコピーします。

次にそのコピーした、.phpファイルを子テーマのフォルダ内にペーストします。

あとは、好きなようにHTMLやPHPのコードを編集していけばOKです!

このように、メインのTOPページに要素を追加したい場合には、.php系のファイルを編集する必要があります!

WordPress子テーマの作り方 まとめ

ネコ君
ネコ君

これで、WordPressで自由にカスタマイズできるようになったよ!

いかがでしたでしょうか!!

WordPressをカスタマイズする際には、必ず子テーマを作ってカスタマイズする!

これだけはしっかりと覚えておきましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)