MENU
Wordpress制作を学ぶためのブログ
Nino-Blog
Nino-Blog
  1. ホーム
  2. wordpress
  3. テーマ作り
  4. 【WordPress自作テーマ開発⑤】下層ページを作ろう「固定ページ編」

【WordPress自作テーマ開発⑤】下層ページを作ろう「固定ページ編」

2025 1/28
wordpress テーマ作り
2022年1月10日2025年1月28日

みなさんこんにちは。
自作テーマ開発も第四工程が終わり今回は第5回です。
前回までの工程をおさらいした人は以下のリンクからご覧ください。

【WordPress自作テーマ開発①】開発環境構築編

【WordPress自作テーマ開発②】自作テーマ制作を効率的に行うための準備

【WordPress自作テーマ開発③】トップページを作ろう

【WordPress自作テーマ開発④】下層ページを作ろう「投稿ページ編」

今回は下層ページ「固定ページ」を作成したいと思います。
それではサクッといきましょう!

\ NinoBlogのサービス紹介です! /

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次

固定ページを作ろう!

今回作成する固定ページは、管理画面→固定ページから投稿した内容を表示させるページです。
そもそも、投稿とよく似た固定ページの意味がわからないと言う人も多いかと思います。

簡単に言い分けると、

●頻繁に更新するものやカテゴリーやタグなどのを設定したい記事は「投稿」
●更新頻度がほとんどない会社概要や自己紹介文やお問い合わせ文などは「固定ページ」

と上記の様に分けることができます。
これによって頻繁に更新される情報とそうでない記事を分けることができるのです。

前回作成した投稿ページはsingle.phpを編集しました。それはsingle.phpが投稿ページを表示するファイルだからです。
今回作成する固定ページはpage.phpを編集します。それは、page.phpが固定ページを表示するファイルだからです。

このようにページによって表示させているファイルが異なります。
因みにトップページはindex.phpです。
これは、wordpressのテンプレート階層というもで決められたルールです。
もっと詳しく知りたい方はテンプレート階層についてはWordpressCodexの「テンプレート階層」についてをご覧ください。

現在の表示を確認

まずは現在の表示を確認したいと思います。

現段階での固定ページ

上記が現段階の固定ページの表示です。

完成図確認

次に完成図を確認します。

固定ページ完成図

上記が今回作成する固定ページの完成図です。
お気づきの方もおられると思いますが、このレイアウトは前回の投稿ページと全く同じレイアウトです。
固定ページは様々なレイアウトを後から追加することが簡単にできますので今回は投稿ページと同じレイアウトで作成したいと思います。
(レイアウト(テンプレート)の追加は違う記事で紹介予定です)

_s(underscores)ダウンロード初期状態のpage.phpを確認

ここでは、_s(underscores)ダウンロード初期状態のpage.phpに書かれているコードを確認したいと思います。
(現在書かれているコードが読めないとコードの削除、追加ができない為です)
以下がpage.phpファイルのコードです。

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package BlogCreateChallenge
 */

get_header();//ヘッダー表示
?>

	<main id="primary" class="site-main"><!--コンテンツ部分開始-->

		<?php
		while ( have_posts() ) ://記事があれば以下の内容を繰り返す
			the_post();

			get_template_part( 'template-parts/content', 'page' );//template-partsディレクトリ内のcontent-page.phpを呼び出しその内容を表示

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) ://投稿に対するコメントが許可されている||または、投稿にコメントがされていれば以下の内容を実行
				comments_template();//コメントテンプレートを表示
			endif;//if文終了

		endwhile; //while文でのループ終了
		?>

	</main><!--コンテンツ部分終了-->

<?php
get_sidebar();//サイドバー表示
get_footer();//フッター表示

コードの内容はコード内に書いたコメントをご覧ください。

次に、get_template_part( ‘template-parts/content’, ‘page’ );で呼び出されている初期状態のcontent-page.phpのコードを確認したいと思います。

<?php
/**
 * Template part for displaying page content in page.php
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package BlogCreateChallenge
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>><!-- id,classに投稿関連のid,クラスを追加 -->
	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?><!--投稿タイトルをH1タグで出力する-->
	</header>

	<?php blogcreatechallenge_post_thumbnail(); ?><!-- blogcreatechallenge_post_thumbnailという関数を呼び出し投稿のサムネイルを出力(この関数はテーマファイルのincディレクトリ内にあるtemplate-tags.phpで定義されています。) -->

	<div class="entry-content">
		<?php
		the_content();//固定ページの本文を出力

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'blogcreatechallenge' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<?php if ( get_edit_post_link() ) : ?><!--現在のユーザーが 'edit_post' メタ権限を持つ場合、投稿編集リンクの URL を文字列(Edit)として返します。-->
		<footer class="entry-footer">
			<?php
			edit_post_link(
				sprintf(
					wp_kses(
						/* translators: %s: Name of current post. Only visible to screen readers */
						__( 'Edit <span class="screen-reader-text">%s</span>', 'blogcreatechallenge' ),
						array(
							'span' => array(
								'class' => array(),
							),
						)
					),
					wp_kses_post( get_the_title() )
				),
				'<span class="edit-link">',
				'</span>'
			);
			?>
		</footer><!-- .entry-footer -->
	<?php endif; ?>
