子供のテーマとは何ですか、なぜそれほど重要なのですか?

この投稿では、これらの質問に対する回答を提供し、プラグインまたはコードを使用して独自の子テーマを作成およびカスタマイズする方法を段階的に示します。

あなたが希望する場合 WordPressサイトのテーマを変更する,あなたはおそらく人々が子供テーマを使うように言うのを見たでしょう。

しかし、子テーマとは何ですか、なぜ子テーマがそれほど重要なのですか?

この投稿では、これらの質問への回答と、子供のテーマの概要とそれらがどのようにあなたにぴったりであるかを紹介します。 

次に、プラグインまたはコードを使用して独自の子テーマを作成およびカスタマイズする方法を段階的に示します。

ただし、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法

そして、私たちがここにいる目的に戻りましょう。

子ワードプレスのテーマとは何ですか?

子テーマはスタンドアロンのテーマではありません。 これは、既存の親テーマの「子」であり、したがって名前です。

親テーマと一緒にインストールしますが、親テーマ自体を編集しなくても、親テーマを安全に変更することができます。

子テーマは、そのデザイン設定のほとんど/すべてを親テーマから取得します。 ただし、子テーマを変更した場合、この変更により親テーマの設定が上書きされます。

子テーマの利点

この時点で、疑問に思われるかもしれません。  なぜ親テーマを直接変更できないのですか?

それが良い考えではない主な理由は WordPressテーマの更新.

WordPress Webサイトの安全性と機能を維持したい場合は、WordPressテーマの更新を含め、更新がリリースされたらすぐに適用する必要があります。

テーマ(子テーマなし)を直接変更してWebサイトをカスタマイズする場合、WordPressテーマを更新するたびにすべての変更を上書きします。

これは、次のことを意味します。

子テーマを使用すると、子テーマですべての変更を行うことができます。 その後、作業内容を失うことなく、親テーマを更新できます。

安全な更新を支援するだけでなく、子テーマを使用することも、一般的にカスタマイズを行う際に便利です。 すべての変更をXNUMXか所に分けるため、すべての変更を追跡し、必要に応じて変更するのは簡単です。

逆さまにするのも簡単です。 たとえば、変更の使用を中止して親テーマに戻す場合は、子テーマを非アクティブ化します。

いくつかの WordPressテーマ このデフォルトの親子アプローチを使用することさえできます。 たとえば、Genesis フレームワークを使用する場合、デザインを制御するために親テーマ (基本フレームワーク) と子テーマの両方が必要になります。

子テーマをいつ使用するか

以下にリストするいくつかの例外を除いて、あなたは toujours 既存のWordPressテーマに独自の変更を加える予定の場合は、子テーマを使用します。

子テーマを使用する必要がない場合

一般に、WordPressテーマをカスタマイズする場合は常に、子テーマを使用することをお勧めします。

ただし、ルールにはいくつかの例外があり、子テーマを使用するよりも優れたオプションがある場合があります。

まず、CSSのマイナーな調整だけを行う場合、いくつかの微調整のためだけに子テーマを作成するのはやり過ぎかもしれません。

代わりに、機能を使用してカスタムCSSを追加できます 追加のCSS WordPressカスタマイザに統合されています。 または、使用できます Simple CSSなどの無料のWordPressプラグイン.

次に、テーマに依存しないようにする変更を行う場合、子テーマは最適なオプションではない可能性があります。

たとえば、カスタム分類法または カスタム投稿タイプ、おそらくファイルを使用したくない のfunctions.php 子テーマの(テーマを変更してもそれらを保持したいため)。 代わりに、次のようなプラグインを使用して、テーマの外にコードを追加する必要があります コードスニペット または独自のカスタムプラグイン。

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

子テーマが重要な理由がわかったところで、WordPress Webサイトの子テーマを実際に作成する方法を見ていきましょう。

