WPテーマ「STORK」カスタマイズ!親テーマにしかないファイルを子テーマで編集する方法!

WPテーマ「STORK」カスタマイズ!親テーマのファイルを子テーマで編集する方法!

 

ここあです。

 

Googleアドセンスの審査用のコード(確認コード)

STORK(ストーク)に設置する時、確認コードを

header.phpの中に追加しなければなりません。

Googleアドセンスの確認コードを貼る場所

 

 

ところが、STORKの場合は

子テーマのheader.phpにGoogleアドセンスの

確認コードを設置しようと思っても

 

header.php(テーマヘッダー)が子テーマの

編集画面にはありません…

困りますよね?^^;

 

子テーマに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ファイルなど様々なデータが存在しますが、
 ここではあえてシンプルな例えとしてお伝えしています^^;

 

図解で説明するとこうなります。

HTMLとCSSでWebサイトの図

 

親テーマだけでワードプレスを運用している場合は

このようになっていると考えてください^^

 

Webサイトの便利なところは

HTMLコードに限らず全てのコードが

書かれた順番に読み込まれるという点です。

 

なので、子テーマを使用すると…

CSSの仕組み

 

子テーマでカスタマイズされたCSSファイルが

親テーマのCSSファイルよりも

後から読み込まれるため

 

カスタマイズが子テーマで推奨される理由

というワケなんですね。

 

つまり、この原理を応用し

header.phpのファイルも同様に

子テーマにコピーしてカスタマイズしておくと…

 

親テーマのファイルをアップデートしても

上書きされるのはあくまでの親テーマに関わる

全てのファイルということになるので

 

子テーマでカスタマイズした

header.phpの設定ファイルは

そのまま消えずに残るというわけなんです。

 

なので、Googleアドセンスの確認コードも

子テーマのheader.phpに追加しておけば

 

親テーマのテーマファイルを

仮にアップデートしたとしても

消えて無くなるというリスクがなくなります^^

 

STORKはデフォルトの状態だと

子テーマにはheader.phpのファイルがなく

 

親テーマから直接header.phpのファイルを読み込んでいるため

以下のようになっているというわけなんです。

子テーマにheader.phpがない

 

 

しかし、親テーマにあるheader.phpのファイルをコピーし

子テーマのheader.phpファイルとすることで

 

CSSファイル同様

子テーマのheader.phpをカスタムファイルとして

後から読み込ますことができるようになるんですね。

子テーマのheader.phpを反映させる

 

サイトの原理は何となくご理解いただけましたでしょうか?

 

子テーマに親テーマのファイルを反映する方法

それでは続いて、子テーマにheader.phpのファイルを

反映するための方法を順番に解説していきますね。

 

1)編集したいファイルを親テーマからダウンロードする

今回は、STORKの親テーマのファイルを

子テーマのファイルとして使用するために

FileZilla(ファイルジラ)というFTPソフトを使用します。

 

FTPソフトとは単純に…

あなたのパソコンとサーバーをつないで

データをやり取りするためのファイル転送ソフトです。

 

FileZillaは…

  • アフィリエイター
  • プログラマー
  • プロのWe制作者

まで幅広く使われているFTPソフトの1つです。

しかも、無料で使えます^^

 

FileZillaのインストール方法と使い方に関しては

こちらの記事を参考にしてください。

FTPソフトFileZilla(ファイルジラ)のインストール方法と使い方

 

まずはあなたがお持ちのFTPソフトを使用し

あなたのドメインフォルダの中から

ご使用している親テーマのフォルダにアクセスしましょう。

 

わたしと同じSTORKを使用している場合は

public_html → wp_content → themes → jstorkの順番に

フォルダの階層を辿っていきます。

STORK親テーマフォルダにアクセス

 

 

もしもディレクトリ(フォルダ)をクリックしすぎて

「戻りたい!」という場合は

 

「..(ドットが2つ)」表示されているフォルダを

クリックすることで1つ前の階層に戻ることができます。

※「 .. 」のフォルダは1つ前の階層に戻るためだけのフォルダです。

