WordPressテーマファイルの編集に子テーマ利用

WordPress™のカスタマイズを行う際に、
テーマファイルのheader.phpやfunctions.phpを直接編集する場合もあるでしょう。
しかしそうしたファイルを編集する際には子テーマを作成し、
子テーマで編集内容を反映するほうが将来的なメンテナンスも楽になります。

ここではそうした子テーマの導入方法についてご紹介します。

はじめに

子テーマをすでに導入されている人もおられるとは思いますが、
私はこれまでテーマファイルの編集に対して否定的な立場でいました。

しかし、独自のショートコードをプラグインレスで行ったり、
検索結果ページを独自のGoogleカスタム検索エンジン埋め込みなどを行う場合などには、
どうしてもテーマファイルと編集する必要性が出てきます。

テーマを編集するにはやはりちゃんと子テーマを定義して設置するほうが、
テーマのアップデートなどの影響を受けず、
functions.phpも編集分を追加反映できる点でメリットがあります。

ここでは、そうした子テーマの設置方法をご紹介します。

子テーマの作成

子テーマの作成については非常に簡単な手順で設置を行うことができます。

wordpressのテーマディレクトリに対して、任意のディレクトリを作成します。

当サイトではcontangoというテーマを現在採用しています。
このcontangoテーマの子テーマを作成する例をご紹介します。

子テーマディレクトリとstyle.cssの作成

まず、子テーマを格納するディレクトリ（フォルダ）を作成します。

子テーマフォルダの作成

作成したディレクトリ内に「style.css」というファイルを作成しテキストエディタで開きます。

style.cssの作成と編集

テキストエディタで開いたら、WordPress Codexのサンプルに従って以下のように記述します。

style.cssの定義

以下のように記述しています。

なお、WordPress Codexのリンクについては最下部に記載しています。

以下は子テーマ用ヘッダーの例と説明です:

/* Theme Name: Kid Theme URI: http: //example.com/ Description: Child theme for the Twenty Ten theme for WordPress Author: Demetris Author URI: http: //example.com/about/ Template: twentyten Version: 0.1.0 */

1 2 3 4 5 6 7 8 9

/* Theme Name:     Kid Theme URI:      http: //example.com/ Description:    Child theme for the Twenty Ten theme for WordPress Author:         Demetris Author URI:     http: //example.com/about/ Template:       twentyten Version:        0.1.0 */

• Theme Name (必須) 子テーマ名
• Theme URI (任意) 子テーマのウェブページ
• Description (任意) テーマの説明。例: わたしの最初の子テーマ。ワーイ!
• Author URI (任意) 作者のウェブページ
• Author (任意) 作者の名前
• Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
• Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc

子テーマとして最低限の設定は、以上で終了です。
子テーマを有効化して表示を確認します。

子テーマの有効化

子テーマのstyle.cssをディレクトリに配置すると、
WordPressのテーマに子テーマが表示されるようになります。

WordPressのダッシュボードから[テーマ]を選択し、子テーマを有効化します。

表示された子テーマ

子テーマが有効になりました。

子テーマの有効化

テーマを変更した場合、テーマが管理していた以下のような設定については再度導入を行う必要があります。
この辺りは、テーマによって異なっているはずです。

• ヘッダー画像
• メニュー
• ウィジェット　など
  2014/03/15追記
  ウィジェットに関してはテーマに依存する部分はあるかもしれませんが、
  現在適用中の親テーマの子テーマに変更する場合には、
  ウィジェットの配置や設定・コンテンツは引き継がれるようです。

テーマ変更前の表示

子テーマ割り当て前は以下のような表示を行っていました。

親テーマによる表示

子テーマ割り当て直後の表示

子テーマを割り当てた直後は、ヘッダー画像がテーマデフォルトの設定で表示されています。
また、メニューの表示が引き継がれていません。

子テーマ有効化直後の表示

今回はcontangoの子テーマを割り当てた場合のご紹介ですので、
contangoを例に変更例をご紹介します。
それぞれ利用されているテーマに応じて、詳細は異なっているはずです。

子テーマの設定

上記で親テーマから引き継がれない設定については、個々に子テーマに対して設定します。

ヘッダー画像の指定

ヘッダー画像は[外観]-[ヘッダー]にてギャラリー画像を選択しなおして設定します。
※画像を設定している場合

ヘッダ画像の設定

メニューの割り当て

メニューバーの表示においても元の設定が引き継がれていませんでしたので、
[外観]-[メニュー]を選択し、変更前に定義していたグローバルメニューを選択します。

グローバルメニュー設定

表示の確認

これで親テーマの設定と同様の表示を行うことができました。

子テーマによる表示

子テーマに対するスタイル定義

子テーマでは上記のように親テーマのスタイルを@import url(”)にて読み込んでいます。

親テーマのスタイルから変更を行いたい部分だけを、style.cssに対して追記することで、
親テーマのスタイルを上書きすることができます。

スタイルシートにて指定したスタイルが適用され文字色が変更されました。

子テーマスタイル指定による表示

テーマスクリーンショット画像の表示(補足)

なお、テーマの選択画面でテーマのイメージ画像が表示されていますが、
そのイメージの表示を子テーマでも行いたい場合には、
作成した子テーマディレクトリに対して「screenshot.png」という名前のファイルを用意することで、
テーマのイメージ画像を表示することができます。

スクリーンショット画像の配置

スクリーンショットの表示

さいごに

このようにして、子テーマにて親テーマに指定されている多くのスタイルを上書きし、
自分にあったスタイルに変更を行うことができます。

こうして子テーマでスタイルを変更することでJetPackなどでCSSを定義する際に、
!import指定などを行わなければ反映できないものも、
事前に上書きをして変更を行うことができます。

参考

詳細は以下に詳しく書かれています。

子テーマ – WordPress Codex 日本語版

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略