WordPressの子テーマを作成およびカスタマイズするためのクイックガイド
公開: 2018-10-09テーマの開発は圧倒的に思えるかもしれませんが、子テーマは設定が簡単で、テーマを最初から開発するよりもはるかに迅速な代替手段です。
この投稿では、WordPressの子テーマの詳細と、効率的に作成およびカスタマイズする方法について説明します。
WordPressの子テーマとは何ですか?
WordPressの子テーマとは何かを定義する前に、まずWordPressテーマとは何か、そしてWordPressがWebサイトのデザインを表示するためにどこから情報を引き出しているかを理解することが重要です。
WordPress Codexによると、「テーマは、ウェブログの基盤となる統一されたデザインを備えたグラフィカルインターフェイスを生成するために連携して機能するファイルのコレクションです。 テーマは、基盤となるソフトウェアを変更することなく、データの表示方法を変更します。」
WordPressサイトに必要なすべてのテンプレートとアセットを含む単一のアクティブなテーマがある場合、親テーマと子テーマの区別はありません。

ただし、見つけたテーマが本当に好きであると判断したが、テーマを最初から作成せずにいくつかの変更を加えたい場合は、この目的を果たすためにWordPressの子テーマを作成できます。
子テーマは元のテーマの構造を継承し、それに加えたカスタマイズのみが含まれます。 テーマを完全に置き換えるのではなく、子テーマは既存のテーマのファイルを変更または追加します。
そうすれば、サイトが訪問者のために読み込まれるときに、元のテーマデザインが読み込まれますが、変更が加えられます。
オンラインの世界ではなく、現実の子供たちは、少なくとも1人の親の姿に依存して生きています。 同様に、子テーマは元のテーマに依存して機能します。
そのため、子テーマを使用する場合、元のテーマは親テーマと呼ばれます。
人間の幼児とは異なり、子供のテーマはそれ自体が完全なテーマではありません。 つまり、対応する子テーマをアクティブ化する前に、親テーマをインストールする必要があります。
完璧な子供のテーマとそれをいつ使用するか
どのテーマも親テーマにすることができますが、それに適したテーマもあります。
ニーズに合わせていくつかの小さな構造のカスタマイズを使用できる好きなテーマを選択しますが、それはあなたが箱から出してすぐに必要なカスタマイズを行うためのオプションが付属していません。
たとえば、Perfect Magazineテーマを親テーマとして使用して、Newslinerの子テーマを作成し、デザインの一部の色を変更するだけでなく、ページの上部にブログ投稿カルーセルを追加しながら広告バナーを削除しました。
これらの種類のカスタマイズは、Perfect Magazineのオプションでは不可能ですが、まったく新しいテーマを最初から作成することを保証するほどの規模ではありません。

なぜ子テーマを作成するのですか?
WordPressの子テーマは、サイトに投入したすべての作業を保存および保存するために重要です。 テーマを直接変更してから、新しいソフトウェアリリースで更新すると、すべての変更とカスタマイズが失われます。
そのため、多くのWebサイト所有者は、親テーマをまったく更新しないことを選択しています。 しかし、ハッキングされたWordPressサイトの54%に古いソフトウェアがあり、ハッカーやマルウェアがスキャンを実行して見つけることが多いため、これは深刻なセキュリティ上の懸念事項です。
また、アップデートには脆弱性の修正が含まれていることが多いため、アップデートを無視すると、サイトが攻撃に対して広く開かれたままになります。
または、子テーマを作成して、これらの落とし穴を回避することもできます。
前述のように、WordPressの子テーマを使用すると開発をスピードアップすることもできます。
ファイルシステムとサイトの重要な要素がすでに設定されているので、最初から始める必要はありません。 既存のテーマに基づいて構築し、そのデザインをカスタマイズしながら機能を利用することができます。
WordPressの子テーマ入門
子テーマを作成するために必要ないくつかの重要な要素があります。
- テーマディレクトリフォルダ
- style.cssファイル
- Functions.phpファイル
子テーマで必要なファイルはstyle.cssだけですが、親テーマのスタイルシートを正しくキューに入れるには、 functions.phpファイルが必要です。
したがって、エラーを回避するために、子テーマにfunctions.phpファイルを作成することを強くお勧めします。
WordPressの子テーマを作成する
WordPressの子テーマを作成する場合、以下に詳細を説明する4つのステップがあります。ディレクトリフォルダーの作成、スタイルシートの作成、新しいスタイルシートと親スタイルシートのエンキュー、およびテーマのアクティブ化です。
ディレクトリフォルダの作成
すべてのテーマは、WordPressインストールの/ wp-content /themes/フォルダーにあります。
そのディレクトリに移動し、子テーマフォルダとして機能する新しいフォルダを作成します。
通常、テーマのタイトルは親テーマの名前を使用して変更されますが、最後に-childが追加されます。
たとえば、2つのファイルパスは/ wp-content / themes /yourtheme/と/wp-content/ themes /yourtheme-child/になります。
また、子テーマの名前にスペースを含めることはできません。
これらはフォルダに名前を付けるための厳格なルールではありませんが、特にテーマを公開用に配布していない場合は、整理に役立つため、WordPressの一般的な開発方法です。
スタイルシートの作成
WordPressの子テーマは、かなり広範囲にわたるデザイン編集によく使用されるため、別のstyle.cssが必要です。
このファイルには、テーマの外観に影響を与えるすべてのCSSルールと宣言が含まれます。
新しい子テーマフォルダーのルートにstyle.cssファイルを作成します。 次に、ページの上部に次のヘッダーを入力します。
/ * テーマ名:27人の子供 テーマURI:http://example.com/twenty-seventeen-child/ 説明:27の子のテーマ 著者:ジェーンドゥ 著者URI:http://example.com テンプレート:27 バージョン:1.0.0 ライセンス:GNU General PublicLicensev2以降 ライセンスURI:http://www.gnu.org/licenses/gpl-2.0.html タグ:明るい、暗い、2列、右側のサイドバー、レスポンシブレイアウト、アクセシビリティ対応 テキストドメイン:27-子 * /
ヘッダーは、WordPressにテーマに関する基本的な詳細を伝えるため、ファイルの重要な部分です。 また、テンプレートの部分で示されているように、特定の親を持つ子テーマであることを示します。

