子テーマ用phpファイルの複製方法と編集方法・WordPressカスタマイズ

header.phpのアップロード

子テーマに子テーマ用のphpファイルを作る

前回の記事「子テーマ作成方法・2015以降の推奨設定wp_enqueue_style解説他」では、プラグインで子テーマを作成しましたが、自動的に作成されたのはスタイルシートと、functions.phpでした。

カスタマイズは、テーマの変更を加えたい部分=カスタマイズしたい場所を含むphpファイルを子テーマ用にコピーしてそのコピーを編集することで行います。

例えば投稿ページに変更を加えたいのであれば、single.phpか、content.php、フッターに変更を加えたいのであれば、footer.phpのカスタマイズ用の複製を子テーマに作ります。

ここでは、TwentyTwelveのheader.phpをコピーして、子テーマ用のheader.phpを作り、編集する方法を解説していきますが、他のphpファイルも同様にコピーできます。

2014以前の子テーマの作成方法で子テーマを作成した場合で、functions.phpを子テーマに作成したい場合には別の記事「@import方式の子テーマ用functions.phpの作り方と注意点」を参考にして下さい。

header.phpについて

phpファイルについては、以前、「WordPress初心者のための最初の一歩「WordPress」の基礎知識」に書きましたが、

WordPressで作成されるサイトの1ページはheader.phpや、content.phpなどの複数のPHPがそれぞれのパートを受け持って生成されています。

header.phpはその名の通り、頭のパートのphpファイルで、様々な重要な情報を含むファイルです。

FTP経由でheader.phpファイルをダウンロードする方法

FFFTPなどのFTPソフトを使用して、親テーマから目的のphpファイルをダウンロードし、そのまま子テーマにアップロードする、最も一般的な方法です。

まず、FTPソフト経由で親テーマディレクトリから必要なphpファイルをダウンロードし、
親テーマからのダウンロード

それを子テーマディレクトリにアップします。
子テーマへのアップロード

途中でファイルを開いたりすることが無いので、文字化けエラーなどが起こり難く、

また、一度ローカルにダウンロードするので、誤って別のディレクトリにアップロードしてしまっても、再アップロードができ、

かつデフォルトのバックアップも取れる、最も安全な方法です。

テーマ編集画面からコピーする方法

この方法は自分が個人的に良く使う方法ですが、参考までに^^;

カスタマイズをするphpファイルの内容を確認しつつ、そのままコピーしたファイルをテキストファイルで編集したい場合に良く使う手です。

以下の例のように数行に渡ってコードを入れ替えるといったような場合にテーマ編集画面より行番号のあるTeraPadの方がわかりやすいことと、カスタマイズしたphpファイルのバックアップと編集履歴が同時に取れることが効率的なためです。

まず、左メニューの外観をポイント、サブメニューから、テーマ編集をクリックします。
テーマの編集

テーマの編集画面が表示されます。
テーマの編集

親テーマの、ここではTwentyTwelve、のテーマ画面を開きます。
テーマ画面右上のTwentyTwelveをクリックします。
テーマの編集

親テーマの、ここではTwentyTwelve、のテーマ編集画面が表示されますので、header.phpをクリックして画面上に開きます。
これを全てコピーします。
header.php

テキストエディタを開き、新規ファイルにペーストします。
画像はTeraPadです。
TeraPadにheader.phpをペースト

いったんPCにheader.phpと名前をつけて保存します。
header.phpの保存

文字コードの再読み込みをしておきます。
必ずUTF-8にして下さい。
環境設定で全てのファイルの文字コードをUTF-8Nにしている場合はこの手順は必要ありません。
文字コードの再読み込み

では、メニューの位置をヘッダーイメージ画像の下に移動させてみます。
header.phpの42行目から46行目が、メニューを呼び込む記述です。
header.phpの編集

この5行を48~50行目のイメージ画像の下に移動します。
header.phpの編集

header.phpを上書き保存しておきます。

header.phpをアップロードする

FTPソフトを起動します。
ログインして、ディレクトリを確認します。
初期設定では、

  • 初期ドメイン
  • ドメイン
  • SSL

の三つのディレクトリが表示されます。

header.phpを入れるのは、子テーマディレクトリ内です。

ルートを

ドメイン → public_html → wp → wp-content → themes → 子テーマ

とたどって、子テーマ内にアップします。
header.phpのアップロード

アップロードが出来たら、FTPソフトは閉じて、ダッシュボードに戻ります。

左サイドメニューの外観→テーマ編集をクリックします。
header.phpがテーマ編集画面から編集できるようになっています。
テーマ編集画面

「ヘッダー」をクリックして、header.phpを開いてみます。
テーマ編集画面・header.php

変更した所も確認できます。
header.php

サイトを表示してみると、
ヘッダーの変更を確認

ちゃんと反映されています。OKですね。

子テーマを使用して編集をすると、もし間違ってしまったとしても、ダメなファイルをサーバーから削除するだけで元通りになるので、安心してチャレンジが出来ますね。

今回は2つの方法を説明しましたが、場合によって使い分け、いろいろとカスタマイズにチャレンジしてみて下さい!

ではでは、今日はこの辺で。
お役に立ちましたら、シェアなどしていただけるとハッピーです!

Published:2014/01/28

Written by

子テーマ用phpファイルの複製方法と編集方法・WordPressカスタマイズ」への1件のフィードバック

コメントを残す