エックスサーバーで子テーマを作成する方法

30 comments

以前の記事で子テーマ作成する方法を書いたのですが、ロリポップでのやり方だったので今回はエックスサーバーでの子テーマの作成方法を紹介していきたいと思います（コメントでリクエストも頂いたので）。

まず子テーマについておさらいしておくと、テーマが更新する度にカスタマイズしたファイル達は全部初期化されるので、親テーマをコピーした子テーマを作成して更新しても初期化されないようにしておくという感じです。

ただ、テーマを構成する全てのファイルをコピーする必要はなく、修正するファイルだけコピーしておけばOK。それ以外は親テーマのファイルを読み込むのでカスタマイズしたり、修正したりするファイルだけをコピーして子テーマに追加していきます。

今回は実際にどのように子テーマを作るのかという部分を解説していきます。

WordPressをカスタマイズする時に色々なphpファイルをコピーしていきますので、この手順はしっかりと覚えてしまいましょう。それから最後に重要な注意事項もありますので、必ず最後まで記事を読んで下さいね。

親テーマのテーマ名を確認しておく

まずは今回利用するテーマ「Twenty Twelve」をインストールします。別のテーマでも構いません。

例えばStinger5を利用するのであればダウンロードサイトからStinger5をインストールという感じです。

※すでにインストール済みならそのまま次に進んで下さい。

WordPressの管理画面から「外観」⇒「テーマ」と進み、「新しいテーマを追加」という部分をクリックします。

検索窓があるので「Twenty Twelve」と入力して検索してインストールしておきます。

インストールできたら一度「有効化」しておきます。

これでテーマ（親テーマ）が有効化されますので、有効化できたらWordPressの外観⇒「テーマの編集」と進みます。

テーマの編集をクリックすると「スタイルシート」が表示されますので、最初の方に書かれている「テーマ名（Theme Name）」を確認しておいて下さい。

Twenty Twelveの場合のテンプレート名は「Twenty Twelve」になってますね。

スティンガー5（今現在のバージョン）の場合はこのようになってます。

このテーマ名（Theme Name）は後で使うのでメモ帳などに貼り付けておきましょう。

エックスサーバのファイルマネージャーから子テーマを追加

WordPressを構成するフォルダに子テーマを追加する必要があるのですが、WordPressを構成するフォルダへ行く場合には「ファイルマネージャー」にログインする必要があります。

エックスサーバーの「インフォパネル」にログインすると「ファイルマネージャー」にログインする項目があります（直接ファイルマネージャーにログインしてもOK）。

ファイルマネージャーにログインしたらファイルがズラリと並んでいるのですが、最初に画面右下の「ファイル名の文字コード」を「UTF-8」に切り替えておきましょう。

「ファイル名の文字コード」を「UTF-8」に切り替えたら子テーマを追加するドメイン名を選択。

次に「public_html」をクリックします。この「public_html」の中にWordPressのファイル達があります。

ここからは「wp-content」⇒「themes」とクリックして行きます。

これでWordPressのテーマが入っているフォルダ「themes」までやってきました。テーマフォルダの中に「子テーマのフォルダ」を作成すればいいという訳です。「themes」のフォルダで任意のフォルダ名（私の場合はchild）をつけて作成します。

画面右下にフォルダを作成するコーナーがありますので、ここで子テーマフォルダ名を入力して「フォルダの作成」をクリック。

するとファイル一覧のところに今作成した子テーマのフォルダが表示されますのでそれをクリック。

この子テーマの「フォルダ」の中にスタイルシート「style.cssファイル」を作成します。ファイルですのでフォルダと間違わないように。ファイル名は「style.css」と入力してファイルを作成をクリック。

これで子テーマ（child）のフォルダの中にスタイルシート「style.css」というファイルが追加されましたので、「style.css」の左のチェックボックスにチェックを入れて右の「編集」をクリック。

「style.css」の編集画面になります。この内容の部分に普通は親テーマのファイル（今回は「style.css」）をそのままコピぺして保存します。しかしながらこの「style.css」に関しては別の記入で簡単に作成する事ができます。次の記述をします。

テーマTwentyTwelveの場合の記述です。

/*
Theme Name: Child
Template: twentytwelve
*/
 
@import url('../twentytwelve/style.css');

これは作成するテーマ名と親テーマの名前（template）、それから＠の部分がtwentytwelveの「style.css」をインポートして下さいという意味です。

「Theme Name」には子テーマの名前（私の場合はChildにしてます）。それから「Template:」の部分に最初に調べておいた親テーマのテーマ名を入れます。

また、「@import url(‘../●●●●/style.css’);」の●●の部分にも親テーマのテーマ名を入れます。

