ここあです。
Googleアドセンスの審査用のコード（確認コード）を
STORK（ストーク）に設置する時、確認コードを
header.phpの中に追加しなければなりません。
ところが、STORKの場合は
子テーマのheader.phpにGoogleアドセンスの
確認コードを設置しようと思っても
header.php（テーマヘッダー）が子テーマの
編集画面にはありません…
困りますよね？＾＾；
「それなら仕方がない。」
「親テーマのheader.phpに確認コードを追加するか…」
と、親テーマのheader.phpに確認コードを設置し
万が一、その状態でSTORKの
テーマファイルをアップデートしてしまうと…
親テーマに設置したGoogleアドセンスの確認コードが
見事に消えるというトラブルが起こります。
そうなると、さらに困りますよね？＾＾；
ワードプレスはテンプレートによって異なりますが…
特に私が使っているSTORKのような
親テーマと子テーマを両方同時に使うことが
推奨されているテーマについては
何をするにしても
カスタマイズは子テーマの方ですることが
オフィシャルサイトでも推奨されています。
だから当然
Googleアドセンスの確認コードも取得できたら
子テーマのheader.phpに反映しておく方が安心ですよね？
ということで、今回は…
親テーマにしか存在しないheader.phpのファイルを
子テーマのファイルとして編集するための方法を
詳しく解説したいと思います。
親テーマと子テーマを使い分けるメリットとは？
まず最初に…
「なぜ親テーマと子テーマを使い分けなければならないのか？」
というところからご説明致しますね。
親テーマと子テーマを使い分けるメリットというのは…
子テーマを使うことで、ベースとなる
親テーマのテーマファイルをアップデートしても
子テーマでカスタマイズした設定は
全てそのまま残すことができる。
というのが、一番の大きなメリットになります。
次に、あなたにここで理解しておいて欲しいのは…
親テーマと子テーマの用途の違い。
- 親テーマ：ベースとなる基本のデザインや機能をもっているメインテーマ
- 子テーマ：細かいデザインなどをカスタマイズするためのサブテーマ
単純に考えると、親テーマと子テーマを使い分ける場合
デザインなどのカスタマイズは全て子テーマで行う
と考えると分かりやすいです。
Webデザインを勉強すれば分かりますが
Webサイトの構造について簡単にだけ説明すると…
WebサイトはHTMLファイルというテキストコードが
コンピュータに読み込まれることにより
表示されるという仕組みです。
さらに、ここ近年では…
- Webサイトのデザインを見やすくするため
- Webサイトの表示速度を早くするため
CSSというコードも使われるようになりました。
つまり、Webサイトは極端な話
- Webサイト全体を司るHTMLコード
- デザインを司るCSSコード
これら2つのファイルから構成されている
と考えると非常に分かりやすいです。
※もちろんそれ以外にJavaScript、phpファイルなど様々なデータが存在しますが、
ここではあえてシンプルな例えとしてお伝えしています＾＾；
図解で説明するとこうなります。
親テーマだけでワードプレスを運用している場合は
このようになっていると考えてください＾＾
Webサイトの便利なところは
HTMLコードに限らず全てのコードが
書かれた順番に読み込まれるという点です。
なので、子テーマを使用すると…
子テーマでカスタマイズされたCSSファイルが
親テーマのCSSファイルよりも
後から読み込まれるため
カスタマイズが子テーマで推奨される理由
というワケなんですね。
つまり、この原理を応用し
header.phpのファイルも同様に
子テーマにコピーしてカスタマイズしておくと…
親テーマのファイルをアップデートしても
上書きされるのはあくまでの親テーマに関わる
全てのファイルということになるので
子テーマでカスタマイズした
header.phpの設定ファイルは
そのまま消えずに残るというわけなんです。
なので、Googleアドセンスの確認コードも
子テーマのheader.phpに追加しておけば
親テーマのテーマファイルを
仮にアップデートしたとしても
消えて無くなるというリスクがなくなります＾＾
STORKはデフォルトの状態だと
子テーマにはheader.phpのファイルがなく
親テーマから直接header.phpのファイルを読み込んでいるため
以下のようになっているというわけなんです。
しかし、親テーマにあるheader.phpのファイルをコピーし
子テーマのheader.phpファイルとすることで
CSSファイル同様
子テーマのheader.phpをカスタムファイルとして
後から読み込ますことができるようになるんですね。
サイトの原理は何となくご理解いただけましたでしょうか？
子テーマに親テーマのファイルを反映する方法
それでは続いて、子テーマにheader.phpのファイルを
反映するための方法を順番に解説していきますね。
1）編集したいファイルを親テーマからダウンロードする
今回は、STORKの親テーマのファイルを
子テーマのファイルとして使用するために
FileZilla（ファイルジラ）というFTPソフトを使用します。
FTPソフトとは単純に…
あなたのパソコンとサーバーをつないで
データをやり取りするためのファイル転送ソフトです。
FileZillaは…
- アフィリエイター
- プログラマー
- プロのWe制作者
まで幅広く使われているFTPソフトの1つです。
しかも、無料で使えます＾＾
FileZillaのインストール方法と使い方に関しては
こちらの記事を参考にしてください。
FTPソフトFileZilla（ファイルジラ）のインストール方法と使い方
まずはあなたがお持ちのFTPソフトを使用し
あなたのドメインフォルダの中から
ご使用している親テーマのフォルダにアクセスしましょう。
わたしと同じSTORKを使用している場合は
public_html → wp_content → themes → jstorkの順番に
フォルダの階層を辿っていきます。
もしもディレクトリ（フォルダ）をクリックしすぎて
「戻りたい！」という場合は
「..（ドットが2つ）」表示されているフォルダを
クリックすることで1つ前の階層に戻ることができます。
※「 .. 」のフォルダは1つ前の階層に戻るためだけのフォルダです。
ちなみに親テーマのすぐ上にある
jstork_customというフォルダがSTORKの子テーマフォルダになります。
親テーマのフォルダが見つかったら
今度はそのフォルダの中から編集したいファイル
今回で言えば、header.phpのファイルを見つけ出して
ファイルを右クリックします。
そうすると、ダウンロードという項目が表示されるので
あなたのパソコンの任意の場所に
一旦ファイルをダウンロードします。
※ドラッグしてコピーしてもOKです。
ここまでは大丈夫でしょうか？
2）ファイルを子テーマのフォルダにアップロードする
必要なファイルを一旦親テーマのフォルダから
任意の場所にダウンロードできたら
先ほどと同様
サーバーの子テーマのフォルダにアクセスします。
STORKを使用している場合は…
public_html → wp_content → themes → jstork_customの順番に
フォルダの階層を辿っていきましょう。
※子テーマフォルダをダブルクリックし、子テーマフォルダの中が表示されている状態にしてください。
今度は逆に、先ほど親テーマから
ダウンロードしたheader.phpのファイルを
子テーマフォルダの中にアップロードします。
アップロードの方法はダウンロードと同様に
アップロードするファイルを右クリックして
アップロードの項目を選択するか
ファイルをドラッグしてコピーすれば
ファイルをアップロードすることができます。
これで、親テーマのファイルを
子テーマで編集するための準備が整いました。
3）テーマの編集画面でファイルが反映されているか確認する
続いて、そのまま親テーマから
子テーマにコピーしたheader.phpのファイルが
正しく表示されるかを確認します。
ダッシュボードメニューから
外観 → テーマの編集をクリックします。
テーマ編集画面を開き、
テーマ編集画面のテーマファイルの中に
テーマヘッダー（header.php）という項目が追加されていたらOKです。
あとはここにGoogleアドセンスの確認コードを貼ったり
自由にカスタマイズしても大丈夫です。
親テーマのファイルを子テーマで編集する方法まとめ
今回は、STORKで親テーマにしか存在しない
header.phpのファイルを子テーマに反映する方法を
ご説明致しました。
しかし、あなたのWebサイトをカスタマイズする場合
設定を触るファイルはこれだけではありません。
いずれにしても、あなたのWebサイトを
「カズタマイズしたい！」と思った時は…
こうして親テーマにしか存在しないファイルは
必ず子テーマにコピーして
子テーマの設定ファイルとして
カスタマイズするようにしてくださいね＾＾
先にもお伝えした通り
親テーマのファイルを直接カスタマイズしてしまうと
テンプレートの親テーマを更新した時に
設定ファイルの中身が全て上書きされて
あなたが時間をかけてカスタマイズした
渾身のデータが全てなくなるという
非常に悲しいドラマの結末が待っています…＾＾；
なので、子テーマが存在するWordPressのテーマファイルを
カスタマイズする場合は、必ず子テーマの設定ファイルで
カスタマイズするようにしてください。
逆に、親テーマしかないテンプレートでも
子テーマのファイルはあなた自身でも作ることができます。
もちろん、各テーマによって
子テーマの作り方が違いますので
あなたのテーマに合った子テーマを作る必要がありますが
子テーマがないからといって
テンプレートのカスタマイズを諦めず
あなた自身で、あなたが使用しているテンプレートの
子テーマを作る方法もぜひ調べてみてくださいね。
簡単にではありましたが…
親テーマにしかない設定ファイルを
子テーマで編集する方法は以上となります。
最後までお読みいただきありがとうございました！
