WordPressで固定ページごとに違うページデザインやレイアウトを適用させる方法
ワードプレスで固定ページごとに違うページデザインにしたい時ってありませんか。
それぞれ異なるページデザインやレイアウトをテンプレート化して、固定ページに適用させることができます。
プラグインなど使わずとも簡単にできるんです。
この記事ではその方法について、書いていこうと思います。
やり方
固定ページにデフォルトで適用されているページデザインは「page.php」に記述されているものが適用されています。
page.phpと違うページデザインの固定ページを作り、そのデザインをテンプレート化するには、下記の手順を行います。
1. page.phpをコピペして複製する
page.phpをコピペせず、真っ白なテキストファイルからテンプレ用のファイルを作成することも可能ですが、複製したpage.phpを編集した方が楽だと思います。
2. 複製したファイルの名前を変更
下記のルールでファイル名を付けます。
固定ページのテンプレファイル名のルール
page-好きな英数字.php
「page」の後に「-」ハイフンを付けて、その後に自分がわかりやすい英数字を付けます。
例:page-new.php、page-temp2.phpなど
ちなみにワードプレスでは固定ページの読み込み順は下記のようになっています。
- page-好きな英数字.php
- page-ID.php
- 上記の2つとも存在しなければ最後にpage.phpが読み込まれます。
3. 複製したファイルを開き冒頭に下記を追記
/* Template Name: new */
「Template Name: new」の「new」は、なんでも構いません。
後は、その下に好きなようにカスタマイズしたコードを記述していきます。
(下記は一例です。)
/* Template Name: new */ <?php get_header(); ?> <div id="wrapper" class="clearfix"> <div id="main"> ・ ・ ・
4. page.phpと同じ階層に保存
FTPなどでpage.phpと同じ階層に保存すれば完了です。
するとどうなるかというと・・・
ワードプレスの管理画面から固定ページを開くと下記のように「ページ属性」が追加され、テンプレートファイルが選択できるようになっています。
上の画面の例だと「books」と「new」というテンプレートファイルが登録されています。
まとめ
上手くテンプレ化できたでしょうか。
ワードプレスって多機能というか奥が深いというか、いろいろ便利なことができるので勉強のしがいがあります。
この記事がお役に立てるものになっていると嬉しいです。
【番外】WEB制作におすすめの本
【番外】パソコン時短技
知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。