WordPressで子テーマを作成する方法：簡単なガイド 

であれば WordPressウェブサイトの をいろいろと試してみたくなるのは当然のことです ウェブサイトのデザイン 。しかし、元のテーマをいじらずにそれを行う最善の方法は何でしょうか？WordPressの子テーマは、元のテーマを壊してしまうリスクを気にすることなく、テーマを修正したりテストしたりするのに最適な方法です。

WordPressの子テーマを使用することは、作業内容を損なうことなくテーマのコードを安全にカスタマイズするための賢明な方法です。テーマの CSS、 HTML、または PHP、子テーマを使用するのが最善策です。なぜなら、子テーマを使用しない場合、メインテーマのアップデートによって変更内容が消去されてしまう可能性があるからです。

初心者の方でも簡単に使えるよう、子テーマの仕組み、設定方法、そして必要な変更を加える方法を解説した初心者向けガイドをご用意しました。ぜひ、自信を持ってカスタマイズを始めてください！

WordPressの子テーマを理解する

子 テーマはの「アドオン」のようなもので 親テーマ）、親テーマの機能やスタイルを継承します。WordPressテーマをカスタマイズする際、テーマファイルに直接手を加えるのは、コアテーマに影響を与える可能性があるため危険です。そこで子テーマの出番です。子テーマを使えば、元のファイルに触れることなく、より安全にテーマを変更できます。

子テーマは、親テーマのstyle.cssファイルからメインスタイルを自動的に継承します。このスタイルは、テーマ全体の外観と雰囲気を決定します。子テーマでは、独自のファイルを追加したり、既存のファイルを調整したりすることで、このスタイルを簡単に微調整したり追加したりできます。これにより、元のファイルを変更することなく、テーマを柔軟にカスタマイズできます。.

子テーマは親テーマとは別のフォルダに保存され、変更を加えない限り、機能は親テーマに依存します。WordPressで子テーマを有効化すると、親テーマにリンクされ、WordPressはまず子テーマのファイルをチェックします。ファイルに変更がない場合、WordPressは親テーマのバージョンを使用します。.

ただし、子テーマは単独では動作しないことに注意してください。正しく機能させるには、親テーマが同時にインストールされている必要があります。.

についてはこちら WordPressプラグインとテーマ開発のアウトソーシング

WordPressで子テーマを使用するメリット

子テーマを作成することは、苦労して作り上げた WordPress サイトを、せっかくの作業が無駄になるリスクなしに、賢く変更を加える方法です。親テーマのファイルを直接編集した場合、テーマがアップデートされるたびに、カスタマイズ内容が消去されてしまいます。そうなると、互換性やセキュリティの問題につながる可能性のある今後のアップデートをすべてスキップするか、アップデートして WordPressテーマのカスタマイズ。

しかし、子テーマを使えば、そのような選択をする必要はありません。すべての変更内容は別のフォルダに安全に保存されるため、親テーマが更新されても変更内容を維持できます。さらに、この設定により、必要に応じてカスタマイズ内容を別のサイトに移動することも簡単にできるため、複数のサイトで作業している場合や新しいサイトに移行する場合の時間を節約できます。.

学ぶのに最適な方法であることです カスタムテーマ開発を 。変更や新機能を試すことができ、もし何かが計画通りに進まなかった場合でも、子テーマを無効にするだけで済みます。サイトはすぐに親テーマの元の外観と機能に戻るので、何も問題はありません。

学びましょう WordPress でヘッダーをシームレスに編集およびカスタマイズする方法を

WordPressで子テーマを作成する前にやるべきこと

WordPressユーザーがサイトのカスタマイズに取り掛かろうとした途端、予期せぬエラーが発生して行き詰まってしまうケースを多く目にしてきました。技術的な問題が現れ始めるまでは、子テーマを実際に使ってみるのは楽しいことのように思えるかもしれませんが、それは当然のことです。.

そのため、試験を受ける前に準備するのと同じように、実際に作業を始める前に少し準備をしておくことが重要です。子テーマの作成を始める前に、役立つヒントをいくつかご紹介します。

