WPカスタマイズは必ず子テーマで!作成方法全手順【図解】

      2017/01/13

 今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。

WordPressで子テーマが何故必要かというと、テーマはアップデートなど更新が行われると初期化してしまうため、親テーマをカスタマイズし編集しても全て消えてしまいます。それを防ぐ為にも子テーマをつくり、それを編集しておく事でアップデートで初期化されてもカスタマイズした箇所をそのままにしておけるためです。
カスタマイズするなら必ず子テーマをいじろう!ということです。

全部をコピーするのではなく、必要なファイルをコピーしてその都度変更を加えていくという形でOKです。

この手順は重要なので必ず覚えておきましょう。

Sponsored Link

子テーマを作る手順

使用するテーマを決める(確認する)

今回は、現状私が使用しているGiraffe、Twenty Fourteen での説明になりますが、名前が違えど基本は同じです。

WordPressの「外観」→「テーマ編集」

自分が使用しているテーマを右上で選択し、スタイルシート(style.css)の中の一番上あたりに「Theme URI」とあるのでそこの赤線部分に書いてあるテーマ名が必要になってくるのでコピーしてどこかに貼付けておいて下さい。

*例えば下の画像のTheme Nameは「Twenty Fourteen」ですが必要なのは小文字スペースなしのパスで利用出来る「twentyfourteen」です。

こちらはTwenty Fourteen の場合。基本どのテーマでも先頭部分にTheme name があるので、メモにでもコピペしておきます。

サーバーで子テーマを追加する

無料ブログ、例えばFC2ブログなどからWordPressに移って来た人は感覚的に理解が難しいかもしれませんが、サーバーに置かれているWordPressファイルの中を使ってブログを起動させているので、その大元(WordPressを構成するファイル)に行き子テーマを作成する必要があります。

エックスサーバーへ行き、WordPressで使用しているサーバーの「ファイルマネージャー」にログインしていきます。

右側の一番下にファイル名の文字コードという箇所を「UTF-8」に変更しておきます。

これから子テーマを作るドメインを選択していきます。

「public html」→「 wp-content」→「 theme」と開いていきます。

この図を見て頂ければわかると思いますが、サーバーにはこのようにフォルダが入っていてそのなかのテーマフォルダ内に子テーマを作っていく流れになります。

themesフォルダまできたら、右下部分で名前を付けて「フォルダーを作成」をクリックします。

名前はGiraffeだったら「giraffe-child」とかTwenty Fourteenなら「twenty-fourteen-child」などどのテーマの子テーマなのか分かるようにしておきましょう。

ちなみに「UTF-8」をthemesフォルダーまできてから変更すると、またサーバートップに戻ってしまうので、入る前に変更しておくとよいでしょう。

子テーマフォルダー内にファイルをコピーする

子テーマフォルダが出来たので必要なファイルをコピーしていきます。
今回はスタイルシート「style.css」を例に作成手順を書いていきます。

先ほど作成した子テーマファイルをクリックして右下の[作成]部分から、style.css と入力し「ファイルを作成」ボタンをクリック。*フォルダではなくファイルです。UTF-8になっているかも確認。

style.cssファイルが出来るので左のボックスにチェックをいれて「編集」をクリック。

子テーマ内style.cssの内容を書き換える

私の使用しているGiraffe に関しては、作成者のJUNICHIさんが子テーマ内にstyle.cssまで入れて頂いていますのでこの場合に関しては作る必要はありません。(ありがとうございます)

他のテーマの場合を想定した時、例えばTwenty Fourteen の場合は以下のようになります。

Theme Name: ここは子テーマに付けた名前をペーストで入力
Template: ここは親テーマの名前をペーストで入力
@import url(‘../○○○/style.css’); ○の部分に親テーマの名前をペーストで入力

最初の説明でコピペした大文字無しスペース無しの「twentyfourteen」が必要です。

この@以下は親テーマのスタイルシートをインポートして使用する意味なので子テーマのstyle.cssはここまででOKです。

コードをコピペして(必要な箇所は編集)保存文字コードが「UTF-8」になっていることを確認して「編集」クリックで完了です。

ここまでで、子テーマフォルダとその中にstyle.cssが出来たので子テーマを有効化していきます。

子テーマの有効化

「外観」→「テーマ」から先ほど作成した子テーマの「有効化」をクリック。

以上で完了です。親テーマのstyle.cssをインポートしているので見た目は全く変わっていないはずなので、確認しておいてください。

スタイルシートは後に追加したものを優先反映するので、今後スタイルシートで文字サイズなどカスタマイズしていく際は、この子テーマのstyle.cssの最後(@import〜の一文のあとでOK)に、がつがつ追加していってください。

他phpファイルを子テーマ内に複製する

style.cssとfunctions.phpは例外ですが、他phpファイル(header,footer,sidebar,single, etc…)は丸々コピーでOKですのでその方法を解説します。

今回はsingle.phpファイルを例に作成します。

先ほどの流れに沿って、子テーマ内にsingle.phpファイルを作成します。

single.phpと入力しUTF-8になっていることを確認し「ファイルを作成」をクリック。

作成したsingle.php横ボックスにチェックし「編集」をクリック

ここでサーバー側のウィンドウ

は一旦置いておいて、別ウィンドウでWordPressを開いていきます。

「外観」→「テーマの編集」→「親テーマを選び選択」→下の方にある「single.php」をクリック。

コピーしたら、先ほどのサーバーページに戻ります。

WordPress内の親テーマからコピーしたものを張り付けます。

UTF-8を確認し、「編集」をクリック。以上でsingle.phpの複製が完了です。

念のためWordPress側から確認してみましょう。

追加されたのと、中身を確認して問題なければ完了です。

これが子テーマ内ファイル作成の基本操作になります。長々説明しましたが慣れれば難しいことではありませんので覚えておきましょう。

親テーマ丸々コピーするのではなく、カスタマイズが必要になった時に必要に応じて子テーマにファイルを追加していくようにしましょう。

functions.phpを子テーマ内に作成する

functions.phpファイルは、他のファイルとは別で親テーマのファイルと同じ内容を記載たりミスがあると、エラーが発生してブログが真っ白になるなど不具合が生じてしまうので特に注意が必要です。

先ほどの流れに沿って、子テーマ内にfunctions.phpファイル作成し、下のコードを入れておきます。

記入するときは真ん中の行を消してから保存しておきましょう。

また今回は子テーマ内style.cssで@importしているので必要ありませんが、下のコードを入れておくと、親テーマのstyle.cssを読み込み事ができるようになるので、子テーマのstyle.cssには、変更したい箇所のみいれればいい事になります。覚え書き程度に貼っておきます。

 

以上、子テーマフォルダー作成方法からファイルの作成方法の説明でした。

WordPressのカスタマイズをしていく際には、必ず子テーマを編集するようにして下さい。よって今回の内容は必ず覚えておくようにしましょう。

 - Webデザイン, WordPress