サーバー会社のスタッフブログなのに、自社サービスの宣伝とは全く違う方向に行きつつあります(爆)。
まぁいいよね、もっといろんな人にWordPressを使っていただきたい(できればうちのサーバーで)っていうのがSaaSesとしての願いですしおすし。

さてさて、Osukiniサーバーで立ち上げたWordPress、プラグインをちょこっと入れてみたりテスト投稿してみた以外で、まだ何もいじってない状態です。
少しはデザインのカスタマイズもするかぁー…

とその前に。
いきなりデフォルトテーマのphpファイルやcssファイルをいじらないほうがいいです。
私はこのスタッフブログを作るときに途中まで直接編集していて、この事実を知ってから慌てて子テーマに移動させた人です。

子テーマを作る理由

WordPressのデフォルトテーマ、現在の最新テーマでいうとTwenty Twelve。
過去にはTwenty ElevenやTwenty Tenがあり、Twenty Thirteenのリリースも迫っています。
これらのテーマはたまにアップデートが行われます。ファイルの中身が更新されるのです。
そうすると直接ファイルを編集してカスタマイズしていた場合、このファイルが上書きされ、自分で設定した部分が全て消えてしまうのです…！
子テーマを使っていれば、親テーマがアップデートされても、子テーマで編集した内容は影響を受けません。

全て1からオリジナルのテーマを作成しているのであれば関係ない話ですが、突然のアップデートによりデザインが初期に戻ってしまうのを防ぐため、Twenty Twelveの子テーマを作りましょう。

子テーマの作り方

Twenty Twelve(親テーマ)のファイルの中で、変更したい部分(今まで直接書き換えちゃってた部分ね)があるファイルだけ、新たに作った子テーマフォルダに複製して格納し、編集は子テーマの中のファイルで行います。変更しないファイルは複製する必要はありません。
WordPressは基本親テーマを参照します。子テーマで書き足した部分のみ、子テーマの設定が上書きされるわけです。説明ちゃんとできてる自分？
フォントを変えたり文字サイズを変えたり、見栄えの部分を編集するのはstyle.cssファイルですよね。今回はこのファイルだけ複製して、子テーマを作ってみます。

子テーマのディレクトリを作る

はい、まずはFTPソフトでログインして、Twenty Twelveディレクトリと同じ階層に子テーマ用のディレクトリを作成します。

「wp-content/themes」の下ですね。名前は何でもいいです。
パーミッションの設定もチェック。私の場合、apacheグループに所属させた一般ユーザーでサーバーにログインしているので、子テーマにはグループにも書き込み権限を与えています。

(過去記事参照: FTPでファイル操作ができない時の対策: 所有グループの編集)

スタイルシートを作成する

テキストエディタか何かで新規ファイルを作成します。ファイルの中に下記のように記述してください。

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

Theme Nameは何でもOKです。でもTemplateは必ず親テーマのディレクトリ名と同じにしてください。大文字小文字が違うだけでもちゃんと認識してくれませんので。
@importで親テーマのスタイルシートを読み込みます。この1行がないとデザインが全く設定されていない状態になるので、デザインが総崩れしますのでご注意(笑)。
親テーマのcssを読み込み、修正していきたい部分だけ、今後この下の行からどんどん追記していけばいいわけですね。
とりあえずここまで書けたらファイルを保存します。ファイル名は「style.css」、文字コードはUTF-8。
このstyle.cssファイルを子テーマディレクトリに入れます。

管理画面でテーマを変更する

WordPressの管理画面に移動します。
「外観」から「テーマ」を選ぶと、アップロードした子テーマが表示されています。

「Twenty Twelve Child」を有効化します。

早速サイトを表示してみましょう。

特にデザインが崩れることもなく、ちゃんと表示されていますね。

デザインを変更する

実際に子テーマのスタイルシートに記述してデザインを変更してみます。
とりあえずサイトタイトルの色でも変えてみますか。

サイトタイトルの色を変更する

親テーマのスタイルシートの549行目に、下記のような記述があります。

.site-header h1 a,
.site-header h2 a {
        color: #515151;
        display: inline-block;
        text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
        color: #21759b;
}

ここのcolorの部分を好きな色に変更して、子テーマのstyle.cssに追記すればOK。例えばわかりやすいようにタイトルを緑、マウスオーバー時は赤になるように指定しました。

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

/* =Basic structure
-------------------------------------------------------------- */

/* Header */
.site-header h1 a,
.site-header h2 a {
        color: #008000; /* サイトタイトル(リンク)のカラー */
        display: inline-block;
        text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
        color: #ff0000; /* サイトタイトル(マウスオーバー時)のカラー */
}

これでファイルを上書き保存してアップロード。もう1度サイトをチェックしてみます。


こんな感じで、色味やサイズ、その他デザインを編集していくときは子テーマを使っていきます。
style.css以外のファイルを編集するときの書き方はまた次の機会に紹介しますね。


——————–

週末の遊び疲れでネムネムなサトでした。
朝とか頭働いてなさすぎてメール1行につき3回くらいずつ読み直してたよね。