WordPressの子テーマを作成する方法

公開: 2016-06-22

通常、完璧なテーマを見つけることはほぼ不可能です。実行する必要のあるいくつかの変更が常にあります。では、Twenty Fifteenのような素敵なWordPressのデフォルトのテーマを自分のものにして、見た目も機能も思い通りにできるようにしましょう。子テーマを作成すると、多くの時間と将来の頭痛の種を節約できます（私を信じてください）。

直接の経験から話すことができます。開発者が親テーマをハッキングしたばかりのWordPressサイトを「継承」しましたが、サイトに機能を与えるカスタマイズを上書きすることを恐れて、実際にテーマを更新できなかったことがどれほど苛立たしいことであったかを今でも覚えています。元のコードとカスタムのコードがわからなかったので、更新の可能性はありませんでした。

ただし、ストーリーにはハッピーエンドがあります。当時、私はWordPressに慣れていなかったので、親のテーマを変更するのは良い考えではないことを早い段階で教えてくれました。サイトが最終的に再設計されたとき、最初のビジネス項目は、カスタマイズを取得して子テーマに入れることでした。

子テーマを使用すると、将来の親テーマの更新によって作業が上書きされることなく、別の場所で作業できます。技術的に言えば、子テーマを作成するときは、元の親テーマに影響を与えることなくテーマをカスタマイズするために使用できるファイルの個別のセットを作成します。親テーマのファイルに変更を加えた場合、それらの変更は、次にテーマを更新するときに上書きされます。アップデートには機能の変更、バグ修正、重要なセキュリティ対策が含まれる可能性があるため、これは大きな問題です。親テーマを最新の状態に保ち、カスタマイズには子テーマを使用することが重要です。

子テーマの基本

子テーマは、基本的な機能を親テーマに依存して作成する個別のテーマです。子テーマを使用する場合、WordPressはそれを参照し、含まれている機能を探すことを認識しています。これは、変更する必要のある親テーマの部分のみを変更できるので素晴らしいです。これは、WordPressサイトにカスタマイズを追加するための非常に効率的な方法です。

もう少し深く掘り下げるために、子テーマがファイルレベルでどのように機能するかを次に示します。 WordPressは、必要なファイルが子テーマに含まれているかどうかを確認します。含まれている場合は、その子テーマファイルがロードされます。子テーマにファイルがない場合は、親テーマのファイルが読み込まれます。これに対する唯一の例外は、親バージョンと子バージョンの両方がロードされるfunctions.phpファイルです。通常、functions.phpファイルには重要な情報があります。 WordPressが子テーマバージョンのみをロードした場合（すべてをコピーした場合を除く）、サイトは正しく機能しません。ありがたいことに、WordPressは両方のファイルをロードするので、functions.phpファイル全体を子テーマにコピーすることを心配する必要はありません。

子のテーマはいつでもオフにして、必要に応じて元のテーマにフォールバックできることを忘れないでください。しかし、それは一方通行です。親をオフにして、子のテーマに依存することはできません。

WordPressテーマにカスタマイズを追加する場合は、子テーマを使用するのが最適です。自分で作成する準備はできましたか？次に、プロセスを段階的に説明します。

子テーマの作成

作成するのはそれほど複雑ではありません。実際、技術的に必要なのは、 style.cssファイルとfunctions.phpファイルの2つのファイルだけです。ほとんどの子テーマにはそれ以上のものがありますが、技術的に言えば、必要なのはそれらだけです。

子テーマを作成するには、使用する親テーマと一緒にWordPressをインストールする必要があります。

注意：ライブサイトで変更を加えないでください。無料のローカル開発アプリであるLocalは、ワークフローを簡素化し、サイトで安全に実験するのに役立ちます。今日それを試してみてください！

テーマディレクトリを作成する

まず、テーマディレクトリに移動し、新しいテーマ用のフォルダを作成します。わかりやすい名前を付けてください。この例では、簡単に見つけられるように、テーマにchild-exampleという名前を付けます。

create-wordpress-child-theme-child-theme-files