1つ前の階層に戻る

 

 

ちなみに親テーマのすぐ上にある

jstork_customというフォルダがSTORKの子テーマフォルダになります。

ストーク子テーマフォルダにアクセス

 

 

親テーマのフォルダが見つかったら

今度はそのフォルダの中から編集したいファイル

 

今回で言えば、header.phpのファイルを見つけ出して

ファイルを右クリックします。

header.phpをダウンロード

 

 

そうすると、ダウンロードという項目が表示されるので

あなたのパソコンの任意の場所に

一旦ファイルをダウンロードします。
※ドラッグしてコピーしてもOKです。

子テーマのheader.phpを任意の場所にコピー

 

ここまでは大丈夫でしょうか?

 

2)ファイルを子テーマのフォルダにアップロードする

必要なファイルを一旦親テーマのフォルダから

任意の場所にダウンロードできたら

 

先ほどと同様

サーバーの子テーマのフォルダにアクセスします。

 

STORKを使用している場合は…

public_html → wp_content → themes → jstork_customの順番に

フォルダの階層を辿っていきましょう。

ストーク子テーマフォルダにアクセス

※子テーマフォルダをダブルクリックし、子テーマフォルダの中が表示されている状態にしてください

 

今度は逆に、先ほど親テーマから

ダウンロードしたheader.phpのファイルを

子テーマフォルダの中にアップロードします。

 

アップロードの方法はダウンロードと同様に

アップロードするファイルを右クリックして

アップロードの項目を選択するか

 

ファイルをドラッグしてコピーすれば

ファイルをアップロードすることができます。

子テーマのheader.phpをアップロード

 

 

これで、親テーマのファイルを

子テーマで編集するための準備が整いました。

 

3)テーマの編集画面でファイルが反映されているか確認する

続いて、そのまま親テーマから

子テーマにコピーしたheader.phpのファイルが

正しく表示されるかを確認します。

 

ダッシュボードメニューから

外観 → テーマの編集をクリックします。

テーマの編集でheader.phpの確認

 

 

テーマ編集画面を開き、

テーマ編集画面のテーマファイルの中に

テーマヘッダー(header.php)という項目が追加されていたらOKです。

 

あとはここにGoogleアドセンスの確認コードを貼ったり

自由にカスタマイズしても大丈夫です。

子テーマheader.php確認画面

 

 

親テーマのファイルを子テーマで編集する方法まとめ

今回は、STORKで親テーマにしか存在しない

header.phpのファイルを子テーマに反映する方法を

ご説明致しました。

 

しかし、あなたのWebサイトをカスタマイズする場合

設定を触るファイルはこれだけではありません。

 

いずれにしても、あなたのWebサイトを

「カズタマイズしたい!」と思った時は…

 

こうして親テーマにしか存在しないファイルは

必ず子テーマにコピーして

 

子テーマの設定ファイルとして

カスタマイズするようにしてくださいね^^

 

先にもお伝えした通り

親テーマのファイルを直接カスタマイズしてしまうと

 

テンプレートの親テーマを更新した時に

設定ファイルの中身が全て上書きされて

 

あなたが時間をかけてカスタマイズした

渾身のデータが全てなくなるという

非常に悲しいドラマの結末が待っています…^^;

 

なので、子テーマが存在するWordPressのテーマファイルを

カスタマイズする場合は、必ず子テーマの設定ファイルで

カスタマイズするようにしてください。

 

逆に、親テーマしかないテンプレートでも

子テーマのファイルはあなた自身でも作ることができます。

 

もちろん、各テーマによって

子テーマの作り方が違いますので

 

あなたのテーマに合った子テーマを作る必要がありますが

子テーマがないからといって

テンプレートのカスタマイズを諦めず

 

あなた自身で、あなたが使用しているテンプレートの

子テーマを作る方法もぜひ調べてみてくださいね。

 

簡単にではありましたが…

親テーマにしかない設定ファイルを

子テーマで編集する方法は以上となります。

 

最後までお読みいただきありがとうございました。

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!親テーマのファイルを子テーマで編集する方法!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。