複数の固定ページを作成してページ間を移動しよう！ – WordPress関数とURLの仕組み

前回の記事で、WordPress関数を使って固定ページのタイトルと本文を表示することができるようになりました。

しかし、まだ1つのページしか作成していない状態です。

今回は、実際のWebサイトらしく複数の固定ページを作成し、ページ間を自由に移動できるナビゲーションを作成していきます！

その過程で、WordPressのURL構造やリンクの仕組みも学習していきます。

今回の目標

• 複数の固定ページの作成とスラッグの設定
• ページ間を移動するナビゲーションの作成
• 子ページ（階層ページ）の作成と活用
• 相対リンクと絶対リンクの違いと問題点
• WordPress関数を使った正しいリンクの作成方法

複数の固定ページを作成する

現在「ようこそ」のみが存在している状態ですが、実際のWebサイトには複数のページが必要です。

企業サイトでよく使われるページを作成してみましょう。

固定ページの作成手順

WordPress管理画面にアクセス

• 管理画面にログイン

固定ページ作成の開始

• 左側メニューの「固定ページ」をクリック
• 「新規追加」をクリック

ページを作成

以下の3つのページを作成してください

1. 会社概要（タイトルのみ入力、本文は空でもOKだが、練習も兼ねてなにかしら入力）
2. サービス（タイトルのみ入力、本文は空でもOK、練習も兼ねてなにかしら入力）
3. 問い合わせ（タイトルのみ入力、本文は空でもOK、練習も兼ねてなにかしら入力）

作成手順

• 「固定ページ」→「新規追加」
• タイトルと本文を入力
• 「公開」ボタンをクリック
• 上記の手順で3つのページを作成する

作成完了！

これで「ようこそ」「会社概要」「サービス」「問い合わせ」の4つの固定ページができました。

スラッグの設定と重要性

固定ページを作成しましたが、これらのページにアクセスするためのURL（スラッグ）を適切に設定する必要があります。

スラッグとは？

スラッグの定義

• URLの末尾部分に表示される文字列
• ページを特定するための識別子
• SEOやユーザビリティに大きく影響

例：

• サイトURL：https://example.com
• スラッグ：about
• 完全URL：https://example.com/about

スラッグ設定の重要性

なぜ英語のスラッグが推奨されるのか

• URL の簡潔性：短くて覚えやすい
• SEO対策：検索エンジンが理解しやすい
• 国際化対応：海外からのアクセスにも対応
• システム互換性：様々なシステムで問題が起きにくい

推奨されるスラッグの例：

• 会社概要：about や company
• サービス：service や services
• 問い合わせ：contact
• ニュース：news や info
• アクセス：access や map

各ページのスラッグ設定

• 固定ページ→固定ページ一覧
• 各ページの編集をクリックし、編集画面の右側、保存ボタン付近にあるスラッグ欄で個別に設定

ナビゲーションメニューの作成

複数のページを作成したので、ページ間を移動できるナビゲーションメニューを作成しましょう。

まずは、HTMLで直接リンクを書く方法から始めます。

index.phpファイルの修正

変更箇所 sample-themeフォルダ内のindex.phpファイルの<header>部分を変更します。

変更前：

<header>
  <h1<?php the_title(); ?></h1>
<header>

<header>
  <h1<?php the_title(); ?></h1>
<header>

変更後：

<header>
  <h1<?php the_title(); ?></h1>
  <ul>
    <li><a href="./">トップ</a><li>
    <li><a href="./about">会社概要</a><li>
    <li><a href="./service">サービス</a><li>
    <li><a href="./contact">問い合わせ</a><li>
  </ul>
<header>

<header>
  <h1<?php the_title(); ?></h1>
  <ul>
    <li><a href="./">トップ</a><li>
    <li><a href="./about">会社概要</a><li>
    <li><a href="./service">サービス</a><li>
    <li><a href="./contact">問い合わせ</a><li>
  </ul>
<header>

変更結果の確認

1. ファイルの保存

• index.phpファイルを保存

2. サイトの表示確認

• 公開サイトを表示またはページを更新

3. ナビゲーションの動作確認

• 各リンクをクリックして、対応するページが表示されることを確認
• 「会社概要」→ 会社概要ページが表示
• 「サービス」→ サービスページが表示
• 「問い合わせ」→ 問い合わせページが表示

成功！ これで、すべてのページ間を自由に移動できるようになりました。

子ページ（階層ページ）の作成

Webサイトではページを階層化することがよくあります。

例えば、「会社概要」の下に「沿革」や「アクセス」などの詳細ページを作成する場合です。

早速、子ページを作ってみましょう。

子ページの作成

沿革ページの作成

• 「固定ページ」→「新規追加」をクリック
• タイトルに「沿革」と入力
• 親ページの設定：
  • 画面右側の「ページ属性」というボックスを探してください
  • 「親ページ」のプルダウンメニューをクリック
  • 一覧から「会社概要」を選択
• スラッグを「history」に設定
• 「公開」をクリック

アクセスページの作成