コードの基本を理解する

子テーマを扱うということは、コードを扱うということです。最低限、HTML、CSS、PHPの基本的な知識があると便利です（さらに JavaScriptも ）。コーディング初心者の方は、WordPressテーマハンドブックが手っ取り早く理解できる良い出発点となるでしょう。

学ぶ： Figma をコードに変換する方法：React、HTML、Vue、JS、CSS

適切な親テーマを選ぶ

理想の外観と機能に近い親テーマを選びましょう。理想としては、少しの調整で済むテーマを見つけられると、カスタマイズがスムーズになります。テーマを完全に切り替える場合は、WordPressテーマを変更する前に行うべきことのチェックリストをチェックしてみてください。面倒な作業が省けるはずです。

テストにはローカルサイトまたはステージングサイトを使用する

でテストを行うのが最善です ステージング環境 。こうすることで、万が一ミスをしても、本番サイトの外観や機能に影響を与えることを防ぐことができます。

サイトのバックアップを作成する

変更を加える前に、ウェブサイトのバックアップを取っておきましょう。初めてバックアップを行う場合は、 Duplicator 使うと、バックアップ作業を簡単かつストレスなく行うことができます。こうすることで、万が一予期せぬ事態が発生した場合でも、サイトを迅速に復元できます。

これらの基本を理解すれば、自信を持ってお子様のテーマを作成するためのステップバイステップのガイドに従う準備が整います。

学ぶ： 複数のWordPressウェブサイトをバックアップするための最適なソリューション

WordPressで子テーマを手動で作成する方法：5つの簡単な手順

WordPress で子テーマを作成するのは思ったより簡単で、メインテーマを危険にさらすことなく子テーマがどのように機能するかを理解するための優れた方法です。.

WordPress のデフォルトの Twenty Fifteen テーマに基づいて子テーマを作成し、いくつかのカスタム調整を加えて、実際にプロセスを確認する方法を順を追って見ていきましょう。.

ステップ1：子テーマフォルダを作成する

まず、子テーマのファイルをすべて保存する新しいフォルダをコンピューターに作成します。このフォルダを後でウェブサイトにアップロードします。.

フォルダ名は親テーマの末尾に「-child」を追加することで付けることができます。例えば、親テーマの名前が「Twenty Twenty-Two」の場合、子テーマのフォルダ名は「twentytwentytwo-child」になります。こうすることで、親テーマの子テーマであることが簡単に識別できます。.

ステップ2：子テーマのスタイルシートを設定する

次に、新しい子テーマフォルダ内に style.css ファイルを作成します。このファイルには、子テーマのすべてのカスタムスタイルが格納されます。.

スタイルシートを正しく設定するには、style.cssファイルの一番上に以下のヘッダーコメントを追加してください。これにより、WordPressに新しいテーマが親テーマの子テーマであることを伝えます。

テーマ名: Twenty Twenty-Two 子テーマ URI: https://wordpress.org/themes/twentytwentytwo/ 作成者: WordPress チーム 作成者 URI: https://wordpress.org/ テンプレート: twentytwentytwo 説明: Twenty Twenty-Two の子テーマ バージョン: 1.0 */

保存後、 WordPressダッシュボード に進んでください 「外観」→「テーマ」。すると、作成した子テーマが一覧表示されているはずです。

ステップ3：親テーマと子テーマのスタイルシートをリンクする

親テーマのスタイルが確実に適用されるようにするには、親テーマのスタイルシートを子テーマにリンクする必要があります。これは、子テーマのフォルダに functions.php ファイルを作成し、以下のコードを追加することで実現できます。

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

このコードは親テーマのスタイルシートを読み込み、子テーマがそのスタイルをすべて継承するようになります。.

学ぶ: WordPress データベースを修復および修正する方法?

ステップ4：子テーマのスタイルシート（style.css）を編集する

