第1回では、WordPressのデフォルトテーマ「Twenty Twelve」の特徴とそのファイル構成について解説しました。本記事では、子テーマ機能を利用した効率のよいWordPressのテーマカスタマイズ方法について解説します。

作業前の準備

カスタマイズ方法を解説していく前に、開発環境を準備しましょう。

WordPressのインストール

まず、ローカル環境でWordPressを動作させるために、ローカルサーバーを構築します。構築方法については、下記のサイトを参考にしてください。

続いてWordPress.orgからWordPressデータをダウンロードして、上記で構築したローカルサーバーにインストールします。インストール方法については、下記のサイトを参考にしてください。

※本記事では、WordPressはバージョン3.5を利用しています。

Dreamweaverの設定

続いて、筆者の記事「DreamweaverとWordPressを連携させる方法」を確認し、DreamweaverのライブビューでWordPressを表示できるようにしておきます。

以上で準備は完了です。なお、Dreamwerverで作業をする際には、事前にXAMPPやMAMPを起動しておく必要があります。

Twenty Twelveをベースとしてカスタマイズする場合の問題点

Twenty Twelveは、様々な機能を搭載しており大変高機能です。その上で見た目は非常にシンプルに作られており、テーマカスタマイズのベースにするのに適していると言えます。しかし、テーマのファイルをそのままカスタマイズしてしまうと、テーマをバージョンアップする際に変更した内容が上書きされてしまいます。

そこで、おすすめなのが「子テーマ」機能です。子テーマとは、あるテーマを親テーマ(ベース)にして、機能やデザイン(レイアウトやスタイル)を拡張・修正することができる機能のことです。つまり、子テーマ機能を利用すれば、Twenty Twelveなどの高機能なテーマをベースに独自のカスタムテーマを制作することができます。親テーマのファイルを直接編集せずにカスタマイズできるため、テーマのバージョンアップ時にカスタマイズ内容が上書きされるということが起きません。

※テーマのバージョンアップにはバグフィックスやセキュリティ修正も含まれているため、Webサイトを長期間運用することを考えると、定期的にバージョンアップすることが望ましいでしょう。

 

子テーマ機能を利用したテーマ制作

01 子テーマの作成

WordPressに新しくテーマを作成するには、WordPressデータ内の「wp-content」ディレクトリに新しいテーマ用のディレクトリを追加します。その中にindex.phpとstyle.cssなどの必要なファイルを配置し、style.cssの先頭に特定のコメントを記述することでテーマとして認識されます。

子テーマ機能を利用したテーマの場合も、ほぼ同様の手順で作成します。

  1. [wp-content > themes]に「twentytwelve-child」ディレクトリを追加します。
  2. 「twentytwelve-child」ディレクトリ内にstyle.cssを追加します。
  3. style.cssに以下のコメントを記述します。子テーマ機能を利用するには、「Template」で親テーマを指定します。ここではTwenty Twelveを親テーマにしてテーマ制作を進めていくため、「Template」に「twentytwelve(親テーマのディレクトリ名)」を指定します。
/* Theme Name:ADC Sample: Twenty Twelve Child Description:Twenty Twelve を利用した子テーマです。 Template:twentytwelve Version:1.0 Author:Mighty Works Author URI:http://mighty-works.com/ */

※Theme Name/Description/Version/Author/Author URIは任意で変更することができます。管理画面の[外観]→[テーマ]から変更した箇所がどのように反映されているか確認してみましょう。

 
  1. WordPressの管理画面に移動し、[外観]→[テーマ]をクリックします。
  1. 「ADC Sample: Twenty Twelve Child」を有効化します。

以上で、Twenty Twelveを親テーマにした、子テーマ「ADC Sample: Twenty Twelve Child」を作成することができました。

しかし、サイトを表示してみると、CSSが適用されていません。子テーマのディレクトリに配置されているファイルは、親テーマに配置されている同じ名前のファイルを上書きします(functions.phpは例外です)。style.cssには子テーマ機能を利用するためのコメントだけなので、サイトにはCSSが何も適用されていないのです。

02 親テーマのCSSを利用する

以下の手順で、親テーマと子テーマのCSSを読み込むようにします。

  1. 子テーマの「style.css」を開きます。
  2. コメントのあとに以下のコードを追加して、@importで親テーマのCSSを読み込みます。
@import url("../twentytwelve/style.css");

以上で、Twenty TwelveのCSSを読み込み、子テーマのCSSを編集する準備が整いました。

03 子テーマのCSSを編集する

子テーマのCSSを編集して、親テーマをカスタマイズしてみましょう。
Twenty Twelveでは横幅が600px以下の時に、ナビゲーションが非表示になり、メニューボタンが表示されます。スマートフォンなどの端末で表示された際に、このメニューボタンをタップすると非表示となっていたナビゲーションが展開されます。

このメニューボタンをタップしやすいように、エリアを広げてみましょう。

  1. [ライブビュー]の表示領域を「モバイルのサイズ」に変更します。
  2. [インスペクト]ボタンをクリックし、メニューボタンを選択します。
  1. [CSSスタイル]パネルの[選択範囲のサマリー]から「display:inline-block」を選択します。
  2. [CSSスタイル]パネル右上のプルダウンメニューから[コードへ移動]を選択します。
  1. 該当するスタイルが記述されている親テーマの「style.css」に移動するので、以下のコードをコピーし、子テーマの「style.css」にペーストします。
.main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: inline-block; }
  1. display: inline-blockから display: block に変更します。
.main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: block; }
  1. Twenty TwelveではCSS3のメディアクエリーを利用し、ウィンドウサイズに応じてメニューボタンの表示(600px未満)/非表示(600px以上)を切り替えています。しかし、6のコードにより親テーマの該当CSS部分が上書きされ、600px以上でもメニューボタンが表示されてしまいます。そこで、6のコードの後に以下のコードを追加して、600px以上の場合にメニューボタンを非表示にするように、再度スタイルを上書きする必要があります。
@media screen and (min-width: 600px) { .menu-toggle { display: none; } }

以上で、メニューボタンのエリアを広げることができました。

このように子テーマ機能を利用すると、必要な部分の機能やデザインだけを編集して、短期間で効率の良いテーマ制作が可能な上に、ベーステーマのアップデートに対応することもできます。