【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

1Aug2012

[WordPress] 固定ページのデザインを分ける2つの方法。条件分岐orカスタムテンプレート

リニューアルネタ第二弾。 固定ページのテンプレート分岐です。

今回のリニューアルでは、固定ページを2パターンのデザインに分けました。

1, サイドバーあり
2, サイドバーなし

標準の状態では固定ページデザインは1種類ですので、これを2パターンに分けてあげます。

複数の固定ページデザインを用意するには、2種類のシンプルな方法があります。

1つはカスタムテンプレート。
もう1つは条件分岐

それぞれ詳しく見ていきましょう。

1. 複数の固定ページテンプレートを用意。 カスタムテンプレート

1.1. カスタムページテンプレート

WordPressでは投稿ページのテンプレートはsingle.php、カテゴリーページはcategory.phpなど、テンプレートの名前と種類が決められています。

※関連記事:最初に覚えるテンプレートテーマの構造

ところが、固定ページでは自分で用意したテンプレートを適用することができるのです。

後ほど説明する方法で「サイドバーなし」というテンプレートを作成すると、固定ページの投稿画面にテンプレート選択ボックスが現れます。

カスタムページテンプレート

投稿画面で使用するテンプレートを切り替えられますので、新規で固定ページを増やす時にも簡単に対応できます。

1.2. カスタムテンプレートの作り方

テーマフォルダ内に適当な名前のphpファイルを作成します。
page.phpをコピーして、custom-page.phpなどとする方法をオススメします。

※この際、WordPressで予約されている名前は使用しないようにします。(例:index.php,page.phpなど

次に作成したファイルの初めに、以下の行を記述します。

上記例の「サイドバーなし」という部分が、固定ページ投稿画面で表示されるテンプレート名になります。

1.3. 実際の使い方

実際に「サイドバーあり」「サイドバーなし」の2種類のテンプレートを作成してみましょう。

page.php
サイドバーあり、固定ページのデフォルトテンプレート



    

Sorry, no posts matched your criteria.

nosidebar-page.php
サイドバーなし、特定の固定ページ用テンプレート





    

Sorry, no posts matched your criteria.

・9行目 ”main-content”からサイドバー無し用の”main-content-wide”に変更
・36行目付近でサイドバーを読み込む”get_sidebar();”を削除

変わった所はこの2点だけですが、それだけでサイドバーあり・なしの2種類のテンプレートが用意できました。

後はサイドバーなしテンプレートを使いたい固定ページの投稿画面で「サイドバーなし」を選択するだけです。

「2行の為だけにテンプレートファイルを2個作るのはちょっと。。。」という場合は、phpの条件分岐を使います。

2. 条件分岐で2種類のデザインを出力

2.1. PHPの条件分岐

PHPのif文を使って、デフォルトテンプレート内に条件分岐を作ります。

具体的にはデフォルトテンプレートのサイドバー表示の箇所に「○○と△△の固定ページではサイドバーなし」と書いてあげます。

この方法だと対象となる固定ページを増やした際にはテンプレートを編集する必要がありますので注意が必要です。

2.2. 条件分岐文の書き方

今回はサイドバー無しの固定ページの投稿IDを指定して条件分岐を作成します。



サイドバー無し用のHTMLコードを記述



サイドバー有り用のHTMLコードを記述

条件が分かれる箇所だけピンポイントに使う事で、簡単な条件分岐ならばカスタムページテンプレートよりもシンプルになります。

例えば以下のように「○○以外のページではサイドバー表示」とする場合はより少ない行数で実現します。
※3行目の「!」は否定(~以外では)という意味になります。
※5行目の文でサイドバーのテンプレートを読み込んでいます。





この2つの方法を使って、実際にデフォルトテンプレートをカスタマイズしてみます。

2.3. 実際に条件分岐を使ってみる



    

Sorry, no posts matched your criteria.

1行目~14行目:
サイドバー無しページではclass属性を”main-content-wide”
サイドバー有りページではclass属性を”main-content”

46行目~53行目:
サイドバー有りページではサイドバーを読み込む

どうですか?
PHPって、HTMLを理解していたら何となく分かる気がしませんか?

僕もPHP自体は全く理解していませんが、WordPressで製作を続ける内にテーマフォルダ内のPHPファイルなら編集できるようになりました。
一般サイトをWordPressで作成する場合はテーマの編集が必要になると思いますので、どんどん触って覚えましょう!

【あとがき】

今回2種類の方法を紹介しました。

・大きく内容が変わる。
・PHPが苦手
・運営者はWEB素人

のいずれかに当てはまる場合はカスタムページテンプレートを。

・ほんの数行だけデザインを変えたい。
・PHPもだんだんわかってきた。
・今後も自分で製作/運営をする

という場合は条件分岐を使うといいでしょう。

関連記事