ゼロから始めるWordPress自作テーマ #8「固定ページをつくろう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第８回は「固定ページをつくろう」です。
固定ページの表示は、ブログ投稿ページと同じように階層テンプレートに沿ってファイルを用意するだけです。
完成形
今回の完成形は以下のようになります。ヘッダーのリンクから、各固定ページに遷移して、固定ページの内容を表示させます。
今回の記事の完成形のソースコードは以下から取得できます。
固定ページの用意
まず、表示する固定ページをあらかじめ作成しておきます。
今回は、about , works , contacts という名前の３つのページを作ります。ページの設定で、パーマリンクのURLスラッグをそれぞれ about , works , contacts と指定しておきます。URLスラッグは、ページのURLになります。例えばURLスラッグを about と指定すると、その固定ページのURLが https://ouni.work/about になります。
ヘッダーからのリンクURLを指定
固定ページを用意したので、次にその固定ページへのリンクをヘッダーに用意します。
リンクを<a>タグで直接URLを指定しても構わないのですが、今回はサイトのホームURLから相対で指定するようにします。こうすることで、サイトのホームURLが変わっても正しいリンクを張ることができます。サイトのホームURLは、home_url取得できます。header.php を以下のように書き換えます。
<nav class="nav">
<ul class="nav-wrapper">
<li class="nav-item"><a href="<?php echo home_url('/about'); ?>">About</a></li>
<li class="nav-item"><a href="<?php echo home_url('/works'); ?>">Works</a></li>
<li class="nav-item"><a href="<?php echo home_url('/contact'); ?>">Contact</a></li>
</ul>
</nav>home_urlの詳細は以下から。
固定ページ表示用のファイルを作成
最後に、固定ページを表示するためのコードを書いていきます。階層テンプレートに沿うと、固定ページは以下の順で読み込まれます。
- page-$slug.php を読み込む
- ない場合は、page-$id.php を読み込む
- ない場合は、page.phpを読み込む
- ない場合は、singlar.phpを読み込む
- ない場合は、index.php を読み込む
特定の固定ページの表示をつくりたい場合は、page-$slug.php や page-$id.php を使います。今回は固定ページ共通の表示でOKなので page.php を作成します。page.phpのコードは、ブログ投稿ページとほとんど同じです。固定ページに不要な部分 （作成日・カテゴリ・アイキャッチ画像）を削除しています。
<?php get_header(); ?>
<main id="main-single">
<?php while (have_posts()) : ?>
<div id="content-single">
<!-- 投稿を取得 -->
<?php the_post(); ?>
<!-- タイトル -->
<h1 id=""><?php echo the_title(); ?></h1>
<!-- 中身 -->
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</main>
<?php get_footer(); ?>まとめ
今回は固定ページの表示部分を作成しました。階層テンプレートに沿って、作っていくやりかたのイメージが大分つかめてきたのではないでしょうか。
次回は、Contactページにコンタクトフォームをつくっていきます。