WordPress 子テーマの作成方法 (2021)

作り方を知っていますか WordPress 子テーマ?

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

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

WordPress に子テーマを使用する理由

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

子テーマを作る前の注意事項

WordPressの子テーマを作るには、HTMLやCSSを扱うのでコーディングスキルが必要です。 何を変えるべきかを知ることは非常に重要です。 さらに、少なくとも他のソースからコード スニペットをコピーして貼り付けるには、PHP の基本的な知識が必要です。

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

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

以下の部分では、 WordPress create child themeをよりよく説明するための例として、LearnPress テーマを使用します。

最初の子テーマの構築

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

では、カスタマイズを開始します。

コードの使用

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

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

 1 Theme Name: LP 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()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

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

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

プラグインの使用

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

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

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

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

それでは、子テーマのカスタマイズを始めましょう。

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

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

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

Chrome および Firefox の Inspector ウィジェットを使用して、必要な CSS コードを検出できます。 さらに、これらのツールを使用して、すべてのサイトの CSS および HTML 要素にアクセスできます。

投稿または o サイトの CSS ファイルを表示するには、右クリックして [検査] を選択します。 画面が 2 つに分割され、ページの 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="powered-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) を修正する方法