</article><!-- #post-<?php the_ID(); ?> -->

上記のコードが固定ページのコンテンツ部分の主を出力しているcontent-page.phpのコードです。
コードの解説はコード横のコメントをご覧ください。

page.phpを添削

<?php get_header(); ?>

<div class="ly_cont ly_cont__col">
        <main class="ly_cont_main">
			<div class="post-breadcrumb">
                <?php output_breadcrumb(); ?>
            </div>
			<?php
					while ( have_posts() ) : the_post();
						get_template_part( 'template-parts/content-post');
					endwhile
            ?>
	</main><!-- #main -->
	<?php get_sidebar();?>
</div>
    <?php get_footer();?>

とてもシンプルになりました。
また、上記のコードはsingle.phpと全く同じコードになっております。
get_template_part();で呼び出すコンテンツ部分のファイルもcontent-page.phpからcontent-post.phpに変更しました。

コードの解説は前回のsingle.phpとコードが全く同じですので割愛します。わからない方は前回の記事をご覧ください。

content-page.phpを削除

_s(underscores)ダウンロード初期状態でpage.phpの中ので使用されていたget_template_part();を通して呼び出されていたcontent-page.phpの必要がなくなりました。

呼び出されないファイルはあっても仕方ありませんので、_s(underscores)のテーマファイル内から削除しておきましょう。

表示の確認

page.phpのコードを整理ができましたので表示の確認をしてみましょう。
確認の方法ですが、現在サイトには固定ページへのリンクがないと思いますので、
管理画面→固定ページから記事を選択してプレビューで確認するか、
管理画面→外観→メニューから固定ページの記事をヘッダーメニューに追加して確認するなどして固定ページを表示させましょう。
以下の画像の様なレイアウトになっていればOKです!

page.php編集後のサイトの表示

うまく表示できましたでしょうか??

まとめ

今回の固定ページは前回の投稿ページ作成記事でご説明した内容と全く同じことを固定ページに変えて行っています。
表示が異なる場合は、functions.phpでパンくずリストが定義されていなかったり、get_template_part();でcontent-post.phpが呼び出せていないということが考えられますのでチェックしてみてください。

次回はアーカイブページを作成していきたいと思います。
少しづつですがwordpressでの自作テーマも完成に向かっていますので根気強く一緒に学習を進めましょう!!
最後まで読んでいただきありがとうございました。
また次の記事でお会いしましょう!!

Nino-BLOGのサービス紹介

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
Wordpressの修正・カスタマイズを代行します 画像や文章の追加・修正・ページの追加・アップデートなど
wordpress テーマ作り
二宮 旬平
WEBデザイナー
はじめましてWEBデザイナーの二宮と申します。
このサイトでは、Wordpressについて実際に手を動かしながら学べるよう日々投稿を行なっております。
HP制作実績はこちらから
キーワード検索
人気記事
  • 【完全解説】WordPressでヘッダーを自作してみよう!(コーポレートサイト編)
    5387
  • 【コピペOK】ContactFrom7でお問い合わせフォームを設置する方法
    5071
  • 【超簡単】ContactForm7でお問い合わせ確認画面を設置してみよう
    4250
  • 【自作テーマ開発】_s(underscores)でオリジナルブログサイトを作ろう!
    2377
  • 【WordPress自作テーマ開発③】トップページを作ろう
    2292
カテゴリー
  • SEO対策
  • wordpress
    • テーマ作り
  • カスタマイズ
  • ニュース
  • ライティング
  • ライフハック
  • 副業
  • 未分類
  • 資格
アーカイブ
  • 2023年7月 (3)
  • 2023年2月 (3)
  • 2022年4月 (1)
  • 2022年2月 (1)
  • 2022年1月 (7)
  • 2021年10月 (1)
  • 2021年9月 (3)
  • 2021年8月 (8)
  • 2021年7月 (2)
  • 2021年2月 (9)
  • 2021年1月 (5)
↓Nino-blogのサービス紹介
実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次
  • HOME
  • プライバシーポリシー
  • 免責事項
  • お問い合わせ

© 2020 nino-blog

目次