#6 Wordpressでサイトの下層ページを作る

下層ページの種類

TOPページは完成しました。続いては下層ページを作って見ましょう。
下層ページとはTOPページと頂点として、それ以降にリンクされているページのことです。

下層ページは2つの種類あります。固定ページと投稿ページです。

固定ページ	第2下層ページで、あまり変化のないLPや固定のページを作る際に使用します。
投稿ページ	カテゴリーページとリンクしており、RSSなどの配信に対応できるので投稿日などの時間を使うコンテンツページなどに使用します。

固定ページは、これまでまで作っていたような静的なhtmlページの作成、投稿ページはblogやニュースなどのページを作るイメージで良いと思います。
コーポレート・ブランドサイトのようなものは固定ページを主に使い、blog・アフィリエイトなど記事を集めたページは投稿ページを主に使うことになります。

固定ページの作成

固定ページはpage.phpという名前のテンプレートファイルを自動で読み込みます。


<?php
/**
 * Template Name: 固定ページ
 */

get_header(); ?>

<div id="contents_wrap">
<main id="main" class="site-main" role="main">

  <?php if(have_posts()): while(have_posts()) : the_post(); ?>
    <h1><?php the_title();?></h1>
    <?php the_content(); ?>
  <?php endwhile; endif; ?>
</main>
  <?php get_sidebar(); ?>
</div>

<?php
get_footer();

page.phpとして保存します。

▼解説
if文などのphpの構文をhtml内で書きたいとき、phpのコードを分割してhtml内に記述する書き方です。


if(have_posts()){
  while(have_posts()){
    the_post();
  }
}

↓


<body>
<main>
<?php if(have_posts()): while(have_posts()) : the_post(); ?> /*もしpostが存在すれば、あるだけ出力する*/
  あいうえお
<?php endwhile; endif; ?>
</main>


have_posts()    /*記事があればtrueを返す*/
the_post()      /*特定の投稿の情報を取得*/
the_title()     /*タイトルを表示*/
the_content()   /*コンテンツ表示*/
get_sidebar()   /*サイドバーを表示*/

これらはwordpressでつくられている独自関数です。
wordpressの独自関数はたくさんあるので、表示したい内容があれば、都度調べてみましょう。
wordpressの独自関数リファレンス

固定ページ用に新たなクラスを追加したので、下記のcssを、css/style.cssに記述します。


/*wp下層ページ追加分*/
#contents_wrap{
  width:95%;
  margin:20px auto 0;
}
#contents_wrap h1{
  margin-bottom:20px;
  color:#666;
  font:bold 2em/2 sans-serif;
}
#contents_wrap h2{
  color:#cc0;
  font:bold 1.5em/2 sans-serif;
}
#contents_wrap h3{
  color:#999;
  font:normal 1.2em/2 sans-serif;
  border-bottom: 1px dotted #ccc;
}
#contents_wrap main{
  padding:10px;
  font:normal 1.2em/2 sans-serif;
}
#contents_wrap #sidebar h2{
  color:#cc0;
  font:normal 1.3em/1.3 sans-serif;
  margin-top:20px;
}
@media screen and (min-width:980px){
/*wp下層ページ追加分*/
  #contents_wrap{
    width:1024px;
    display:flex;
  }
  #contents_wrap main{
    flex:4;
    margin-right:50px;
  }
  #contents_wrap #sidebar{
    flex:1;
  }
}

固定ページという名前をつけたので、固定ページを選択します。
このように下層ページでは、テンプレートを作成し、コンテンツ内容を管理画面内で登録していきます。

投稿ページの作成

投稿ページのテンプレートはsingle.phpという名前になります。


<?php
/**
 * Template Name: 投稿ページ
 */

get_header(); ?>

<div id="contents_wrap">
<main id="main" class="site-main" role="main">

  <?php if(have_posts()): while(have_posts()) : the_post(); ?>
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
    <span class="category"><?php the_category(', '); ?></span>
    <div class="content"><?php the_content(); ?></dov>
  <?php endwhile; endif; ?>
