オリジナルテーマは、デザインや操作方法を自由に設定することができますが既存のテーマを使用している場合は、デザインや操作方法が制限されます。 使用しているテーマによっては、細かな部分でカスタマイズをしたくなることがあります。 本ページは、WordPress のテーマのカスタマイズ方法やカスタマイズの手段のひとつである子テーマの作成方法について説明します。
テーマのカスタマイズ方法は、複数ありますので以下の順でカスタマイズ可否を確認してください。
WordPress のテーマは、テーマによってカスタマイズできる範囲が大きく異なります。また、細かなカスタマイズをする場合は、有償テーマの購入が必要となる場合もあります。 テーマが提供するカスタマイズ機能のついては、テーマの提供サイトおよびテーマのカスタマイズ解説サイトなどを参照してください。
テーマが提供するカスタマイズ機能は、カスタマイズ画面（外観 → カスタマイズ）で実施しますが、テーマによっては個別のカスタマイズ画面が用意されている場合がありますので確認してください。
WordPress には、標準で持っていない機能を拡張するためのプラグイン機能が用意されており多くの開発者がプラグインを開発して提供しています。 カスタマイズを考えた場合に誰かがプラグインとして提供してくれているかもしれませんのでカスタマイズ内容に適用できるプラグインがないかを探してみましょう。
追加 CSS を利用したカスタマイズを行う場合は、テーマが出力する HTML やテーマが提供する CSS を理解する必要があります。以下の手順で追加 CSS の作成および登録を行ってください。
WordPress のテーマは、ソースコードが提供されているので自由に修正することができますがテーマ自体のソースコードを修正してしまうとテーマのアップデートに対応できなくなります。 WordPress ではテーマの一部だけを修正する機能である子テーマ機能が提供されていますのでテーマのカスタマイズを行う場合は、子テーマの作成を行います。
子テーマ機能とは、親テーマ（カスタマイズを行う元のテーマを親テーマと呼びます）で修正が必要なファイルだけを取り出して修正を行い、それ以外のファイルは親テーマのファイルを使用するという機能です。 子テーマを使用する場合は、親テーマと子テーマの両方をインストールしておき子テーマを有効化して使用します。子テーマのテーマ情報には、親テーマのテーマ名が記載されていますので、子テーマ内に無いファイルは自動的に親テーマが参照されます。 子テーマを使用してカスタマイズする手順を下記に記述します。
なんらかの理由で子テーマでの対応ができない場合には、テーマ自体のソースコードを修正することになります。 保守性の面で推奨はできませんがソースコードを直接修正する場合は、以下の方法があります。
子テーマの作成手順例を示します。 ここでの作成例は、子テーマ作成の基本事項を理解するための最小手順を示しています。
子テーマ作成の練習を行う場合は、下記のリンク先から子テーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
子テーマ作成で使用するのは、images フォルダと screenshot.png ファイルです。
fukasawa.2.1.3.zip ファイルは、親テーマのテーマファイルです。
fukasawa-child フォルダと fukasawa-child.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
📁 wp-child-sample // ダウンロードファイルの解凍フォルダ
├─📁 fukasawa-child // 子テーマファイルの完成版
│ ├─📁 images // 画像サブフォルダ
│ │ └─yamada.png // 山田太郎の似顔絵ファイル
│ ├─ functions.php // テーマ機能ファイル
│ ├─ header.php // ページ共通ヘッダーテンプレートファイル
│ ├─ screenshot.png // サムネイル画像ファイル
│ └─ style.css // テーマ情報ファイル
├─📁 images // 画像ファイル格納フォルダ
│ └─ yamada.png // 山田太郎の似顔絵ファイル
├─ fukasawa.2.1.3.zip // 親テーマのダウンロードファイル
├─ fukasawa-child.zip // 子テーマファイル
└─ screenshot.png // サムネイル画像ファイル
子テーマ作成の手順は、次の通りです。
親テーマの提供サイトからテーマファイルをダウンロードします。テーマファイルは、zip 型式で圧縮されていますので展開します。 ここの子テーマ作成例では、ポートフォリオ用のテーマである fukasawa を使用させて頂きます。
【謝辞】
WordPress のテーマである fukasawa は、シンプルなテーマで使いやすくコードも読みやいため色々と参考にさせて頂いています。
今回は、子テーマ作成の例で使用させて頂きました。
このようなテーマを提供して頂いている作者に感謝すると同時に、この場を借りてお礼申し上げます。
テーマファイル内のテンプレートファイルやスタイルシートを解析してカスタマイズする部分を特定します。 今回のカスタマイズ例では、fukasawqa の特徴的な表示である、左上のサイト名を画像に変更します。
（注：fukasawa には、この部分にイメージを設定する機能が用意されていますが、ここでは、子テーマを使用して実現します）
テーマ用のサムネール画像を作成します。
子テーマ用のフォルダ（fukasawa-child）を作成し必要ファイルをコピーします。
📁 fukasawa-child // 子テーマフォルダ
├─📁 images // 画像サブフォルダ
│ └─ yamada.png // 山田太郎の似顔絵ファイル
└─ screenshot.png // サムネイル画像ファイル
テーマ情報ファイル（style.css）を作成します。子テーマを作成する場合は、親テーマの名称を指定する Template 行を追加する必要があります。必要に応じてテーマ情報の下に CSS を記述することも可能です。
CSS（sytyle.css）
/*
Theme Name: fukasawa-child
Description: Fukasawa の子テーマでロゴがイラスト表示になります。
Author: 情報デザイン工房 濱屋
Version: 1.1.0
Template: fukasawa
*/
/* 以下は CSS のサンプル */
body {
background: pink; // ★ 背景をピンク色に設定
}
テーマの機能（functions.php）を作成します。 下記の記述を行うことで親テーマの style.css を読み込み後に子テーマの style.css の読み込みが行われます。
PHP（functions.php）
<?php
// ★ スタイルシートの組み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// ★ 生成するページにスタイルシート定義を追加
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
変更を行うテンプレートファイルを親テーマから取得して必要部分を修正します。 今回のカスタマイズでは、テーマ共通ヘッダーテンプレート（header.php）を修正します。
PHP（header.php）
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
if ( function_exists( 'wp_body_open' ) ) {
wp_body_open();
}
?>
<a class="skip-link button" href="#site-content"><?php _e( 'Skip to the content', 'fukasawa' ); ?></a>
<div class="mobile-navigation">
<ul class="mobile-menu">
<?php
if ( has_nav_menu( 'primary' ) ) {
$primary_nav = wp_nav_menu( array(
'container' => '',
'echo' => false,
'items_wrap' => '%3$s',
'theme_location' => 'primary'
) );
echo $primary_nav;
} else {
$pages_list = wp_list_pages( array(
'container' => '',
'echo' => false,
'title_li' => ''
) );
echo $pages_list;
}
?>
</ul>
</div><!-- .mobile-navigation -->
<div class="sidebar">
<?php
// Use a h1 element on the front page and/or the index of the blog, and a div elsewhere
if ( is_front_page() || is_home() ) {
$blog_title_elem = 'h1';
} else {
$blog_title_elem = 'div';
}
$custom_logo_id = get_theme_mod( 'custom_logo' );
$legacy_logo_url = get_theme_mod( 'fukasawa_logo' );
if ( $custom_logo_id || $legacy_logo_url ) :
$custom_logo_url = $custom_logo_id ? wp_get_attachment_image_url( $custom_logo_id, 'full' ) : $legacy_logo_url;
?>
<<?php echo $blog_title_elem; ?> class="blog-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php echo esc_url( $custom_logo_url ); ?>" />
</a>
<span class="screen-reader-text"><?php echo get_bloginfo( 'title' ); ?></span>
</<?php echo $blog_title_elem; ?>>
<?php elseif ( get_bloginfo( 'description' ) || get_bloginfo( 'title' ) ) : ?>
<<?php echo $blog_title_elem; ?> class="blog-title">
<?php // ★ サイト情報を出力している部分を固定の画像を出力するように変更 ?>
<?php // ★ ファイルを指定する場合は、echo get_stylesheet_directory_uri() を使用して絶対パスになるように設定 ?>
<?php // ★ 通常のテーマでは、絶対パスにするために get_template_directory_uri() を使用しますが子テーマの場合は、get_stylesheet_directory_uri() を使用 ?>
<!-- <a href="<?php echo esc_url( home_url() ); ?>" rel="home"><?php echo get_bloginfo( 'title' ); ?></a> -->
<a href="<?php echo esc_url( home_url() ); ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/yamada.png" alt="山田太郎"></a>
</<?php echo $blog_title_elem; ?>>
<?php endif; ?>
<button type="button" class="nav-toggle">
<div class="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<p>
<span class="menu"><?php _e( 'Menu', 'fukasawa' ); ?></span>
<span class="close"><?php _e( 'Close', 'fukasawa' ); ?></span>
</p>
</button>
<ul class="main-menu">
<?php echo isset( $primary_nav ) ? $primary_nav : $pages_list; ?>
</ul><!-- .main-menu -->
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<div class="widgets">
<?php dynamic_sidebar( 'sidebar' ); ?>
</div><!-- .widgets -->
<?php endif; ?>
<div class="credits">
<p>© <?php echo date( 'Y' ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>.</p>
<p><?php _e( 'Powered by', 'fukasawa' ); ?> <a href="https://wordpress.org">WordPress</a>.</p>
<p><?php _e( 'Theme by', 'fukasawa' ); ?> <a href="https://andersnoren.se">Anders Norén</a>.</p>
</div><!-- .credits -->
</div><!-- .sidebar -->
<main class="wrapper" id="site-content">
作成したファイル群を使用して子テーマファイル（fukasawa-child.zip）を作成します。
📁 fukasawa-child.zip // テーマファイル（圧縮 zip ファイル）
└─📁 fukasawa-child // テーマフォルダ
├─📁 images // 画像サブフォルダ
│ └─ yamada.png // 山田太郎の似顔絵ファイル
├─ functions.php // テーマ機能ファイル
├─ header.php // ページ共通ヘッダーテンプレートファイル
├─ screenshot.png // サムネイル画像ファイル
└─ style.css // テーマ情報ファイル
WordPress のダッシュボードにログインして親テーマ（fukasawa）と作成した子テーマ（fukasawa-child.zip）のインストールします。 テーマの有効化は、子テーマ（fukasawa-child）を有効化します。
WordPress サイトを表示して表示内容を確認します。
