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

既存の WordPress テーマをカスタマイズするのは一般的なニーズですが、テーマを直接編集すると問題が発生する可能性があります。

テーマが更新されると、変更内容は上書きされます。 より良い方法は、親テーマから継承した子テーマを作成することです。

子テーマを使用すると、テーマを安全かつ安全に変更および拡張できます。

この詳細なガイドでは、WordPress での子テーマの作成について説明します。 子テーマの目的、子テーマの設定方法、親テーマのデザインと機能をオーバーライドするカスタマイズ方法について学びます。

いくつかの方法を使用すると、親テーマ ファイルに手を加えずに子テーマを構築し、変更の適用を開始できます。

それでは、さっそく始めましょう。

1子テーマとは何ですか?

子テーマは、親テーマから機能を継承する WordPress テーマです。 親テーマ ファイルを変更せずに、新しい機能を変更したり追加したりできます。

親テーマ ファイルを直接変更すると、テーマが更新されると変更内容が失われるため、これは便利です。

子テーマを使用すると、親テーマに影響を与えることなく変更を加え、変更を失うことなく更新を受け取ることができます。

このセクションでは、親テーマについて言及していることがわかりますが、親テーマとは正確には何でしょうか?

2親テーマとは何ですか?

親テーマは、WordPress Web サイトの基盤として機能する事前に設計されたテーマです。 サイトの基本的な構造、レイアウト、機能を提供します。

親テーマは、機能を追加または変更することで、特定の Web サイトのニーズに合わせてカスタマイズできます。

親テーマを使用すると、Web サイトを構築する際の時間と労力を節約でき、デザインと機能の開始点を提供できます。

現時点では、子テーマとして特別に設計されていない限り、すべての WordPress テーマは技術的には親テーマであると言えます。

覚えておくべき重要な点は次のとおりです。親テーマは独立して存在して機能することができますが、子テーマは常に親テーマに依存してコア機能と機能を提供します。

3子テーマを使用する理由

テーマを直接変更するのではなく、子テーマを使用する主な理由がいくつかあります。

• 子テーマを作成すると、親テーマが更新されたときに変更が上書きされないように保護されます。
• 親テーマファイルと子テーマファイルを別々に保持します。 これにより、ファイルが整理されるため、混乱を避けることができます。
• 複数の子テーマは、スタイルや機能の変更など、さまざまな目的に使用できます。 ただし、Web サイトでは一度に 1 つのアクティブなテーマしか持てないことに注意してください。
• これは、新しい完全な WordPress テーマの開発を始めるのにも最適な方法です。

注:子テーマを大幅にカスタマイズすると、管理上の問題が発生する可能性があります。 大規模なプロジェクトの場合、子テーマを変更し続けるよりも、元のテーマに基づいて完全な親テーマを作成する方が良い場合があります。

子テーマを作成するための4 つの前提条件

子テーマを作成する前に、いくつかの要件を満たしていることが重要です。

まず、動作する WordPress インストールと、子テーマを作成する親テーマが必要です。

コードを変更して子テーマをカスタマイズするため、HTML、CSS、および PHP を理解していることも役に立ちます。

また、他のソースからコード スニペットをコピーして貼り付けることもできる必要があります。

ダミー コンテンツを使用するか、テスト目的でライブ WordPress サイトをローカル サーバーに移動して、ローカル開発環境で練習することをお勧めします。 これにより、子テーマを実際のサイトに実装する前にテストすることができます。

最後に、プロセス中に問題が発生した場合に備えて、Web サイトのバックアップを作成することが重要です。

したがって、これらの要件をすべて設定したら、子テーマを作成できます。 このガイドで説明されている子テーマのセットアップ プロセスに従うだけです。

ただし、このガイドでは、Twenty Twenty-four のデフォルトの WordPress テーマを使用します。

5 WordPressで子テーマを作成する

子テーマの概念を理解したところで、WordPress での子テーマの作成について詳しく見ていきましょう。