まず、使用している場合 こんにちはElementorテーマ、私たちはすでにあなたのために子テーマを作成しました-あなたはそれを自分でする必要はありません。 あなたはできる WordPress.orgからHello Elementor子テーマを取得。 他のWordPressテーマと同じようにインストールできます(この記事の後半で、子テーマをインストールする方法も示します)。

別のWordPressテーマを使用している場合、WordPressテーマの開発者が子テーマを提供しているかどうかをGoogleで簡単に確認することは常に価値があります。 たとえば、Astra、GeneratePress、OceanWPにはすべて、子テーマのダウンロードに役立つツール/ファイルがあります。

WordPressテーマにまだ子テーマがない場合は、任意のWordPressテーマの子テーマを作成できます。

  1. 使用 WordPressのプラグイン 無料の子テーマジェネレーター。
  2. 独自の子テーマを手動で作成します。

両方の方法を実行する方法を示します。

子テーマのWordPressプラグインの使用方法

子テーマジェネレータプラグインを使用すると、WordPressダッシュボードから離れることなく子テーマを作成できます。

ここで最も人気のあるオプションは 無料の子テーマ設定プラグイン、300.000以上のWebサイトでアクティブです。

Child Theme Configuratorは、子テーマファイルの作成に役立つだけでなく、使用しているテーマと、必要に応じてテーマとフォントスタイルシートも分析します。

すでにコンテンツを追加したWebサイトで子テーマを作成しようとしている場合は、他の便利な機能も含まれています。 たとえば、既存のウィジェットとカスタマイザオプションを子テーマにコピーできます。

ただし、 プラグイン ウェブサイト上opérationnel、続行する前に完全バックアップを作成することをお勧めします。 または、理想的には、すべてをデモWebサイトに設定します。

バックアップの準備ができたら、WordPress.orgから無料のChild Theme Configuratorプラグインをインストールしてアクティブ化することから始めます。 次にメニューに行きます ツール→ 子どものテーマ あなたの子供のテーマを作成します。

リストに ドロップダウンをXNUMXつ選択します 親テーマ、 子テーマを作成するテーマを選択します。 次にクリックします 解析:

プラグインは、依存関係の親テーマを分析します。

完了すると、子テーマの作成方法を構成するためのいくつかのオプションが表示されます。 特定の設定の意味がわからない場合は、デフォルトのままにしておくことができます。

 

選択が完了したら、下部のボタンをクリックして 作成する 新しい子のテーマ.

そしてそれだけです! その後、プラグインが子テーマを作成します。 ただし、アクティブになりません PAS この子のテーマ。

それをアクティブにするには:

  • アラ 外観→テーマ。
  • この子テーマを使用してWebサイトがどのように見えるかをプレビューします(確実に機能するように-Webサイトが奇妙に見える場合は、CSSの問題が原因である可能性があります)。
  • 他のWordPressテーマと同じように、子テーマをアクティブ化します。 ただし、親テーマはインストールしたままにしてください。

子テーマをアクティブ化すると、Child Theme Configuratorプラグインは、子テーマの管理に役立つ他の便利なツールも提供します。 たとえば、タブに移動すると プラグイン設定から、親テーマと子テーマのすべての関連ファイルを表示できます。

次に、親テーマから子テーマにファイルをコピーできます。

たとえば、いくつかの変更を加えたい場合 single.php、このファイルを子テーマにコピーして、安全に編集できるようにします。

また、CSSの操作に役立つ他のツールもたくさんあります。

これらのツールが役立つ理由については後で説明します。

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

このセクションでは、PHPとCSSについてもう少し知っていることを前提としています。 ここでの説明に圧倒された場合は、前のセクションの無料プラグインを使用することをお勧めします。

子テーマを手動で作成するには、XNUMXつのファイルを作成する必要があります(これらは子テーマの厳密な最小値です)。

  • style.cssの -最初に追加する必要があるのは定型コードだけです。
  • のfunctions.php -これにより、親テーマのスタイルシートをロードできます。 これがないと、子テーマは親テーマのCSSを適用できず、Webサイトが見苦しくなります。

