【WordPress】子テーマの作り方【コピペで簡単】

refresh calendar 2019-12-10

はい、今日はWordPressを始めるための手順と気をつけるべきポイントまとめの続きです。

今回は子テーマについて話します。 まず子テーマの最小構成は次のようになっています。

  • 小テーマ用フォルダ
    • functions.php
    • style.css

だいたいのことはこの最小構成でできるため、とりあえずこれを作成しましょう。

WordPressでサイトを作成するにあたっての、大まかな流れをまとめてみました。 このページではあくまで大まかな流れについて触れ、必要ある場合には詳細に関するページのリンクを貼…
home kanau.page

子テーマ用フォルダを作成

フォルダ名は自由に決めてもらって大丈夫です。 「ベースとするテーマ名+child」とかでも大丈夫です。

functions.phpを作る

<?php
function child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

この記述は、親テーマのスタイルシート(style.css)を先に読み込むことを意味しています。

最初の「<?php」は誤字ではないので必ず書くように。

style.cssを作る

/*
Theme Name: {子テーマの名前}
Template: {親テーマのフォルダ名}
*/

ここでは上の{}内をそれぞれ置き換える必要があります。

  • Theme Name: 任意の子テーマ名(WordPressの管理画面で表示されます)
  • Template: 使用する親テーマのフォルダ名をそのまま記述する

Templateに関しては、記述を間違えると親テーマのスタイルシートの読み込みが行われません。 「設定したのに上手く動作しないぞ?」という場合は大抵ここが原因。

親テーマのフォルダ名の確認方法

/wp-content/themes/

テーマは上記のディレクトリに保存されています。 当ブログ紹介の開発環境ソフトLOCALを利用の場合、

サイトフォルダ →app→public

と進むと、WordPress のデータ区画に入れます。

子テーマをアップロードする

直接オンラインサーバー上で編集している方は、今回作成したテーマをアップロードする必要があります。 アップロードする際にはzipで圧縮し、

外観 → テーマ → テーマを追加 → テーマのアップロード

からアップロードしましょう。

まとめ

一応これで子テーマの作成は完了です。 独自の設定を追加する際には、今回記述した後に追記する形で書くようにしていきます。

次回はデザインについてです。 初めのうちはテーマの機能を弄ってるだけでも全然いいんですけど、phpとかcssとかについて、軽く意味を知っていたほうが良いので、その部分について焦点をあてた内容になっています。

home kanau.page

以上、今日はこれにて!

Some images are made by Freepik's icons from www.flaticon.com