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

下層ページの種類

TOPページは完成しました。
続いては下層ページを作っていきたいのですが、下層ページは2つの種類あります。固定ページと投稿ページです。

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

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

固定ページの作成

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

▼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();

▼解説
以下のような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>

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


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

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;
  }
}

wp管理画面左ナビから、固定ページをクリック。すでに入っている「プライバシーポリシー」ページで確認しましょう。

右上の歯車をクリックすると、メニューが出ます。固定ページの属性の「テンプレート:」メニューでpage.phpの丈夫に記述したTemplate Name: テンプレート名が選べるようになっています。
固定ページという名前をつけたので、固定ページを選択し公開します。
※固定ページのテンプレートはディフォルトでpage.phpが選択されるのでテンプレート数が少ないときは選択しなくても自動で表示されます。

このように下層ページでは、テンプレートを作成し、コンテンツ内容を管理画面内で登録していきます。

投稿ページの作成

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

▼ 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();

▼解説
これらはwordpressでつくられている独自関数


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

投稿ページ用に新たなクラスを追加したので、下記の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ページ	固定ページ	投稿ページ	その他ページ
1(最初に表示)	front-page.php	page-スラッグ名.php	single-{post_type}.php	search.php archive.php author.phpなど
2	home.php	page-ID.php	single-{post_type}.php
3	home.php	page.php	single.php
4(最後に表示)	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つの記事を登録公開（カテゴリを[Instagram]に）

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（バックエンド中級）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

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

下層ページの種類

固定ページの作成

投稿ページの作成

テンプレート読み込み順

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

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

管理画面 > 投稿から新規で4つの記事を登録公開（カテゴリを[Instagram]に）

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（バックエンド 中級）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

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

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

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

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

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

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

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

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

実践3（バックエンド中級）