ワードプレス固定ページ【テーマ オリジナル】

2020年1月22日 (更新日:2020年4月15日)

ワードプレス固定ページ【テーマ オリジナル】:ワードプレス固定ページ【テーマ オリジナ...


ワードプレス固定ページ【テーマ オリジナル】

ワードプレスでは頻繁に更新する記事ページと頻繁に更新しないけれど大事な情報が入っている固定ページが用意されています。
固定ページはプロフィールとかお問い合わせとかのページとして使用します。
まず、固定ページの基本を作ってみます。
固定ページは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をいじってると色々応用をやりたくなります。