子テーマの作り方を解説

子テーマの作り方を解説

WordPressは無料や有料を問わずテーマが充実しているので、サイトのイメージに合うテーマを適用して簡単に全体的なデザインを整えることができます。

と言っても、多少なりともCSSに手を加えてデザインを変えて使っている人がほとんどかと思いますが、親テーマを直接編集してしまうとテーマのアップデートをしたタイミングで消えてしまうため、あらかじめ「子テーマ」をアップロードして適用し、子テーマに編集を加えるという方法がおすすめです。

そこで、この記事ではWordPressの代表的なテーマを例に子テーマのつくり方について解説します。

 

WordPress 子テーマのつくり方

それでは、以下にWordPressの子テーマのつくり方を説明します。

 

子テーマを作成するまでの流れ

はじめに、子テーマを作成するまでの全体の流れについて解説します。

子テーマの作成には、以下の作業を行います。

子テーマ作成の手順

  1. 「style.css」を作成する
  2. 「function.php」を作成する
  3. 子テーマのディレクトリを作成する
  4. サーバーに「style.css」と「function.php」をアップロードする
  5. WordPress管理画面で子テーマを適用する

具体的にどのような作業をするのか、それぞれの詳しいやり方については以下の項目で説明します。

 

①「style.css」を作成する

まず、子テーマを作成するためには、テキストエディタを使って最低限「style.css」「function.php」という2つのファイルを作成します。

最初に①の「style.css」を作成する方法について見ていきます。

ここで行う作業の流れは以下のとおりです。

「style.css」を作成する手順

  1. テキストエディタを起動
  2. 「Theme Name」(子テーマの名前)と「Template」(親テーマのディレクトリ名)を入力
  3. ファイルの拡張子に「.css」を選択、「style.css」というファイル名で任意の場所に保存する

次に、上記①~③について詳しく説明します。

まず、「style.css」を作成するためにテキストエディタを起動します。

※どのテキストエディタを使うか特に指定はありませんが、「サクラエディタ」などの機能性の高いテキストエディタを使うと作業がしやすいです。

そして、テキストエディタを起動したら、以下のような感じで「Theme Name」「Template」に子テーマの名前と親テーマのディレクトリ(フォルダ名)を記載します。

Theme Name: Twenty Seventeen Child
Template: twentyseventeen

※内容は使用しているテーマによって変わってくるので、テーマに合った情報を入力してください。

必要な情報を入力したら、ファイルの拡張子に「.css」を選び、ファイル名を「style.css」にします。

そして、ファイルを一旦任意の場所に保存したら、ここまでの作業は完了です。

 

②「functions.php」を作成する

次に、「functions.php」を作成します。

具体的な作成方法は以下の通りです。

「functions.php」の作成手順

  1. テキストエディタを起動
  2. 以下に記載のコードをコピーペーストする
  3. 拡張子に「.php」を選択して任意の場所に保存する

①~③の流れは、CSSをつくる時の手順とほぼ同じです。

テキストエディタを起動したら、親テーマの後に子テーマのCSSを読み込むための以下のコード入力します。

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

そして、「名前を付けて保存」拡張子に「.php」を選択し、「functions.php」というファイル名を付けてください。

一旦任意の場所に保存したら、ここまでの作業は完了です。

 

③サーバーにディレクトリを作成する

次に、子テーマをアップロードするためのディレクトリ(フォルダ)を作成します。

ここで行う作業の流れは以下の通りです。

子テーマのディレクトリを作成する手順

  1. FTPサーバーにログインする
  2. WordPressをインストールしているディレクトリの「wp-content」⇒「themes」内にフォルダを作成
  3. ②で作成したフォルダの名前を「(親テーマの名前)-child」にする

上記①②を詳しく説明すると、まずFTPサーバー(または「WebFTP」や「ファイルマネージャー」)にログインして、WordPressをインストールしているディレクトリにアクセスします。

そして、その中の「wp-content」⇒「Themes」の中にフォルダを作成してください。

次に、そのフォルダの名前を「(親テーマの名前)-child」に変更します。

※たとえば、「Twenty Seventeen」というテーマを使っている場合は、親テーマのディレクトリが「twentyseventeen」という名前になるので、「twentyseventeen-child」という名前のフォルダを作成します。

子テーマのフォルダができたら、以下④の作業に進みます。

 

④ファイルをアップロードする

次に、上記③で作成した子テーマのフォルダに「style.css」「functions.php」の2つのファイルをアップロードしてください。

※具体的なアップロード手順はサーバーによって異なるため、ここでは省略します。

 

⑤WordPress管理画面から子テーマを適用する

④までの手順が完了したら、次にWordPress管理画面にログインし、子テーマを適用する作業を行います。

ここで行う作業は、以下の通りです。

子テーマの適用方法

  1. WordPressの管理画面にログインして、「外観」⇒「テーマ」を表示
  2. 作成した子テーマが表示されていることを確認
  3. 子テーマを選択して適用する

子テーマを適用する方法は、親テーマを適用する時と同じ手順です。

まずは管理画面「外観」⇒「テーマ」をクリックして、テーマの一覧を表示します。

そして、一覧の中に子テーマが表示されていることを確認したら、子テーマを選択、有効にして完了です。

子テーマのCSSに追記して、ブログのデザインをカスタマイズをしていくことができます。

※もしテーマの一覧の中に子テーマが見つからない場合は、①~④の作業の中で間違いがある可能性があります。「style.css」に入力した親テーマのディレクトリ名が違っていないかなどを確認して、修正してからもう一度やり直してみてください。

 

まとめ

以上、WordPressテーマの子テーマを作成する方法について説明しました。

WordPressの子テーマは簡単な手順で作成することができます。「style.css」「functions.php」、子テーマのディレクトリを作成し、2つのファイルをディレクトリにアップロードすればOKです。

作成した後は、WordPressの管理画面で子テーマを選択して適用し、ブログのデザインなどを変更することができます。

親テーマのアップデートが実施されても、カスタマイズが消えることはありません。

子テーマの作成はそれほど手間が掛かる作業ではないので、子テーマが提供されていないテーマを使っている場合には、作成しておくことをおすすめします。

ブログのつくり方カテゴリの最新記事