【WordPress】固定用ページのテンプレートを作成する

2021年8月14日

固定用ページに適用するテンプレートを自作して追加しようと思います。

マルチサイトをすれば楽なのですが、サイトが分かれるとそれはそれでやりにくいことが多いので、シングルサイトをマルチサイトであるかのようにします。

今回の目標は、ホームのような固定ページを作成するです。

固定用ページのテンプレートについて

固定ページは以下の画像の赤枠で囲ったところで選択できます。


このテンプレートを作成していこうと思います。

テンプレートファイル(*.php)を作成する

まずテンプレートのファイルを作成します。ホームに類似させたいので「sub_home.php」という名前にします。

ファイルの中身は仮に以下のようにしておきます。

<?php
/*
Template Name: サブホーム(固定ページ)
*/
?>
<h1>サブホームです。</h1>
<?php

if(have_posts()): while(have_posts()): the_post();?>

<h2><?php the_title(); ?></h2>

<?php the_content(); ?>

<?php endwhile; endif; ?>

コメントの「Template Name:」がテンプレート名として表示されるようです。

アップロード

ファイルをサーバーにアップロードします。
ルクセリタスなら「/wp-content/themes/luxeritas/pages」です。

アップロードが完了すると固定ページのテンプレートに出てきました。

思ったより簡単でした。

新規固定ページを作成し、テンプレートを設定してみる。

それでは試しに適当にやってみます。

こんな感じにしてプレビューします。

シンプルですね。今回のテーマである「固定ページのテンプレート作成」についてはここまでです。

ここから好きに改造していきます。改造していくためには画面に表示する材料が必要ですね。
材料集めをしましょう。

テンプレートを作りこむ

こういう場合におすすめなのは、既にできているところから抜き出してくるのがいいです。
ルクセリタスであれば「/wp-content/themes/luxeritas/Page.php」がデフォルトテンプレートです。

全部解析するのは面倒なのでコピーしちゃいましょう。

コピーしたら忘れずアップロードします。

とりあえずこうなったのでホームらしくするために関連記事を消してみます。
関連記事は、記事下のウィジェットでした。サブホームの予定なので関連記事はいりません。記事下ウェジェットをやめます

123行目あたりの以下の行をコメントにします。post-underっていう名前から記事下と予測できます。
こういうこともあるので命名規約って大事ですね。

//if( function_exists('dynamic_sidebar') === true ) {
//	if( isset( $luxe['amp'] ) ) {
//		if( is_active_sidebar('post-under-1-amp') === true ) {
//			$amp_widget = thk_amp_dynamic_sidebar( 'post-under-1-amp' );
//			if( !empty( $amp_widget ) ) echo $amp_widget;
//		}
//	}
//	else {
//		if( is_active_sidebar('post-under-1') === true ) {
//			dynamic_sidebar( 'post-under-1' );
//		}
//	}
//}

アップロードして確かめます。

消えてますね。次は記事の一覧を出してみましょう。

query_posts('post_type=post&paged='.$paged);

?><div><?php 

if(have_posts()): 
	while (have_posts()):
		the_post(); ?>
		<div>
			<h2>
				<a href="<?php the_permalink(); ?>">
					<?php the_title(); ?>
				</a>
			</h2>
			<?php the_excerpt(); ?>
			<p>
				<?php 
				    echo get_the_date();
				    the_time(); 
				    echo("|カテゴリー:");
				    the_category(' , '); 
				?>
			</p>       
		</div><?php
	endwhile; 
endif; 

?></div><?php 

wp_reset_query();

固定ページでhave_posts関数を利用する際には、「query_posts」というテンプレートタグを利用しないと一覧表示できないようです。

query_posts() はWordPressが投稿を表示するのに使用しているメインクエリーを置き換える手段です。これはメインクエリーを一旦横に置いておき、新しいクエリーで上書きします。

query_posts を呼び出したあとは、クエリーの改変を戻すために、wp_reset_query() を呼び出し、オリジナルのメインクエリーを復活させる必要があります。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts

とあるのでwp_reset_query関数を最後に呼びます。これを実行すると

いろいろ自分でカスタマイズしてみてください。

さいごに

記事にするとなんともサクッとやっているように見えますが、3時間くらいはTry&Errorの繰り返してます。

技術は、本やネットの情報を得るだけではなく、何度もやってみて失敗して、やっと成功した!この繰り返しで見につくものだと私は思います。

ここまで読んで頂いてありがとうございます。