WordPressをローカル環境に構築したので、WordPressにあらかじめインストールされているテーマをカスタマイズしようと思います。その前に事前準備。『子テーマ』の作成です。

そもそもテーマとは
WordPressでは、簡単にサイトが作れるようテンプレートが用意されています。これらテンプレートを、WordPressでは『テーマ』と呼び、PHPファイルやCSSファイルなどで構成されています。管理画面から、ある程度、カスタマイズできるようになっていますが、管理画面に表示されない項目を調整するためには、PHPやCSSの編集が必要です。
テーマのファイル(テンプレートファイル)が保存されているのは、WordPressをインストールしたアドレス下の『wp-content』というフォルダ内部にある『themas』フォルダです。今、私は、Windows機のローカル環境でWordPressを利用していますから、パスは『C:\xampp\htdocs\wordpress\wp-content\themes』です。
ここを開くと、WordPressにデフォルトでインストールされている3つのテーマのフォルダを見つけることができます。

themesフォルダ
themesフォルダ
デフォルトのテーマ
デフォルトのテーマ

 

〔管理画面〕-〔外観〕で表示されるテーマ以外にも、簡単に誰かがアップしてくれたテーマを追加して使うことができるようになっていますが、なかには悪意あるユーザーが作成したテーマも紛れ込んでいるようなので、テーマ選びは慎重にする必要があります。ここでは、WordPressに表示されているテーマのなかから、2014版の公式テーマ、その名も『Twenty Fourteen』を使いたいと思います。
デフォルトの状態では2カラムに見えますが、管理画面の設定からでも3カラムとして利用できるテーマです。

Twenty Fourteen
Twenty Fourteen
WordPress Codex日本語版に、Twenty Fourteenのページがあります。
WordPress Codex日本語版に、Twenty Fourteenのページがあります。

 

子テーマとは
もともとのテーマ(親テーマ)を直接使ってカスタマイズするのは、後々、面倒なことになります。テーマもアップデートされますが、親テーマを直接、編集してしまった場合、親テーマがアップデートされると、自分が加えた変更が消えてしまうことになるので、また1から編集しなおさなければなりません。そのため、WordPressでは、『子テーマ』という機能を用意し、親テーマをアップデートしても、カスタマイズを保持できるようにしています。子テーマに関する説明や書式も、WordPress Codex日本語版サイトに記述があります。

追記:テーマの更新について補足記事があります。興味がある方は、こちらをごらんください。

 

子テーマを作成する
①子テーマのフォルダを作成する
まず、『themes』フォルダのなかに、子テーマ用のフォルダを作ります。私は、フォルダの名前を『twentyfourteen-child』としました。

作成された子テーマのフォルダ
作成された子テーマのフォルダ

 ②スタイルシートの作成
次に、子テーマのフォルダのなかに、『style.css』を作成します。私はWindows環境なので、子テーマのフォルダを開き、右クリックのコンテキストメニューから、テキストファイルを作成、名前の変更で、『style.css』としました。
今度は、WordPressの管理画面を表示し、〔外観〕-〔テーマ〕編集を開き、編集するテーマから、子テーマのフォルダを選びます。ここでは、確認作業をしながら進めたいので、とりあえず、スタイルシートに、以下の記述だけ書いてみます。

/*
Theme Name: twentyfourteen-child
Template: twentyfourteen
/*

 

WordPress管理画面のテーマ編集
WordPress管理画面のテーマ編集

 ③管理画面から確認する
管理画面の〔外観〕をクリックして、以下のように子テーマが追加されていることが確認されていればOKです。なお、ここで子テーマを有効化しても、正常に表示されるのは文字データだけで、親テーマのスタイルは反映されていません。反映させるためには、スタイルシートに編集が必要です。とりあえず有効化してみましょう。

有効化しても、まだテキストデータだけ
有効化しても、まだテキストデータだけ

 ④親テーマのスタイルを反映させる
子テーマを有効化すると、管理画面の〔外観〕-〔テーマ編集〕をクリックしたとき、表示されるスタイルシートは子テーマのものになってします。子テーマを作成すること自体は成功しましたから、Webサイトの説明にあるように、スタイルシートに、ガイドランのっとった記述をします。親テーマのスタイルシートの取り込むための構文を記述します。
また、私は、最初にWindowsを右クリックして表示されるメニューからテキストファイルを作ったので、一行目にコーディングを指定しています。

追記:WindowsのNOTEPAD(メモ帳)については、文字コードの扱いに注意が必要です。念のため、こちらも、ご覧ください。

書式
書式

私の場合は、以下のように記述しました。最後に『更新ボタン』を押すのを忘れないでください。

@charset “UTF-8”;
/*
Theme Name:twentyfourteen-child
Description:2014年版公式テーマカスタマイズ
Template:twentyfourteen
Version:1.0
Author:majyuteikoku.com
Author URI:http://localhost/wordpress/
*/
@import url(“../twentyfourteen/style.css”);

⑤反映されたか確認する
サイトを表示して確認します。反映されていればOK。子テーマが作成できました。

成功
成功

次回は、子テーマの補足です。