WordPressサイトを運営していると、カスタマイズしたい部分が多々出てきます。しかし、直接テーマのファイルを変更すると、テーマのアップデート時にカスタマイズが失われてしまう可能性があります。そこで登場するのが「子テーマ」です。子テーマを使うことで、親テーマの更新に影響されずに独自のカスタマイズを維持できます。
この記事では、親テーマ「Twenty Twenty-Four」に対する子テーマを作成する方法を詳しく解説します。
子テーマを作る目的
子テーマを作成する主な理由は以下の通りです:
- テーマのアップデートを安全に行うため: 親テーマのアップデートがあっても、子テーマに加えたカスタマイズはそのまま残ります。
- 親テーマの機能を拡張するため: 親テーマの機能を変更したり、新しい機能を追加したりできます。
- テーマのデバッグやテストを行うため: 子テーマを使って新しいカスタマイズをテストすることで、親テーマを直接変更するリスクを避けられます。
Step 1: 子テーマディレクトリの作成
親テーマのディレクトリは /var/www/wordpress/wp-content/themes/twentytwentyfour
です。まず、子テーマ用のディレクトリを作成します。
mkdir /var/www/wordpress/wp-content/themes/twentytwentyfour-child
Step 2: 子テーマのスタイルシート (style.css) の作成
子テーマのディレクトリに style.css
ファイルを作成します。
vim /var/www/wordpress/wp-content/themes/twentytwentyfour-child/style.css
以下の内容を style.css
に追加します。
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/twentytwentyfour-child
Description: Twenty Twenty-Fourの子テーマ
Author: あなたの名前
Author URI: https://example.com
Template: twentytwentyfour
Version: 1.0.0
*/
/* 親テーマのスタイルをインポート */
@import url("../twentytwentyfour/style.css");
/* ここにカスタムスタイルを追加 */
Step 3: 子テーマの functions.php の作成
次に、子テーマのディレクトリに functions.php
ファイルを作成します。
vim /var/www/wordpress/wp-content/themes/twentytwentyfour-child/functions.php
以下の内容を functions.php
に追加します。
<?php
// 親テーマのスタイルを読み込む
function twentytwentyfour_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwentyfour_child_enqueue_styles');
?>
functions.php の中身の解説
twentytwentyfour_child_enqueue_styles
関数: この関数は、親テーマのスタイルシートを子テーマに読み込むためのものです。wp_enqueue_style
関数を使って、親テーマのスタイルシートをキューに追加します。add_action
:add_action
は、特定のイベント(この場合はwp_enqueue_scripts
イベント)が発生したときに指定された関数(twentytwentyfour_child_enqueue_styles
)を実行します。
functions.php に機能を追加する例
functions.php
にさらに機能を追加することで、子テーマのカスタマイズを強化できます。例えば、カスタムウィジェットエリアを追加するコードを紹介します。
<?php
// 親テーマのスタイルを読み込む
function twentytwentyfour_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'twentytwentyfour_child_enqueue_styles');
// カスタムウィジェットエリアを追加
function twentytwentyfour_child_widgets_init() {
register_sidebar(array(
'name' => __('Custom Widget Area', 'twentytwentyfour-child'),
'id' => 'custom-widget-area',
'before_widget' => '<div class="custom-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'twentytwentyfour_child_widgets_init');
?>
この例では、widgets_init
アクションにカスタムウィジェットエリアを登録する関数を追加しています。
Step 4: パーミッションの調整
wordpress
ユーザーが新しい子テーマディレクトリとそのファイルにアクセスできるように、適切なパーミッションを設定します。
chown -R wordpress:wordpress /var/www/wordpress/wp-content/themes/twentytwentyfour-child
chmod -R 755 /var/www/wordpress/wp-content/themes/twentytwentyfour-child
Step 5: 子テーマの有効化
WordPressの管理画面にログインし、以下の手順で子テーマを有効化します。
- 外観 > テーマ に移動します。
- 新しく作成した「Twenty Twenty-Four Child」テーマが一覧に表示されていることを確認します。
- 「Twenty Twenty-Four Child」テーマをクリックし、「有効化」ボタンをクリックします。
まとめ
子テーマを作成することで、親テーマのアップデートによるカスタマイズの消失を防ぎ、安心してサイトをカスタマイズできます。この記事の手順に従って、簡単に子テーマを作成し、WordPressサイトを思い通りにカスタマイズしましょう。
このガイドを参考にして、WordPressサイトのカスタマイズを安全に楽しんでください。
コメントを残す