さまざまな快適さのレベルに合わせて選択できる 2 つの一般的な方法を検討します。

5.1コードを使用して子テーマを作成する

まず、FTP またはホスティング コントロール パネルが提供するファイル マネージャーを介して WordPress インストールにアクセスします。 wp-content/themesディレクトリに移動し、子テーマ用に一意の名前を持つ新しいフォルダーを作成します。

このチュートリアルでは、子テーマ フォルダーに「mtschild」という名前を使用します。

このディレクトリは、子テーマ コンポーネントの主な保存スペースとして機能します。

子テーマ フォルダー内に、 style.cssという名前の新しいファイルを作成します。 このファイルには、子テーマを認識してアクティブ化するための重要な詳細が含まれています。 style.css ファイルを開き、次のコードを挿入します。

 Theme Name: MTS Child Theme Theme URI: https://www.mythemeshop.com/ Description: Child theme for the Twenty Twenty-Four Theme Author: MyThemeShop Author URI: https://www.mythemeshop.com Template: twentytwentyfour Version: 1.0.0 Text Domain: mtschild

このコードは、子テーマが指定された親テーマを拡張することを WordPress に通知します。 「MTS Child Theme」を希望の子テーマ名に置き換え、テンプレートフィールドを親テーマのフォルダー名に置き換えます。

次のステップでは、子テーマが親テーマからスタイルを継承していることを確認します。 これを実現するには、親テーマのスタイルシートをキューに入れる必要があります。

これを行うには、子テーマ ディレクトリの function.php ファイルにアクセスし (存在しない場合は作成します)、次のコードのいずれかを実装します。

親テーマがスタイルシートをロードしない場合は、次のコードを使用して、functions.php 経由で style.css をロードします。

 <?php add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' ); function mts_child_theme_enqueue_styles() { wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() ); }

このコードは、親テーマがスタイルシートのみを読み込む場合にも機能します。

ただし、親テーマがアクティブなテーマのスタイルシートのみをロードする場合は、以下のコードを使用して、 functions.php経由で親テーマのスタイルシートをさらにエンキューする必要があります。

 <?php add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' ); function mts_child_theme_enqueue_styles() { wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) ); }

このガイドで使用されている Twenty Twenty-F​​our テーマの場合、テーマはスタイルシートをまったく読み込まないため、最初のコードを適用します。

コードを追加するときは、必ず<?phpタグから始めてください。 特にテーマ名mts_child_themeが使用されている場合は、要件に従ってこれらのコードを変更します。

上記の手順を完了したら、WordPress ダッシュボードに再度ログインし、 「外観」→「テーマ」に進みます。 子テーマの上にマウスを移動し、 「アクティブ化」ボタンをクリックします。

子テーマにまだ変更を加えていないため、Web サイトは親テーマの機能と外観を維持します。

ただし、さらなる変更に備えるために、子テーマのカスタマイズについて説明します。

これは、WordPress のコードを使用して子テーマを作成する手動のプロセスです。 この方法が複雑に見える場合は、次のセクションで説明するプラグインのアプローチを検討してください。

5.2プラグインを使用した子テーマの作成

プラグインを使用して子テーマを作成するのはシンプルで簡単です。 まず、Child Theme Configurator プラグインをインストールしてアクティブ化する必要があります。 詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドを参照してください。

プラグインがアクティブ化されたら、WordPress ダッシュボードに移動し、 [ツール] → [子テーマ]に移動します。

[親テーマの選択] タブで、子テーマを作成するためのドロップダウン メニューから親テーマを選択します。 通常、サイト上のアクティブなテーマは事前に選択されています。

次に、 「分析」ボタンをクリックします。 プラグインは、選択した親テーマを精査して、子テーマを生成できるかどうか、また外観に style.css ファイルが必要かどうかを判断します。

次に、子テーマに名前を割り当てます。 スタイルシート、関数、その他の構成を好みに合わせて調整できます。