子テーマのスタイルシートを作成する

次の非常に重要なステップは、子テーマのスタイルシートを作成することです。 style.cssファイルを作成します。正しく機能させるには、 style.cssという名前にする必要があることに注意してください。

次に、テーマに関する情報を含める必要があります。

これをコピーしてstyle.css fileに貼り付けます。

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

これは多くのように見えるかもしれませんが、実際に必要なのはTheme NameとTemplateの2つだけです。 Theme NameはWordPressに子テーマの名前を伝えます。 Templateは、WordPressに親テーマと見なすべきテーマを指示します。これは非常に重要です。

他のほとんどはかなり自明ですが、もう少し明確にする必要があるかもしれないカップルがあります。 Text DomainとTagsは少し混乱する可能性があります。 Text Domainは、国際化の目的で文字列を翻訳するために使用されます。これはテーマに固有であり、翻訳機能を使用する場合は常に使用する必要があります。 Codexにはさらに多くの情報があり、WordPress開発者向けのI18nのトピックで見つけることができます。 Tagsセクションは、WordPressテーマ固有のタグのリストです。この例では、25個の親style.cssを確認し、そこからタグを取得して、子テーマに配置しました。

親スタイルを利用する

WordPressが最初に子テーマファイルを探す方法を覚えていますか？現在、子テーマは機能しますが、まだスタイリングを行っていないため、あまり洗練されていないように見えます。それをアクティブにしてページをリロードすると、少し乱雑に見えます。おそらく次のようになります。

create-wordpress-child-theme-unstyled-text

これを修正して、親テーマにフォールバックし、少なくともいくつかのスタイルが適用されるようにします。カスタムスタイリングには引き続き子テーマを使用しますが、最初に、親スタイリングを表示させましょう。

親ファイルのスタイルシートを確実にロードするには、子テーマにキューに入れる必要があります。次のスニペットを入れるには、子テーマにfunctions.phpファイルが必要です。

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

create-wordpress-child-theme-parent-theme-styling

CSSのカスタマイズを行う

親スタイルが表示されたので、子テーマのカスタマイズ用にCSSの一部を変更しましょう。この例では、ページコンテンツの背景要素のスタイルを設定することは、子テーマの動作を確認するための良い方法です。親テーマのCSSでは白のスタイルになっていますが、子のテーマでは青に変更しましょう。親スタイルが最初にロードされ、その後にカスタマイズがロードされるので、それらが表示されることを忘れないでください。

Chromeユーザーの場合、開発者ツールは、ブラウザでスタイルを確認したり実験したりするのに非常に役立ちます。 [表示]>[開発者]>[ソースの表示]に移動し、ページ要素を選択します。スタイルは右側に表示されます。背景が白の.hentryクラスの記事を調べました。最初にブラウザでテストするために、16進値を貼り付けました。

create-wordpress-child-theme-chrome-dev-tool

この変更を行うには、子テーマでCSSファイルを開き、CSS情報を追加します。

create-wordpress-child-theme-child-css-file

ご覧のとおり、子テーマでスタイルを簡単に変更できます。

create-wordpress-child-theme-background-change

子テーマの機能を変更する

スタイリングの調整は非常に簡単ですが、ヘッダー、フッター、サイドバーなどの他のものについてはどうでしょうか。フッターにいくつかの変更を加えたとしましょう。親テーマから子にフッターをコピーして貼り付けます。 footer.phpファイルは、選択したテキストエディターで開いて、変更することができます。「ProudlypoweredbyWordPress」の行を削除することにしたので、子テーマのファイルからこれを削除しました。これは、WordPressが最初にロードするファイルであるため、テキスト行は表示されません。

create-wordpress-child-theme-footer-modification

子テーマを作成することは、WordPressテーマを作成するときに習得する良い習慣です。いくつかの簡単な手順で、作成と保守が簡単になります。カスタマイズを親テーマから分離しておくことは、組織の目的とすべてを最新の状態に保つことの両方に適しています。これにより、将来の頭痛の種を大幅に減らすことができます。