はじめに
ここまでWordPressでのサイト作成について扱ってきました。
今現在のみなさんであれば、静的サイトのトップページのWordPress化や、メインループを使った投稿一覧の作成、投稿個別ページの作成などをできるようになっていると思います。
しかし、まだWebサイトを全てWordPress化できるかというと、確実に扱えていない部分があります。それは、下層ページの作成方法です。
今回は、WordPressにある固定ページという機能を使って、下層ページなどを作っていく方法について学んでいきます。
固定ページの概要
固定ページを一言で表すと「ページ単体で完結できるようなページを作る機能」を指します。
固定ページでできること
固定ページは、次のように管理画面から、下層ページの作成や編集を行うことができます。
管理画面のサイドバーにある「固定ページ」を選択
「新規追加」で新たなページを作成する
タイトルや本文、場合によってはサムネイルなどを入力・設定する
ページが作成され、反映を確認することができる
このようにして、独立したページを簡単に作成することができます。
投稿ページと固定ページの違い
「投稿の個別ページ」と「固定ページ」の違いとして、連続しているかがあります。
投稿には日付順などの順番があり、個別ページに「次の記事」「前の記事」というものもあります。
対して、固定ページは独立しているので、「次のページ」や「前のページ」というものがありません。これが、Webサイトで言うところの「トップページ」「会社概要ページ」「お問い合わせページ」などの独立したページに対して当てられます。
固定ページを作る
固定ページのイメージが掴めたところで、作り方の解説に入っていきます。
管理画面からページを作る
管理画面のサイドバーにある「固定ページ」を選択
「新規追加」で新たなページを作成する
タイトルや本文、場合によってはサムネイルなどを入力・設定する
右上の「公開」もしくは「更新」を押す
この手順で、固定ページのデータを作成できました。
テンプレートファイルを作る
管理画面で作成した固定ページを表示できるようにしていきます。
使用するテンプレートファイル
固定ページを作成するために用いられるテンプレートは、主に次のものが挙げられます。
- $costomname.php
- page-$slug.php
- page-$id.php
- page.php
「$costomname」「$slug」「$id」の箇所は、任意の文字列です。
先に記述した方が優先度が高く、限定的です。例えば、page-$slug.phpは「特定スラッグ名の固定ページを作る」と言うように限定的に使うことが一般的です。
そのため、限定的にする意図がない場合は、基本的にpage.phpを固定ページのテンプレートとして利用します。
記述するコード
固定ページ作成に使われるコードの記述を見ていきます。
とはいえ、基本的には、メインループやwordpress全体で紹介してきた関数を使っていきます。
the_post_thumbnail()the_title()the_content()get_template_directory_uri()
などなど。。。
これらの詳しい解説は次の記事を参考にしてください。
メインループを使って投稿を表示しよう | ZeroPlus Media
個別投稿ページを作成しよう | ZeroPlus Media
注意点として、メインループ内で使用される関数（the_〇〇, get_the_〇〇など）は、固定ページでも変わらずに、メインループを作成して、その中で記述します。
固定ページへのリンクを作る
固定ページの作成を行ってきましたが、このままだと作成した固定ページにリンクを飛ばすことができません。
というわけで、固定ページへのリンクの作成方法を紹介していきます。
作成の手順は、次の二つです
- 固定ページのスラッグ名を設定・確認する
home_url()とスラッグ名を使ってリンクを作成する
それぞれ見ていきます。
固定ページのスラッグ名を設定・確認する
管理画面の固定ページ編集画面を確認すると、次のように、「パーマリンク」と言う項目に「URL スラッグ」と言う項目があります。
こちらのURLスラッグを任意の半角英数字に書き換えます。（全角文字だと、悪影響が発生してしまします）
今回は「お試しページ」→「test」と言うように書き換えます。
最後に必ず、右上の更新ボタンを押しましょう。
home_url()とスラッグ名を使ってリンクを作成する
次は、home_url()を使って、設定したURLスラッグを使ってコードを記述します。
※home_url()についてはこちらを参照してください。
<a href="<?php echo home_url('/test'); ?>">お試しページ</a>home_url()の引数のなかに、固定ページのURLスラッグを反映させています。
このように記述すると、お試しページへのナビゲーションが作れます。
なお、本来はエスケープ処理も含めるため、次のように記述します。
<a href="<?php echo esc_url(home_url('/test')); ?>">お試しページ</a>まとめ
本記事の内容としては。
- 固定ページについての概要とやりたいこと
- 固定ページの作り方
- 作成した固定ページへのリンクを出力する方法
を扱ってきました。
固定ページはとてもよく使うので、授業で扱ったり、自分でWordPress化を進める中で、よりその性質の理解が進むと思います。
