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

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

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




オススメ記事

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

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

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

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

zsh

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

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

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい