今回からはトップページではなく、下層ページを作っていきます。
このサイトでは、下層ページが以下のスラッグ名で表示されるようにしていきます。
| ページ名 | スラッグ |
|---|---|
| 私たちについて | about |
| 事業内容 | service |
| お知らせ | news |
| 採用情報 | recruit |
| お問い合わせ | contact |
| プライバシーポリシー | privacy |
まずは、固定ページの編集画面においてスラッグ名を自由に変更できるようにしておく必要があります。
そこで設定のパーマリンクを開いて、「投稿名」が選択されているかを確認しておきましょう。もし他のパーマリンクが設定されていた場合は、「投稿名」を選択して変更を保存を押しましょう。
それではWordPressの管理画面で、下層ページを作っていきます。固定ページの所に移動すると、Privacy PolicyとSample Pageが仮で入っています。コレらは使わないので、チェックを入れて、ゴミ箱へ移動を選択肢、適用ボタンを押しましょう。
すると、二つの仮ページが消えたと思います。それでは、とりあえず「私たちについて」のページから作っていきましょう。大きく「固定ページ」と書かれている右に、青い「固定ページを追加」のボタンがあると思うので、押しましょう。
すると、固定ページの編集画面が出てくると思うので、「タイトルを追加」の所に「私たちについて」と記入し、スラッグのところを”about”と記入して、右上の公開ボタンを押しましょう。
その後、公開確認ボタンを押すと、固定ページの一覧に「私たちについて」が追加されていると思います。
しかし、これだとまだテーマファイルと固定ページが結びついていないので、VSCodeの方でテーマフォルダを書き換えていきます。
まず、about.htmlのファイル名をpage-about.phpに変更します。wordpressのテーマファイルにおいて、固定ページのファイル名はpage-(スラッグ名).phpで指定するので、覚えておきましょう。
また、このpage-about.phpにおいてもfront-page.phpでやったのと同じように、ヘッダーフッターファイルの呼び出し、画像パスの書き換えを行いましょう。
そして最後に、サイト内の
href="about.html"という記述の部分を全て、
href="<?= home_url(); ?>/about"に変更しましょう。おそらく、header.php、footer.php、front-page.php内に「私たちについて」のサイト内リンクがあると思います。
この際、VsCodeの検索、replace機能を使うと一気に変更ができるのでお勧めです。
それでは、「私たちについて」のページを開いてみましょう。すると、以下のように正しく表示されていると思います。
この固定ページを新設する操作を「事業内容」「お知らせ」「採用情報」「お問い合わせ」「プライバシーポリシー」のページでも同じ操作を行いましょう。
少々長くなりましたが、これで下層ページは完成したと思います。次回からは、お問い合わせやお知らせといった、wordpressの機能を使ったページの作り方について解説していきます。
