WordPressの子テーマの作成に関するチュートリアル

私たちの多くは、テーマで何かをカスタマイズしたいと思っています。 使用しているテーマに何かを追加または編集することも検討していますか？ もしそうなら、あなたは正しい場所に来ました、私の友人。 この投稿は、WordPressの子テーマの作成に関するシンプルで包括的なチュートリアルです。

テーマに多くのカスタマイズオプションがある場合、これはニーズを満たすのに役立つ可能性があります。 ただし、使用できるオプションの数に関係なく、現在のテーマでは実行できない、または希望どおりでないことがある可能性があります。 したがって、コードとWordPressに慣れている場合は、テーマファイルに飛び込んで編集を開始し、数分から数時間かけてテーマに好きな変更を追加して、次のテーマでそれらの変更を失ったことに気付くことができます。更新はロールアラウンドします。

だから、これを回避するためには、私たちのヒーローは、子テーマと呼ばれています。 子テーマを作成すると、元のテーマのコードを変更せずにサイトに変更を加えることができます。 ほんの少しの微調整をしているだけでも、子テーマを作成するのに数分を費やすのはお金がかかります。

注：WebサイトでCSSを簡単に変更するには、子テーマを作成する代わりに、WordPress4.7で追加された[追加のCSS]ボックスを使用できます。 追加のCSSボックスを介して行われたこれらの変更は、テーマを更新してもそのまま残ります。 ただし、PHPファイルの編集など、その他の追加の変更を探している場合は、子テーマを作成する必要があります。

だから、これは「なぜ子テーマを作成するのか？」をカバーすると思います。 質問。 それでは、先に進んで子テーマを作成しましょう。

WordPressの子テーマを作成するにはどうすればよいですか？

このチュートリアルでは、独自の人気のあるテーマSpaciousの子テーマを作成する方法を示します。

第一歩：

テーマディレクトリに新しいフォルダを作成します。 これは、cPanelまたはFTPを使用して行うことができます。 themesディレクトリはwp-content / themesです。 それでは、フォルダにsspace-childという名前を付けましょう。 好きな名前を付けることができますが、フォルダ名にスペースを入れないでください。 親テーマに子テーマを追加し、最後に子を追加することは、子テーマに名前を付けるための一般的なアプローチです。

ステップ2：

広々とした子フォルダー内にstyle.cssというファイルを作成し、以下に示すように情報を入力します。

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

これを追加してファイルを保存します。

覚えておくべきポイント：

• テンプレート名（この場合は広々）は、親テーマのフォルダー名と一致している必要があります。また、名前の後に空白がないことを確認してください。
• その他の詳細は、必要に応じて追加または変更できます。

ステップ3：

手順2で「style.css」を作成したときにfunctions.phpというファイルを作成します。 そして、以下のように情報を入力してください。

<?php
/**
 * Child theme functions file.
 */
function spacious_child_enqueue_styles() {
	// Parent theme style handle 'spacious_style'.
	$parent_;

	// Enqueue parent and child theme style.css.
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

子テーマの作成では、 style.cssファイルとfunctions.phpファイルは必須ですが、テンプレートファイル、およびその他のファイルはオプションであり、必要に応じて作成できます。

最後に、子テーマをアクティブにするには、ダッシュボードで[外観]-> [テーマ]に移動します。 作成した子テーマを探してアクティブにします。 それでおしまい。 また、子テーマが機能するように、インストールされているテーマに親テーマも含まれていることを確認してください。 ここでサイトにアクセスすると、親テーマがアクティブ化されたときとまったく同じように表示されます。 ただし、カスタマイザーの一部の設定をリセットする必要がある場合があります。

テーマのCSSを変更する

テーマのCSSを変更する場合は、style.cssファイルの最後にCSSを追加して保存できます。 これらのCSS行は、親テーマのCSSを上書きします。

たとえば、 36pxデフォルト値の広々としたテーマのサイトタイトルのフォントサイズを42px変更し、その色を#444444デフォルトから青（ #0000FF ）に変更するとします。 次に、以下のCSS行を追加するだけです。

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
	color: #0000FF;
	font-size: 42px;
}

さらに変更を加える

他のテーマファイルの編集
テンプレートファイルを調整して、テーマファイルの構造を変更することもできます。 たとえば、変更が必要な場合、またはヘッダーにコードを追加したい場合です。 次に、親テーマのheader.phpファイルをコピーし、子テーマ内に貼り付けて、そこで変更を加えたり追加したりして、ファイルを保存できます。 このheader.phpファイルは、親テーマのheader.phpファイルの代わりにロードされます。

まとめ

うまくいけば、これで子テーマを作成し、好きなようにカスタマイズできるようになります。 何か言いたいですか？ コメントに追加していただければ、折り返しご連絡いたします。 楽しみ！