ただし、セクション 7 に到達するまでは設定を変更しないでください。

セクション 7 で、 「 Click to Edit Child Theme Attributes 」というボタンをクリックします。

そこから、子テーマの詳細を入力できます。

子テーマを手動で作成すると、親テーマのメニューやウィジェットが失われる可能性があります。

ただし、Child Theme Configurator プラグインを使用すると、親テーマから子テーマにそれらを転送できます。

このまま続行する場合は、セクション 8 のチェックボックスをオンにします。最後に、 [新しい子テーマの作成]ボタンをクリックして子テーマを作成します。

完了すると、プラグインは、将来のカスタマイズに必要な style.css および function.php ファイルを含む子テーマ用のフォルダーを作成します。

テーマをアクティブ化する前に、画面上部にある [子テーマをプレビュー] リンクをクリックしてテーマをプレビューし、外観を確認し、サイトに悪影響を及ぼさないことを確認します。

すべてが正しく機能していることを確認したら、 「アクティブ化して公開」ボタンをクリックします。 これにより、子テーマが Web サイト上で公開されるようになります。

Web サイトで子テーマを有効にしたら、カスタマイズを開始します。 これについては次のセクションで説明します。

6子テーマをカスタマイズする方法

カスタマイズに入る前に、スタイル、テンプレート、機能、ウィジェット領域、カスタム ページ テンプレートなど、変更したい Web サイトの要素を特定します。

目的の明確なビジョンを持つことで、カスタマイズ プロセスが効率化されます。 子テーマをカスタマイズするには、次のようなさまざまな方法があります。

6.1 CSS を使用したスタイルのカスタマイズ

子テーマの style.css ファイルは、Web サイトの外観を調整するためのプラットフォームとして機能します。 ここで、カスタム CSS ルールを挿入して、親テーマのスタイルを変更または強化できます。

先に進む前に、HTML と CSS の基本を理解する必要があります。

ブラウザの検査ツールを効果的に利用したり、親テーマの style.css ファイルからスタイルを直接コピーしたりできます。

ブラウザを使用して Web ページの CSS コードにアクセスするには、ページを右クリックし、表示されるオプションから[検査]を選択します。 このツールには CSS スタイル コードが表示され、変更する要素を正確に指定できます。

右クリックして「検査」を選択すると、ブラウザ画面が二股に分かれ、ページの HTML と CSS が表示されます。

ブラウザの設定に応じて、HTML と CSS の詳細が画面の右側または下部に表示される場合があります。

さまざまな HTML 行の上にマウスを移動すると、Chrome インスペクターは「要素」タブでその行を強調表示し、強調表示された要素に関連する対応する CSS ルールを表示します。

CSS を直接編集して、どのように表示されるかをプレビューして実験できます。 たとえば、Twenty Twenty-F​​our テーマのデフォルトのホームページの背景色を #f9f9f9 から #6841ea に変更したいとします。

