THE THOR(ザ・トール)を子テーマを使ってカスタマイズする方法!

WordPressの有料テーマには子テーマが付属されているのがほとんどでしょう。

もちろん、THE THOR(ザ・トール)にも子テーマは付属されているので、購入した人は子テーマを有効化していると思います。

でも中には、

「子テーマって何?」

ってことで、親テーマを有効化してサイト運営している人もいるでしょう。

なので今回は初心者にも分かりやすく、子テーマとは何かという事から利用方法について説明します。

子テーマとは?

子テーマとは?

まず「子テーマ」とは?という話しから行きましょう。

分かっている人は読み飛ばしてくださいね。

 

「子テーマ」を理解するにはまずWordPressのテーマというものを理解しなければいけません。

もともとWordPress本体には、コンテンツや設定などのデータしか入っていません。

画像や記事のテキスト、記事のカテゴリやタグなどがデータとして保存されています。

その保存されたデータだけではパソコン画面に表示させることはできません。
※厳密に言えば表示させることはできるでしょうが、素人が見ても判読不能だと思います。

WordPressに保存されているデータを、パソコン画面のどこに・どのようにして表示させるか指定する役割を持つのが「テーマ」なのです。

そして「子テーマ」の役割は、テーマが持っている役割に追加や修正を加えるための「テーマを補助するテーマ」なのです。

流れとしては、

WordPressに保存されたデータ

親テーマでデータの表示方法を指定

子テーマでデータの表示方法を指定

パソコン画面に表示

このような感じで、最終的にパソコン画面に表示させる情報は「子テーマ」を優先するようになっています。

 

最初、「子テーマ」本体には少しの情報しか入っていません。

その少しの情報の1つが、「親テーマの情報を読み取る」というものです。

なので、親テーマをインストールしている状態で「子テーマ」を有効化しても、ちゃんと親テーマの情報を読み込んで、パソコン画面に表示させることができます。

ここで1つ例を出しましょう。

記事の文字を「大きさは11pt」「色は黒」「フォントはゴシック体」
と指定されていたとしましょう。
「親テーマの情報を読み取る」
これだと、パソコン画面に表示される記事の文字は、
「大きさは11pt」「色は黒」「フォントはゴシック体」
となり、親テーマの指定で表示されます。
次に子テーマに一部指定を追記します。
「親テーマの情報を読み取る」
「文字の大きさを14pt」
と文字サイズだけを子テーマで指定すると、
「大きさは14pt」「色は黒」「フォントはゴシック体」
子テーマで指定された文字のサイズだけが変更になり、書かれていない「色」と「フォント」は親テーマの指定のまま表示されます。

子テーマでカスタマイズする理由

子テーマを使う理由

WordPressのブログをカスタマイズするのに子テーマを使う大きな理由としては、親テーマでカスタマイズするとテーマのバージョンアップの際にバージョンアップデータが上書きされてカスタマイズ内容が消えてしまうことでしょう。

そうすると、せっかくカスタマイズしてもテーマのバージョンアップのたびにカスタマイズし直さなければいけないのは、とても面倒ですよね。

かと言って、セキュリティや利便性の面から親テーマを更新しないわけにはいきません。

そこで親テーマとは別にテーマを用意して、そこでカスタマイズすることで親テーマがバージョンアップしても上書きされずにカスタマイズ内容を残すようにします。

その別テーマが子テーマということです。

最近の有料テーマは子テーマが付属としてデフォルトで付いてきていますので便利ですよね。

子テーマでカスタマイズするメリットは、テーマを最新の状態に保ちながら、カスタマイズの保持も可能という点でしょう。

ただ1点、注意しなければならないのは、style.css以外のheader.phpなどテーマの根幹に関わる箇所でのカスタマイズを子テーマで行った場合、テーマのバージョンアップの際にカスタマイズしたファイルが変更されていないか確認しないといけません。

