web関連

5分でできる子テーマ作成

5分でできる子テーマ作成

子テーマを作成して、管理画面で有効化して反映を確認することがこの記事の目的です。

必要ファイル

  • style.css
  • functions.php

上記2点を用意する前にwordpressの「wp-content」→「themes」の中に子テーマ用のディレクトリを1つ用意

「(親テーマ)_child」ディレクトリ(わかりやすければなんでもokです)

ここに編集した「style.css」と「functions.php」を入れて有効化して反映が完了したかどうか確認します
具体的な方法は以下より確認してください

GUIではフォルダ、CUIではディレクトリと呼び方が変わるだけで一緒と思ってもらって大丈夫みたい。
覚えたてだったので使ってみたかっただけです。

style.css

@charset "utf-8";
/*
Template:(親にするテーマ名)
Theme Name:(子テーマの名前、例「(親テーマ名)_child」)
Description:(テーマの説明)
Version:1.0
Author:(作成者)
*/

一応必要なのは「Template」の記述だけっぽいけど、いつも上記の記述は書いている

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

特に記述を変更することなくそのまま入れてくれれば反映される

テーマを有効化して確認する

「デザイン」→「テーマ」で子テーマを選択して有効化する
基本的に反映されていてもサイトの表示は変わらないので
「style.css」に適当なcssでもいれて反映されているかどうか確認してくれればokです

body{
  background: red;
}

反映自体は簡単で、後は反映したいファイルを親テーマからまんまコピーして親テーマと同じ階層(テーマ直下だったらテーマ直下)に入れて編集してくれれば反映される、まぁ試してください