何故、多くの人がWordPress子テーマ作成を強く推奨するのか？

2018-01-05 2018-01-05

管理人

「WordPressテーマをカスタマイズするなら、子テーマを作ろう。」

こんな記事をよく見かけませんか？

この記事では「子テーマ？何それ???…」というあなたのために、

①子テーマとは何か？
②子テーマを推奨する理由
③子テーマ作成手順

上記3点をご説明します。

1 子テーマとは何か？
2 子テーマ作成を推奨する理由
3 子テーマ作成手順
4 WordPressのテーマディレクトリに子テーマのディレクトリを追加
5 style.cssを追加
6 functions.phpを追加
7 WordPress管理画面上で確認する
8 まとめ
9 あとがき

子テーマとは何か？

まずは用語から確認していきましょう。

CHECK！「親テーマ」：有料・無料問わず、あなたがインストールしたWordPressテーマのこと

CHECK！「子テーマ」：WordPressテーマのカスタマイズ内容を保存するために作る「親テーマの複製」のこと

子テーマ作成を推奨する理由

WordPressテーマはパソコンやスマートフォンなどと同じく、安全性確保や利便性向上などの目的で頻繁にアップデートを繰り返しています。
そのアップデート内容は、全て「親テーマ」に適用されるのです。

アップデートされた親テーマは、全ての値が初期化されます。

つまり、カスタマイズした箇所が初期設定に戻ってしまうのです。

例えば、あなたが使っているWordPressテーマの見出しを自分好みにカスタマイズしたとしましょう。
親テーマをカスタマイズした場合、アップデートすると変更内容が元に戻ってしまいます。
アップデートのたびに変更するのは、正直面倒臭いですよね。

それでは、子テーマを作成してカスタマイズは全て子テーマに記述するようにしておけばどうなるでしょうか？

アップデートは子テーマに適用されません。

ですので、カスタマイズした内容が消えることはありません。

つまり、自分好みのカスタマイズ内容を保持したまま、最も安全で、最も利便性が高いテーマを使うことが出来るのです。

これが子テーマ作成を推奨する人が多い理由となります。

子テーマ作成手順

子テーマ作成の説明に入る前に、お使いのWordPressテーマに子テーマが準備されていないかを確認しましょう。

例えば、無料テーマ「Simplicity2」の場合、公式サイトに子テーマが準備されています。
このような場合は、メーカー（開発者）が作成済みの子テーマを使いましょう。

【あらかじめ子テーマが準備されている場合の作業手順】

①子テーマをダウンロード

②ダウンロードした子テーマをWordPress管理画面またはFTPソフトを使ってアップロード

③最後に管理画面上から子テーマを選び、有効化すればOK

残念ながら子テーマが準備されていない場合には、自分で作成する必要があります。

ここでは、WordPress公式テーマ「Twenty Seventeen」を使った子テーマ作成手順を説明します。

手順は以下の通りです。

【子テーマ追加手順】

①WordPressのテーマディレクトリに子テーマのディレクトリを追加

②style.cssを追加

③functions.phpを追加

なお、子テーマ作業手順について何点か補足しておきます。

　【子テーマ作成時の注意点】

注1：子テーマを自作する場合には、サーバー上での作業となります。

必要に応じ、FTPソフトを準備して下さい。

注2：本作業はエックスサーバーを使って行っています。

エックスサーバー以外のレンタルサーバーをお使いの場合、必ずしもこの手順通りにはなりません。

必ずあなた自身が使っているサーバー環境を確認するようにして下さい。

注3：親テーマはあらかじめバックアップを取っておいて下さい。
万一トラブルが発生しても、バックアップさえあればすぐに元の状態に戻せるからです。

それでは、早速作業を説明していきます。

WordPressのテーマディレクトリに子テーマのディレクトリを追加

最初の作業は子テーマのディレクトリ作成です。
Windowsパソコン風に言えば、WordPressのテーマがインストールされているフォルダに、子テーマのフォルダを作成する作業になります。

エックスサーバーの場合はFTPソフトを使わなくても、管理画面の「ファイルマネージャ」から直接ディレクトリやファイルの追加が行えます。

【ディレクトリ追加手順】

①エックスサーバーのインフォパネルにログイン
②インフォパネル下部の「ファイルマネージャ」ボタンをクリック

③対象ドメインの一覧が表示されるので、子テーマを作成したいドメインをクリック

④以降、public_htmlをクリック⇒wp-contentをクリック⇒themesをクリック…と進む

※「themes」というディレクトリにWordPressテーマが格納されています

⑤画面下部に[作成]という項目があるので、「フォルダ名」という欄に、任意のディレクトリ名を入力
※名前はお好きなもので結構ですが、あとあと管理しやすいように分かり易い名前をつけることをお勧めします。

⑥名前入力後、「フォルダ作成」ボタンをクリック

これで子テーマのディレクトリを追加出来ました。

style.cssを追加

この作業も、まずはエックスサーバーのファイルマネージャ上で作業を行います。

【style.css追加手順】

①子テーマのディレクトリをクリック
②画面下部の[作成]という項目（先ほどディレクトリ追加した箇所と同じ）で、ファイル作成ボタンの上の欄に「style.css」と入力

③「ファイル作成」ボタンの下にある「ファイル名の文字コード」という項目の文字コードを「UTF-8」に変更
④「ファイル作成」ボタンをクリック

これで、子テーマのディレクトリにstyle.cssを作成出来ました。

次に、作成したstyle.cssを開き、編集します。
エックスサーバーの場合、ファイル名をクリックするとクリックしたファイルがダウンロードされる仕様になっているので、クリックでは編集出来ません。

ですので、編集する場合は編集したいファイル名の左側にチェックを入れ、編集をクリックすればOKです。

style.cssを開き、以下のコードを追記します。

【style.cssに追記するコード】

/*
Theme Name: 2017child
Template: twentyseventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/

Description: Twenty Seventeen の子テーマ
Author: サイト管理者（あなた）の名前
Author URI: あなたのサイトURL
*/

これでstyle.cssの追加は完了です。

functions.phpを追加

さぁ、最後の作業を行っていきましょう。

先述のstyle.cssと同様に、子テーマのディレクトリにfunctions.phpを追加します。

functions.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' ); wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')); } ?-->

これでfunctions.phpの追加も完了です。