この章で学ぶこと。

DAY.2では、ニュースの記事を、表示させることができました。また、sidebarを組み込むことで、ウィジェットを利用することが可能になりました。こちらの講座は、DAY.2の続きです。必ずDAY.1、DAY.2の内容を終えてから進めてくださいね。▶︎ DAY.2は、こちらから

テンプレートを追加する

この章では、WordPressテーマに、さらに新しいテンプレートファイルを追加します。今回追加するファイルは、「固定ページ」に使用するpage.phpというテンプレートです。

page.phpを作成する

page.phpコード

<?php get_header(); ?>

<div class="site-container">
  <div class="wrap">
    <div class="content">
		
		
      <div class="main">
		  
        <?php if ( have_posts() ) : ?>
          <?php while ( have_posts() ) : the_post(); ?>

            <article class="page-article">
              <h1><?php the_title(); ?></h1>
              <?php the_content(); ?>
            </article>

          <?php endwhile; ?>
        <?php endif; ?>

      </div>

    </div>
  </div>
</div>

<?php get_footer(); ?>

固定ページの作成

グローバルメニューにある「会社概要・業務案内・お問い合わせ」などのページは、更新頻度が少なく固定されたコンテンツなので、管理画面の「固定ページ」から追加していきます。

今回は、グローバルメニューにはない「メッセージ」「制作実績」「コンセプト」というページも含め合計6枚の固定ページを作成します。

但し、「お問い合わせ」のページは、プラグインを使って表示させますので、ページ本文は空白のままで構いません。

ダミー記事のデータ+素材を用意していますので、宜しければお使いください。DL▶︎ 固定ページ素材

スラッグ

投稿と同じく固定ページにも、「スラッグ」を設定する項目があります。スラッグは、URLの一部になる文字列になるので、基本的に半角英数字で入力しておきましょう。

メニューを作成する

固定ページができたら、メニュー(グローバルメニュー)を作成していきます。HTMLコードで作成していたメニューを、ワードプレスでは、テンプレートで管理ができるようになります。header.phpのnavエリアを見てみましょう。HTMLでは、以下のような記述になっている部分を書き換えます。

      <nav>
       <ul class="nav">
          <li><a href="#">HOME</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">業務案内</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>

メニュー設定

外観▶︎ メニューを参照します。

「メニュー名」には「gnav」と入力し、左側の「メニュー項目を追加」から、「固定ページ」を選択します。固定ページには、先ほど追加したページが並んでいますので「HOME」「会社概要」「業務案内」「お問い合わせ」をドラッグしてメニューに追加します。並び順も、簡単に変更することができます。メニュー設定の箇所にあるメニューの位置「グローバルメニュー」にチェックを入れましょう。

テンプレートタグ(ナビゲーション)

header.phpに記述されているナビゲーションの部分を、テンプレートタグに書き換えます。ナビゲーションにメニューが反映し、リンク先は固定ページが表示されます。

     <nav>
   <?php
    wp_nav_menu( array(
      'theme_location' => 'global',//「global」に割り当てる。
      'container'      => false,//余分な包囲はしない。
      'menu_class'     => 'nav',//クラス名navを付加。
    ) );
  ?>
      </nav>

お問い合わせのページ

お問い合わせページには、本文は入力せず、プラグインを使ってフォームを表示します。今回は、WordPressでよく使われる Contact Form 7 というプラグインを使用します。

プラグインを追加する

Contact Form 7の導入

プラグイン ▶︎「プラグインを追加」を参照します。「プラグインの検索」に「Contact Form 7」と入力しインストール後「有効」に設定します。有効にするとサイドに「お問い合わせ」という項目が増えます。