</main>
	<?php get_sidebar(); ?>
</div>

<?php
do_action( 'storefront_sidebar' );
get_footer();

single.phpとして保存します。


the_permalink()     /*パーマリンクを表示*/
the_time('Y-m-d')   /*日時を表示*/
the_category(', ')  /*投稿のカテゴリーをコンマ区切りで表示*/

これらはwordpressでつくられている独自関数です。

投稿ページ用に新たなクラスを追加したので、下記のcssを、css/style.cssに記述します。


@media screen and (min-width:980px){
  /*wp投稿ページ追加分*/
  #contents_wrap h1 a{
    color:#666;
    font:bold 1.2em/1.5 sans-serif;
  }
  #contents_wrap time{
    font:normal 1.1em/2 serif;
  }
  #contents_wrap .category{
    display:inline-block;
    padding:0px 20px;
    border: 1px solid #ccc;
  }
  #contents_wrap .content{
    margin:20px 0;
  }
}

投稿ページのサンプルページを表示させてみましょう。

テンプレート読み込み順

TOPページ、固定ページ、投稿ページ、その他ページのテンプレートは優先順位が決まっており、順位順に該当するファイルを探し、最初に存在したテンプレートで表示させます。

優先順位	TOPページ	固定ページ	投稿ページ	その他ページ
①	front-page.php	page-スラッグ名.php	single-{post_type}.php	search.php archive.php author.phpなど
②	home.php	page-ID.php	single-{post_type}.php
③	home.php	page.php	single.php
④	index.php

テンプレートは、優先順位の①から読み込まれていき、①のファイルがない場合は②に進みそれでも無ければ...と進み、最後は④で表示されます。
※逆に固定も投稿も同じテンプレートで良ければ、index.phpのみ用意すればよいでしょう。

フロントページのテンプレートを変更する

index.phpをフロントページとして利用していましたが、front-page.phpに変更します。
index.phpを、front-page.phpに名称変更（リネーム）するだけです。

各テンプレートにおける最も優先順位が低いテンプレートとしてindex.phpを設定したいので、 single.phpを複製して、index.phpとリネームしておきます。

#7 固定ページにNEWS投稿を読み込む

手順としてはこのような感じです。

管理画面 > 投稿から新規で4つの記事を登録公開（カテゴリを[Instagram]に）
functions.phpで表示設定（画像の表示とTOPへの表示）
TOPページで表示させるための部品としてのnews.php作成
front-page.phpにショートコードを記述

管理画面 > 投稿から新規で4つの記事を登録公開

カテゴリを[Instagram]にします。
記事の作成方法は簡単です。タイトルをnews01にし、次のブロックで画像を選択しアップロードします。カテゴリは「Instagram」にし、登録する全ての記事カテゴリをInstagramにします。
画像をダウンロード

functions.phpで表示設定（画像の表示とTOPへの表示）


<?php
/**
 * restaurant
 */

