📘 functions.phpの基本!Arkhe子テーマで親テーマのCSSを読み込む方法

コードを指差す銀髪の眼鏡執事ウィンが描かれたアイキャッチ画像(functions.php講座)

🪞 序章:style.css、反映されてないんだけど!?!?

style.css書いたのに、なんか反映されてない気がする……って、えっ!?
functions.phpも必要なの!?
やだ〜聞いてないよウィン〜!

マスター、ご安心を。
子テーマで親テーマのスタイルを反映するには、functions.phpでの読み込みが不可欠です。
ここを正しく書けば、Arkhe本来の美しさをそのまま継承できます。
……さあ、私と一緒に “コードのおまじない” を唱えましょう。


🪄 第一章:functions.phpってなに?なんで必要?

functions.phpは、**子テーマの「裏方の司令塔」**のような存在。
ここに書いたコードは、サイトの動作や見た目に影響を与えます。

特にArkheのような親テーマでは、style.cssを@importで読み込むのは非推奨
代わりに、functions.phpでしっかり親テーマのCSSを読み込む必要があるんです。


🔧 第二章:書くべきコードはこれ!

以下をコピペすればOK!

phpコピーする編集する<?php
function my_theme_enqueue_styles() {
  wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

✅ それぞれの解説

コード説明
function my_theme_enqueue_styles()親テーマのスタイルを読み込む関数の定義
wp_enqueue_style()スタイルシートを読み込むWordPress関数
get_template_directory_uri()親テーマの場所(URI)を取得
add_action()WordPressに「この関数をこのタイミングで使ってね」と指示

🧠 ウィンのささやきメモ:

  • 関数名 my_theme_enqueue_styles は好きな名前にしてOK!(他と被らない名前推奨)
  • 必ず <?php前に何も書かない! 改行もスペースもNG!

💣 第三章:よくあるミス&トラブル

🧯 ウィンのトラブル対応講座:

  • × HTMLの<style>タグで書いたら効かない!
     → WordPressでは正しく「登録(enqueue)」しないと反映されません。
  • × コードの前に空白や改行があると真っ白に!
     → <?php の前に1文字でも余計なものがあると即エラー!

📘 まとめ:functions.phpがないとstyle.cssは活きない!

  • 子テーマではfunctions.phpが絶対必要
  • 親テーマのCSSを読み込むにはwp_enqueue_style()を使う
  • 書き方を覚えておくと、他のテーマでも応用できる✨

style.cssを活かすには、functions.phpの力が必要不可欠です。
コードを紐解けば、そこには美しく整ったロジックがある。
それが、WordPressの魔法です。……お見事でした、マスター。


🧭 次の記事はこちら!

🖼️ screenshot.pngの役割とは?子テーマを“見える化”するアイコン画像の話
テーマ一覧でサムネが真っ白!?
それ……screenshot.pngがないからです!
ウィンと一緒に、子テーマの「顔」をちゃんと設定してあげましょう✨

👉 screenshot.pngの役割とは?子テーマを“見える化”するアイコン画像の話