読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

WordPressのテーマ作成の手引き(2) | 固定ページテンプレートを作成する

f:id:mochizuki_p:20170208204249p:plain

固定ページ

WordPressでは通常のブログ投稿とは別に固定ページと呼ばれる投稿タイプを指定することができます。

これはサイトの概要説明や、サイトオーナーの自己紹介など、ブログ記事とは区別される独立した内容を記述するためのものです。

WordPressで個別ページを作成するための通常のテンプレートファイルとなるのはpage.phpです。

固定ページは通常の投稿用ページとは区別されるものではありますが、ページの内容を出力するために使用する関数は共通です。

したがって前編で説明した。一連の関数を利用します。

/* ページのタイトルの出力 */
<?php the_title(); ?>
/* ページの投稿内容の出力 (while(have_posts()): the_post();の内部で有効)*/
<?php the_content(); ?>

では実際にpage.phpを追加してみようと思います。

まずsingle.phpをコピーしてpage.phpを作成します。

page.php

固定ページでは、前後の記事へのリンクや投稿日は必要ないので削除します。

<?php
/**
 *    The template for dispalying the index.
 *
 * @package    WordPress
 * @subpackage BBB

 */
?>
<html>
  <head>
    <?php wp_head(); ?>
  </head>
  <body>
    <div class="container">
      <div class="row" data-id="11">
        <h1><?php the_title(); ?></h1>
        <?php if(have_posts()): ?>
          <?php while(have_posts()): the_post(); ?>
            <div><?php the_content(); ?></div>
          <?php endwhile; ?>
        <?php endif; ?>
      </div>
    </div>
   <?php wp_footer(); ?>
  </body>
</html>

このファイルをオリジナルテーマに追加します。するとディレクトリ構成は以下のようになるはずです。

  • style.css
  • index.php
  • single.php
  • page.php
  • screenshot.png

これを前編と同じようにフォルダごとzip圧縮してWordPressにアップロードします。

この一連の操作によって、記事とは別のテンプレートを利用して固定ページを投稿できるようになりました。

メニューの「固定ページ」から固定ページの追加が可能です。

f:id:mochizuki_p:20170210221333p:plain

固定ページの投稿は通常の記事と同じような投稿画面を利用します。

f:id:mochizuki_p:20170210221428p:plain

記事の編集が完了したら画面の右側にある「公開」をクリックして投稿することができます。

f:id:mochizuki_p:20170210221541p:plain

公開した固定ページは投稿画面で表示されていたパーマリンクをブラウザに入力することでアクセスすることが可能です。

f:id:mochizuki_p:20170210221856p:plain

実際にアクセスをしてみましょう

f:id:mochizuki_p:20170210222335p:plain

このように通常のsingle.phpを利用して作成される通常の記事投稿とは違ったレイアウトで表示され、投稿日や前後の記事へのリンクがないことがわかります。

前の記事はこちら

www.utali.io

続く