WordPressでテーマヘッダー(header.php)を編集しようとして
「あれ?header.phpがないぞ!?どこにあるんだ?」
なんてケースが発生したことありませんか?
僕もその1人でしたが、かんたんな手順でheader.phpを追加できましたので、今回はその方法をご紹介します。(テーマCocoonを前提とした説明になります)
親テーマから子テーマへのheader.phpのコピー方法がわかります(ConoHa WINGを利用)
header.phpだけではない<head>タグへの追記方法がわかります
header.phpとは
WordPressでブログをやっていると、<head>タグ内にコードを追記したり、カスタマイズするようなケースが出てくると思います。
その<head>タグが記述されているのがheader.phpになります。
header.phpはどこにある?
WordPressからの確認
以下の方法でheader.phpを確認できます。
ちなみに以下の画像は、僕の初期の頃のテーマファイルの状態です。
header.phpが存在しないことがわかります。
ちなみに、「編集するテーマを選択」は初期状態で「Cocoon Child」が選択されていますが、僕たちは通常子テーマであるCocoon Childを使っているので、このままで問題ありません。
WordPressから見えなければ親テーマにある
WordPressのテーマCocoonには、親テーマcocoonと子テーマcocoon-childがあるのですが、前述のとおり僕たちがWordPressで使っているのは子テーマcocoon-childの方です。
前述でWordPressの画面からheader.phpが見えなかったのは、子テーマcocoon-childに存在しないためです。
親テーマの方には必ずありますので、親テーマのものを子テーマにコピーしてあげれば使えるようになります。
header.phpの追加方法
ConoHa WINGのファイルマネージャーを利用
通常、WordPressのファイルを操作する場合、サーバー上のファイルを操作することになるためFTPソフトが必要になります。
しかし、サーバーがConoHa WINGの場合は、FTPソフトがなくてもファイル操作が可能です。
WordPressでブログをやっている人は、ConoHa WINGを使っている人も多いのではないでしょうか?
実際に使った感想として、かんたんで、すごく使いやすかったです。
具体的にはConoHa WINGのファイルマネージャーを利用します。
起動方法は以下のとおり。
さらに親テーマcocoonと子テーマcocoon-childのファイルが管理されている場所(フォルダ)も確認しておきましょう。
これで親テーマと子テーマの場所が確認できました。
親テーマからのダウンロード
まず親テーマからheader.phpをダウンロードします。
手順は以下のとおり。
これでheader.phpをダウンロードできました。
子テーマへのアップロード
親テーマからダウンロードしたheader.phpを、子テーマにアップロードします。
手順は以下のとおり。
これで子テーマへコピーができました。
WordPressから確認
WordPressから、ちゃんとheader.phpが見られるかを確認します。
無事にテーマヘッダー(header.php)が表示されるようになりました。
header.phpを子テーマにコピーして使うメリット・デメリット
さて、header.phpを子テーマにコピーする手順をご紹介してきましたが、そもそも子テーマにコピーして使うメリットは何なのでしょうか?
また、デメリットはないのでしょうか?
以下のとおり、まとめてみました。
・Cocoonのバージョンアップ等によりheader.phpが勝手に変更される恐れがない
親テーマのファイルを直接編集するのは、失敗した時のリスクが伴います。
子テーマの編集であれば、万が一失敗しても、親テーマのファイルから元に戻せるので安心感がありますね。
また、良くも悪くも、バージョンアップの影響を受けにくいという特徴があります。
【かんたん】軽微な編集はhead-insert.phpの利用が可能
<head>タグ内に少しだけ記述を追加したい場合などの軽微な編集をする場合は、head-insert.phpを利用した方がかんたんです。
head-insert.phpは、テーマファイルのtmp-user配下にあります。
これを使うことで、header.phpを直接編集しなくても、必要なコードを<head>タグ内に追記するのと同じ効果があります。
上記で説明したデメリットも解消できます。
【注意】こんな時はheader.phpを直接編集しない方が良い
作業内容によっては、<head>タグ内に記述するための補助機能が使えます。
作業失敗のリスクを減らすためにも、この機能を利用するようにしましょう。
Google AdSenseの認証コードの追加
Google AdSenseの申請をする際に、認証コードを<head>タグ内に記述する作業が発生します。
この場合は、header.phpではなく、WordPressでかんたんに記述するためのフォームがありますので、こちらを利用しましょう。
手順は以下のとおり。
(1) Cocoon設定 ⇒ Cocoon設定 ⇒ アクセス解析・認証タブをクリックする。
(2) 「その他のアクセス解析・認証コード設定」の「ヘッド用コード」欄に記述する(Google AdSenseから指定されたコードを貼り付ける)。
まとめ
いかがでしたか。
おさらいとして、header.phpの追加ステップは以下のとおりです。
(2)親テーマからheader.phpをダウンロード
(3)子テーマへheader.phpをアップロード
(4)WordPressのテーマエディターから「テーマヘッダー(header.php)」がみえることを確認
header.php以外のファイルでも、同様の方法で親テーマから子テーマへコピーできますよ。
また、header.phpをコピーして使う場合のメリット・デメリットや、<head>タグを追記するための様々な方法についても触れました。
どうしてもheader.phpを編集する場合は、誤りがないように、注意して作業しましょう。
最後まで読んでいただき、ありがとうございました。
コメント