style.cssの

まず、という名前のファイルを作成します style.cssの 次のコードを追加します。

まず、という名前のファイルを作成します style.cssの 次のコードを追加します。

/*

テーマ名:こんにちはElementor Child

テーマURI:https://github.com/elementor/hello-theme/

説明:Hello Elementor Childは、Elementorチームによって作成されたHello Elementorの子テーマです。

作成者:Elementor Team

著者URI:https://elementor.com/

テンプレート:hello-elementor

バージョン:1.0.1

テキストドメイン:hello-elementor-child

ライセンス:GNU General Public License v3以降。

ライセンスURI:https://www.gnu.org/licenses/gpl-3.0.html

*/

コロンの後ろにあるものはすべて、実際の情報に置き換えてください。

  • テーマ名 -あなたの子供のテーマの名前。
  • URIテーマ -テーマのウェブサイトとそのドキュメント。
  • 説明 -テーマの簡単な説明。
  • 作家 -テーマの作者の名前。
  • 著者URI: -テーマ作者のウェブサイト。
  • テンプレート -親テーマフォルダーの名前(wp-content / themesフォルダー内での名前) これは最も重要な行です。 あなたの子供のテーマはそれなしでは機能しません。
  •  -子テーマのバージョン番号。
  • テキストフィールド -これは国際化に使用されます。 テンプレート名の最後に「子」を追加するだけです。
  • 資格 -これはデフォルトのままにします。
  • URIライセンス -これはデフォルトのままにします。

行を除外する テンプレート、 入力する内容は問題ではないので、あまりストレスをかけないでください。 親テーマのフォルダ名を、 template.

将来、独自のカスタムスタイルを追加する場合は、定型コードの下でこのスタイルシートに追加できます。

のfunctions.php

次に、ファイルを作成する必要があります のfunctions.php あなたの子供のテーマのために。 この場合も、親テーマの完全なCSSスタイルシートを読み込むことができます。

ファイル内 functions.php、 次のコードを追加します。

<?php

/ *スタイルシートを親テーマからエンキューする関数* /

function child_enqueue__parent_scripts(){
wp_enqueue_style( 'parent'、get_template_directory_uri()。 '/ style.css');
}
add_action( 'wp_enqueue_scripts'、 'child_enqueue__parent_scripts');

WordPress Webサイトにファイルをアップロードする

ファイルを入手したら style.cssの et のfunctions.php、あなたはそれらをあなたのワードプレスのウェブサイトに新しいテーマとしてアップロードする必要があります。

これを行うには、FTPを使用してWordPress Webサイトに接続します。

次に、あなたのウェブサイトのテーマディレクトリに行きます (WPコンテンツ/テーマ)子テーマ用の新しいフォルダーを作成します。

たとえば、親テーマのフォルダーが こんにちはelementor、子テーマフォルダに名前を付けることができます こんにちは、eletor-child あなたがそれを思い出すのを助けるために。

次に、ファイルをアップロードします style.cssの et のfunctions.php このフォルダ内:

両方のファイルをダウンロードしたら、次の場所に移動できます 外観→テーマ 他のWordPressテーマと同じように、子テーマをアクティブ化します。

子ワードプレスのテーマをインストールする方法

上記の特定の方法でこれらの側面のいくつかを取り上げましたが、WordPress子テーマをインストールする方法をもう一度説明します。

これは、自分で作成するのではなく、テーマ開発者のWebサイトから子テーマをダウンロードした場合にも役立ちます。

他のWordPressテーマと同じように、WordPress子テーマをインストールできます。

  • アクセス先 外観→テーマ WordPressのダッシュボードインチ
  • 上をクリックします 引っ越し先.
  • 子テーマのZIPファイルをアップロードします。

WordPressはインストールプロセス中に、子テーマをダウンロードしていることを検出し、親テーマが存在することを確認します。

