WordPress PR

【WordPress】初心者でも簡単!子テーマの作り方

記事内に商品プロモーションを含む場合があります

WordPressのテーマをカスタマイズする際には欠かせないのが子テーマです。
私もWordPressのサイトを制作するにあたって、まずは子テーマを作り、カスタマイズしまくっています。
そんな子テーマの作成方法を、改めてまとめてみることにしました。

子テーマとは何か?

子テーマとは、通常のテーマ(親テーマ)と組み合わせて使う、カスタマイズ用のテーマのことです。
管理画面の外観→テーマより、子テーマを有効化することで反映されます。

もし、テーマに直接カスタマイズのコードを書き加えますと、テーマがアップデートされた時に変更が水の泡になってしまいます。
アップロードの度に毎回カスタマイズしていては非常に面倒です。
しかし、子テーマを作り、子テーマでカスタマイズしておけば、親テーマをアップデートしても影響を受けずに済みます。

子テーマは、親テーマの内容を継承出来ますので、親テーマの内容を丸ごとコピーする必要はありません。
子テーマに変更点だけ記述すれば、親テーマ+子テーマの内容が反映されます。

子テーマの作成方法

それでは、デフォルトのテーマ「Twenty Seventeen」の子テーマを作成していきます。

子テーマに最低限必要なもの

子テーマに最低限必要なファイル、ディレクトリは以下の3つのみです。

  • 子テーマディレクトリ
  • style.css
  • functions.php

子テーマディレクトリの作成

FTPソフトでサーバーに接続します。
/wp-content/themes 配下にテーマディレクトリが複数存在しています。
これらが、管理画面の外観→テーマで表示されているテーマです。
今回は「twentyseventeen」を親テーマとしますので、まずは「twentyseventeen」の子テーマディレクトリを作成します。

FTPソフト上で、「twentyseventeen-child」というディレクトリを新規作成します。

style.cssの作成

子テーマ「twentyseventeen-child」ディレクトリ内に、「style.css」ファイルを新規作成します。

作成したら、ファイルをテキストエディタで開き、以下の内容を記述して保存します。
そのままコピペすればOKです。

「Theme Name」には、子テーマの名前を記載します。外観→テーマに表示されるテーマ名になります。
「Template」には、親テーマのディレクトリ名を記載します。

functions.phpの作成

子テーマ「twentyseventeen-child」ディレクトリ内に、「functions.php」ファイルを新規作成します。

作成したら、ファイルをテキストエディタで開き、以下の内容を記述して保存します。
そのままコピペすればOKです。

これを記述することにより、親テーマのstyle.cssを呼び出せるようになりました。
親テーマのstyle.cssが反映されますので、子テーマのstyle.cssには変更点だけ記述すれば良いということです。

子テーマの有効化

子テーマそのものの作成が完了しましたので、有効化させてみます。
管理画面の外観→テーマをクリックすると、子テーマが追加されていますので、通常のテーマと同様に「有効化」ボタンをクリックすれば、子テーマが有効化されます。

もし、子テーマの画像も設定したいという場合は、子テーマ「twentyseventeen-child」ディレクトリ内に、「screenshot.png」という名前にした画像ファイルをアップロードすれば、反映されます。

子テーマが反映されているかの確認

現時点では何も変更を加えておらず、親テーマと全く同じ状態ですので、子テーマのstyle.cssにカスタマイズを加えてみます。

5〜7行目で、タイトルの文字色を緑にする記述を追加しました。

変更前

タイトル文字色は白です。

変更後

タイトル文字色が緑に変更されましたので、子テーマが反映されていることが確認出来ました。

まとめ

テーマをカスタマイズしたい場合、直接カスタマイズするのではなく、子テーマを作成してからカスタマイズしましょう。
意外と簡単に作成出来ますので、ぜひお試しください。

wordpress
【WordPress】子テーマのレイアウトが崩れる原因前回の記事(【WordPress】初心者でも簡単!子テーマの作り方)の手順でWordPressの子テーマを作成し、いざ有効化してみたら、...

COMMENT

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

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