ミヤカワソリューションズ

WordPress

WordPressの魔法：子テーマで安全にサイトをカスタマイズする方法

—

in

WordPressサイトを運営していると、カスタマイズしたい部分が多々出てきます。しかし、直接テーマのファイルを変更すると、テーマのアップデート時にカスタマイズが失われてしまう可能性があります。そこで登場するのが「子テーマ」です。子テーマを使うことで、親テーマの更新に影響されずに独自のカスタマイズを維持できます。

この記事では、親テーマ「Twenty Twenty-Four」に対する子テーマを作成する方法を詳しく解説します。

子テーマを作る目的

子テーマを作成する主な理由は以下の通りです：

  1. テーマのアップデートを安全に行うため： 親テーマのアップデートがあっても、子テーマに加えたカスタマイズはそのまま残ります。
  2. 親テーマの機能を拡張するため： 親テーマの機能を変更したり、新しい機能を追加したりできます。
  3. テーマのデバッグやテストを行うため： 子テーマを使って新しいカスタマイズをテストすることで、親テーマを直接変更するリスクを避けられます。

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の管理画面にログインし、以下の手順で子テーマを有効化します。

  1. 外観 > テーマ に移動します。
  2. 新しく作成した「Twenty Twenty-Four Child」テーマが一覧に表示されていることを確認します。
  3. 「Twenty Twenty-Four Child」テーマをクリックし、「有効化」ボタンをクリックします。

まとめ

子テーマを作成することで、親テーマのアップデートによるカスタマイズの消失を防ぎ、安心してサイトをカスタマイズできます。この記事の手順に従って、簡単に子テーマを作成し、WordPressサイトを思い通りにカスタマイズしましょう。

このガイドを参考にして、WordPressサイトのカスタマイズを安全に楽しんでください。

コメント

コメントを残す