WordPress テーマ自作!投稿ページ、固定ページの作り方。

公開 :

サンタは何故お爺さんなんでしょうか。@It_is_Rです。
今年からサンタのギャルにしましょう。

WordPress テーマ自作シリーズ第7回目です。
今回は、投稿ページと固定ページを作っていきます。

このシリーズの前回の記事はこちらです。
WordPress にウィジェット(サイドバー)を追加する方法。

投稿、固定ページを作る方法

まず、投稿、固定ページを作る方法を紹介したいと思います。
クリスマス

投稿、固定ページを作るには、大きく分けて三つの方法があります。

  • index.php で作る。
  • singular.php で作る。
  • single.php, page.php で作る。

ですが index.php で作るのは、コードが複雑化してしまうので、好ましくありません。
作れなくはないといった感じです。

singular.php で作る

singular.php 1つで、投稿ページと固定ページを作ることができます。
下の例では、投稿、固定ページとも同じデザインになります。

もしも投稿ページと固定ページでデザインを変更したいのであれば、 WordPress の条件分岐タグを使うか、この後紹介する single.php, page.php を使う方法で作ってください。

singular.pug(コンパイル前)

:php get_header();
main#main
	:php
		while(have_posts()) : 
		the_post();
	article.p-article
		header.p-article__header
			h1.p-article__ttl
				:php the_title();
			p 公開 : 
				time(datetime!="<?php the_time('c'); ?>")
					:php the_time('Y/m/d');
				:php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) :
				span → 更新 : 
				time(datetime!="<?php echo get_the_modified_date( 'Y-m-d' ) ?>")
					:php the_modified_date('Y/m/d');
				:php endif;
			.p-article__category
				:php the_category(', ');
		.p-article__body
			:php the_content();
		div.p-article__category
			p カテゴリ:
				:php the_category(', ');
		footer.p-article__footer
			time.p-article__time.c-panel.u-rb(datetime!="<?php the_time('c'); ?>")
				span 公開 : 
					:php the_time('Y/m/d');
				:php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) :
				span 更新 : 
					:php the_modified_date('Y/m/d');
				:php endif;
			.p-article__prev-post
				:php previous_post_link();
			.p-article__next-post
				:php next_post_link();
	:php endwhile;
:php
	get_sidebar();
	get_footer();

singular.php(コンパイル後)

<?php get_header(); ?>
<main id="main"><?php while(have_posts()) : 
the_post(); ?>
  <article class="p-article">
    <header class="p-article__header">
      <h1 class="p-article__ttl"><?php the_title(); ?></h1>
      <p>公開 : 
        <time datetime="<?php the_time('c'); ?>"><?php the_time('Y/m/d'); ?></time><?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?><span>→ 更新 : </span>
        <time datetime="<?php echo get_the_modified_date( 'Y-m-d' ) ?>"><?php the_modified_date('Y/m/d'); ?></time><?php endif; ?>
      </p>
      <div class="p-article__category"><?php the_category(', '); ?></div>
    </header>
    <div class="p-article__body"><?php the_content(); ?></div>
    <div class="p-article__category">
      <p>
        カテゴリ:<?php the_category(', '); ?></p>
    </div>
    <footer class="p-article__footer">
      <time class="p-article__time c-panel u-rb" datetime="<?php the_time('c'); ?>"><span>
          公開 : <?php the_time('Y/m/d'); ?></span><?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?><span>
          更新 : <?php the_modified_date('Y/m/d'); ?></span><?php endif; ?></time>
      <div class="p-article__prev-post"><?php previous_post_link(); ?></div>
      <div class="p-article__next-post"><?php next_post_link(); ?></div>
    </footer>
  </article><?php endwhile; ?>
</main><?php get_sidebar();
get_footer(); ?>

single.php, page.php で作る

single.php, page.php は、 singular.php よりも優先して読み込まれます。

single.php は投稿ページ、 page.php は固定ページのファイルです。

ソースコードは、先程の singular.php をベースに(コピペ)して、デザインを変えたい部分のみ変更を加えれば、それぞれ違ったデザインになります。

index.php で作る(おまけ)

「ファイルは絶対 index.php しか使わねぇ!」って人もいるかもしれません。
index.php だけでも、条件分岐タグを使って作ることができます。

index.pug(コンパイル前)