• 沿革ページと同様に作成してください
• タイトル：「アクセス」
• 親ページ：「会社概要」を選択
• スラッグ：「access」

子ページのURL構造

作成された子ページのURL

• 沿革：/about/history
• アクセス：/about/access

WordPressは自動的に親ページのスラッグを含むURL構造を作成します。

ナビゲーションに子ページを追加

index.phpファイルの修正

ナビゲーションメニューに子ページのリンクも追加しましょう。

変更後のナビゲーション：

<header>
  <h1<?php the_title(); ?></h1>
  <ul>
    <li><a href="./">トップ</a><li>
    <li><a href="./about">会社概要</a>
      <ul>
        <li><a href="./about/history">沿革</a><li>
        <li><a href="./about/access">アクセス</a><li>
      </ul>
    <li><a href="./service">サービス</a><li>
    <li><a href="./contact">問い合わせ</a><li>
  </ul>
<header>

<header>
  <h1<?php the_title(); ?></h1>
  <ul>
    <li><a href="./">トップ</a><li>
    <li><a href="./about">会社概要</a>
      <ul>
        <li><a href="./about/history">沿革</a><li>
        <li><a href="./about/access">アクセス</a><li>
      </ul>
    <li><a href="./service">サービス</a><li>
    <li><a href="./contact">問い合わせ</a><li>
  </ul>
<header>

リンクの問題点を発見

子ページを追加したナビゲーションを試してみると、ある問題が発生することがわかります。

問題の発生

1. 「会社概要」ページに移動

• トップページから「沿革」リンクをクリック
• URL：http://sample.local/about/history になる

2. さらに「アクセス」リンクをクリック

• 沿革ページから「アクセス」リンクをクリック
• なぜか「Hello world!」が表示される

なぜ不具合が発生するのか？

URL解析

• 沿革のページ：http://sample.local/about/history
• クリックしたアクセスのリンク：/about/access
• ブラウザが解釈するURL：http://sample.local/about/history/about/access

現在表示中のURL＋クリックした相対リンク＝https://sample.local/about/history/about/history

問題の原因

この問題の原因は相対リンクにあります。

相対リンク /about/history は、現在のページのURLに対して相対的に解釈されるため、意図しないURLになってしまいます。

そのため、WordPressは「どのページを表示してよいかわかならい」状態に陥ります。結果として最新の投稿が表示されたのです。

（内部的には404 not foundエラーが発生しています）

相対リンクとは？

相対リンクの定義

• 現在の位置から見た相対的なパスを指定する方法
• 現在のページの階層によって解釈が変わる場合がある

現在使用しているリンクの形式

<a href="./about">会社概要</a>

<a href="./about">会社概要</a>

相対リンクの特徴

• サイトのドメインが変わっても動作する
• 記述が短くて済む
• ローカル環境とサーバー環境で同じリンクが使える
• ただし、今回のような問題が発生することがある

具体的な問題パターン

• トップページ（/）から /about/history → https://example.com/about/history OK
• 会社概要ページ（/about）から /about/history → https://example.com/about/about/history NG

絶対リンクとは？

絶対リンク

• 完全なURLを指定
• どのページからアクセスしても同じ結果になる
• https://example.com/about/history のような形式

絶対リンクの特徴

• サイトのドメインが変わると動作しない
• 記述が長い
• ローカル環境とサーバー環境で同じリンクが使えない
• 今回のような問題が発生しない

WordPressには、相対リンクと絶対リンクの欠点を補うための関数が用意されています。

home_url()関数で問題を解決

WordPressには、この問題を解決するための専用関数が用意されています。

home_url()関数を使用することで、常に正しいURLを生成できます。

home_url()関数について

home_url()関数の役割

• WordPressサイトのホームURLを取得。
  結果として、ドメインやサーバーが変わっても動作する
• 引数として渡したパスを自動的に結合
  結果として、短い記述ができる
• 常に正しい絶対URLを生成
  結果として、問題が発生しない

基本的な使用方法

<?php echo home_url('スラッグ'); ?>

<?php echo home_url('スラッグ'); ?>

使用例

<?php echo home_url('about'); ?>
// 出力結果：https://example.com/about
<?php echo home_url('about/history'); ?>
// 出力結果：https://example.com/about/history

<?php echo home_url('about'); ?>
// 出力結果：https://example.com/about
<?php echo home_url('about/history'); ?>
// 出力結果：https://example.com/about/history

ナビゲーションの修正

index.phpファイルの最終修正 home_url()関数を使用してナビゲーションを修正します。

修正後のコード：

<header>
    <h1><?php the_title(); ?></h1>
    <ul>
        <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
        <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
            <ul>
                <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
            </ul>
        </li>
        <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
        <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
    </ul>
</header>

<header>
    <h1><?php the_title(); ?></h1>
    <ul>
        <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
        <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
            <ul>
                <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
            </ul>
        </li>
        <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
        <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
    </ul>
</header>

echo文について

echo文の役割

