頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

はじめに

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

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

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

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

子テーマの作成

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

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

※ここではFTPアップロード前のローカル環境でご紹介しますが、
作成したディレクトリ(フォルダ)をFTPにてアップロードすればサーバー上の環境に適用できます。

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

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

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

01_子テーマフォルダの作成

子テーマフォルダの作成

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

02_style.cssの作成と編集

style.cssの作成と編集

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

03_style.cssの定義

style.cssの定義

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

重要な部分は以下の行です。

8行目の「Template: contango」部分にて親テーマのディレクトリを指定します。

親のテーマファイルに対しての子テーマであるという、
紐付けを行っているのは「Template: (テーマディレクトリ名)」の部分です。

12行目の「@import url(‘../contango/style.css’);」は必須ではありませんが、
これによって親テーマのCSS定義をすべて読み込みを行って引き継いでいます。

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

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

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

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

子テーマの有効化

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

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

04_表示された子テーマ

表示された子テーマ

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

05_子テーマの有効化

子テーマの有効化

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

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

テーマ変更前の表示

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

06_親テーマによる表示

親テーマによる表示

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

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

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

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

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

子テーマの設定

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

ヘッダー画像の指定

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

08_ヘッダ画像の設定

ヘッダ画像の設定

メニューの割り当て

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

09_グローバルメニュー設定

グローバルメニュー設定

表示の確認

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

10_子テーマによる表示

子テーマによる表示

実際には、親テーマでテーマごとに指定することができるオプションは、
子テーマに移行した際には引き継がれない設定になります。

親テーマにて選択していた各種オプションの値は子テーマを割り当てる前にメモしておくなりして、
子テーマに対しても同じ設定ができるようにしておくと作業が効率的に行えるでしょう。

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

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

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

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

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

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

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

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

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

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

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

参考

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

子テーマ – WordPress Codex 日本語版


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

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


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - WordPress

  関連記事