親テーマの更新によりレイアウトが崩れたりしないように子テーマを作成する
子テーマはFTPを使用し「themes」に新たにフォルダを作り作成する
子テーマフォルダの作成手順（FTP内）
- wp-content フォルダを開く（ダブルクリック）
- 中に「themes」というフォルダがあるので開く
- その中に、右クリック or [新しいフォルダ作成]（ロリポップならボタンある）で
👉 フォルダ名：twentytwentyfive-child
これで子テーマの“家”が完成🏠✨
🔧 次は中にファイルを作ろう！
そのフォルダ（twentytwentyfive-child）を開いて、以下のファイルを作成して中身を入力：
1. 📄 style.css
新規ファイル → 名前：style.css
中身はこれ↓
css
/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
*/
2. 📄 functions.php
もう一つ、新規ファイル → 名前：functions.php
中身はこれ↓
php
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_styles’ );
function enqueue_styles() {
// 親テーマのCSS
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
// 子テーマのCSS
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’) // ← 親CSSの後に読み込むよう指定
);
}
🎉 子テーマができたら
- WordPress管理画面に戻る
- 「外観」→「テーマ」に行くと、Twenty Twenty-Five Childが出てきてるはず！
- それを「有効化」すればOK！
CSSが反映されない時のチェックリスト
✅ 1. 子テーマ、ちゃんと有効化されてる？
- WP管理画面 → 「外観 → テーマ」
- 「Twenty Twenty-Five Child」が「有効」と表示されてることを確認！
✅ 2. style.cssの内容、ちゃんと保存した？
- FTPやファイルマネージャーで編集して、保存ボタン押したか？
- 試しにこういうシンプルなCSSを入れてみて：
css
body {
background-color: yellow;
}
めちゃくちゃ目立つから、変わったかどうか分かりやすい😂
✅ 3. ブラウザのキャッシュが邪魔してない？
- 試してみて：
- Windows → Ctrl + F5
- Mac → Command + Shift + R
- または「シークレットモード」で開くのもおすすめ
✅ 4. style.cssがちゃんと読み込まれてるか？
うっかり functions.php の読み込みコードをミスってるとCSSが効かない！
確認する内容はこれ👇
twentytwentyfive-child/functions.php にこうなってる？
php
コピーする編集する
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
✅ 5. ブロックテーマのCSSに“打ち消されてる”可能性
Twenty Twenty-Fiveは theme.json でデザイン管理されてるから、セレクタが弱いと無視されることもある！
例えばこれを試してみて：
css
コピーする編集する
body {
background-color: yellow !important;
}
!important をつけると、強制的に優先されるようになる🔥
ただし多用はNGだけど、動作確認には最適！
✅ ページのソースを開いて、style.cssが読み込まれてるか見る！
- 自分のサイトをChromeで開く（投稿ページなど）
- 右クリック → 「ページのソースを表示」をクリック
- Ctrl + F（検索）して、twentytwentyfive-child と入力！
💡 これが出てきたら成功：
html
コピーする編集する
<link rel=’stylesheet’ id=’parent-style-css’ href=’https://あなたのサイト/wp-content/themes/twentytwentyfive/style.css?ver=xxx’ type=’text/css’ media=’all’ />
もしくは twentytwentyfive-child/style.css が読み込まれてる記述！
出てこないなら…functions.phpのコードに問題があるかも！
コメントを残す