WordPress

【WordPress】カスタマイズ備忘録・子テーマを作る

しろくまこーワードプレスー好きぃー
--
どうもこんにちは、しろくまこです

WordPress

という訳で、このサイトも含め今までに何度かWordPressでサイトを作ってます

カスタマイズ、楽しいわよね

ただ、しろくまこは専門的に習ったことはなくて、グーグル先生にお世話になりっぱなしです…
それでサイトを作る度に毎回同じことをググってて、物忘れの激しさを思い知る日々ですが
まあ、それで今後のために備忘録代わりに書き残しておこうかなあと…

ほぼほぼコピペなので、参考にしたサイトのURLもできる限り明記するようにしますー


まずは、カスタマイズの基本、子テーマを作っておきます
テーマをいちから作る人もいるとは思いますが、ほとんど場合一番イメージに近い既存のテーマを使用するんじゃないかと思います

で、そのテーマを直接カスタマイズしてもいいんですが、失敗したときのリスクとか
テーマがアップデートされたりするとCSSとか元に戻されるので、またまた直さなきゃいけない…とか何かと面倒なのです

wp-content/themes ディレクトリに子テーマ用のフォルダを作成

WordPress公式によると名前は「◯◯-child」が推奨されるそうです

ちなみにこのサイトは無料テーマの SiteOrigin Unwind を使ってるので
「siteorigin-unwind-child」ていう名称にしました

子テーマフォルダに、2つのファイル(style.css と functions.php) を作成

各ファイルには以下のコードを記述

style.css ※使用するテーマに合わせてください

/*
 Theme Name: Unwind Child
 Template: siteorigin-unwind
*/

functions.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の「Template:◯◯」の記述が間違ってると認識されないので注意
(※全部小文字で書くのが正しいみたいです)

しろくまこはここを大文字込で記述してたらエラーで認識されず、1時間位苦しんだわ…

以上で、カスタマイズの準備が整いましたよ!

***ここまで読んでいただきありがとうございました***

コメント

タイトルとURLをコピーしました