#6 Wordpressでサイトの下層ページを作る
下層ページの種類
TOPページは完成しました。続いては下層ページを作って見ましょう。下層ページとはTOPページと頂点として、それ以降にリンクされているページのことです。
下層ページは2つの種類あります。 固定ページ と 投稿ページ です。
固定ページ | 第2下層ページで、あまり変化のないLPや固定のページを作る際に使用します。 |
投稿ページ | カテゴリーページとリンクしており、RSSなどの配信に対応できるので投稿日などの時間を使うコンテンツページなどに使用します。 |
コーポレート・ブランドサイトのようなものは固定ページを主に使い、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;
}
}


固定ページの属性という部分でpage.phpの上部に記述したTemplate Name: テンプレート名が選べるようになっています。
このように下層ページでは、テンプレートを作成し、コンテンツ内容を管理画面内で登録していきます。
投稿ページの作成
投稿ページのテンプレートは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 | ||
③ | page.php | single.php | ||
④ | index.php |
※逆に固定も投稿も同じテンプレートで良ければ、index.phpのみ用意すればよいでしょう。
フロントページのテンプレートを変更する
index.phpをフロントページとして利用していましたが、front-page.phpに変更します。index.phpを、front-page.phpに

#7 固定ページにNEWS投稿を読み込む
手順としてはこのような感じです。
記事の作成方法は簡単です。タイトルをnews01にし、次のブロックで画像を選択しアップロードします。 カテゴリは「Instagram」にし、登録する全ての記事カテゴリをInstagramにします。
画像をダウンロード

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

見た目は同じですが、写真はプログラミングで表示されています。
試しに4枚目の投稿をして挙動を確認してみましょう。
また、ショートコード [top_instagram] が直接画面に表示されている場合は以下のとこを確認してみましょう
- 管理画面 > 投稿から新規で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(パターン, 検索対象の文字列, 結果を入れる多次元配列変数)
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になっていますが、カテゴリを一度削除し作り直したりすると番号が新しく発行されます。
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がない