上記コードを便宜変更し、子テーマのスタイルシートの内容の部分に貼り付けます。貼り付けたら下の「保存文字コード」を「UTF-8」にしておき、「編集」をクリックすると保存されます。

これで子テーマにスタイルシートが作成できたのでこの子テーマを有効化していきましょう。

子テーマを有効化してみる

ここまでで新しく「Child」という子テーマを作成しましたので、これを有効化して行きます。今度はWordPressの管理画面から「外観」⇒「テーマ」と進んで下さい。

すると先ほど作った「Child」というテーマがありますので、「有効化」をクリック。

するとこの子テーマが有効化されます。以上でテーマの有効化は完了です。

一度サイトの表示を確認するとそのまま親テーマと同じように表示されるはずです。これで子テーマにスタイルシートが追加できました。

子テーマに追加したスタイルシートに関しては親テーマの記述がインポートされてますので、スタイルシートをカスタマイズする場合には変更したいコードだけをどんどん下に追加していけばOKです（CSSは後に書いた物が優先的に反映されるため）。

※スタイルシートの場合です。

スタイルシート（CSS）以外のphpファイルを子テーマに追加するには

上記の手順でスタイルシートを子テーマに追加しましたが、他のphpファイル「header.php」とか「single.php」とかを子テーマに追加する場合もほとんど同じです。

ただ、スタイルシートのように「インポート」は使わずに親テーマの内容まるごとコピーして子テーマに追加します。

前回の記事で書いたようにWordPressのテーマは沢山のphpファイルでできています。

カスタマイズしたいファイルだけ子テーマに追加しておき、コピーしたファイルの方をカスタマイズします。

例えばコメント欄のカスタマイズをしたい場合は「comments.php」というファイルを子テーマにも作成し、親テーマから「comments.php」のファイルの中身をコピペして子テーマの「comments.php」に追加して保存。

それでコピーした子テーマの「comments.php」をカスタマイズする訳です。

ついでに子テーマに「single.php」も追加してみよう

練習も兼ねて子テーマに「single.php」も追加してみましょう。

まずは先ほど同様にエックスサーバーのFTPからログインし、最初に画面右下の「ファイル名の文字コード」が「UTF-8」になっているか確認。

「ファイル名の文字コード」を「UTF-8」に切り替えたら子テーマを追加するドメイン名を選択。

次に「public_html」⇒「wp-content」⇒「themes」⇒「Child（先ほど作った子テーマ）」とクリックして行きます。

この子テーマ「Child」の中に「single.phpファイル」を作成します。

ファイルですのでフォルダと間違わないように。ファイル名は「single.php」と入力して「ファイルを作成」をクリック。

これで子テーマ（child）のフォルダの中に「single.php」というファイルが追加されましたので、「single.php」の左にチェックを入れて「編集」をクリック。

ここまで準備できたらこのファイルの内容に親テーマの「single.php」を追加する必要がありますので、一度このまま放置します。

別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマの編集」をクリックして下さい。

そして右上の「編集するテーマを選択」という部分から親テーマ（twenty twelve）を選び、「選択」をクリック。

右側にずらりと沢山のphpファイルが並んでいると思いますので、その中から「単一記事の投稿 (single.php)」というのクリック。

すると親テーマ「twenty twelve」の（single.php)というファイルの中身が表示されていると思います。この中身をすべてそのままコピーします。

コピーしたら先ほどの放置いていたエックスサーバーのsingle.phpのファイルの中身にペースト。

それで後は「保存文字コード」を「UTF-8」にして「編集」をクリックで完了。

最後に子テーマに反映されているか確かめてみます。WordPressの管理画面から「外観」⇒「テーマの編集」と進みます。

画面の右側の「編集するテーマを選択」で「Child」を選び「選択」をクリックすると最初に作った「style.css」と今作った「single.php」が表示されていればＯＫです。このコピーして追加する方法が子テーマの基本になります。

このような手順で作成して行きます（functions.phpだけは例外です）。注意点はCSSの時にも書いたように「保存文字コード」を「UTF-8」にしておく事です。

※親テーマの全部のファイルを子テーマに追加する必要はありません。子テーマに無いファイルは親テーマのファイルを読んでくれるので、変更する予定のファイルだけを子テーマにコピーしていけばOKです。

それと子テーマに「functions.php」を追加する場合には注意が必要です。このファイルはそのまま親テーマの記述をコピーしてしまうとエラーが発生してブログが表示されない状態になります。「functions.php」を子テーマに追加したい場合には先に次の記事を読んでおいて下さい。
⇒子テーマにfunctions.phpを追加する時の注意点

それではいよいよカスタマイズ本編へ行きます。