https://junpei-sugiyama.com/wordpress-original-theme-4/
固定ページの作り方は2つあります。
- テンプレートをページごとに作成(page-〇〇.php)
- 固定ページの編集画面でテキストエディタに直書き(page.php)
このどちらかになります。
管理画面の固定ページから各ページを新規追加するのは共通です。
テンプレートをページごとに作成
この場合は固定ページの数だけ『page-〇〇.php』というテンプレートを作る必要があります。
例えば『会社概要・お問い合わせ・採用情報』の3ページであれば、
- page-company.php
- page-contact.php
- page-recruit.php
という感じになります(〇〇の部分は任意です)
コンテンツ(HTMLに書いたコード)は各テンプレートに書きます。
固定ページ → 新規追加で作成したページには何も書きません。
固定ページの編集画面でテキストエディタに直書き
この場合テンプレートは『page.php』の1つだけで大丈夫です。
こちらは『固定ページ → 新規追加』で作成したページに、それぞれのコンテンツを書きます。
HTMLのコードをそのままコピペに近いです。
どちらの方法で作るか?
ページごとにテンプレート作成
・テンプレート(phpファイル)にコードを書く
・固定ページの編集画面には何も書かない
OR
固定ページの編集画面に直書き
・テンプレート(phpファイル)には書かない(※)
・固定ページの編集画面にコードを書く(HTMLをコピペ)
※ テンプレートには書かないと書きましたが、固定ページの編集画面に書いたコードを呼び出すコードやヘッダー、フッターなどの共通部分を読み込むコードは書きます(コンテンツは書かないという意味です)
どちらの方法で作るかは人によって違うと思いますが、前者のページごとにテンプレートを作成した方が修正がしやすいので、私は特に指定がない限りこの方法で作成しています(『こちらの方法で』など指定されたことはありません)
後者の場合、固定ページ編集画面のテキストエディタにコードをコピペするのですが、後から編集しようとすると非常に見にくいです(やってみると分かると思います)
という事で、ページごとにテンプレートを作成する方法を中心に解説していきます。
固定ページの作り方①:ページごとにテンプレートを作成
まずは管理画面左側の『固定ページ → 新規追加』をクリックします。
WordPress管理画面:固定ページ → 新規追加
すると次のような画面になるので、名前は何でも構いませんが今回は『HOME』とタイトルを付けて右の方にある『公開』ボタンをクリックします(プラグインのClassic Editorを適用しています)
WordPress固定ページ編集画面:タイトル入力
タイトルの下の方にある中身(ビジュアルエディタ、テキストエディタ)は何も書かなくて大丈夫です。
これがトップページになります。
ついでに記事一覧ページ用に『BLOG』という固定ページも同様に作っておきます。
これでこの状態になります。
WordPress管理画面:固定ページ2つ作成
そしてトップページを『HOME』、記事一覧ページを『BLOG』とするために、管理画面左側の『設定 → 表示設定』を開きます。
WordPress管理画面:設定 → 表示設定
次にホームページの表示を『最新の投稿』ではなく『固定ページ』を選択して、以下のように設定します。
- ホームページ → HOME
- 投稿ページ → BLOG
WordPress管理画面:表示設定
ちなみに今回トップページである『HOME』はfront-page.phpで、記事一覧ページである『BLOG』はhome.phpとなります(home.phpがない場合はindex.phpが記事一覧となります)
あとは1ページに表示したい最大投稿数も設定しておきます。
最大投稿数はテンプレート側で設定することも可能で、その場合はページネーションの関係で1にしておいた方がいいです(ちょっと難しい話なので一旦後回しでOKです)
また、ローカル環境では検索エンジンは関係ありませんが、テストサーバーにアップした時は『検索エンジンがサイトをインデックスしないようにする』にチェックを入れた方がいいので、ここでチェックを入れてしまってもOKです。
本番サーバーに移行して公開する時にはチェックを外すのを忘れないようにしましょう!
注意ポイント
検索エンジンでの表示にチェックを入れないと、サーバーにアップした時点でサイトが公開されてしまいます。
ここまで設定が出来たら下の『変更を保存』をクリックします。
そしてもう一度固定ページ一覧を見ると『HOME』がフロントページ、『BLOG』が投稿ページに設定されたのが分かります。
WordPress固定ページ:フロントページと投稿ページ設定完了
各固定ページのテンプレートを作成
次は固定ページのテンプレートを作成します。
これはページの数だけ必要になります。
最初の方でも書きましたが、例えば『会社概要・お問い合わせ・採用情報』の3ページあれば以下のようになります。
- page-company.php
- page-contact.php
- page-recruit.php
前回トップページ編ではトップページはこのようになりました。
<?php get_header(); ?>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<?php get_footer(); ?>
固定ページも同様にHTMLをまるっとコピペした後『header.php』と『footer.php』の部分は削除して、ヘッダーとフッターを読み込みます。
ただし、上記トップページ(front-page.php)とは異なる点があります。
固定ページ(page-◯◯.php)ではこのようになります(会社概要の場合)
<?php
/*
Template Name: 会社概要
*/
get_header();
?>
<main>
<h1>大見出し</h1>
<section>
<h2>コンセプト</h2>
<div>
<img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
</div>
<p>文章が入ります</p>
</section>
</main>
<?php get_footer(); ?>
ヘッダーを読み込む所に『Template Name』があります。
これはテンプレートの名前を設定する所で、上記は会社概要ページなので『会社概要』と名付けました(これは『page-company.php』です)
これで管理画面の固定ページ編集画面から『会社概要』というテンプレートを選択できる様になりました。
同様に『お問い合わせ』『採用情報』を作ります。
また記事一覧は『home.php』で作りましたが、これは『Template Name』は書かなくてOKです(page-◯◯.phpではないので)
記事一覧ページの作り方は以下の記事を参照下さい。