ヘッダーの唯一の要件は、テーマ名とテンプレートです。 ただし、残りの部分に記入することをお勧めします。
必要な詳細もすべて変更して、正確になるようにしてください。 たとえば、作成者と作成者のURI 、および使用している親テーマが異なる場合はTwentySeventeenへの参照。
タグセクションは、WordPressテーマディレクトリに関連しています。 そこにテーマをアップロードする場合は、テーマに関連するタグを選択してください。
親と子のテーマスタイルシートをエンキューする
次に、エンキューと呼ばれるプロセスで、各テーマのスタイルシートが正しくロードされることを確認することが重要です。
エンキューとは、データ処理のためにアイテムまたはアイテムのリストをキューに追加することを意味します。 この場合、キューは、ブラウザが要求したときにWebサイトがロードする必要のあるファイルです。
エンキューをスキップした場合、サイトは子テーマのスタイルシートからのみ取得し、親テーマが提供するスタイルは使用しません。
@importメソッドを使用して親style.cssをエンキューすることが可能であることに注意することも重要かもしれません。 ただし、パフォーマンスの問題により、これは推奨されなくなりました。
スタイルシートをエンキューするには、 functions.phpファイルをまだ作成していない場合は作成する必要があります。
これは、新しいファイルを作成し、 functions.phpという名前を付けることで実行できます。 それで。 このコードを一番上に配置します。
<?php
上記の行の前にスペースを含めないでください。スペースを入れないとエラーになります。
関数.phpファイルに以下のコードを追加して、サイトが親のstyle.cssと子のテーマのstyle.cssの両方を正しい順序で正しくロードしていることを確認します。
add_action('wp_enqueue_scripts'、'my_theme_enqueue_styles'); 関数my_theme_enqueue_styles(){ $ parent_; //これはTwentySeventeenテーマの「twentyseventeen-style」です。 wp_enqueue_style($ parent_style、get_template_directory_uri()。'/style.css'); wp_enqueue_style('子スタイル'、 get_stylesheet_directory_uri()。 '/style.css'、 array($ parent_style)、 wp_get_theme()-> get('Version') ); } ?>
$ parent-style変数に格納されている親スタイルを変更して、テーマの名前を含めるようにしてください。
WordPress Codexで推奨されているように、このコードは、親のstyle.cssが依存関係として読み込まれるようにします。つまり、子のテーマのstyle.cssを読み込む必要があります。
子テーマのアクティブ化
すべてのファイルを保存したら、 [外観]> [テーマ]に移動して子テーマを見つけ、[アクティブ化]ボタンをクリックします。
親テーマもアクティブ化する必要はありません。 ただし、それでもインストールして/ wp-content /themes/フォルダーに残しておく必要があります。
子テーマのstyle.cssのヘッダーテキストは、2つを接続し、WordPressインストールの関係を明確にします。

子テーマをアクティブにした後、デザインで問題が発生した場合は、 [外観]> [メニュー]のメニューと、カスタマイザーの[テーマオプション]のその他のコンテンツを再保存する必要があります。
クイックカスタマイズのヒント
開発プロセスに取り掛かる前に、WordPressの子テーマをカスタマイズするためのヒントを以下に示します。
テーマ画像
[外観]>[テーマ]ページで、テーマの独自の画像を含める必要があります。
市松模様のボックスを置き換える代わりに何かを挿入したい場合は、 screenshot.pngという名前の880 x660PNG画像ファイルをアップロードできます。
子テーマフォルダのルートに画像を配置します。 そうすれば、WordPressのインストールはそれをテーマの画像として使用することを認識します。
親テーマファイルのオーバーライド
WordPressの子テーマに新しいファイルを挿入して古いコンポーネントを上書きする場合は、親ファイルを子テーマにコピーして、カスタマイズすることができます。
サイトをロードするとき、WordPressは子テーマに親テーマに対応するファイルがあるかどうかを確認します。 見つかった場合は、元の親テーマのファイルを上書きします。
それは村を取りません
WordPressの子テーマの作成は、思ったほど複雑である必要はありません。 上記の手順に従ってください。編集内容はそのまま残りますので、ご安心ください。 それはまたあなたのサイトがもう少し安全になるのを助けます。
どんな子テーマを作りたいですか? うまく作成できましたか? その過程でトラブルに遭遇しましたか? 以下のコメントであなたの経験を自由に共有してください。