ファイルをダウンロードしたら、必ず それをアクティブにします。

子テーマを機能させるには、次の場所にインストールする必要があります。 ラフォワ親テーマと子テーマ。

子テーマはアクティブなテーマでなければなりませんが、親テーマがインストールされている必要があります。

これは次のようになります。

  1. 子テーマはアクティブなテーマです
  2. 親テーマはまだインストールされていますが、アクティブではありません

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

通常のWordPressテーマのカスタマイズと同様に、子テーマを「カスタマイズ」するためのオプションがいくつかあります。

より正確には、あなたは 子テーマを実際にカスタマイズするのではなく、子テーマを使用して既存の(親)テーマをカスタマイズします。

最初に、コードを使用して子テーマをカスタマイズする方法をいくつか紹介します。 次に、物事をパーソナライズする簡単な方法を紹介します。 Elementorテーマビルダー.

コードで子テーマをカスタマイズする

子テーマをコードでカスタマイズする場合は、CSS、HTML、およびPHPに関する十分な知識が必要です。

ここにあなたができることのいくつかがあります:

カスタムCSSを追加

CSSを使用して子テーマをカスタマイズするには、ファイルに直接追加します style.cssの あなたの子供のテーマの。

ファイルの上部にある既存のコードの下にCSSを追加します。

子テーマに追加したCSSは、同じセレクターを使用している限り、親テーマのCSSを置き換えます。

既存のテンプレートを置き換える

親テーマのテンプレートを置き換える場合は、次のことができます。

  • テンプレートファイルを親テーマから子テーマにコピーします。
  • 子テーマのテンプレートファイルを編集します。

たとえば、変更したい場合 single.php、 最初にファイルをコピーします single.php 親テーマから子テーマへ(同じ構造を維持するようにしてください)。

次に、子テーマバージョンのコードを編集できます。 single.php.

注意: WordPressは、同じ名前である限り、子テーマのテンプレートを使用します。 このため、親テーマの既存のテンプレートをほとんど非表示にします。

上記のChild Theme Configuratorプラグインを使用している場合、WordPressダッシュボードから離れることなく、ファイルを子テーマにコピーできます。

新しいテンプレートを追加する

親テーマから既存のテンプレートをコピーして変更するだけでなく、子テーマに新しいカスタムテンプレートを作成することもできます。

たとえば、追加したカスタム投稿タイプのテンプレートを作成する場合は、そのテンプレートを子テーマに追加できます。

Elementorテーマジェネレーターで子テーマをカスタマイズする

慣れていなければ Elementorテーマビルダービジュアルインターフェイスを使用して、WordPressテーマの一部またはすべてをカスタマイズできます。

Elementor ProとTheme Builderを使用すると、Webサイトテンプレート用のカスタムテンプレートを作成できます。

  • ヘッダ
  • フッター
  • 単一(例:単一のブログ投稿またはページ)
  • アーカイブ(ブログのすべての投稿を一覧表示するページなど)

これらのテンプレートは、子テーマと親テーマの両方で機能します。

Elementor Theme Builderを使用すると、コードを直接操作する必要がなくなります。 カスタムCSSを追加したり、PHPテンプレートファイルをコピーしたりする必要はありません。ドラッグアンドドロップですべて実行できます。

たとえば、子テーマのヘッダーをカスタマイズしたいとします。 ファイルをコピーする必要はありません header.phpの 子テーマでPHPを変更すると、Elementorのビジュアルインターフェイスとドラッグアンドドロップインターフェイスを使用して新しいヘッダーをデザインできます。 次に、このヘッダーをWebサイトの任意の場所またはWebサイトの特定の部分にのみ適用できます。

CSS、HTML、およびPHPを初めて使用する場合、このコードなしのアプローチにより、子テーマをカスタマイズできます。 また、そうしても、この視覚的なアプローチにより、テンプレートファイルでPHPを使用するよりも多くの時間を節約できます。

