4つの簡単なステップでWordPressの子テーマを作成する方法

公開: 2015-11-25

@Cloudwaysをフォローする

子テーマは、その名前が示すように、親テーマから機能を派生させるテーマです。テーマが更新される可能性がある場合など、WordPressテーマを直接編集することは推奨されない場合があります。テーマの新しい更新が適用されると、行ったカスタマイズが失われる可能性があります。

カスタマイズを維持し、テーマの更新を受信し続けるために、使用する親テーマのWordPress子テーマを作成することをお勧めします。子テーマを作成することには別の利点があります。つまり、親テーマはそのまま残り、編集が不要です。

子テーマは親テーマとは別のフォルダーに存在し、子テーマは変更されない限り親テーマの機能に依存します。ウェブサイトで子テーマを使用している場合、WordPressコアは最初に子テーマのファイルをチェックします。変更されていない場合、WordPressは親テーマのファイルを実行します。

WordPressの子テーマの概念を完全に理解するために、25個のデフォルトのWordPressテーマの子テーマを作成し、子テーマの背後にある考え方を理解するために特定の変更を加えます。

WordPressの子テーマを作成するには、次の手順に従います。

フォルダを作成し、25-childという名前を付けます。子を追加することは良い習慣であると考えられています。
子テーマ情報とfunctions.phpファイルを使用してstyle.cssを作成します
25テンプレートをstyle.cssにインポートします
関数.phpファイルを介してスタイルシートをエンキューします
single.phpのようなテンプレートファイルを編集します

ステップ1：子テーマフォルダーを作成し、style.cssを追加します

最初のステップは、子テーマ用の新しいフォルダーを作成することです。私たちの子のテーマがどこにあるかを簡単に思い出すために、それを25子と呼びます。

これを行うには、FileZillaなどのFTPクライアントを使用してサーバーに接続し、/ public_html / wp_content / themesに移動して、twentyfifteen-childという名前の新しいフォルダーを作成します。

この新しいディレクトリにstyle.cssファイルを作成し、次の情報を貼り付けます。

 / *
テーマ名：25人の子供
テーマURI：https：//wordpress.org/themes/twentyfifteen/
著者：WordPressチーム
著者URI：https：//wordpress.org/
テンプレート：25
説明：TwentyFifteenの子テーマ
バージョン：1.3
ライセンス：GNU General Public Licensev2以降
ライセンスURI：http：//www.gnu.org/licenses/gpl-2.0.html
タグ：黒、青、灰色、ピンク、紫、白、黄色、暗い、明るい、2列、左側のサイドバー、固定レイアウト、レスポンシブレイアウト、アクセシビリティ対応、カスタム背景、カスタム色、カスタム-ヘッダー、カスタムメニュー、エディタースタイル、注目の画像、マイクロフォーマット、ポストフォーマット、rtl-language-support、sticky-post、threaded-comments、translation-ready
テキストドメイン：25子
このテーマは、WordPressと同様に、GPLの下でライセンスされています。
何かクールなものを作ったり、楽しんだり、学んだことを他の人と共有したりするために使用してください。
* /

編集する必要がある最も重要な行は、 「テーマ名」 、 「テキストドメイン」 、および「テンプレート」です。テーマ名をTwentyFifteenと同じにすることはできず、テンプレートでは、このテーマがTwenty Fifteenの子テーマであることをWordPressに伝えます。ファイルが二十五子に存在しない場合は、TwentyFifteenフォルダーからファイルを呼び出す必要があります。フォルダ。また、テキストドメインは、WordPressのインストールで使用するテーマごとに異なり、一意である必要があります。

ここで、 WordPress管理ダッシュボード→外観→テーマに移動すると、25人の子供が表示されていることがわかります。そのテーマを当サイトに適用することができます。

style.cssは子テーマディレクトリに存在するため。 WordPressは、親テーマのstyle.cssではなく、そのstyle.cssをロードします。 index.php 、 page.php 、functions.phpなどの他のすべてのファイルは、親テーマからロードされます。

子テーマのstyle.cssで定義されているスタイルがないため、スタイルをインポートする必要があります。 WordPressコーデックスで推奨されるベストプラクティスは、functions.phpファイルを使用してスタイルシートをキューに入れることです。

ステップ2：functions.phpを使用してスタイルシートをエンキューする

他のファイルとは異なり、WordPressの子テーマのfunctions.phpファイルの背後にある理論は次のとおりです。WordPressは最初に子テーマのfunctions.phpをロードしてその中の関数を初期化し、後で親テーマのfunctions.phpも実行します。

前に述べたように、スタイルシートをインポートする最良の方法は、 functions.phpファイルを介してスタイルシートをキューに入れることです。

子テーマディレクトリにfunctions.phpファイルを作成し、次のコードを追加します。

 <？php
add_action（ 'wp_enqueue_scripts'、 'enqueue_parent_styles'）;
関数enqueue_parent_styles（）{
wp_enqueue_style（ '親スタイル'、get_template_directory_uri（）。 '/ style.css'）;
}

これにより、親テーマファイルからスタイルシートが「 style.css 」と呼ばれます。スタイルシートの何かを編集したい場合は、子テーマのstyle.cssにそれらのルールを追加できます。

ステップ3：子テーマのstyle.cssファイルを編集する

WordPressの子テーマでは、子テーマフォルダーのstyle.cssでルールを定義することにより、スタイルシートを簡単に編集できます。たとえば、アンカーの色を変更したい場合は、子テーマのstyle.cssに次のコードを追加するだけです。

 NS {
色：＃D54E21;
テキスト装飾：なし;
}

ここで何が起こるかというと、「a」の子テーマのstyle.cssルールが親テーマのstyle.cssをオーバーライドし、残りはそのまま残ります。

ステップ4：single.phpのテンプレートファイルを編集する

子テーマの個々のテンプレートファイルを簡単に編集できます。たとえば、single.phpを編集する場合は、そのファイルを親テーマフォルダーからコピーして、子テーマのフォルダーに貼り付ける必要があります。

単一の投稿ページからコメントセクションを削除したいとします。子テーマフォルダー内のファイルをコピーした後、ファイルを編集して、次のコメントセクションを削除できます。

 //コメントが開いているか、少なくとも1つのコメントがある場合は、コメントテンプレートをロードします。
if（comments_open（）|| get_comments_number（））：
Comments_template（）;
endif;

ここで何が起こるかというと、WordPressは子テーマフォルダーでsingle.phpをチェックします。ディレクトリに存在する場合はそこからロードし、存在しない場合は親テーマフォルダーにフォールバックします。

そのように、テーマ内の個々のテンプレートファイルを編集できます。このアプローチは、親テーマをそのまま維持し、カスタマイズを失うことなく親テーマを更新するため、一般的に適しています。