みなさんこんにちは。
自作テーマ開発も第四工程が終わり今回は第5回です。
前回までの工程をおさらいした人は以下のリンクからご覧ください。
【WordPress自作テーマ開発②】自作テーマ制作を効率的に行うための準備
【WordPress自作テーマ開発④】下層ページを作ろう「投稿ページ編」
今回は下層ページ「固定ページ」を作成したいと思います。
それではサクッといきましょう!
固定ページを作ろう!
今回作成する固定ページは、管理画面→固定ページから投稿した内容を表示させるページです。
そもそも、投稿とよく似た固定ページの意味がわからないと言う人も多いかと思います。
簡単に言い分けると、
●頻繁に更新するものやカテゴリーやタグなどのを設定したい記事は「投稿」
●更新頻度がほとんどない会社概要や自己紹介文やお問い合わせ文などは「固定ページ」
と上記の様に分けることができます。
これによって頻繁に更新される情報とそうでない記事を分けることができるのです。
前回作成した投稿ページは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です!
うまく表示できましたでしょうか??
まとめ
今回の固定ページは前回の投稿ページ作成記事でご説明した内容と全く同じことを固定ページに変えて行っています。
表示が異なる場合は、functions.phpでパンくずリストが定義されていなかったり、get_template_part();でcontent-post.phpが呼び出せていないということが考えられますのでチェックしてみてください。
次回はアーカイブページを作成していきたいと思います。
少しづつですがwordpressでの自作テーマも完成に向かっていますので根気強く一緒に学習を進めましょう!!
最後まで読んでいただきありがとうございました。
また次の記事でお会いしましょう!!