• PHPの出力命令
• 関数の戻り値をHTMLとして出力
• <?php echo 関数名(); ?> の形式で使用

なぜechoが必要なのか

<!-- 間違った書き方 -->
<a href="<?php home_url('about'); ?>">
// 出力結果：<a href="">
<!-- 正しい書き方 -->
<a href="<?php echo home_url('about'); ?>">
// 出力結果：<a href="https://example.com/about">

<!-- 間違った書き方 -->
<a href="<?php home_url('about'); ?>">
// 出力結果：<a href="">
<!-- 正しい書き方 -->
<a href="<?php echo home_url('about'); ?>">
// 出力結果：<a href="https://example.com/about">

home_url()関数は値を返すだけで、自動的には出力されません。echoを使って明示的に出力する必要があります。

修正結果の確認

1. ファイルの保存

• index.phpファイルを保存

2. 動作確認

• 各ページを移動して、すべてのリンクが正常に動作することを確認
• 特に会社概要ページから子ページ（沿革・アクセス）への移動を確認

3. URL確認

• ブラウザのアドレスバーで、正しいURLが表示されることを確認

問題解決！ これで、どのページからでも正しくナビゲーションが機能するようになりました。

ソースコードでも確認

ブラウザには、現在表示中のWebページのソースコード（HTML）を確認する機能が備わっています。

Chromeまたはedgeでは、Ctrl + Uでソースコードを確認できます。

リンクが絶対リンクになっていることが確認できます。

home_url()関数の利点

1. 環境に依存しない

• ローカル環境でもサーバー環境でも同じコードで動作
• WordPressの設定に基づいて自動的にURLを生成

2. 保守性が高い

• サイトのドメインが変更されても修正不要
• WordPressの設定変更に自動的に追従

3. エラーの防止

• 常に正しい絶対URLを生成
• リンク切れやURLエラーを防止

まとめと次回予告

今回学習したこと

複数ページの作成と管理

• 固定ページの作成方法とコンテンツの入力
• スラッグの設定とURL構造の理解
• 子ページ（階層ページ）の作成と親子関係の設定

ナビゲーションの実装

• HTMLによる基本的なナビゲーションの作成
• 相対リンクの問題点と実際のトラブルシューティング
• 絶対リンクと相対リンクの違いと使い分け

WordPress関数の活用

• home_url()関数による正しいURL生成
• echo文を使った関数の出力方法
• WordPressのURL管理システムの理解

現在の到達点

達成できたこと

• 複数の固定ページを持つWebサイトの基本構造を完成
• ページ間の移動が正常に機能するナビゲーションを実装
• WordPressのURL構造と関数の仕組みを理解
• 実際の問題に直面し、WordPress関数で解決する経験を積む

現在のサイト構造

トップページ（ようこそページ）
├── 会社概要
│   ├── 沿革
│   └── アクセス
├── サービス
└── 問い合わせ

トップページ（ようこそページ）
├── 会社概要
│   ├── 沿革
│   └── アクセス
├── サービス
└── 問い合わせ

WordPress関数のまとめ

これまでに学習したWordPress関数

• the_title()：ページタイトルの表示
• the_content()：ページ本文の表示
• home_url()：正しいURLの生成

WordPress関数の特徴

• WordPress専用の機能を提供
• サイトの設定や環境に自動的に対応
• 保守性とセキュリティの向上に貢献

次回予告：ページによってデザインを変えよう！

現在は、すべてのページが同じindex.phpファイルで表示されているため、同じデザインになっています。

次回は、ページごとに異なるデザインやレイアウトを適用する方法を学習します！

次回の内容予定

• WordPressのテンプレート階層の理解
• front-page.phpでトップページ専用デザインを作成
• page-スラッグ.phpで固定ページ専用デザインを作成
• テンプレートファイルの優先順位と使い分け
• 各ページに最適化されたコンテンツ表示

学習する具体的な内容

• トップページ用のfront-page.phpファイル作成
• お問い合わせページ用のpage-contact.phpファイル作成
• 各ページで異なるスタイルやレイアウトの実装

なぜページ別デザインが重要なのか？

現在はすべてのページが同じ見た目ですが、実際のWebサイトでは以下が求められます。

• トップページ：会社の魅力を伝える特別なデザイン
• 会社概要：信頼感を与えるレイアウト
• サービス：サービス内容を分かりやすく表示
• お問い合わせ：フォームに適したデザイン

準備していただくこと

• 今回修正したsample-themeをそのまま保持
• 次回は新しいテンプレートファイルを複数作成していきます

お疲れさまでした！ 複数ページのWebサイトが完成し、WordPressのURL管理システムについても深く理解できたのではないでしょうか。

相対リンクの問題に直面し、WordPress関数で解決するという実践的な経験も積むことができました。

次回はいよいよページごとの個性的なデザイン作成に挑戦しましょう！

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］複数の固定ページを作成してページ間を移動しよう！ – WordPress関数とURLの仕組み

【複数の固定ページを作成してページ間を移動しよう！ – WordPress関数とURLの仕組み】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする