WordPress子テーマの作り方

WordPressテーマをカスタマイズしているが、安全性を重視したい？ご心配なく。以下の記事を読めば、WordPressの子テーマを使ってWordPressテーマをカスタマイズできるようになります。以下の記事を読めば、WordPressの子テーマを使ってWordPressのテーマをカスタマイズできるようになります。WordPressの子テーマがすることは、カスタマイズした内容を別のフォルダに保存して、親テーマを更新しても問題がないようにすることです。

サブテーマとはどういう意味か？

基本的に、子テーマは任意のテーマの反映です。ここでの考え方は、子テーマでどのような変更を加えても、親テーマは影響を受けませんが、親テーマで行われた変更は子テーマに反映されるということです。

子テーマを使う必要があるかどうか

子テーマを使用することが、テーマを変更する最も安全な方法であることは間違いありません。一番の利点は、親テーマが更新されても、変更した内容が削除されないことだ。子テーマの修正に問題があれば、簡単に削除して親テーマに戻すことができます。

WordPressの子テーマを設定する

WordPressの子テーマは、手動で設定することも、プラグインの助けを借りて設定することもできます。

ひとつ覚えておいてほしいのは、親テーマが「外観」の「テーマ」ページに表示されるまでは機能しないということだ。

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

#1まず、新しいフォルダを作成し、「twentytwentyfour-child」など、希望に沿った名前を付ける。

#2：次にファイルを作成し、名前を “style.css ”とします。

#3：次に、最近作成したこのファイルを開き、以下の情報を入力する必要がある。

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

主要パラメータの説明。

Theme Name：必須子テーマの名前。
Template：必須これは最も重要ラインの。それは完全対応親トピックのディレクトリ名。例えば、親トピックは twentytwentyfour空欄を埋めてください。 twentytwentyfour親テーマは Divi空欄を埋めてください。 Divi.ケースは一貫していなければならない。
Descriptionサブテーマの簡単な説明。
Authorあなたの名前
Author URIあなたのウェブサイトのアドレス
Versionサブトピックのバージョン番号。

子テーマのCSSは自動的にロードされますが親テーマのすべてのスタイルを自動的に継承するわけではない.サブトピックのための完全で信頼できる出発点を持つために、非常に一般的で推奨される方法は、次のとおりである。まず、親テーマの完全なスタイルシートをインポートする。

カスタムCSSを事前に用途 @import これを実現するためのルールだ。

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

注意してください。

たとえ @import は最も単純なアプローチだが、パフォーマンスの観点からは最適とは言えない（並列ロードが妨げられるから）。より高度なアプローチは wp_enqueue_style() 関数をサブトピックの functions.php ファイルを使用して、親テーマのスタイルシートをキューに追加する。しかし、手始めに @import 完全に実現可能で、理解しやすい。

こんな感じだ：

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式，并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载，保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号，可选
                    );
}

コードの説明

add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles'): WordPressスタイルのロードフックにカスタム関数をマウントする
get_template_directory_uri()親トピックディレクトリのURLを取得
get_stylesheet_directory_uri(): サブトピックのディレクトリのURLを取得（サブトピックがアクティブな場合）
array('parent-style'): 子テーマのスタイルを親テーマのスタイルに依存するものとして宣言し、正しいロード順序を保証する

このアプローチは、次のようなアプローチと比べても遜色がない。 @import ブラウザがスタイルシートを並列に読み込み、スタイル間の依存関係をよりよく管理できるためです。

このコードを子テーマの functions.php ファイルを作成する（存在しない場合は作成する）。 style.css ヘッダー注釈情報で十分である。

その他の詳細は、ご希望に合わせて変更可能です。

これが完了したら、「外観」>>「テーマ」と進み、子テーマが作成されているか確認してください。子テーマが作成されていれば、おめでとうございます。

方法2：プラグインを使って子テーマを作成する

手作業が面倒な場合は、無料のWordPressプラグインを利用することもできます。子テーマを作成してくれる無料のプラグインがたくさんあるので、手作業で行う手間を省くことができます。ここでは子テーマ設定ツールのプラグインを使用することができますが、利用可能なプラグインを自由に使用することができます。