WordPressの子テーマを作成する方法（2021）

公開: 2021-10-21

作り方知っていますか WordPressの子テーマ？

もちろん、あなたのテーマはあなたのウェブサイトに適しているように見えますが、ある時点で、それらを編集する必要があります。子テーマに変更を加えることは、サイトを編集するための望ましい選択です。また、子のテーマについて学ぶことは、WordPressの基本的なことの1つです。ここからWordPressについて学び始めることができます。

WordPressの子テーマを作成するプロセスを見ていきましょう。

WordPressに子テーマを使用する必要があるのはなぜですか？

WordPressでは、子テーマは親テーマのすべての機能、機能などを取得します。一方、親テーマを変更せずに子テーマを編集することも可能です。それはあなたのためにサイトを編集する時間と労力を短縮します。また、WordPressテーマの更新はより安全で安定しています。子をカスタマイズすると、親のすべての変更とカスタマイズは同じままになります。ユーザーはこの子テーマを他のWordPressWebサイトでも使用できます。

子テーマを作成する前の通知

子テーマのWordPressを作成するには、HTMLとCSSを使用するため、コーディングスキルが必要です。何を変更するかを知ることは非常に重要です。さらに、少なくとも他のソースからコードスニペットをコピー/貼り付けするなど、PHPの基本的な知識が必要になります。

開発環境で練習することを心からお勧めします。これは、メインサイトを台無しにすることを恐れずにそれを行うことができる場所です。 1つの石で2羽の鳥を殺すようなものです。1つはそれをテストフィールドに移動し、もう1つはテーマ開発として使用されます。

もう1つ、親テーマは外観と機能を目的に合わせる必要があります。実際、変更が少なければ少ないほど、サイトはより良くなります。

以下のパートでは、 WordPressの子テーマの作成をよりよく説明するための例としてLearnPressテーマを使用します。

最初の子テーマの作成

子テーマをWordPressにする場合、2つのオプションがあります。手動ですべてのファイルに慣れることができます。それ以外の場合、プラグインを適用すると、複雑なファイルやフォルダーで機能します。

次に、カスタマイズを開始します。

コードの使用

まず、WordPressのインストールで/ wp-content / themes /を開き、子テーマ用の新しいフォルダーを作成します。好きな名前を付けてください。

次に、子テーマの最初の2つのファイルを作成する必要があります。テキストエディタを開き、以下のコードを空のドキュメントに貼り付けます。

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

計画中に情報を変更し、このファイルを最近の子テーマのフォルダーにあるstyle.cssファイルに保存できます。さて、あなたはちょうど子テーマのメインスタイルシートを作成しました。

次に、親テーマからスタイルシートをインポートするための2^番目のファイルを作成します。テキストエディタで新しいドキュメントを作成し、次のコードをコピーします。

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()-&gt;get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

LearnPressを親テーマとして使用すると、このコードが機能し始めます。したがって、ほとんどのテーマはこのように機能します。このファイルを保存すると、子テーマのfunctions.phpフォルダーになります。

これらの手順を実行すると、基本的な子テーマが作成されます。「外観」で「テーマ」と「アクティブ化」を選択します。したがって、サイトは子テーマの使用を開始します。カスタマイズする必要がある場合は、次の部分に進んでください。

プラグインの使用

Child ThemeConfiguratorプラグインを使用することをお勧めします。コーディングが不要なため、簡単に変更やカスタマイズができます。

まず、プラグインをサイトにインストールします。プラグインのインストールに関するその他のガイドについては、ここをクリックしてください。

アクティベートするときは、「ツール」->「子テーマ」に移動し、親テーマのポップアップでLearnPressを選択します。「分析」を選択して、親テーマとなる互換性を確認します。次に、ファイルを保存するための子テーマのフォルダーとそれらを保存する場所に名前を付ける必要があります。デフォルト設定では、「クリックして子テーマ属性を編集」を選択します。次に、子テーマの情報を実行します。

子テーマを手動で作成する場合、子テーマは親テーマからメニューとツールを継承しません。これを解決するには、Child ThemeConfiguratorを使用します。最後に、「新しいテーマの子を作成」を選択して終了します。このステップでは、子テーマに、さらに開発するためのfunctions.phpとstyle.cssが含まれます。どうやら、あなたの子プラグインをプレビューすることを忘れないでください。その後、「アクティブ化して公開」を選択して、子テーマを公開します。

今、私たちはあなたの子供のテーマのカスタマイズを開始します。

WordPressの子テーマのカスタマイズ

