GeneratePress Child Theme Creation Guide

GeneratePressの子テーマ作成ガイド

このガイドでは、GeneratePressテーマを安全にカスタマイズするための「子テーマ」を作成する手順を解説します。

なぜ子テーマが必要なのか?

子テーマは、親テーマ(今回はGeneratePress)の機能やデザインを引き継ぎつつ、カスタマイズ内容を安全に保管するための「上書き用のテーマ」です。

もし親テーマに直接変更を加えると、GeneratePressがアップデートされた際に、あなたが行ったカスタマイズがすべて上書きされて消えてしまいます。 子テーマに変更内容を記述しておけば、親テーマがアップデートされても、あなたのカスタマイズは安全に保たれます。

子テーマの作成手順

子テーマを作るのに必要なファイルは、たったの2つです。

Step 1: 作業フォルダの準備

まず、あなたのパソコンのデスクトップなど、わかりやすい場所にgeneratepress_childという名前の新しいフォルダを作成してください。

Step 2: style.cssファイルの作成

generatepress_childフォルダの中に、style.cssという名前で新しいテキストファイルを作成します。そのstyle.cssファイルを開き、以下のコードをそのままコピー&ペーストしてください。

/*
 Theme Name:   GeneratePress Child
 Template:     generatepress
 Version:      1.0
 Author:       あなたの名前
 Description:  Directors Console開発用のGeneratePress子テーマ
*/
  • Theme Name: WordPressの管理画面で表示されるテーマ名です。
  • Template: generatepress これが最も重要です。「このテーマはgeneratepressというテーマの子どもですよ」とWordPressに教えるための記述です。

Step 3: functions.phpファイルの作成

同じくgeneratepress_childフォルダの中に、functions.phpという名前で新しいPHPファイルを作成します。そのfunctions.phpファイルを開き、以下のコードをそのままコピー&ペーストしてください。

<?php
/**
 * GeneratePress child theme functions and definitions.
 */

function generatepress_child_enqueue_styles() {
    // 親テーマのスタイルシートを読み込む
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_styles' );

何をしているか? これは、「まず親テーマ(GeneratePress)のデザインを読み込んでから、子テーマのCSS(style.css)を読み込んでね」という、WordPressへの命令文です。これを書かないと、サイトのデザインが崩れてしまいます。

Step 4: テーマの圧縮とアップロード

generatepress_childフォルダの中に、style.cssfunctions.phpの2つのファイルが入っていることを確認してください。

  1. generatepress_childフォルダを、フォルダごとZIP形式で圧縮します。
    • Windows: フォルダを右クリック → 「送る」 → 「圧縮(zip形式)フォルダー」
    • Mac: フォルダを右クリック → 「”generatepress_child”を圧縮」
  2. generatepress_child.zipというファイルが作成されます。
  3. WordPressの管理画面に戻り、「外観」→「テーマ」→「新規追加」→「テーマのアップロード」をクリックします。
  4. 「ファイルを選択」ボタンを押し、先ほど作成したgeneratepress_child.zipファイルを選び、「今すぐインストール」をクリックします。

Step 5: 子テーマの有効化

  1. インストールが完了したら、「有効化」のリンクをクリックします。
  2. 「外観」→「テーマ」のページに戻り、「GeneratePress Child」が有効になっていることを確認してください。

これで完了です!

見た目はGeneratePressと全く変わりませんが、これからはgeneratepress_childフォルダの中にあるstyle.cssfunctions.phpにコードを追記していくことで、安全にカスタマイズを進めることができます。

コメント

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