ブラウザのインス​​ペクタで背景色を調整した場合、その変更は一時的なものになります。 これを永続的にするには、この CSS ルールを子テーマの style.css ファイルに転送する必要があります。

 body { background-color: #6841ea; }

コードを挿入したら、変更内容を忘れずに保存してください。 カスタマイズしたい他の Web ページ要素に対してこのプロセスを複製できます。

たとえば、Web サイトの色を変更したいとします。 これを可能にする CSS コードをいくつか提供します。

テキストの色を濃い灰色に変更するには、次のコードを CSS ファイルに追加します。

 body { color: #3b3b3b; }

見出しの色を青に変更するには、次のコードを使用します。

 h1, h2, h3 { color: #007bff; }

ヘッダーの背景色には、次のコードを使用します。

 #header { background-color: #f5f5f5; } /* Light grey background for header */

コンテンツ領域では、次のコードを使用して背景色を白に設定します。

 .site-container { background-color: #fff; }

これらの CSS スタイルは、Web サイトの子テーマ ディレクトリまたは WordPress ダッシュボードから子テーマの style.css ファイルにコピーできます。

CSS コードを追加すると、次の形式になります。

変更を保存した後、Web サイトのページを更新してみてください。 変更が表示されない場合は、ブラウザのキャッシュをクリアして、CSS の最新バージョンが表示されていることを確認してください。

6.2テンプレートファイルの上書き

CSS カスタマイズは Web サイトの外観を制御しますが、子テーマはテンプレート ファイルをオーバーライドするというより堅牢な機能を提供します。

この高度な機能を使用すると、Web サイトのページと要素のレイアウトと構造を変更できます。 ただし、WordPress テンプレート、HTML、PHP についてのより深い理解が必要となるため、注意してください。

テンプレートをオーバーライドするには、元の .php ファイルを親テーマ フォルダーから子テーマにコピーし、正確なファイル名を保持します。

たとえば、header.php をオーバーライドするには、header.php ファイルを /parent-theme/ ディレクトリからコピーし、header.php として /child-theme/ ディレクトリに貼り付ける必要があります。

子テーマの header.php を編集できるようになりました。

オーバーライドするいくつかの一般的なテンプレート:

• header.php – <header> タグとサイトのブランディング、ナビゲーションなどが含まれます。
• footer.php – 終了 <footer> タグとマークアップ。
• page.php –ページのデフォルトのテンプレート。
• single.php – 単一の投稿に使用されるテンプレート。
• Index.php – ホームページのテンプレート。

たとえば、サイトのカスタム著作権を表示することで footer.php を変更できます。

 <!-- Modified child footer.php --> <footer> <p>&copy; <?php echo date('Y'); ?> My Company</p> <?php if ( is_active_sidebar('footer-1') ) : ?> <?php dynamic_sidebar('footer-1'); ?> <?php endif; ?> </footer>

6.3機能の拡張

子テーマのfunctions.phpファイルを使用すると、新しいPHP関数、フック、フィルタ、コードを導入して、親テーマのデフォルト機能を拡張できます。

この柔軟性により、カスタム投稿タイプの登録、カスタム ウィジェットの組み込み、新しいショートコードの作成、追加のスクリプトのエンキューなどを行うことができます。

たとえば、WordPress サイトにカスタム ウィジェット専用のセクションが必要な場合は、次のコード スニペットを利用して「カスタム ウィジェット エリア」という名前のウィジェット エリアを確立します。

 function register_custom_widget() { register_sidebar( array( 'name' => 'Custom Widget Area', 'id' => 'custom_widget_area', 'description' => 'Add widgets here to appear in the custom widget area', 'before_widget' => '<div class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'register_custom_widget' );

このコードを子テーマのfunctions.phpファイルに保存した後、WordPressサイトに戻り、 「Appearance」→「Widgets」にアクセスします。 「カスタム ウィジェット エリア」ウィジェットが使用可能になっていることがわかります。

7よくある質問

8結論

WordPress で子テーマを作成することは、テーマの更新中に変更内容が失われる危険を冒さずに Web サイトをカスタマイズするのに役立つ貴重なスキルです。 最初は気が遠くなるかもしれませんが、間違いを犯してもすぐに諦めないでください。

発生する可能性のある最も一般的なエラーは、コード内の欠落によって引き起こされる構文エラーです。 何か問題が発生した場合は、いつでもやり直すことができます。

たとえば、親テーマに必要なものを誤って削除してしまった場合、そのファイルを子テーマから削除して、最初からやり直すことができます。

少し根気強く子テーマを作成すると、親テーマの安定性とセキュリティを維持しながら、Web サイトに独自の外観と操作性を柔軟に作成できるようになります。

ぜひ試してみて、WordPress ウェブサイトにもたらす違いを確認してください。

このガイドが Web サイトの子テーマの作成に役立つことを願っています。 その場合は、@rankmathseo をツイートしてお知らせください。