前回までの記事でWordPressをカスタマイズするには子テーマを最初に作っておく事が重要という記事を書いてきました。
おさらいしておくと、テーマが更新する度にカスタマイズしたファイル達は全部初期化されるので、親テーマをコピーした子テーマを作成して更新しても初期化されないようにしておくという事でした。
ただ、テーマを構成する全てのファイルをコピーする必要はなく、修正するファイルだけコピーしておけばOK。それ以外は親テーマのファイルを読み込むのでカスタマイズしたり、修正したりするファイルだけをコピーして子テーマに追加していきます。
今回は実際にどのように子テーマを作るのかという部分を解説していきます。
WordPressをカスタマイズする時に色々なphpファイルをコピーしていきますので、この手順はしっかりと覚えてしまいましょう。それから最後に重要な注意事項もありますので、必ず最後まで記事を読んで下さいね。
また、今回はロリポップ版での解説ですが、ロリポップではなくエックスサーバーを利用している場合にはこちらの記事を参考に子テーマを作成して下さい。
子テーマを作り方と手順
先に子テーマを作る流れを大まかに説明しておきますね。ロリポップの場合の手順になります。
- ロリポップ側で新しいフォルダを作成。
- 親テーマ（今回はtwenty twelve）のファイルをコピー。
- ロリポップで作成したフォルダにコピーしたファイルを貼り付け。
という流れが大まかな流れになります。
基本的にはWordPressの中に「themes（テーマ）」というフォルダがあり、インストールされているテーマがそのフォルダの中に入っています。その中に新しくテーマを作成していく流れになります。実際にやってみるとすぐに理解できますよ。
今回は２つのファイルをコピーしてみましょう。なぜ２つかというときちんと理由がありますのでそれも説明していきます。
親テーマのインストール
まずは今回サンプルとして利用する親テーマ「Twenty Twelve」をインストールします。別のテーマでも構いません。
※すでにインストール済みならそのまま次に進んで下さい。
WordPressの管理画面から「外観」⇒「テーマ」⇒「新しいテーマを追加」をクリック。
検索窓があるので「Twenty Twelve」と入力して検索してインストールしておきます。
インストールできたら一度「有効化」しておきます。
これでテーマ（親テーマ）が有効化されますので、有効化できたらWordPressの外観⇒「テーマの編集」と進みます。
テーマの編集をクリックすると「スタイルシート」が表示されますので、最初の方に書かれている「テーマ名（Theme Name）」を確認しておいて下さい。
私の使ってるTwenty Twelveの場合のテンプレート名は「Twenty Twelve」になってますね。
このテーマ名（Theme Name）は後で使うのでメモ帳などに貼り付けておきましょう。
実際に子テーマを作ってみよう
最初にコピーするのは「style.css」というファイルです。これから子テーマを作り有効化する訳ですが最初に必要なのがこの「style.css」になります。スタイルシートというやつです。
スタイルシートはテキスト文字の大きさやフォント、各部分の装飾をするためのファイルです。それではまずロリポップへ移動しログインしてユーザー専用ページへ移動しておいて下さい。
ロリポップユーザー専用ページに移動できたら「サーバーの管理・設定」から「ロリポップFTP」をクリック。
ここに最初独自ドメインを設定した時に作った自分のサイトのフォルダがありますのでこれをクリック。
そのフォルダの中身一覧が表示されますので、「wp-content」というのをフォルダをクリックします。これはWordPressの中身という意味です。
「wp-content」のフォルダの中かから「themes（テーマ）」というフォルダをクリックします。
「themes（テーマ）」というフォルダの中に今現在WordPressにインストールされている「テーマ」の一覧が表示されていると思います。
この「themes（テーマ）」の中にここに新しく「子テーマ」のフォルダを作って行きます。この「themes（テーマ）」というフォルダの画面で「新規フォルダ作成」というボタンをクリック。
新規フォルダ名は何でもいいですが、子テーマなので、「Child」と名づけています。フォルダ名を決めたら「保存」をクリックします。
すると「themes（テーマ）」というフォルダの中に今作成した「Child」というフォルダが表示されているはずですので、これをクリックします。
当然今作ったフォルダにはまだ中身はありません。ここの中に今度は「ファイル」を作成して行きます。フォルダ名が「Child（私の場合）」になっている事を確認して今度は「新規ファイルを作成」をクリック。「フォルダ」ではなくて、「ファイル」を作成です。
新規ファイル名に「style.css」と入力します。これは深く考えずにこのまま記入。そして、その下の部分にファイルの内容を記入する部分があります。
この内容の部分に普通は親テーマのファイル（今回は「style.css」）をそのままコピぺして保存します。しかしながらこの「style.css」に関しては別の記入で簡単に作成する事ができます。
例えばTwenty Twelveのテーマを利用する場合はこんな感じです。
/*
Theme Name: Child
Template: twentytwelve
*/
@import url('../twentytwelve/style.css');
最初に調べておいた親テーマのテーマ名をここの「Template:」の部分に半角の英数字で記述し、「@import url(‘../●●●●/style.css’);」の●●の部分にも親テーマのテーマ名を入れます。合計2箇所確認して下さい。
※テーマ名の部分などスペースなどを入れないで全部小文字（半角英数字）。
Twenty Twelveの場合は上記のコードをこのままコピペして内容の部分に貼り付けて「保存」して下さい。これはテーマ名と親テーマの名前、それから＠の部分がtwentytwelveの「style.css」をインポートして下さいという意味です。
これで保存をしてとりあえず１つ目のファイルは完了です。
「@import url」の部分の上の空白の1行に「半角のスペース」が入っていてこれを削除しないと上手く行かなかった。というコメントも頂きました（kurina様ありがとうございます！）。
もし上手く反映されない場合にはその点もチェックしてみて下さい。
子テーマを有効化してみる
ここまでで新しく「Child」という子テーマを作成しましたので、これを有効化して行きます。今度はWordPressの管理画面から「外観」⇒「テーマ」と進んで下さい。
すると先ほど作った「Child」というテーマがありますので、「有効化」をクリック。
するとこの子テーマが有効化されます。これで子テーマの有効化は完了。有効化できたら自分のブログを表示させて確認します。自分のサイトの表示を確認するとそのまま「twenty twlve」のテーマと同じように表示されるはずです。
もし子テーマが反映されていない場合には２つの項目をチェックして下さい。
- 「Ctrl」と「F5」を一緒に押してリロードしてからブログの表示を確認する
- 子テーマに作成した「style.css」の親テーマのテーマ名の記述ミスがないか確認する
ここまでで「子テーマ」つまり、親テーマのコピーを作った訳ですが、カスタマイズする時はこの子テーマの方に書き込んでいきます。
また、子テーマには今「style.css」しか作っていませんが、他の部分は親テーマから読み込んでますので心配はいりませんし、前回説明したように子テーマに色々書き込んでいくと子テーマの方が優先されますので、親テーマの更新で初期状態になるという事もありません。
また、スタイルシートに関しては下に書いた（後から書いた）ものが優先的に反映されます。なので、変更したい部分だけを子テーマのスタイルシートにどんどん追加していくだけで変更が反映されます（スタイルシートの場合だけ）。
さて、今親テーマをインポートするコードを書いて「style.css」を作ったのですが、このインポートは「style.css」の場合ですので、別のファイルをコピーする時には内容をそのままコピペします。練習の意味でもう一つコピーしてみましょう。
補足しておくと、前回の記事で書いたようにWordPressのテーマは沢山のphpファイルでできています。
カスタマイズしたいファイルだけ子テーマに追加しておき、コピーしたファイルの方をカスタマイズします。
例えばコメント欄のカスタマイズをしたい場合は「comments.php」というファイルを親テーマからコピペして子テーマに追加し、コピーした子テーマの「comments.php」をカスタマイズする訳です。
別のファイルもコピーしてみる
先にロリポップの準備をしておきます。先ほど同様に「ロリポップFTP」⇒「自分のフォルダ」⇒「wp-content」⇒「themes（テーマ）」⇒「Child」と進みます。この「Child」に「新規ファイルを追加」します。
これから新しく親テーマの「single.php」というファイルをコピーしますので、ファイル名にはこの「single.php」と入力しておきます。
ここまで準備できたらこのファイルの内容に親テーマの「single.php」を追加します。別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマの編集」をクリックして下さい。
そして右上の「編集するテーマを選択」という部分から親テーマ（twenty twelve）を選び、「選択」をクリック。
右側にずらりと沢山のphpファイルが並んでいると思いますので、その中から「単一記事の投稿 (single.php)」というのクリック。
すると親テーマ「twenty twelve」の（single.php)というファイルの中身が表示されていると思います。この中身をすべてそのままコピーします。
後は先ほどのロリポップで準備しておいたsingle.phpのファイルの中身にペーストして「保存する」をクリックすれば完了です。
最後に子テーマに反映されているか確かめてみます。WordPressの管理画面から「外観」⇒「テーマの編集」と進みます。
画面の右側の「編集するテーマを選択」で「Child」を選び「選択」をクリックすると最初に作った「style.css」と今作った「single.php」が表示されていればＯＫです。このコピーして追加する方法が子テーマの基本になります。
子テーマでの注意点
子テーマの作成の仕方も理解できたでしょうか？このようにカスタマイズしたい部分のファイルだけをコピーして子テーマに追加しながらカスタマイズしていく事になります。
※親テーマの全部のファイルを子テーマに追加する必要はありません。子テーマに無いファイルは親テーマのファイルを読んでくれるので、変更する予定のファイルだけを子テーマにコピーしていけばOKです。
全部の親テーマのファイルを先にコピーして子テーマに追加しておいてもいいですが、注意するべきは「テーマのための関数 (functions.php）」というファイルです。
この「functions.php」だけはコピーしてはいけません。というのもこれと同じファイルを作ってしまうとサイトが表示されません。このファイルだけは同じ内容があると上手く機能しませんので、「functions.php」のファイルを子テーマに追加したい時には内容を白紙状態で作っておきます。
つまり、親テーマの「functions.php」と同じ記述があると機能しないので、追加したい内容だけ記述する事になります。まあ、このファイルだけはどうしてもという時意外は触らないのがいいでしょう。
コメント