:php get_header();
main#main
	:php
		if (is_single() || is_page()) :
		while(have_posts()) :
		the_post();
	article.p-article
		header.p-article__header
			h1.p-article__ttl
				:php the_title();
			p 公開 : 
				time(datetime!="<?php the_time('c'); ?>")
					:php the_time('Y/m/d');
				:php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) :
				span → 更新 : 
				time(datetime!="<?php echo get_the_modified_date( 'Y-m-d' ) ?>")
					:php the_modified_date('Y/m/d');
				:php endif;
			.p-article__category
				:php the_category(', ');
		.p-article__body
			:php the_content();
		div.p-article__category
			p カテゴリ:
				:php the_category(', ');
		footer.p-article__footer
			time.p-article__time.c-panel.u-rb(datetime!="<?php the_time('c'); ?>")
				span 公開 : 
					:php the_time('Y/m/d');
				:php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) :
				span 更新 : 
					:php the_modified_date('Y/m/d');
				:php endif;
			.p-article__prev-post
				:php previous_post_link();
			.p-article__next-post
				:php next_post_link();
	:php
		endwhile;
		else :
		while(have_posts()) :
		the_post();
	article.p-article-list.c-media
		:php if(has_post_thumbnail()):
		a.c-media__img.p-article-list__thumbnail(href!="<?php the_permalink(); ?>")
			:php the_post_thumbnail('medium', array('class' => 'p-article-list__catch p-article-list__catch--main'));
		:php endif;
		.c-media__body
			h1.p-article-list__ttl
				a(href!="<?php the_permalink(); ?>")
					:php the_title();
			p.c-media__txt.p-article-list__snippet
				:php the_excerpt();
		time.c-panel.p-article-list__time(datetime!="<?php the_time('c'); ?>")
			:php the_time("Y/n/j")
		a.p-article-list__readmore(href!="<?php the_permalink(); ?>") 続きを読む
	:php
		endwhile;
		the_posts_pagination(array(
			'mid_size'				=> 2,
			'prev_text'				=> 'Prev',
			'next_text'				=> 'Next',
			'show_all'				=> false,
			'before_page_number' => '',
		));
		endif;
:php
	get_sidebar();
	get_footer();

index.php(コンパイル後)

<?php get_header(); ?>
<main id="main"><?php if (is_single() || is_page()) :
while(have_posts()) :
the_post(); ?>
  <article class="p-article">
    <header class="p-article__header">
      <h1 class="p-article__ttl"><?php the_title(); ?></h1>
      <p>公開 : 
        <time datetime="<?php the_time('c'); ?>"><?php the_time('Y/m/d'); ?></time><?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?><span>→ 更新 : </span>
        <time datetime="<?php echo get_the_modified_date( 'Y-m-d' ) ?>"><?php the_modified_date('Y/m/d'); ?></time><?php endif; ?>
      </p>
      <div class="p-article__category"><?php the_category(', '); ?></div>
    </header>
    <div class="p-article__body"><?php the_content(); ?></div>
    <div class="p-article__category">
      <p>
        カテゴリ:<?php the_category(', '); ?></p>
    </div>
    <footer class="p-article__footer">
      <time class="p-article__time c-panel u-rb" datetime="<?php the_time('c'); ?>"><span>
          公開 : <?php the_time('Y/m/d'); ?></span><?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?><span>
          更新 : <?php the_modified_date('Y/m/d'); ?></span><?php endif; ?></time>
      <div class="p-article__prev-post"><?php previous_post_link(); ?></div>
      <div class="p-article__next-post"><?php next_post_link(); ?></div>
    </footer>
  </article><?php endwhile;
else :
while(have_posts()) :
the_post(); ?>
  <article class="p-article-list c-media"><?php if(has_post_thumbnail()): ?><a class="c-media__img p-article-list__thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('class' => 'p-article-list__catch p-article-list__catch--main')); ?></a><?php endif; ?>
    <div class="c-media__body">
      <h1 class="p-article-list__ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <p class="c-media__txt p-article-list__snippet"><?php the_excerpt(); ?></p>
    </div>
    <time class="c-panel p-article-list__time" datetime="<?php the_time('c'); ?>"><?php the_time("Y/n/j") ?></time><a class="p-article-list__readmore" href="<?php the_permalink(); ?>">続きを読む</a>
  </article><?php endwhile;
the_posts_pagination(array(
	'mid_size'				=> 2,
	'prev_text'				=> 'Prev',
	'next_text'				=> 'Next',
	'show_all'				=> false,
	'before_page_number' => '',
));
endif; ?>
</main><?php get_sidebar();
get_footer(); ?>

このソースは WordPress の条件分岐タグを使って書いたものです。

Pug ファイルの4行目、if (is_single() || is_page()) :は、投稿ページ、もしくは固定ページの時、という意味です。
このタグによって、投稿、固定ページと、それ以外のページの表示を分けています。

ただ、ソースコードが見にくいので、やめたほうがいいでしょう。

まとめ。

今回は投稿、固定ページを作る方法を三通り紹介しました。せっかく WordPress にはファイルを分ける機能があるわけなので、ちゃんと分けて作りましょう。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

メールアドレスが公開されることはありません。




オススメ記事

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

Webページを作るのは結構好きな@It_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php