ファイル「style.css」にコードを追加することで、親テーマとは少し異なる子テーマWordPressを作成します。

Firefox / Chromeインスペクターからコードをコピーする

ChromeとFirefoxのインスペクターウィジェットを使用して、必要なCSSコードを見つけることができます。さらに、これらのツールを使用して、すべてのサイトのCSSおよびHTML要素にアクセスできます。

投稿またはoサイトのCSSファイルを表示するには、右クリックして[検査]を選択します。画面が半分に分割され、ページのCSSとHTMLが表示されます。 HTML行の上にマウスを移動すると、インスペクターツールが上部のウィンドウに表示されます。 CSSルールも実行します。

裏面は一時的に色が変わります。永続的にするには、このCSSルール行をコピーして、子テーマのstyle.cssファイルに貼り付けます。

 1 body { 2 background-color: #fdf8ef; 3 )

変更を保存してサイトをプレビューします。さらに、テーマのスタイルシートの任意の要素に対してこれを再起動できます。さて、ここで子テーマの完全なスタイルシートを提供します：

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

親テーマのstyle.cssファイルからコードをコピーする

ご覧のとおり、親テーマのstyle.cssファイルからコピーして、子テーマに貼り付けてカスタマイズすることができます。

たとえば、ページの背景色のコードは次のとおりです。

 1 background-color: var(--global--color-background);

'–global–color-background'は、テーマのさまざまな場所で使用される変数です。それらの場所の色を同時に変更する必要がある場合は、変数の値を変更する必要があります。 WordPressインストールフォルダーの/ wp-content / themes / learnpressに移動し、テキストエディターでファイルstyle.cssを開いて、–global–color-backgroundの場所を探します。その変数は別の変数で変更できます。親テーマのstyle.cssファイルにはたくさんの色変数があります。適切な色のオプションを選択した後、そのコード行をコピーして子テーマのstyle.cssファイルに貼り付け、色の傾向に合わせて古いものを選択した新しいものに置き換えます。その後、計画された配色に基づいて色が分割されます。このプロセスにより、配色が一貫してすばやく編集されます。

テンプレートファイルのカスタマイズ

テーマでは、Webサイトのファイル処理領域はテンプレートと呼ばれます。テンプレートは通常、処理するセクションにちなんで名付けられます。したがって、いくつかの重要なセクションは、さまざまなファイルまたはコンテンツテンプレートによって管理されます。

テンプレートをカスタマイズするには、親テーマでそのファイルを見つけて、子テーマにコピーします。次に、テキストエディタで開き、変更を開始します。

このプロセスのチュートリアルをファイルfooter.phpで示します。子テーマのフォルダーにコピーして、プレーンテキストエディターで開きます。たとえば、フッターの「Proudly powered by WordPress」リンクを削除して、著作権表示を追加しましょう。まず、<div class =” powerd-by”>タグの間のすべてを削除します。

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

次に、以下の例でそれらのタグの下にあるコードを貼り付けます。

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

「変更を保存」を選択すると、サイトに戻ると、新しい著作権表示が表示されます。

WordPressの子テーマに機能を追加する

サイトに関数を変更または追加するには、functions.phpファイルを探す必要があります。このファイルは、PHPコードを使用してこのプロセスを実行します。

通常、コードスニペットをコピーしてfunction.phpファイルに貼り付けるようにガイドされていますが、PHPまたはテーマを更新すると削除されます。したがって、子テーマを使用してコードスニペットを追加することをお勧めします。さて、ウィジェットの追加プロセスに移りましょう。子テーマのfunctions.phpファイルにコードスニペットを追加します。

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

保存して[外観]-> [ウィジェット]に移動し、新しいツールを表示します。さらに、機能領域の追加に関する詳細情報を探すことができます。サイトのfunctions.phpファイルにコードスニペットを追加することで、多くの機能を追加できます。

WordPressで子テーマを作成する方法は以上です。修正エラーの部分に移りましょう。

エラーの修正

子テーマの作成で問題が発生した場合は、いつでも対応できます。したがって、簡単に諦めるべきではありません。

構文の問題は、コーディングプロセスで欠落していることが原因で発生する可能性があります。また、これはすべてのユーザーが遭遇する可能性のある最も一般的なエラーです。また、うまくいかない場合は、いつでも削除してやり直すことができます。

WordPressの子テーマを作成する方法：結論

私たちの記事を通して、子供をテーマにする知識を身に付けていただければ幸いです。読んでくれてありがとう！

続きを読む：HTTPエラーを修正する方法500 WordPress（2021）