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

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

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

file

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

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

file

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

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

file

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

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

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

file

タイトル部分に「会社概要」と入力してください。 右側のメニューから、パーマリンクの項目をクリック。

file

URLスラッグを入力します。 会社概要のページなので「company」にしておきましょう。

file

スラッグを入力したら、固定ページを公開してください。

次に、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

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