もしカスタマイズしたファイルが更新内容に入っていた時は、バージョンアップする前にカスタマイズした内容を保存しておいてからバージョンアップを行って、再度カスタマイズを行うようにしましょう。

THE THOR(ザ・トール)の子テーマを有効化

THE THOR(ザ・トール)の子テーマの有効化する方法は親テーマの時を同じ要領で行ってください。

WordPressダッシュボード「外観」⇒「テーマ」を開きます。

ダッシュボード外観からテーマをクリック

画面上部の【新規追加】をクリックします。

新規追加をクリックします

画面上部の【テーマのアップロード】をクリックします。

テーマのアップロードをクリックします

子テーマが保存されている場所から「the-thor-child」を選択します。

ZIPファイルは解凍しないでそのままアップロードしてくださいね。

子テーマファイルを選択してアップロードします

「the-thor-child.zip」を選択したら、「今すぐインストール」をクリックします。

今すぐインストールをクリックします

「有効化」の文字が出てきたら、これをクリックして完了です。

有効化をクリック

子テーマでカスタマイズする方法とは?

カスタマイズ方法

子テーマが有効化できたら、次はカスタマイズの方法を説明しましょう。

通常の子テーマにはあらかじめ、「functions.php」と「style.css」の2つのファイルが入っており、cssをカスタマイズするにはこの「style.css」ファイルに追記してカスタマイズします。

しかしTHE THOR(ザ・トール)の子テーマには、デフォルトの2つのファイルの他にユーザーがカスタマイズする用のファイル「style-user.css」が用意されているので、こちらのファイルを編集しましょう。

では最初にCSSをカスタマイズする手順を説明します。

子テーマでCSSをカスタマイズする手順

追加CSSでスタイルを決めよう

CSSに慣れていてカスタマイズするコードが決まっているなら、「style-user.css」に直接書き込んでも良いのですが、スタイルを確かめながらコードを書くのならまず「追加CSS」で変更内容を確認しながらカスタマイズしていきましょう。

ダッシュボード「外観」⇒「カスタマイズ」の「追加CSS」をクリックします。

追加CSSをクリック

CSSエディタの使い方について説明されていますが、とりあえず邪魔なので閉じるボタンをクリックします。

閉じるボタンをクリックします。

ではCSSコードを入力していきます。

試しに記事内の文字を装飾していきましょう。

カスタマイザーの右側にプレビュー画面があるので、適当な記事を開きます。

適当な記事を開きます

CSSのコードに関しては、ここでは語り切れないので、詳しく知りたい人はGoogleなどで「CSS コード」で検索すると詳しく書いてあるサイトがあるので勉強してみてください。

まずは文字の大きさを変化が分かりやすいように30pxに変更してみましょう。

コードは、