Elementor Theme Builderで新しいテンプレートを作成すると、テンプレートのタイプを選択できます。 たとえば、ヘッダー。

次に、空白のスレートから開始するか、Elementor Proモデルのいずれかを選択します。

そこから、サイドバーのドラッグアンドドロップオプションを使用して、ヘッダーの外観を制御できます。

完了したら、このヘッダーテンプレートを使用する場所を正確に選択できます。

子テーマを削除する方法 WordPress

子テーマの使用をやめたい場合は、通常のWordPressテーマと同じようにオフにすることができます。

これは :

  • アラ 外観→テーマ.
  • 別のテーマをアクティブにします。 親テーマまたは新しいWordPressテーマのいずれか。

子テーマをオフにして親テーマに戻すと、子テーマを介して追加した変更は存在しなくなることに注意してください。

代わりに、親テーマの設計に戻ります。

WordPress子テーマの使用を開始する

子テーマは、WordPressテーマを安全に変更するのに役立ちます。

子テーマは親テーマからすべてのスタイルを継承しますが、子テーマに加えた変更は親テーマを上書きします。 これは、子テーマで行った変更を失うことなく、親テーマを安全に更新できることを意味します。

WordPressの子テーマを開始するには、次のことができます。

  • テーマ開発者がすでに子テーマを提供しているかどうかを確認します。 Hello Elementorを使用している場合は、 GitHubから子テーマをダウンロードする.
  • 無料の子テーマ設定プラグインを使用します。
  • 子テーマを手動で作成します。

そこから、CSS、HTML、およびPHPを使用して子テーマをカスタマイズできます。 コードをスキップしてElementor Theme Builderを使用し、視覚的なドラッグアンドドロップインターフェイスを使用してテーマをカスタマイズすることもできます。

いくつかのテーマとプレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 AP価格表

AP 価格表は WordPressのプラグイン 直感的なインターフェイスで機能豊富な価格表を簡単に作成できるプレミアム。 35 の定義済みテンプレートと無制限の数のオプションを提供します。

ワードプレス用のAP価格表レスポンシブ価格表ビルダープラグイン

このと WordPressのプラグイン 使いやすく、数回クリックするだけで魅力的な価格表を簡単に作成できます。 行と列の追加、列の境界線の設定、列のスペース、列の幅などの機能を提供することで、無制限の価格グリッドを作成できます。

また読む WooCommerceの[カートに追加]ボタンをカスタマイズする方法

このプラグインは オーディオコンテンツを追加する、ビデオ、およびGoogleマップ。

ダウンロードデモ | ウェブホスティング

2.wpページビルダー

WordPress Page Builderは、WordPress Webサイトの究極のビルダーであり、カスタム投稿、カスタム分類、またはカスタムメタボックスを生成するための優れたツールが付属しています。 

Wpページビルダー-ワードプレスプラグインメタボックス

機能としては、とりわけ: カスタム投稿タイプCPT, パーソナライズされた分類、高度なカスタムフィールド、ドラッグアンドドロップ機能、サポートされているGoogleマップの場所、サポートされている繰り返し可能なフィールドなど。

ダウンロード | デモ | ウェブホスティング

3。 Rankie

ランキーは、各キーワードの位置を注意深く監視しながら、Googleでのワードプレスのランキングを定期的にチェックするように設計された非常に便利なワードプレスモジュールです。

SEO用ランキーワードプレスプラグイン

ランキング追跡プラグインとして、ランキーはキーワードの位置を毎日更新し、正確なレポートを生成します。

 私たちも読んでください SEOとリダイレクトに関連する6の定期的な質問

また、貴重なキーワードリストを生成する強力な調査ツールも組み込まれています。 Googleはすでにそれを研究に使用しています。

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここに ! このチュートリアルは以上です。 WordPressでの子テーマの有用性についてまだ質問がありますか? でお知らせください コメントセクション そして私たちは助けようとします!

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する

...