カスタマイズ方法

子テーマでは CSS・PHP・テンプレートファイルの3つの方法でカスタマイズできます。functions.php には7つのカスタマイズ例がコメントで記載されています。

管理画面の子テーママニュアル

WordPress管理画面の 外観 > テーママニュアル から、カスタマイズガイドをいつでも確認できます。

管理画面サイドバーのテーママニュアルメニュー位置 — 図: 外観メニュー内の「テーママニュアル」の位置

1. CSS カスタマイズ

style.css にカスタムCSSを追加するだけで、サイトの見た目を変更できます。

/* ヘッダーの背景色を変更 */
.site-header {
    background: #2c3e50 !important;
}

/* リンクの色を変更 */
a {
    color: #e74c3c;
}

/* サイトタイトルのフォントサイズを変更 */
.site-title {
    font-size: 2.5em;
}

子テーマの style.css は親テーマの後に読み込まれるため、同じセレクタであれば子テーマの指定が優先されます。

2. PHP カスタマイズ（functions.php）

functions.php にカスタム関数を追加します。子テーマの functions.php は親テーマを上書きするのではなく、両方が実行されます。

例1: カスタムJavaScriptを追加

function backbone_child_enqueue_scripts() {
    wp_enqueue_script(
        'backbone-child-custom-script',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        wp_get_theme()->get('Version'),
        true
    );
}
add_action('wp_enqueue_scripts', 'backbone_child_enqueue_scripts', 20);

例2: 新しいウィジェットエリアを追加

function backbone_child_widgets_init() {
    register_sidebar(array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom-widget-area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'backbone_child_widgets_init');

例3: カスタム投稿タイプを追加

function backbone_child_register_post_types() {
    register_post_type('portfolio', array(
        'labels' => array(
            'name'          => 'Portfolio',
            'singular_name' => 'Portfolio Item',
        ),
        'public'       => true,
        'has_archive'  => true,
        'show_in_rest' => true,
        'supports'     => array('title', 'editor', 'thumbnail', 'excerpt'),
    ));
}
add_action('init', 'backbone_child_register_post_types');

例4: 抜粋文の長さを変更

function backbone_child_excerpt_length($length) {
    return 30; // デフォルトは55文字
}
add_filter('excerpt_length', 'backbone_child_excerpt_length');

例5: カスタムフックを追加（テンプレートカスタマイズ用）

function backbone_child_custom_content() {
    echo '<div class="custom-content">カスタムコンテンツ</div>';
}
add_action('backbone_before_content', 'backbone_child_custom_content');

この例は子テーマで独自のアクションフックを定義するパターンです。テンプレートファイル（例: header.php）を子テーマにコピーし、表示したい位置に <?php do_action('backbone_before_content'); ?> を追記してください。

例6: 親テーマの関数を上書き（プラガブル関数パターン）

if (!function_exists('backbone_custom_function')) {
    function backbone_custom_function() {
        // カスタム実装
    }
}

この例は WordPress のプラガブル関数パターンの書き方を示しています。親テーマが function_exists() で囲んだ関数を提供している場合に、子テーマで同名の関数を先に定義することで上書きできます。実際に上書き可能な関数は親テーマのソースコードを確認してください。

例7: アイキャッチ画像のサイズを追加

function backbone_child_image_sizes() {
    add_image_size('custom-large', 1200, 630, true);
    add_image_size('custom-medium', 800, 600, false);
}
add_action('after_setup_theme', 'backbone_child_image_sizes');

これらの例はすべて functions.php にコメントとして記載されています。例1〜4、例7はコメントを外すだけで有効化できます。例5・例6はWordPressの一般的なカスタマイズパターンの記述例です。使用する場合は各例の補足説明を参照してください。

3. テンプレートファイルのカスタマイズ

親テーマのテンプレートファイルを子テーマにコピーして編集すると、子テーマ側のファイルが優先されます。

# 例: header.php をカスタマイズ
cp ../backbone-seo-llmo/header.php ./header.php
# header.php を編集

カスタマイズしたいファイルだけをコピーしてください。全ファイルをコピーする必要はありません。不要なファイルをコピーすると、親テーマの更新が反映されなくなります。

ファイル構成

backbone-seo-llmo-child/
├── style.css        # 必須: テーマ情報 + カスタムCSS
├── functions.php    # 推奨: カスタム関数
├── screenshot.png   # テーマプレビュー画像
├── readme.txt       # WordPress標準ドキュメント
├── README.md        # GitHub用ドキュメント
└── docs/            # このマニュアル
    ├── index.html
    ├── setup.html
    ├── customization.html
    └── troubleshooting.html