これで、子テーマのstyle.cssファイルにカスタムスタイルを直接追加できるようになりました。例えば、サイト上のリンクの色を変更するには、以下のコードを追加します。

{color: #D54E21;テキスト装飾: なし;}

このルールは、親テーマのリンク スタイルを上書きしますが、残りのデザインには影響を与えません。.

知っておくべきこと: コード、ノーコード、それともウェブサイトビルダーを使ってウェブサイトを構築すべきでしょうか?

ステップ5: テンプレートファイルを変更する

子テーマを使用すると、個々のテンプレートを変更することもできます。例えば、single.phpファイルを編集して投稿の表示方法を変更したいとします。.

• 親テーマから single.php をコピーし、子テーマのフォルダに貼り付けます。.
• テキスト エディターでファイルを開き、変更を加えます。.

たとえば、単一の投稿ページからコメント セクションを削除する場合は、コードの次の部分を見つけます。

if ( comments_open() || get_comments_number() ) :comments_template();endif;

コメントを非表示にするには、削除するかコメントアウトしてください。WordPressは子テーマフォルダにある変更されたsingle.phpファイルを使用するため、親テーマを更新してもカスタマイズは上書きされません。.

学ぶ: WordPress でカスタム ページ テンプレートを作成する方法

プラグインを使って子テーマを作成する方法（コーディング不要）

コーディングは苦手だけど子テーマを作りたいという方、朗報です！WordPressで子テーマを作成するために使えるプラグインは複数ありますが、今回は「The Child Theme Configurator 」プラグインを使って手順を説明します。

このプラグインを使えば、クラシック（ブロックではない）WordPressテーマの子テーマを簡単に設定・カスタマイズできます。簡単なステップバイステップガイドで、すぐに使い始めることができます。.

ステップ1：プラグインをインストールして有効化する

まず、WordPress ダッシュボードにアクセスし、プラグインセクションで「Child Theme Configurator」を検索してインストールします。有効化したら、 ツール → 子テーマ。

ステップ2：子テーマを設定する

子テーマ設定画面で、「 親/子」 タブに移動します。操作を選択するオプションが表示されるので、「新しい子テーマを作成」を選択して開始します。

ステップ3：親テーマを選択する

次に、ドロップダウンメニューから、子テーマを作成するための親テーマを選択します。この例では、Hestiaテーマを使用しています。テーマを選択したら、「分析」ボタンをクリックして、子テーマの作成に適したテーマかどうかを確認してください。.

ステップ4：子テーマフォルダに名前を付ける

次に、子テーマを保存するフォルダの名前を入力するよう求められます。ここでは、クリエイティブな名前を付けることもできますが、「Hestia-child」のように整理しやすいシンプルな名前にすることもできます。.

ステップ5: カスタムスタイルを保存する場所を決める

ここで重要な選択があります: 新しいカスタム スタイルを子テーマのプライマリ スタイルシート (style.css) に保存するか、別のスタイルシート ファイルに保存するかを選択できます。.

• プライマリスタイルシート：これはデフォルトでスタイルが保存されるメインファイルです。ここで変更を加えると、元のテーマスタイルが上書きされます。

• スタイルシートを分離する：このオプションを選択すると、カスタムスタイルが新しいファイルに保存されるため、元のテーマのスタイルは変更されません。

今のところは、プライマリ スタイルシートを使用しますが、親テーマの外観を完全に保持したい場合は、別のオプションを自由に試してください。.

詳細はこちら： 魅力的で簡単なウェブサイト作成のための最高のウェブデザインソフトウェアツール

ステップ6: 親テーマのスタイルシート処理を設定する

下にスクロールして、親テーマのスタイルシートの読み込み方法を選択します。プラグインが自動的に処理してくれるので、デフォルトの「WordPressスタイルキューを使用する」オプションのままにしておきます。.

ステップ7：子テーマの詳細をカスタマイズする

ステップ7に到達したら、「クリックして子テーマの属性を編集」をクリックします。ここで、子テーマの名前、説明、バージョンなどの詳細を追加できます。.

ステップ8: メニューとウィジェットをコピーする

通常、子テーマを作成するとメニューとウィジェットがリセットされます。これらのリセットを回避するには、手順8のボックスにチェックを入れて、親テーマから子テーマにコピーしてください。.

子テーマを作成する

最後に、「新しい子テーマを作成」をクリックします。プラグインは子テーマ用のフォルダを自動的に作成し、将来のカスタマイズに必要なstyle.cssファイルとfunctions.phpファイルも含みます。.

プレビューと有効化

有効化する前に、画面上部のプレビューリンクをクリックして、すべてが正常に表示されていることを確認してください。子テーマのプレビューが問題なく表示され、要素が崩れていない場合は、「有効化して公開」をクリックして公開してください。

これで完了です！子テーマが有効化されました。見た目も機能も親テーマと全く同じです。これで、元のテーマに影響を与えることなく、子テーマに安全にカスタマイズを加えることができます。さあ、カスタマイズをお楽しみください！

について学ぶ クリエイティブビジネスに最適なWordPress Studioテーマ

WordPress の子テーマが動作しない場合はどうすればいいですか?

子テーマに変更が反映されませんか？ご心配なく。よくある問題と、期待通りに動作させるための修正方法をご紹介します。.

functions.phpファイルを再確認する

まず、子テーマのスタイルシートがfunctions.phpファイルにエンキューされていることを確認してください。エンキューされていない場合、子テーマは正しく読み込まれず、サイトには親テーマが表示され続け、変更が反映されていないように見えます。.

興味深い記事： Laravel vs WordPress：PHPの最強ライバル同士が激突

スタイルシートの名前が style.css であることを確認してください

スタイルシートの名前が style.css になっていることを確認してください。stylesheet.css など、他の名前は使用しないでください。WordPress は子テーマのメインスタイルシートの名前を style.css と想定しています。名前が異なる場合、functions.php ファイルがそれを認識できず、カスタムスタイルが適用されません。.

style.cssのテンプレート名を確認する

style.css ファイルの「Template」フィールドは、親テーマのフォルダ名と完全に一致している必要があります。これにより、WordPress はどのテーマを親テーマとして使用するかを決定します。名前が間違っていると、WordPress は子テーマのベースとなるテーマを判断できません。.

キャッシュをクリアする

キャッシュが原因で更新が表示されない場合があります。 、キャッシュ 。ブラウザのキャッシュをクリアするか、シークレットウィンドウでサイトを開いて変更が反映されているか確認するのも有効です。子テーマを積極的に編集している場合は、作業が完了するまでキャッシュプラグインを無効にすることを検討してください。

CSSコードで!importantを使用する

親テーマのスタイルがカスタムCSSを上書きしてしまう場合は、優先させたいスタイルに !important を追加してみてください。これにより、子テーマのスタイルが親テーマよりも優先されます。例：

p {背景色: 灰色 !重要;}

このトリックは、特定の要素、ID、および CSS クラスに変更が適用されていることを確認するのに役立ちます。.

テーマサポートに問い合わせるか、フォーラムを確認してください

これらの手順をすべて試しても子テーマがまだ動作しない場合は、テーマのサポートチームに問い合わせるか、 WordPress.org。テーマによっては、子テーマの動作に影響を与える独自の構成やカスタムコードが含まれている場合があり、開発者から具体的なアドバイスが得られる可能性があります。

結論

これで終わりです！WordPressの子テーマとは何か、そして親テーマと連携してどのように機能するかをしっかりと理解できたはずです。テーマのインストールは、WordPressサイト構築の第一歩に過ぎません。.

組み込みのGutenbergエディタやテーマビルダーを使ってデザインを微調整することはできますが、子テーマを作成することで、さらに多くの可能性が広がります。子テーマを使えば、デザインの調整だけでなく、コアファイルに触れることなく機能をカスタマイズできるため、サイトを真にユニークなものにするための完全な自由が得られます。.

WordPressで子テーマを作成する際のよくある質問