ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > 固定ページを作成しよう

固定ページを作成しよう

Web制作

2022/07/20

2023/05/08

固定ページを作成しよう
この記事では、WordPressで固定ページを作成する方法について解説します。
この記事で身につく内容
  • WordPressで固定ページを作成する方法

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか?

  • またゼロからやり直さないといけないの?
  • 本当にフリーランスになれるの?

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK!

\お申し込みは30秒で終わります。/

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか?

 

はじめに

ここまでWordPressでのサイト作成について扱ってきました。

今現在のみなさんであれば、静的サイトのトップページのWordPress化や、メインループを使った投稿一覧の作成、投稿個別ページの作成などをできるようになっていると思います。

しかし、まだWebサイトを全てWordPress化できるかというと、確実に扱えていない部分があります。それは、下層ページの作成方法です。

今回は、WordPressにある固定ページという機能を使って、下層ページなどを作っていく方法について学んでいきます。

固定ページの概要

固定ページを一言で表すと「ページ単体で完結できるようなページを作る機能」を指します。

固定ページでできること

固定ページは、次のように管理画面から、下層ページの作成や編集を行うことができます。

  1. 管理画面のサイドバーにある「固定ページ」を選択

  2. 「新規追加」で新たなページを作成する

  3. タイトルや本文、場合によってはサムネイルなどを入力・設定する

  4. ページが作成され、反映を確認することができる

このようにして、独立したページを簡単に作成することができます。

投稿ページと固定ページの違い

「投稿の個別ページ」と「固定ページ」の違いとして、連続しているかがあります。

投稿には日付順などの順番があり、個別ページに「次の記事」「前の記事」というものもあります。

対して、固定ページは独立しているので、「次のページ」や「前のページ」というものがありません。これが、Webサイトで言うところの「トップページ」「会社概要ページ」「お問い合わせページ」などの独立したページに対して当てられます。

固定ページを作る

固定ページのイメージが掴めたところで、作り方の解説に入っていきます。

管理画面からページを作る

  1. 管理画面のサイドバーにある「固定ページ」を選択

  2. 「新規追加」で新たなページを作成する

  3. タイトルや本文、場合によってはサムネイルなどを入力・設定する

  4. 右上の「公開」もしくは「更新」を押す

この手順で、固定ページのデータを作成できました。

テンプレートファイルを作る

管理画面で作成した固定ページを表示できるようにしていきます。

 

使用するテンプレートファイル

固定ページを作成するために用いられるテンプレートは、主に次のものが挙げられます。

  • $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_〇〇など)は、固定ページでも変わらずに、メインループを作成して、その中で記述します。

固定ページへのリンクを作る

固定ページの作成を行ってきましたが、このままだと作成した固定ページにリンクを飛ばすことができません。

というわけで、固定ページへのリンクの作成方法を紹介していきます。

作成の手順は、次の二つです

  1. 固定ページのスラッグ名を設定・確認する
  2. 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化を進める中で、よりその性質の理解が進むと思います。

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから