Web制作・プログラミング関連のおすすめレビュー記事はこちら

静的サイトをWordPress化する手順⑤（固定ページの作成）

Web制作

今回は固定ページの作成に移ります。

以下は想定しているサイトで「固定ページ」に設定すべき部分と、テンプレートファイルの対応です。

✔ トップページ（HOME）　　　　　→　　front-page.php　(※前回作成済み)

✔ 記事一覧ページ（NEWS）　　　　→　　home.php

✔ 会社概要ページ（ABOUT）　　　→　　about.php

✔ エントリーページ（ENTRY）　　→　　entry.php

ではWordPressの管理画面で順番に作成していきましょう。

WordPress管理画面での操作

ここからはWordPress管理画面での作業になります。

固定ページを作成した後に、各種テンプレートファイルを編集していきましょう。

固定ページの作成

まずは管理画面左側メニューの「固定ページ」から、「新規追加」と進んでください。

タイトルを入力する画面になるのでそれぞれ、ページのタイトルを設定していきます。

今回作る固定ページは先ほど確認した4種類です。今回のページタイトルはそれぞれ、

HOME、NEWS、ABOUT、ENTRYとしておきましょう。

ページタイトルを入力したら一度右上の「下書きとして保存」を押してください。

固定ページのタイトル以外は全て空で構いません。

タイトルを入力したら一度「下書きとして保存」する

その後、もう一度タイトル部分をクリックすると「パーマリンク」という項目が出てきて左の「編集」ボタンから編集できるようになります。

「編集」ボタンを押した状態

この記事の第2回でテンプレートタグを使って、サイト内リンクを設定したことを思い出してください。

トップページのリンクは<?php echo esc_url( home_url( '/' ) ); ?>で設定したので、デフォルトで表示されている、パーマリンクのhomeの部分は消して空白の状態で保存しましょう。

空白の状態で保存

同じ様に、NEWS、ABOUT、ENTRYも固定ページを作成しましょう。

ただNEWS、ABOUT、ENTRYページはパーマリンクを編集する必要はありません。

（第二回で設定したサイト内リンクとデフォルトで設定されるパーマリンクが一致しているため。）

これで固定ページが4種類できましたね。ここまでで固定ページの作成は終了です。

WordPressの設定を行う

まず管理画面の左側のメニューの「設定」から「表示設定」と進みます。

すると一番上に「ホームページの表示」という項目があるので、「固定ページ」にチェックを入れ、

ホームページ　→　HOME

投稿ページ　→　NEWS

と設定してください。

ここで設定したホームページにはfront-page.phpが適用され、投稿ページにはhome.phpが適用されるようになりました。詳しくは以下のテンプレート階層を参照しましょう。

参考：日本語版WordPressCodex
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

また、「1ページに表示する最大投稿数」という項目で、後ほど出てくるループの実行回数を指定できます。今回は10投稿と設定しておきます。

最終的に以下の画像の様になっていればOKです。

home.phpの編集

home.phpは記事一覧ページで適用されるテンプレートですね。

まずはこのファイルを編集していきます。

ループで投稿を取得する

WordPressで記事の情報を取得するには「ループ」と呼ばれるものを使います。

以下がループの基本形です。

 <?php while ( have_posts() ) : the_post(); ?>

条件を満たしたときに表示させるコンテンツ

<?php endwhile; ?>

上のコードの意味を簡単に説明するなら、

表示すべき投稿がある間、投稿情報を取得して表示の準備をする。といったところです。

表示の準備をしている段階なので、このままでは何も表示されません。

それではループ内にコードを書いて投稿を表示させ、投稿日やカテゴリーなどを動的に表示させてみましょう。

今回は以下の様にしてみました。

今回はCSSで予め装飾しているため、必要なクラスを入れた要素で各コードを覆っています。

（ここらへんのコードは人によって大きく変わります。自分のものと照らし合わせて必要な情報だけを抜き取って使用してください。）

home.php
<?php get_header();?>
  <main>
    <section class="page-ttl">
      <div class="inner">
        <h2><?php single_post_title(); ?></h2>
      </div>
    </section>
    <section class="news-index">
      <div class="inner">
        <div class="articles">
          <?php
          while ( have_posts() ) :
          the_post();
          ?>
            <a href="<?php the_permalink(); ?>">
              <article>
                <?php if (has_post_thumbnail()) : ?>
                  <?php the_post_thumbnail(); ?>
                <?php else : ?>
                  <img src="<?php echo get_theme_file_uri('/img/noimage.png'); ?>" alt="no-image" />
                <?php endif ; ?>
                <p class="category">
                  <?php $cats = get_the_category(); ?>
                  <?php echo $cats[0]->name; ?>
                </p>
                <p class="time"><?php the_time( "Y年n月j日" ); ?></p>
                <p class="blog-ttl"><?php the_title(); ?></p>
              </article>
            </a>
          <?php
          endwhile; 
          ?>
        </div>
      </div>
    </section>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>

急にたくさんのコードが出てきたので、一つづつ解説します。

①

<section class="page-ttl">
  <div class="inner">
    <h2><?php single_post_title(); ?></h2>
  </div>
</section>

ここでは<?php single_post_title(); ?>で現在の固定ページのタイトルが出力されます。

今回の場合、home.phpは固定ページNEWSに適用されるので、ここも"NEWS"という文字列が出力されますね。

②

<a href="<?php the_permalink(); ?>">
省略
</a>

<?php the_permalink(); ?>はループ内で取得した投稿へのパーマリンクのURLを表示します。今回のコードでは、aタグのリンク先として設定し、記事全体を囲っています。

③

<?php if (has_post_thumbnail()) : ?>
  <?php the_post_thumbnail(); ?>
<?php else : ?>
  <img src="<?php echo get_theme_file_uri('/img/noimage.png'); ?>" alt="no-image" />
<?php endif ; ?>

ここではif文を使った条件分岐で、アイキャッチ画像がある場合は表示、ない場合は自分で設定したデフォルト画像を表示させています。

（※functions.php内でアイキャッチを有効化しておかないと、アイキャッチ画像は設定できません。）

④

<p class="category">
  <?php $cats = get_the_category(); ?>
  <?php echo $cats[0]->name; ?>
</p>
<p class="time"><?php the_time( "Y年n月j日" ); ?></p>
<p class="blog-ttl"><?php the_title(); ?></p>

まず、<?php $cat = get_the_category(); ?>で取得した投稿が属するカテゴリーを配列形式で変数$catsに代入しています。（一つの投稿が複数のカテゴリーに属する可能性があるため配列形式です。）

その次の、<?php echo $cats[0]->name; ?>で変数$catsに入っているカテゴリー配列の一番最初のカテゴリーの名前を出力しています。（[0]で一番最初を指定。）

<?php the_time( 'Y年n月j日' ); ?>では取得した投稿の公開日時を引数に指定した形式で出力しています。

<?php the_title(); ?>では取得した投稿のタイトルを出力しています。

これでループによる投稿の取得は完了です。

ページネーションを設置する

今回の記事一覧ページのような場合にページネーションを設置するには、

<?php the_posts_navigation(); ?>を使います。

引数にボタンへ入れるテキストを配列形式で指定できます。以下のような形ですね。

<?php the_posts_navigation(array(     'prev_text'           => '次のページへ',
    'next_text'           => '前のページへ',
  ) ); 
?>

このコードで自動的に出力されるHTMLコードは以下です。

クラスが標準でついているので、クラス指定でCSSを書くことで見た目をカスタマイズできます。

また表示すべきページがない場合は、自動的にボタンも非表示になります。

<nav class="navigation posts-navigation" role="navigation" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <div class="nav-previous">
      <a href="http://localhost/minimalist/page/3/">過去の投稿</a>
    </div>
    <div class="nav-next">
      <a href="http://localhost/minimalist/">新しい投稿</a>
    </div>
  </div>
</nav>

<h2 class="screen-leader-text"></h2>は通常は表示しないので、今回は非表示にします。

✔スクリーンリーダーテキストとは

スクリーンリーダーというWebサイトを音声で読み上げてくれる機能のためのテキストです。

単純にdisplay: none;で非表示にすると、読み上げもされなくなるので以下の特殊な方法で非表示にするそうです。

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

参考：https://thewppress.com/libraries/display-next-and-prev-page-links-on-the-list/

最終的にhome.phpは以下のようになりました。

home.php
<?php get_header();?>
  <main>
    <section class="page-ttl">
      <div class="inner">
        <h2><?php single_post_title(); ?></h2>
      </div>
    </section>
    <section class="news-index">
      <div class="inner">
        <div class="articles">
          <?php
          while ( have_posts() ) :
          the_post();
          ?>
            <a href="<?php the_permalink(); ?>">
              <article>
                <?php if (has_post_thumbnail()) : ?>
                  <?php the_post_thumbnail(); ?>
                <?php else : ?>
                  <img src="<?php echo get_theme_file_uri('/img/noimage.png'); ?>" alt="no-image" />
                <?php endif ; ?>
                <p class="category">
                  <?php $cats = get_the_category(); ?>
                  <?php echo $cats[0]->name; ?>
                </p>
                <p class="time"><?php the_time( "Y年n月j日" ); ?></p>
                <p class="blog-ttl"><?php the_title(); ?></p>
              </article>
            </a>
          <?php
          endwhile; 
          ?>
        </div>
      </div>
    </section>
    <?php 
      the_posts_navigation(array(
        'prev_text'           => '次のページへ',
        'next_text'           => '前のページへ',
      ) ); 
    ?>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>

about.phpとentry.phpの編集

次はabout.phpとentry.phpの編集です。このファイルはまだ名前を変えただけで、テンプレートファイルとしては機能しません。

まずは、これをテンプレートファイルとしてWordPress側に認識させる必要があります。

どうするかというと、ファイルの最初に以下の様に記述します。

about.php
<?php /* Template Name:about   */ ?>
<?php get_header(); ?>
<main>
省略
</main>
<?php get_footer();?>
entry.php
<?php /* Template Name:entry  */ ?>
<?php get_header(); ?>
<main>
省略
</main>
<?php get_footer();?>

Template Name: 〇〇（任意の名前でOK）の部分でテンプレートの名前を決めます。

たったこれだけでテンプレートファイルとして認識されます。

これが第一回で説明したカスタムテンプレートというわけです。

では管理画面側で確認してみましょう。

左側のメニューバーから固定ページの編集画面に移ってください。

そうすると、右下のページ属性の欄からテンプレートを選択できるようになっているはずです。

固定ページの編集画面

ここまでの作業でテンプレートファイルとして適用させることができるようになりました。

ABOUTページには先ほど認識させた"about"のテンプレート、ENTRYページには"entry"のテンプレートを適用させてみましょう。

この記事ではabout.phpやentry.phpの詳しいファイル内容の編集までは行いません。

(お問い合わせフォームに関してはプラグインで実装するので最後の記事でまとめます。)

個人差が大きすぎるため、動的に出力すべき部分を見極め自分で書き換えてみましょう。

今回はここまでです。続きは次の記事で行います。

タイトルとURLをコピーしました