
こんな記事をよく見かけませんか?
この記事では「子テーマ?何それ???…」というあなたのために、
①子テーマとは何か?
②子テーマを推奨する理由
③子テーマ作成手順
上記3点をご説明します。
目次
子テーマとは何か?
まずは用語から確認していきましょう。
CHECK!「親テーマ」:有料・無料問わず、あなたがインストールしたWordPressテーマのこと
CHECK!「子テーマ」:WordPressテーマのカスタマイズ内容を保存するために作る「親テーマの複製」のこと
子テーマ作成を推奨する理由
WordPressテーマはパソコンやスマートフォンなどと同じく、安全性確保や利便性向上などの目的で頻繁にアップデートを繰り返しています。
そのアップデート内容は、全て「親テーマ」に適用されるのです。
アップデートされた親テーマは、全ての値が初期化されます。
つまり、カスタマイズした箇所が初期設定に戻ってしまうのです。
例えば、あなたが使っているWordPressテーマの見出しを自分好みにカスタマイズしたとしましょう。
親テーマをカスタマイズした場合、アップデートすると変更内容が元に戻ってしまいます。
アップデートのたびに変更するのは、正直面倒臭いですよね。
それでは、子テーマを作成してカスタマイズは全て子テーマに記述するようにしておけばどうなるでしょうか?
アップデートは子テーマに適用されません。
ですので、カスタマイズした内容が消えることはありません。
つまり、自分好みのカスタマイズ内容を保持したまま、最も安全で、最も利便性が高いテーマを使うことが出来るのです。
これが子テーマ作成を推奨する人が多い理由となります。
子テーマ作成手順
子テーマ作成の説明に入る前に、お使いのWordPressテーマに子テーマが準備されていないかを確認しましょう。
例えば、無料テーマ「Simplicity2」の場合、公式サイトに子テーマが準備されています。
このような場合は、メーカー(開発者)が作成済みの子テーマを使いましょう。
残念ながら子テーマが準備されていない場合には、自分で作成する必要があります。
ここでは、WordPress公式テーマ「Twenty Seventeen」を使った子テーマ作成手順を説明します。
手順は以下の通りです。
なお、子テーマ作業手順について何点か補足しておきます。
注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の追加も完了です。
WordPress管理画面上で確認する
WordPress管理画面に戻り、外観⇒テーマと進みます。
作成した子テーマが一覧にあることを確認します。
子テーマを有効化し、サイトを表示してみて下さい。
サイトが正常に表示されればOK。子テーマの作成は完了です。
今後WordPressテーマをカスタマイズする際には、子テーマに設置したファイルを編集していきます。
今回作成したファイル以外のファイルをカスタマイズする必要がある場合には、親テーマに格納されているファイルをコピーし、子テーマに貼り付け(新規追加)してあげればOKです。
まとめ
あとがき
WordPressを使い始めたばかりの頃は、とにかく分からないことだらけというのは誰もが通る道です。
しかも、いざネットで調べても皆言っていることが違っているなど…結構悩んでいませんか?
この記事は、私が初心者時代に経験・投稿した記事をもとに書き起こしたものです。
本記事執筆時点(2018年1月)でも必要と判断される個所に絞って説明したので、この記事の記載通りに子テーマを作成すれば、最低限機能するのは間違いありません。
POINT!◎子テーマを作成し、カスタマイズは子テーマで行う。
上記を徹底していれば、お気に入りのテーマに更新が掛かるたびに修正に追われる、、、
こうした無駄な作業から、あなたは解放されるのです。
初心者の方が最も力を入れなければならないのは、記事そのものをどんどん作っていくことです。
記事をどんどん書き、記事の量・質ともに向上していけば、ウェブサイトがあなたに収益をもたらしてくれるようになります。
ウェブサイトは私たちサイトオーナーの大切な財産です。
子テーマを作って、あなたのウェブサイトを大事に育ててあげて下さい。
それでは。