/* ①投稿記事ひとつひとつのページの最初の画像のパスを取得 */
function first_image() {
  global $post, $posts;
  $first_img = '';

  preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)){
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

/* ②TOPページにcollectionカテゴリの画像を表示する */
function Include_php($params = array()) {
  include(get_theme_root() . '/' . get_template() . "/news.php"); /* news.phpのパスを指定する */
}
add_shortcode('top_instagram', 'Include_php');
/* ↑ページ内に[top_instagram]というショートコードがあればInclude_php関数を実行する */

▼解説

① 正規表現によるマッチング
preg_match_all(パターン, 検索対象の文字列, 結果を入れる多次元配列変数)


  preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

記事内で画像がなかったときのためのデフォルト画像を指定


  if(empty($first_img)){
      $first_img = "/images/default.jpg"; /* ←画像は時間があるときに設定してみましょう*/
  }

② テンプレート読み込むためのアドレスを、wpコードで書くとこうなる


  include(get_theme_root() . '/' . get_template() . "/news.php");

add_shortcode( ショートコードタグ , ショートコードが見つかったときに実行するコールバック関数 );


  add_shortcode('top_instagram', 'Include_php');

TOPページで表示させるための部品としてのnews.php作成

ページ表示用テンプレートと同じ考え方ですが、今回はページとしての利用ではなく、TOPページ（front-page.php）へ埋め込みます。


<?php
/**
 * Template Name: instagram
 */
?>
<!--news.php-->
<div id="top_instagram">
<ul class="instagram_list">
<?php $posts = get_posts('numberposts=4 & category=4'); global $post; ?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <li>
    <a href="<?php echo get_permalink(); ?>">
      <div class="instagram_img">
        <img src="<?php echo first_image(); ?>" alt="<?php the_title(); ?>">
      </div>
    </a>
  </li>
<?php endforeach; endif; ?>
</ul>
</div>

▼解説


/* get_posts(numberposts=表示させる記事数 & category=カテゴリーID) */
<?php $posts = get_posts('numberposts=4 & category=4'); global $post; ?>

/* postがあれば、foreachで配列全てをループ */
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>

  <li>
    <a href="<?php echo get_permalink(); ?>">
      <div class="instagram_img">

        /* first_image(); はfunctions.phpで設定した、最初の画像を取得する独自関数 */
        <img src="<?php echo first_image(); ?>" alt="<?php the_title(); ?>">

      </div>
    </a>
  </li>
<?php endforeach; endif; ?>

get_posts関数で指定している「カテゴリーID」は4になっていますが、カテゴリを一度削除し作り直したりすると番号が新しく発行されます。

アドレスの赤い部分からカテゴリーIDを見つけて設定します。

front-page.phpにショートコードを記述

front-page.php内に以下の内容がありますが、


<ul class="instagram_list">
  <li>
    <a href="<?php echo get_permalink(0); ?>">
      <div class="instagram_img">
        <img alt="" src="<?php echo get_template_directory_uri(); ?>/img/news01.jpg">
      </div>
    </a>
  </li>
  ︙
  ︙
</ul>

↓


<?php echo do_shortcode('[top_instagram]'); ?>

上記ulタグを、news.php内でforeachした（「投稿」でInstagramカテゴリにした）記事を front-page.phpで表示させるため、wpタグに変更します。

見た目は同じですが、写真はプログラミングで表示されています。
試しに4枚目の投稿をして挙動を確認してみましょう。

また、ショートコード [top_instagram] が直接画面に表示されている場合は以下のとこを確認してみましょう

各関数名を打ち間違えていないか
functions.phpファイル名がfunction.phpと、最後のsがない

#6 Wordpressでサイトの下層ページを作る

下層ページの種類

固定ページの作成

投稿ページの作成

テンプレート読み込み順

フロントページのテンプレートを変更する

#7 固定ページにNEWS投稿を読み込む

管理画面 > 投稿から新規で4つの記事を登録公開

functions.phpで表示設定（画像の表示とTOPへの表示）

TOPページで表示させるための部品としてのnews.php作成

front-page.phpにショートコードを記述

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア中級5）

実践3（バックエンド Laravel）

実践4（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

#6 Wordpressでサイトの下層ページを作る

下層ページの種類

固定ページの作成

投稿ページの作成

テンプレート読み込み順

フロントページのテンプレートを変更する

#7 固定ページにNEWS投稿を読み込む

管理画面 > 投稿から新規で4つの記事を登録公開

functions.phpで表示設定（画像の表示とTOPへの表示）

TOPページで表示させるための部品としてのnews.php作成

front-page.phpにショートコードを記述

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 中級5）

実践3（バックエンド Laravel）

実践4（バックエンド Java）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア中級5）