異なるデザインの固定ページを作成する【WordPress制作入門講座】 | SkillhubAI(スキルハブエーアイ)

異なるデザインの固定ページを作成する【WordPress制作入門講座】

会社概要とお問い合わせ、この2ページは固定ページを使って作ります。

file

WordPressでデザインの異なる固定ページを作成する方法

会社概要とお問い合わせは、デザインが違いますよね。 固定ページはpage.phpを使って表示されると紹介しましたが、page.phpという1つのファイルでどちらのデザインも再現するのは大変です。

file

そこで、WordPressでは、固定ページに応じて別のテンプレート(phpファイル)で表示させることができる仕組みも用意されています。

方法はいくつかありますが、簡単なのはスラッグを使う方法。 スラッグというのは、URL(パーマリンク)の末尾の部分のこと。 page-スラッグ.phpというファイル名を付けると、自動的に「スラッグ」が一致する固定ページを使ってページが表示されます。

file

スラッグの設定と合わせて、固定ページ部分の作成方法を見ていきましょう。

会社概要ページをWordPress化する

WordPress管理画面から、固定ページの新規追加を開きます。
file

タイトル部分に「会社概要」と入力してください。
右側のメニューから、スラッグをクリックして「company」に打ち換えます。
file
タイトルとスラッグ、2つを設定出来たら、固定ページを公開してください。

次に、WordPressのテーマ(テンプレートファイル)を作成しましょう。
company.htmlをエディタで開きます。

そのまま、名前をつけて保存/別名で保存を選択。
page-company.phpという名前にして保存してください。
file

page-company.phpを編集しましょう。
やることはfront-page.phpと同じく、パスの修正です。
<?php echo get_template_directory_uri()?> を使って、下記4箇所を直します。

  • style.cssの読み込み
  • 画像(company.png)
  • 画像(images/banner.png)
  • gacha.jsの読み込み

<?php echo get_template_directory_uri()?>の挿入イメージ↓
file

修正できたら、page-company.phpを上書き保存。
WordPressの管理画面に戻って、会社概要のページを表示してみましょう。
file

HTMLページと同じように表示され、格言ガチャも動いていれば成功です!
file

もう一つの固定ページ、お問い合わせページの作成に進みましょう。