1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。

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 テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

コメントをどうぞ!

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