WordPressの有料テーマには子テーマが付属されているのがほとんどでしょう。
もちろん、THE THOR（ザ・トール）にも子テーマは付属されているので、購入した人は子テーマを有効化していると思います。
でも中には、
「子テーマって何？」
ってことで、親テーマを有効化してサイト運営している人もいるでしょう。
なので今回は初心者にも分かりやすく、子テーマとは何かという事から利用方法について説明します。
子テーマとは？
まず「子テーマ」とは？という話しから行きましょう。
分かっている人は読み飛ばしてくださいね。
「子テーマ」を理解するにはまずWordPressのテーマというものを理解しなければいけません。
もともとWordPress本体には、コンテンツや設定などのデータしか入っていません。
画像や記事のテキスト、記事のカテゴリやタグなどがデータとして保存されています。
その保存されたデータだけではパソコン画面に表示させることはできません。
※厳密に言えば表示させることはできるでしょうが、素人が見ても判読不能だと思います。
WordPressに保存されているデータを、パソコン画面のどこに・どのようにして表示させるか指定する役割を持つのが「テーマ」なのです。
そして「子テーマ」の役割は、テーマが持っている役割に追加や修正を加えるための「テーマを補助するテーマ」なのです。
流れとしては、
⇓
親テーマでデータの表示方法を指定
⇓
子テーマでデータの表示方法を指定
⇓
パソコン画面に表示
このような感じで、最終的にパソコン画面に表示させる情報は「子テーマ」を優先するようになっています。
最初、「子テーマ」本体には少しの情報しか入っていません。
その少しの情報の１つが、「親テーマの情報を読み取る」というものです。
なので、親テーマをインストールしている状態で「子テーマ」を有効化しても、ちゃんと親テーマの情報を読み込んで、パソコン画面に表示させることができます。
ここで１つ例を出しましょう。
「文字の大きさを14pt」
子テーマでカスタマイズする理由
WordPressのブログをカスタマイズするのに子テーマを使う大きな理由としては、親テーマでカスタマイズするとテーマのバージョンアップの際にバージョンアップデータが上書きされてカスタマイズ内容が消えてしまうことでしょう。
そうすると、せっかくカスタマイズしてもテーマのバージョンアップのたびにカスタマイズし直さなければいけないのは、とても面倒ですよね。
かと言って、セキュリティや利便性の面から親テーマを更新しないわけにはいきません。
そこで親テーマとは別にテーマを用意して、そこでカスタマイズすることで親テーマがバージョンアップしても上書きされずにカスタマイズ内容を残すようにします。
その別テーマが子テーマということです。
最近の有料テーマは子テーマが付属としてデフォルトで付いてきていますので便利ですよね。
子テーマでカスタマイズするメリットは、テーマを最新の状態に保ちながら、カスタマイズの保持も可能という点でしょう。
ただ１点、注意しなければならないのは、style.css以外のheader.phpなどテーマの根幹に関わる箇所でのカスタマイズを子テーマで行った場合、テーマのバージョンアップの際にカスタマイズしたファイルが変更されていないか確認しないといけません。
もしカスタマイズしたファイルが更新内容に入っていた時は、バージョンアップする前にカスタマイズした内容を保存しておいてからバージョンアップを行って、再度カスタマイズを行うようにしましょう。
THE THOR（ザ・トール）の子テーマを有効化
THE THOR（ザ・トール）の子テーマの有効化する方法は親テーマの時を同じ要領で行ってください。
WordPressダッシュボード「外観」⇒「テーマ」を開きます。
画面上部の【新規追加】をクリックします。
画面上部の【テーマのアップロード】をクリックします。
子テーマが保存されている場所から「the-thor-child」を選択します。
ZIPファイルは解凍しないでそのままアップロードしてくださいね。
「the-thor-child.zip」を選択したら、「今すぐインストール」をクリックします。
「有効化」の文字が出てきたら、これをクリックして完了です。
子テーマでカスタマイズする方法とは？
子テーマが有効化できたら、次はカスタマイズの方法を説明しましょう。
通常の子テーマにはあらかじめ、「functions.php」と「style.css」の２つのファイルが入っており、cssをカスタマイズするにはこの「style.css」ファイルに追記してカスタマイズします。
しかしTHE THOR（ザ・トール）の子テーマには、デフォルトの２つのファイルの他にユーザーがカスタマイズする用のファイル「style-user.css」が用意されているので、こちらのファイルを編集しましょう。
では最初にCSSをカスタマイズする手順を説明します。
子テーマでCSSをカスタマイズする手順
追加CSSでスタイルを決めよう
CSSに慣れていてカスタマイズするコードが決まっているなら、「style-user.css」に直接書き込んでも良いのですが、スタイルを確かめながらコードを書くのならまず「追加CSS」で変更内容を確認しながらカスタマイズしていきましょう。
ダッシュボード「外観」⇒「カスタマイズ」の「追加CSS」をクリックします。
CSSエディタの使い方について説明されていますが、とりあえず邪魔なので閉じるボタンをクリックします。
ではCSSコードを入力していきます。
試しに記事内の文字を装飾していきましょう。
カスタマイザーの右側にプレビュー画面があるので、適当な記事を開きます。
CSSのコードに関しては、ここでは語り切れないので、詳しく知りたい人はGoogleなどで「CSS コード」で検索すると詳しく書いてあるサイトがあるので勉強してみてください。
まずは文字の大きさを変化が分かりやすいように30pxに変更してみましょう。
コードは、
{
font-size: 30px
}
{
font-size: 30px;
color: #ff0000;
background-color: #ffffff;
}
style-user.cssにコードを追記しよう
追加CSSで記述したコードをWindowsのメモ帳や他のテキストエディタでメモしておきます。
カスタマイザーの公開ボタンを押さずにWordPressのダッシュボードに戻りましょう。
「このページを離れると、加えられた編集は破棄されます。」と出ますが、無視して「OK」ボタンをクリックします。
次にダッシュボード「外観」⇒「テーマエディター」をクリックします。
右上の「編集するテーマを選択」から「THE THOR CHILD」を選んで「選択」ボタンをクリックします。
子テーマに入っているファイルの一覧が出るので、「style-user.css」をクリックします。
ちなみに、この画像には「header.php」ファイルが見えますが、デフォルト子テーマには入っていません。
別のファイルを子テーマに入れる方法は後ほど説明しますね。
デフォルトでは何も書かれていないので、１行目から先ほどコピーしたコードを張り付けて、下部にある「ファイルを更新」ボタンをクリックして完了です。
他のPHPファイルを子テーマに移す方法
THE THOR（ザ・トール）ではあまり必要ない作業ですが、他のPHPファイルをカスタマイズする時に子テーマにファイルを移す方法を説明します。
試しに親テーマにある「header.php」を子テーマに移してみましょう。
この作業をするにはファイル転送ソフト（FTPソフト）が必要になります。
レンタルサーバーによっては専用のFTPソフトやファイル転送機能があるので、そちらを使う場合はそれぞれのレンタルサーバーで確認してください。
今回は私が使っている無料のFTPソフト【FileZilla（ファイルジラ）】を使って説明しますね。
【FileZilla（ファイルジラ）】の使い方については下のサイトで書いているので参考にしてください。
【FileZilla（ファイルジラ）】を起動して「ファイル」⇒「サイトマネージャー」からレンタルサーバーを選択して接続します。
右上の画面からドメイン名を選択するとドメイン名の左側に「+」マークが出るので、これをクリックします。
するとドメイン名の下側に下層階層が表示されるので、「public_html」というフォルダがあるはずなので、これをクリックするとまたそのフォルダの左側に「+」マークが出るのでこれもクリックします。
またそのフォルダの下の階層に「wp-content」というフォルダがあるのでこれもクリックして下層階層を表示させます。
その下層階層に「themes」というフォルダがあるので、これもクリックするとインストールされているテーマのフォルダが表示されるので、「the-thor」のフォルダを探してクリックします。
右上の画面で「the-thor」のフォルダをクリックすると、次はその下の画面を見て、「header.php」ファイルを探します。
見つけたら、左側でファイルを保存する場所を開きます。
左側の画面で保存先を指定したら、右下の画面の目当てのファイルにカーソルを重ねて右クリックします。
メニューの「ダウンロード」をクリックするとファイルのダウンロードが開始されます。
ダウンロードが完了したら、このファイルを子テーマにアップロードします。
右上の画面から「the-thor-child」を探してクリックします。
「the-thor-child」をクリックした状態で、先程ダウンロードしたファイルを左側から選択して右クリックします。
右クリックのメニューから「アップロード」を選択するとファイルのアップロードが開始され、子テーマにファイルがアップロードされて完了です。
ダッシュボード「外観」⇒「テーマエディター」でファイルがあることを確認してくださいね。
酷いようですが、これは完全に自己責任でお願いします。
まとめ
いかがでしたか？
今回はWordPressテーマ「THE THOR（ザ・トール）」での子テーマの使い方について説明しました。
カスタマイズ全般に言えることですが、カスタマイズする前は必ずバックアップをするようにしてくださいね。