2017年7月25日
当サイトはレンタルサーバーのロリポップを契約し、ワードプレスの「Sela」というテーマを使用して作成しています。
Selaの情報が少ないため、カスタマイズの備忘録として記事にしておきたいと思います。今回はSelaの子テーマを作る手順についてです。
☞ロリポップについてはこちら ロリポップ！
－目次－
1 子テーマの必要性
2 テーマSelaをダウンロードする
3 ロリポップFTPにログインする
4 テーマのフォルダ内に子テーマ用フォルダを作る
5 子テーマフォルダ内にスタイルシートのコピーを作る
6 子テーマを有効化する
7 ヘッダー、フッターの子テーマも作っておく
8 最後に
子テーマの必要性
ワードプレスでブログを始めるためには、レンタルサーバーを契約して、ワードプレスをインストールして、テーマを選んで・・・と、初心者にはなかなかハードルが高いですよね^^;
テーマもあまりにも豊富にあり、選ぶだけでも時間がかかります。やっとテーマが決まっても、デフォルトのままだと味気なかったり。
そこで、ちょいとカスタマイズしてみようかとスタイルシートなんかをいじる事もあると思います。が、ちょっと待った！！！
もし親テーマを直接カスタマイズしていて、テーマが更新になったら、せっかくカスタマイズした内容が上書きされてしまいます！
努力が水の泡！！
だから、みんな「子テーマ」というものを使ってカスタマイズするんですね。
子テーマとはなんぞや？という疑問については、こちらの記事にお世話になりました。ぜひお読みになってから本記事の続きを読んでください。
テーマSelaをダウンロードする
一応、テーマのダウンロードの仕方を書いておきます。簡単です♪
- ワードプレスの管理画面にログイン
- 「外観」を選択
- 「テーマ」を選択
- 「新規追加」をクリック
- 検索窓に「Sela」と入力しインストール
- 「有効化」をクリック
※SelaはWordPress.com（無料ブログ）のテーマであり、全ての機能を使うためにはJetpackというプラグインが必要です。
SelaをダウンロードするとJetpackをインストールするよう案内が出るので、この時点でインストールし有効化しておきましょう。
ロリポップFTPにログインする
子テーマを作るためにスタイルシートのコピーを作成します。この作業はFTPで行います。
- ロリポップユーザー専用ページにログイン
- 「Webツール」を選択
- 「ロリポップ！FTP」をクリック
※初回のみログインの作業が必要です。ログインに必要な情報は「アカウント情報」→「サーバー情報」で確認できます。
テーマのフォルダ内に子テーマ用フォルダを作る
ロリポップFTPを開いたら、ご自身のサイトの公開アップロードフォルダ内にある「themes」というフォルダ内に、子テーマ用のファイルを保存するためのフォルダ「child」を作成します。
公開アップロードフォルダとは、ロリポップでワードプレスをインストールした時に、ファイルの保存先として指定（作成）した任意の名前のフォルダのことです。
この画像は、サブドメインで別サイトを運営していた時のもののため、フォルダが３つあります。サイトを１つだけ運営している方は、フォルダが１つだけなので、そのフォルダを開いてください。
- フォルダ左の「＋」をクリックして展開
- 「wp-content」を「＋」で展開
- 「themes」フォルダをクリック
themesのフォルダ画面にいることを確認の上、「新規フォルダ作成」アイコンをクリックします。
「フォルダ名」「child」と入力して「保存する」をクリックします。
※フォルダ名は「child」以外でも構わないですが、ご自身で子テーマのフォルダだと分かる名前にしてください。
子テーマフォルダ内にスタイルシートのコピーを作る
子テーマを作るにあたり、まず最初に必要になるのが「スタイルシート」と呼ばれるファイルです。
先ほど作ったchildフォルダを開き、今度は「新規ファイル作成」をクリックします。
エディタ画面に以下の記述をコピペしてください。
/*
Theme Name: child
Template: sela
*/
@import url('../sela/style.css');
※5行目に半角の空白マスが入ってしまう場合は空白を削除してください。
※この文字列は「この子テーマは親テーマ Sela のテンプレートを引き継ぎます。」という意味です。
ファイル名に「style.css」入力して「保存する」をクリックしてください。これで子テーマのスタイルシートの作成は完了です。
子テーマの作り方は、こちらのサイトを参考にしました。
テーマは違いますが、基本的なやり方は同じです。本記事では詳しい解説をしていません。
失敗しないためにも、上記の記事をぜひお読みになってから次に進めてください。
子テーマを有効化する
ワードプレスの管理画面に戻ります。子テーマの作成がうまく行っていれば、「外観」→「テーマ」の中に「child」が追加されています。
「有効化」をクリックするだけです。ここは簡単ですね♪
有効化したら、「外観」→「テーマの編集」→「スタイルシート」を開きます。
先ほどFTP画面で入力した「/* Theme Name: child Template: sela */ @import url(‘../sela/style.css’);」という文字列だけが記載されているはずです。
基本的には、カスタマイズしたい内容を上記の文字列のあとに追記していけばOK。
ですが、私は、元のスタイルシートの記述を全てコピーし、「/* Theme Name: child Template: sela */ @import url(‘../sela/style.css’);」という文字列の後に貼り付けています。
というのも、Selaを使っている方が少ないようで情報が無く、何をどう追記すればいいか分からない・他のテーマのカスタマイズ例を参考にしても上手く行かない場合があり、スタイルシートの元の記述の中から変更したい部分を探して書き換える方が効率が良かったんです。
※スタイルシートで何をどうカスタマイズできるか、ということを書くとかなり脱線して長くなってしまうので本記事では割愛します。余裕があったら別の記事で書きたいと思います。
すぐにはカスタマイズをする予定が無くても、今後カスタマイズをする可能性が少しでもあるなら、早い段階で子テーマを作成して有効化しておくことをお勧めします。
ヘッダー、フッターの子テーマも作っておく
子テーマを作る際、すべてのファイルのコピーをchildフォルダ内に作る必要はありません。子テーマに無いファイルは親テーマのファイルを読み込むからです。
なので、カスタマイズしたい部分だけ、子テーマのファイルを作ればOKです。テーマにもよりますが、ヘッダーとフッターの子テーマもあった方がいいと思います。
例えば、Google AdSenseという広告を導入したい人もいると思いますが、審査方法はヘッダー内に指定のコードを貼り付ける形となっています。
また、フッターにウェブサイトのコピーライトを表示したい人もいると思います。使用テーマによっては、デフォルトで「©サイト名」をフッターに自動表示されるようになっているものもありますが、テーマSelaの場合は自分でカスタマイズする必要があります。
手順は次の通りです。
- 再度ロリポップFTP画面で「child」フォルダを開き「新規ファイル作成」
（※フォルダではなくファイル） - 「header.php」という名前のファイルを作成
- 親テーマSelaフォルダ内の「header.php」を開き、文字列を全てコピー
- 手順2.で作った子「header.php」にペーストして保存
- ワードプレス管理画面に戻り、「外観」→「テーマ」を開き、「header.php」というファイルが表示されていれば作成完了
同様の手順で「footer.php」というファイルも「child」フォルダ内に作ります。
他のファイルについても手順は一緒ですが、functions.phpだけは子テーマにコピーを作らない方がいいようです。（テーマにもよるかもしれません。）
重要かつデリケートなファイルなため、子テーマにコピーを作ってしまうと上手く機能しないことが多いようです。
ただし、テーマの更新があった場合、当然functions.phpも上書きされるので、バックアップは取っておくようにしてください。
最後に
テーマSelaの情報が少ないため、簡単にですがロリポップでのSelaの子テーマの作り方をまとめました。
テーマによって仕様の違いはあるものの、基本的な作り方はどのテーマでも同じです。「ロリポップ ワードプレス 子テーマ」で検索すると、詳しい解説をしているサイトが数多くヒットします。
テーマSelaを使いたいという方は、他のサイト様を参考にされつつ、本記事の手順に沿って子テーマを作ってみてください。