テーマ制作【基礎４】「固定ページのテンプレートを作る」

固定ページのテンプレートを作る

company.htmlをコピーして、page.phpにリネームします。

ヘッダーとフッター部分を削除し、代わりにテンプレートを読み込みます。

<div class="main">〜</div>の中身は不要なので削除します。

このとき、h2タグだけは必要なので残します。

代わりに、固定ページの内容を読み込むためのコードを記述しましょう。

<?php get_header(); ?>

	<!--メインここから-->
	<div class="main">
	<?php if (have_posts()) : ?>
		<?php the_post(); ?>
		<h2><?php the_title(); ?></h2>
	<?php the_content(); ?>
	<?php endif; ?>
	</div>
	<!--メインここまで--> 

<?php get_footer(); ?>

記事があるかどうかを判別するコードがこちらです。

<?php if (have_posts()) : //もし記事が存在したならば ?> 
	<?php the_post(); //記事の情報を取得 ?>
	<!-- ここに表示部分が入ります。-->
<?php endif; ?>

※記事があれば、記事内容を表示しますが、記事がなければ何も表示しません。

記事のタイトルを読み込むコードがこちらです。

<?php the_title(); ?>

記事の内容を読み込むコードがこちら。

<?php the_content(); ?>

固定ページをWordPressの管理画面で作成する

次のhtmlファイルの内容を固定ページとして作成しましょう。

h2タグの内容をページタイトルに、それ以外の内容を本文に入れます。

header.phpのリンクを修正

header.phpのグローバルナビゲーションのリンクを修正します。

「company.html」を「company/」に「contact.html」を「contact/」に変えます。

  <ul class="nav">
    <li><a href="<?php echo home_url(); ?>">ホーム</a></li>
    <li><a href="<?php echo home_url(); ?>/news.html">ニュース</a></li>
    <li><a href="<?php echo home_url(); ?>/fruit.html">フルーツ</a></li>
    <li><a href="<?php echo home_url(); ?>/flower.html">フラワー</a></li>
    <li><a href="<?php echo home_url(); ?>/company/">店舗情報</a></li>
    <li><a href="<?php echo home_url(); ?>/contact/">お問い合わせ</a></li>
  </ul>

上書き保存したら、リンクをクリックしたら固定ページに飛ぶか確認してみましょう。

コピーできました！