【WordPressで子テーマを作成する方法】functions.php・CSSの追加手順解説

サムネイル
               

 

キニナリ
悩む人
WordPressのテーマを更新したらすべてデータが消えた！どうして？

 

moridai
moridai
テーマの更新ボタンが表示された時、つい『更新』をクリックしてしまうと、自分でカスタマイズした部分がリセットされ、テーマが最初の状態に戻ってしまいます。改善するには「子テーマ」の作成が必要です。

 

 

 

【WordPressで子テーマを作成する方法】functions.php・CSSの追加手順解説

 

親テーマの選択と理解

WordPressで親テーマをアップデートすると、カスタマイズした部分が修正されて消えてしまうことがあります。

 

そのような問題を回避するためには、「子テーマ」が必要です。

 

子テーマは、親テーマの機能を引き継ぎつつ、独自のデザインや機能を追加・変更することができます。

 

 

テーマフォルダの作成

新しい子テーマ用のフォルダを作成し、必要なファイルを準備します。

 

moridai
moridai
新たにフォルダを作成して「style.css」「function.php」が最低限必要だよ！

 

新しく作るフォルダ名は「親テーマ-child」が分かりやすいですね。

 

私の自作したテーマの場合は親テーマが「flowers」なので子テーマは「flowers-child」しています。

 

スタイルシート（style.css）の作成

子テーマの基本となるスタイルシートを作成し、親テーマとの関連付けを行います。

 

/*
Theme Name: 子テーマ名
Theme URI: 親テーマのディレクトリパス
Description: 子テーマの説明
Author: あなたの名前
Author URI: あなたのウェブサイト
Template: 親テーマのディレクトリ名
Version: 1.0
*/

 

 

最低でもTheme Name: 子テーマ名 Template: 親テーマのディレクトリ名 の2つが無いと子テーマとして認識されません。

 

 

 

functions.phpファイルの作成

子テーマ用のfunctions.phpファイルを作成し、必要なカスタム機能や変更を追加します。

 

<?php
function enqueue_child_theme_styles() {
    // 親テーマのスタイルシートを読み込む
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    // 子テーマ独自のスタイルシートを読み込む
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/custom-style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles');
?>

 

上記の例では、子テーマが親テーマのスタイルを継承する方法を示しています。

 

enqueue_child_theme_styles関数は、親テーマのstyle.cssをparent-styleとして読み込み、そして子テーマのstyle.cssをchild-styleとして読み込んでいます。

 

親テーマのスタイルが子テーマに適用され、それに追加のカスタマイズができるようになります。

 

テーマのアップロード方法

WordPressへ直接zipファイルでアップロード

外観→テーマ→新しいテーマの追加→テーマのアップロード

 

 

うまくアップロードができれば、テーマとして認識されます。ダメだった時は、エラーが出てうまく認識されなかったと表示されます。

 

 

原因は、「親テーマのファイル名が正しく記載されていない」「○○-childのファイルが親テーマを同じディレクトリにない」ことが原因かもしれませんので確認してみましょう。

 

 

FTPソフトを使ってアップロード

FTPソフト（例えば、FileZillaやFFFTPなど）を使用して、WordPressサイトのサーバーに接続してファイルをアップロード

 

 

サイトの有効化とテーマの適用

WordPressダッシュボードにログインしたら、「外観」→「テーマ」をクリックします。

アップロードした子テーマを有効化しテーマに適用するとデザインが反映されます。

 

 

まとめ

WordPressで子テーマを作成する手順をまとめます。

 

1. **子テーマの作成**: 新しいフォルダを作成し、「style.css」と「functions.php」を追加します。フォルダ名は「親テーマ名-child」が分かりやすいです。

 

2. **スタイルシートの設定**: `Theme Name` と `Template` を記述したスタイルシート（style.css）を作成します。

 

3. **functions.phpの設定**: 子テーマ用のfunctions.phpにコードを追加して親テーマのスタイルを読み込みます。

 

4. **テーマのアップロード**: WordPress管理画面またはFTPソフトを使用して、子テーマをサーバーにアップロードします。

 

5. **テーマの有効化**: WordPressの「外観」→「テーマ」から子テーマを選択し、有効化します。これでデザインが反映されます。

 

これらの手順を実行することで、子テーマを作成し、WordPressテーマの更新やカスタマイズ時に問題が生じるリスクを減らすことができます。デザインの変更やカスタマイズを安全に行うために、子テーマの活用は重要です。