WordPressの子テーマひな形作成とインストール

子テーマのひな形作成

WordPressの既存のテーマをそのまま「親テーマ」として利用し、テーマを自分の好みに応じてカスタマイズできる「子テーマ」という機能があるらしい。

その子テーマを利用してWordPressのを行いたいと考え、購入した書籍やリファレンスサイトの「WordPress Codex 日本語版」の記事を参考にして「子テーマのひな形作成」を行った。

子テーマのひな形としては、子テーマのスタイルシートの情報を記述するための「style.css」、子テーマのスタイルシートの呼び出し及びPHPの関数を追記するための「functions.php」が必要らしい。

また、必須ではないが、テーマのスクリーンショットのファイルである「screenshot.png」もあったほうが、「ダッシュボード-テーマ」で見分けがつきやすいと思うので、作成した。

style.cssの作成

以下のstyle.cssは、「twentytwelve」というテーマを「親テーマ」として利用することを想定している。
もし他のテーマを親テーマにする場合は、「Theme Name:」から「Text Domain:」までの4行を書き換える必要がある。

各項目の詳細は、WordPress Codex 日本語版の子テーマのページに詳しく掲載されている。

style.css
---------
/*
  Theme Name:   Twenty Twelve Child Theme
  Description:  Twenty Twelve のカスタマイズ用 子テーマ
  Template:     twentytwelve
  Text Domain:  twenty-twelve-child
  Author:       Admin
  Version:      1.0.0
  License:      GNU General Public License v2 or later
  License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

functions.phpの作成

以下のfunctions.phpは、WordPress Codex 日本語版の子テーマのページに掲載されていたものを、そのまま利用している。
このファイルは、親テーマがどのテーマであっても利用できる。

ただし、複数のスタイルシートを使用する場合は、このページの中間付近に

テーマが複数の .css ファイルを持つ場合 (たとえば、ie.css、style.css、main.css) すべての親テーマの依存関係を管理する必要があります。

と記されているので、注意が必要。

functions.php
-------------
<?php
/*
  *
  *    functions.php for Twelve Fifteen Child Theme
  *
  *
  */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

screenshot.pngの作成

テーマのスクリーンショットで、WordPress Codex 日本語版の「テーマの作成 – Screenshot」に仕様が掲載されているが、主な仕様は以下のとおり。

  • 画像形式は、24bit PNG形式(32bit形式では、認識されない)。
  • ファイルサイズは、880px X 660px。

zipファイルの作成

style.css、functions.php及びscreenshot.pngの作成が終わったら、分かりやすい名前のディレクトリを作成し、その配下にこれら3個のファイルを移動する。

ディレクトリの作成とファイルの配置が終わったら、この二つのファイルを「ディレクトリごと」zip形式のファイルに圧縮する。

例えば、ディレクトリ名を「twenty-twelve-child」にした場合、zip形式のファイル名はtwenty-twelve-child.zipであり、その中身は以下のようになるはず。

twenty-twelve-child.zip
-----------------------
<twenty-twelve-child>
    |
    +- style.css
    |
    +- functions.php
    |
    +- screenshot.png

Child-Theme_2015_0715_00

WordPressに子テーマを登録

今回は親テーマがtwentytwelve、子テーマがtwenty-twelve-childであるが、テーマを事前にテーマを親テーマに切り替えておく必要はない。

また、親テーマがインストールされていない場合は、対象となる親テーマのダウンロードとインストールを行ってくれるので、事前にインストールを行う必要もない。

 

まず、管理画面で[外観]-[テーマ]を選択する。

Child-Theme_2015_0715_01画面が切り替わるので、画面上の[新規追加]または画面下の[新しいテーマを追加]をクリックする。

Child-Theme_2015_0715_02画面上の[テーマのアップロード]をクリックする。

Child-Theme_2015_0715_03[ファイルを選択]のボタンをクリックする。

Child-Theme_2015_0715_04ファイルの選択画面で、事前に作成しておいたzipファイルを選択する。

Child-Theme_2015_0715_05[いますぐインストール]のボタンをクリックする。

Child-Theme_2015_0715_06画面が切り替わり、以下の様なメッセージが表示されるので、確認する。

アップロードしたファイル twenty-twelve-child.zip からテーマをインストールしています
パッケージを展開しています…
テーマをインストールしています…
このテーマには親テーマが必要です。親テーマがインストールされているか確認しています。
Twenty Twelve 1.7 のインストールを準備中です…
http://downloads.wordpress.org/theme/twentytwelve.1.7.zip からインストールパッケージをダウンロードしています…
パッケージを展開しています…
テーマをインストールしています…
親テーマ Twenty Twelve 1.7 のインストールに成功しました。
テーマのインストールが完了しました。

Child-Theme_2015_0715_07この画面に表示されたメッセージでも分かるように、

  • インストールされたテーマが親テーマなのか、子テーマなのかチェックしている
  • 親テーマがインストールされているかチェックし、インストールされていなければダウンロードしてインストールする

をやってくれるので、子テーマをインストールする際に、予め親テーマをインストールしておく必要はない。

 

インストールした子テーマを有効化させるため、画面下部の[有効化]のリンクをクリックする。

Child-Theme_2015_0715_08子テーマが有効化されると、このような画面になる。
twenty-twelve-child.zipに入れておいた、screenshot.pngも反映されている。

Child-Theme_2015_0715_09テーマの中央付近にマウスのカーソルを移動し、[テーマの詳細]のリンクをクリックする。
そうすると、このような画面になる。
Child-Theme_2015_0715_10ウィンドウの右上にある[×]ボタンをクリックして、ウィンドウを閉じる。

画面上の[サイトを表示する]のリンクをクリックし、サイトを表示させてみる。

Child-Theme_2015_0715_11サイトを表示させたところ、画面上のリンクが日本語ではなく、英語になっている。

Child-Theme_2015_0715_12画面上部に[通知]が表示されたので、[通知]のリンクをクリックする。

Child-Theme_2015_0715_13親テーマである「twentytwelve」の翻訳ファイルの更新通知だったので、画面下部の[翻訳を更新]をクリックする。

Child-Theme_2015_0715_14翻訳の更新が終了したので、[WordPress更新ページへ戻る]のリンクをクリックする。
Child-Theme_2015_0715_15ダッシュボードに戻ったので、[サイトを表示]のリンクをクリックする。
Child-Theme_2015_0715_16翻訳ファイルが更新されたため、画面上のリンクが日本語で表示されている。
Child-Theme_2015_0715_17

テーマの編集画面

もう一度ダッシュボードに移り、[外観]-[テーマの編集]をクリックする。

Child-Theme_2015_0715_18これは「テーマの編集」で「スタイルシート(style.css)」の編集画面。
今の状態は「親テーマのtwentytwelveをカスタマイズできる状態になった」だけであって、style.cssにスタイル情報を追記するまでの間は、見た目は「twentytwelveと同じ」ということになる。
Child-Theme_2015_0715_19画面右にある[テーマのための関数]のリンクをクリックしてみる。
Child-Theme_2015_0715_20画面左下にある[解説:]をプルダウンすると、現在のfunctions.phpの関数を選択できるようになっており、[wp_enqueue_style]を選択して[調べる]のボタンをクリックしてみる。
Child-Theme_2015_0715_21Child-Theme_2015_0715_22そうすると、このように関数のリファレンスサイトで関数の説明を確認することが出来るようである。

Child-Theme_2015_0715_23

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です