p
{
font-size: 30px
}
変更前
カスタマイズ前
文字サイズ30px
文字サイズ30px
分かりやすく大きくなりましたね。
次はこれに色も変えてみましょう。
文字色を赤色(#ff0000)に背景色を白色(#ffffff)にします。
背景色を入れるのは、ユーザーの環境によって文字が見えにくくなるのを防ぐためです。
p
{
font-size: 30px;
color: #ff0000;
background-color: #ffffff;

}
変更前
文字サイズ30px
文字色赤に変更
文字を赤色に変更
この様にして、レビューを見ながらスタイルを決めていきましょう。
スタイルが決まって「公開」ボタンをクリックすれば実際のサイトに適用されるのですが、ここは「公開」ボタンを押さずにコードをすべてコピーして「style-user.css」に追記しましょう。

style-user.cssにコードを追記しよう

追加CSSで記述したコードをWindowsのメモ帳や他のテキストエディタでメモしておきます。

カスタマイザーの公開ボタンを押さずにWordPressのダッシュボードに戻りましょう。

「このページを離れると、加えられた編集は破棄されます。」と出ますが、無視して「OK」ボタンをクリックします。

次にダッシュボード「外観」⇒「テーマエディター」をクリックします。

テーマエディターをクリックします

右上の「編集するテーマを選択」から「THE THOR CHILD」を選んで「選択」ボタンをクリックします。

編集するテーマを選択

子テーマに入っているファイルの一覧が出るので、「style-user.css」をクリックします。

ちなみに、この画像には「header.php」ファイルが見えますが、デフォルト子テーマには入っていません。

別のファイルを子テーマに入れる方法は後ほど説明しますね。

style-user.cssをクリックします

デフォルトでは何も書かれていないので、1行目から先ほどコピーしたコードを張り付けて、下部にある「ファイルを更新」ボタンをクリックして完了です。

コードを張り付けてファイルを更新

他のPHPファイルを子テーマに移す方法

THE THOR(ザ・トール)ではあまり必要ない作業ですが、他のPHPファイルをカスタマイズする時に子テーマにファイルを移す方法を説明します。

試しに親テーマにある「header.php」を子テーマに移してみましょう。

この作業をするにはファイル転送ソフト(FTPソフト)が必要になります。

レンタルサーバーによっては専用のFTPソフトやファイル転送機能があるので、そちらを使う場合はそれぞれのレンタルサーバーで確認してください。

今回は私が使っている無料のFTPソフト【FileZilla(ファイルジラ)】を使って説明しますね。

【FileZilla(ファイルジラ)】の使い方については下のサイトで書いているので参考にしてください。

TAKE-PRESS

無料のFTPソフト【FileZilla(ファイルジラ)】のダウンロードから設定・使い方まで丁寧に解説!無料ソフトとは思え…

【FileZilla(ファイルジラ)】を起動して「ファイル」⇒「サイトマネージャー」からレンタルサーバーを選択して接続します。

FTP画面

右上の画面からドメイン名を選択するとドメイン名の左側に「+」マークが出るので、これをクリックします。

するとドメイン名の下側に下層階層が表示されるので、「public_html」というフォルダがあるはずなので、これをクリックするとまたそのフォルダの左側に「+」マークが出るのでこれもクリックします。

またそのフォルダの下の階層に「wp-content」というフォルダがあるのでこれもクリックして下層階層を表示させます。

その下層階層に「themes」というフォルダがあるので、これもクリックするとインストールされているテーマのフォルダが表示されるので、「the-thor」のフォルダを探してクリックします。

右上の画面で「the-thor」のフォルダをクリックすると、次はその下の画面を見て、「header.php」ファイルを探します。

見つけたら、左側でファイルを保存する場所を開きます。

FTPファイルを保存

左側の画面で保存先を指定したら、右下の画面の目当てのファイルにカーソルを重ねて右クリックします。

メニューの「ダウンロード」をクリックするとファイルのダウンロードが開始されます。

右クリックしてダウンロード

ダウンロードが完了したら、このファイルを子テーマにアップロードします。

右上の画面から「the-thor-child」を探してクリックします。

「the-thor-child」をクリックした状態で、先程ダウンロードしたファイルを左側から選択して右クリックします。

右クリックのメニューから「アップロード」を選択するとファイルのアップロードが開始され、子テーマにファイルがアップロードされて完了です。

ファイルをアップロード

ダッシュボード「外観」⇒「テーマエディター」でファイルがあることを確認してくださいね。

PHPファイルは、テーマの根幹を形成するファイルなので、カスタマイズは慎重に行ってください。
酷いようですが、これは完全に自己責任でお願いします。

まとめ

まとめ

いかがでしたか?

今回はWordPressテーマ「THE THOR(ザ・トール)」での子テーマの使い方について説明しました。

カスタマイズ全般に言えることですが、カスタマイズする前は必ずバックアップをするようにしてくださいね。

メルマガ登録バナー1

最新情報をチェックしよう!

上級編【購入者限定】の最新記事4件