0から始めるWordPress自作テーマ作成【固定ページ作成編】
更新日:2022年11月11日 / 投稿日:2020年09月13日
WordPressをゼロから作成するを目的にご紹介しています。前回はTOPページの表示方法からテンプレートタグについてご紹介いたしました。
これまでを振り返ると、HTMLの切り分けからTOPページの表示までをご紹介いたしましたが、今回は固定ページの作成方法についてご紹介いたします。
WordPressには投稿タイプと固定ページという概念があり、今回は固定ページを使った下層ページの作成方法を順を追って説明していきます。
固定ページと投稿ページの違いについては、以下の記事をご覧下さい。
関連記事:固定ページと投稿ページの違いについて
関連記事:特定の固定ページの内容を取得して表示させる方法【WordPress】
~ 目次 ~
下層ページになるテンプレートファイルを用意します
まずは、固定ページで表示したい下層ページのテンプレートファイルを作成します。
phpファイルを新規作成し、ヘッダータグとフッタータグを記述します
テキストエディタでphpファイルを新規作成します。
新規作成したファイルに、ヘッダーを呼び出すテンプレートタグとフッターを呼び出すテンプレートタグを記述します。
作成すると以下のようになりますので、確認してみましょう。
<?php get_header(); ?>// ヘッダーを呼び出すテンプレートタグ
<main>
// ここに、下層ページのコンテンツになるコードが入る想定です。
</main>
<?php get_footer(); ?>// フッターを呼び出すテンプレートタグ
ヘッダーを呼び出すタグとフッターを呼び出すタグに挟まれて、下層ページのコンテンツになるコードが入っている形になるかと思います。
次に、固定ページのエディター画面を使って下層ページの中身を表示させたいので、上のコードのメインタグの中身を一度違う場所に移して保存します。
メインループと呼ばれるコードを記述します
管理画面の固定ページのエディターの中身を反映させたいので、メインタグの中に、以下のようなメインループと呼ばれるコードを記述します。
<?php get_header(); ?>// ヘッダーを呼び出すテンプレートタグ
<main>
<?php if(have_posts): ?>
<?php while(have_post): ?>
<?php the_post(); ?>
<?php the_content(); ?>
<?php endwhile(); ?>
<?php endif(); ?>
</main>
<?php get_footer(); ?>// フッターを呼び出すテンプレートタグ
page.phpという名前でファイルを保存します
メインタグの中にメインループになるコードを記述したら、新規作成したphpファイルの名前を「page」という名前にして保存します。
page.phpをアップロードします
名前をつけて保存したらpage.phpというファイルが作成されたかと思います。
ファイルの保存ができたら、WordPressのテーマフォルダにpage.phpをアップロードします。
WordPressの管理画面からメインタグの中身を貼り付けます
page.phpのアップロードができたら、今度は変わってWordPressの管理画面から固定ページで新規作成でページを作成していきます。
画面左側の固定ページメニューから新規作成をクリックします。
固定ページのタイトルを入力します
タイトルの欄に下層ページのページ名になるタイトルを入力します。
企業情報やアクセス、会社沿革といった情報が入るページであれば「会社概要」や、事業内容やサービスのコンテンツが入るページであれば「事業内容」や「サービス」といったように、ページ名を入力しましょう。
メインタグの中身になるコードを貼り付けます
タイトル欄のコンテンツ入力エディター部分に先程、別に保存したメインタグの中身になるコードを貼り付けます。
スラッグを入力して、下層ページのURLを作成します
下層ページのULRを作成するため、今回作成すページのスラッグを決めていきます。HTMLでWEBサイトを作成する際、下層ページを作成する多くの場合は下層ページにHTMLを入れるフォルダを作成する事が多いと思われますので、このスラッグはフォルダ名を思ってもらると分かりやすいかもしれません。
また、HTMLのファイル名に下層ページの名前を付けている場合は、そのHTMLのファイル名がスラッグとして置き換えてもらえると分かりやすいでしょう。
以上の固定が終わりましたら、公開ボタンをクリックして、ページを公開します。
無事下層ページが表示されていたら、完成です。
次回はテンプレートファイルでの下層ページの作り方をご紹介していきます。
今回は、管理画面の固定ページから下層ページを作成する方法をご紹介しましたが、いかがだったでしょうか?
次回はpage.phpをカスタマイズして、テンプレートファイルから下層ページを作成する方法をご紹介して行きたいと思います。
前回の記事を確認したい場合は、以下のリンクからご確認下さい。
0から始めるWordPress自作テーマ作成【TOPページの表示とテンプレートタグ編】
この記事を書いた人
KNOWLEDGE BASEの中の人
2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。