【Twenty Fourteen】ヘッダー画像を固定ページ毎に指定して変更する方法

 WordPressで会社のホームページを作る場合、固定ページと投稿ページでヘッダー画像を別にしたいって思い設定したメモです。

 私の会社HPは、テーマTwenty Fourteenを使い手作り感満載でやっています。固定ページではお堅く自社ホームページ、投稿ページは業務に関係してそうなことを自由に書くブログとして使い、投稿ページだけアドセンスとかも入れたりするとヘッダー画像も別にしたほうがいいかなと考えるようになりました。

 ここのブログもTwenty Fouteenなので、ここで試した内容です。必死にググってわかったことは

  • Twenty Fouteenではヘッダー画像を複数登録してランダムに表示させることができる機能はある
  • 今回の目的に合った便利なプラグインはなさそう
  • 固定ページに限って言えば、オリジナルテンプレートをヘッダーの数だけ複数作ることで、わりと簡単にできそう
  • ヘッダー管理はheader.php、固定ページテンプレートはpage.phpそれぞれ複数作成して使い分ける機能がWordPressにはある

 ということで、投稿ページのヘッダーを基本のヘッダー画像にして、固定ページだけ小テーマにオリジナルテンプレートを作ってヘッダー画像を指定していきます。

ヘッダー画像を複数アップロードする

 ヘッダー用画像をメディアライブラリにアップロードしておきます。Twenty Fourteenの場合は、管理画面の「外観」-「カスタマイズ」の「ヘッダー画像」から登録したほうがわかりやすいです。

header1

 今回は、こんなヘッダーを5つ用意しました。

 一つは「現在のヘッダー」として登録しておきます。(これが投稿ページ用のヘッダーになります。)

header2

 メディアライブラリから画像のファイルのURLもそれぞれメモしておきます。

子テーマにheader.phpとpage.phpを複数コピーする

 twentyfourteenのテーマフォルダからheader.phpとpage.phpを子テーマにコピーします。それをheader-〇〇〇.phpと、page-〇〇〇.phpというふうに「-(ハイフン)」のあとに名前をつけて保存します。そういう決まりのようです。

 今回、子テーマ内に作ったファイルは

  • header-2.php
  • header-3.php
  • header-4.php
  • header-5.php
  • page-2.php
  • page-3.php
  • page-4.php
  • page-5.php

 これの内容を変更していきます。

header-〇.phpの変更

 38行目あたりの先頭のあたりを変更します。ヘッダー画像ファイルのURLが「https://def-4.com/wp-content/uploads/header-2.png」の場合の例です。

page-〇.phpの変更

 page-2.phpのテンプレートファイルには、header-2.phpのヘッダー内容を表示する設定の場合の例です。14行目あたりを変更します。

 header-〇〇〇.phoの〇〇〇部分を(”〇〇〇”)に入れるわけですね。

 さらに一行目に以下の記述を追記します。例として、テンプレートネームを「page-2」とした場合です。

 これを入れることにより、固定ページ編集画面のテンプレート選択リストのプルダウンメニューに追加で出てくるようになります。

 この2項目を、それぞれのページで編集します。

固定ページにテンプレートを割り当てる

 管理画面の固定ページ編集画面を開きます。

header3

 「テンプレート」のプルダウンメニューに作成した名前のテンプレートが出ているので選択して「更新」します。

すべての固定ページで設定したら作業完了です。

確認

 当サイトは、トップメインメニュー用に固定ページを作っているだけです。

header4

 上の4か所のメニューをクリックしてみてください。

 成功ですね。

最後にひとこと

 このサイトでは固定ページの重要性がないのですが、会社サイトでは固定ページが重要になってくるのでこのカスタマイズが使えそうです。

 twenty fourteenはヘッダーが画像のみなのでheader.phpの変更も画像ファイル直指定という素人手順で簡単にいけましたが、他のテーマだともう少しややこしいかもしれませんね。

 このあと、投稿ページもヘッダー画像を変えたくなりました。コチラもよければお読みください。

【Twenty Fourteen】ヘッダー画像を投稿ページ毎に指定して変更する方法

こちらの記事もどうぞ

“【Twenty Fourteen】ヘッダー画像を固定ページ毎に指定して変更する方法” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です