Stinger3カスタマイズ記録―子テーマを作成するには？―

前回は、ざっとデザイン変更でやったことを一覧で書きました。

羅列するといろいろあって気が遠くなりそうですが、やっている時は「ここがこうだったらもっとかわいいのにー！」と思う部分に手当たり次第に変更を加えていっただけなので、全体で3日くらいでできました。

やり方が最初からわかっていればもっと早くできるんだと思いますが、勉強しながらなので仕方ないですね。

今回は一番デザインのカスタマイズに取り掛かる前に、やっておきたい準備のご紹介をします。

WordPressテーマの編集は子テーマでする！

子テーマとは？？

さぁいよいよデザインをいじるぞ！ということで、ウェブサイトの見た目部分のファイルである、CSSを編集しようといろいろとやり方を調べていたところ、Wordpressのテーマのファイルは、直接編集してはダメです！という情報がちらほら。

何！？直接編集しないってどういうこと！？

と調べていくと、こちらのサイトに詳しいことが載っていたので参考にしました。

• 【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-
• 話題のテーマ「Stinger」をカスタマイズしたいなら、WordPressの子テーマを作るべし

元のファイルに上書きして編集してしまうと、テーマのバージョンアップがあった時にカスタマイズした部分まで上書きされて変更したものが全部消えてしまいます。それを防ぐためにも、元の親テーマのコピーと言える子テーマを作って、そちらに編集していきましょうね、ということらしいです。

詳しいことはわからないけど、とにかく子テーマとやらを作るのがいいのね、ということで、上記サイトを参考にやってみました。

子テーマを作成する時に超初心者がつまづいた点

子テーマの作り方は、上記サイトや他の解説サイトのほうにわかりやすく載っているので詳しくはそちらを参照してもらう方がいいのですが、WEBの知識のない私がこの通りにやろうとするとちょっと困ったことがいくつかありました。少しでもサイト構築の知識がある人からすれば、そんなの基本中の基本でしょ！と言われてしまいそうですが、サイトを作る前に事前に勉強する…なんてマジメなことができない私みたいな人がいきなりいじりはじめると、初歩的すぎてどこにも載ってなくて苦労したりするんですよね。

最初にやること！子テーマのディレクトリを作る

WordPressインストールディレクトリ配下の「themes」ディレクトリ配下に、親テーマ（Stinger）と子テーマを同階層に並べて配置します。

まず最初にやることとして解説されていますが…はい、もういろいろとわかりません。まずディレクトリという言葉を知らなかった無知な私です。ディレクトリって要はフォルダのことなんですね。なるほど。

自分でわかるレベルまで最初の文章を翻訳するとつまり、データベース上にあるWordpressをインストールしたフォルダの中の、「themes」フォルダ内に子テーマのフォルダを新しく作りましょうということ。

ディレクトリを新しく作るには、前回紹介したフリーソフト「FFFTP」を使いました。

1. FFFTPを開いてさくらのデータベースに接続。
2. 「www」→「wordpress」(WPをインストールする時につけた任意のフォルダ名)→「wp-content」と辿っていくと「themes」フォルダを発見。
3. これを開くとダウンロードしたstingerテーマのフォルダ「stinger3ver20131023」があるので、この階層にフォルダ作成で新しく子テーマのフォルダを作ります
4. 子テーマフォルダ名は自分でわかりやすい名前をつければOKです。私は「stinger-child」でつくりました。この名前は後から使うときに大文字小文字を区別するので、小文字で統一したほうがよさげです。

これで、子テーマのディレクトリ（フォルダ）ができました。

CSSファイルを新しく作る

次に、この中にstyle.cssというファイルを作ります。これがまた、初心者にはcssファイルを作るって簡単に言われても、なかなかすぐにできないところです。

ここでいったんFFFTPから離れて、テキスト編集ソフトのTerapadを起動します。そこに親テーマの内容を引き継ぐためのコードを貼り付けます。

/*

Theme Name: stinger-child

Template: stinger3ver20131023

*/

@import url('../stinger3ver20131023/style.css');

Theme Nameは子テーマの名前、Templateはもとの親テーマstingerの親テーマディレクトリの名前をそのまま入れます。その下の（）の中は、/親テーマディレクトリ名/style.cssにします。大文字小文字を区別するので、必ずディレクトリ名と一致するようにしてくださいね。

記入したら、名前を「style.css」で適当な場所に保存します。テーマカスタマイズに使うファイルは今後全てそうするのですが、必ず「文字/改行コード指定保存」で文字コード「UTF-8N」改行コード「LF」にしておかないとおかしくなるようです。

もう一度FFFTPを開き、先ほど作った子テーマディレクトリ「stinger-child」を開きます。ここに、新しく作った「style.css」をドラッグ＆ドロップするとディレクトリの中にファイルがアップロードされます。

ここまでで、一応完了です。長かった。

ダッシュボードから子テーマを有効化しよう！

さてここまできたら、wordpressのダッシュボードでの作業。きちんと子テーマが作成されていると、ダッシュボードの外観→テーマの中の利用可能なテーマに、先ほど作ったstinger-childが表示されているはずなので、それを有効化します。

そうすると、有効化しているのは先ほど作った子テーマですが、そこに親の情報が引き継がれて、最初に元々のstingerを有効化した時のデザインがそのままサイトに表示されるようになっているはず。

あとは、この子テーマの中のstyle.cssにカスタマイズしたいことをどんどん追加して書いていけば、その内容が反映されるというわけです。

初心者にはここまでくるだけで一苦労でした…。一応私はこのやり方で問題なく子テーマを作ることができましたが、いろいろと知識不足なのでもっと効率いい方法、ここはこうしないとだめだよ！とかあればぜひ教えてください。

では、次回はやっとやっと見た目部分を変えるカスタマイズに入っていきます！