ワードプレス固定ページ【テーマ オリジナル】
ワードプレスでは頻繁に更新する記事ページと頻繁に更新しないけれど大事な情報が入っている固定ページが用意されています。
固定ページはプロフィールとかお問い合わせとかのページとして使用します。
まず、固定ページの基本を作ってみます。
固定ページはpage.phpというファイルを参照します。名前が決まっています。
その名前のファイルがない場合はindex.phpを参照するように作られています。
予めpage.htmlを用意しておきます。
内容は以下になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<!-- header + nav -->
<header class="clearfix">
<h1>ページタイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<!-- header + nav -->
<!-- main -->
<main class="page-wrap clearfix">
<aside>
<section>
<h3>項目</h3>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</section>
</aside>
<div>
<h3>固定ページタイトル</h3>
<figure class="thumbnail">
<img src="#" alt="">
</figure>
<p>日付</p>
<p>カテゴリー</p>
<p>本文</p>
</div>
</main>
<!-- main -->
<!-- footer -->
<footer>
<p>フッター</p>
</footer>
<!-- footer -->
</body>
</html>
これをベースにしてphpファイルを作ります。
新規でpage.phpを作ります。保存。
他のページ同様<?php get_header(); ?>と<?php get_footer(); ?>をまず前後に置きます。
そして予め作っておいたpage.htmlの中からmainタグの中をそっくりpage.phpにコピペします。
次にasideタグの中を<?php get_sidebar(); ?>に差替え、
h3タグ内の固定ページタイトルを<?php the_title(); ?>に差替え、
figureタグの中のimgタグを<?php the_post_thumbnail(); ?>に差替え、
日付を<?php the_date(); ?>に差替え、
pタグ含めたカテゴリーを<?php the_category(); ?>に差替え、
pタグ含めた本文を<?php the_content(); ?>に差替え、
タイトルから本文までをループのテンプレートタグで括ります。
最終的なpage.phpの中身は以下になります。
<?php get_header(); ?>
<!-- main -->
<main class="page-wrap clearfix">
<aside>
<?php get_sidebar(); ?>
</aside>
<div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<figure class="thumbnail">
<?php the_post_thumbnail(); ?>
</figure>
<p><?php the_date(); ?></p>
<?php the_category(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?> <p>コンテンツがありません</p>
<?php endif; ?>
</div>
</main>
<!-- main -->
<?php get_footer(); ?>
cssも追加します。
以下です。
/*固定ページ*/
.page-wrap div{
width: 70%;
float: left;
}
.page-wrap h3{
font-size: 34px;
padding-bottom:20px;
}
/*固定ページ*/
これで準備ができました。
管理画面から「固定ページ」にクリックすると既にサンプルページが作られています。
メニューにこの固定ページを追加しておきます。
サイトを表示してみます。
上部メニューからサンプルページをクリックしてみます。
固定ページが表示出来ました。
次回はこれを応用してワードプレスの固定ページのオリジナルページを作ってみます。
独学ではありますがphpをいじってると色々応用をやりたくなります。