ワードプレスオリジナルテーマ作り方⑥　記事ぺージsingle.phpを作成 | 福岡のホームページ制作はマリオ君にお任せ

為にならないブログ

見出しおじさん

BLOG

ワードプレスオリジナルテーマ作り方⑥　記事ぺージsingle.phpを作成

2023年05月24日

ワードプレスオリジナルテーマ作り方⑥　記事ぺージsingle.phpを作成

記事ぺージsingle.phpを作成

今回は投稿の個別記事を出力するファイルsingle.phpを作成します。基本的にファイル名は変えてはだめです。（ワードプレスで決まっているテーマファイルは名前の変更不可です。カスタム投稿など例外はありますが）

前回作ったhome.phpと同じくsingle.phpもワードプレスで決められているファイル名です。

それでは作ってきます。

サンプルはこちら

上記サンプルkjij.html（投稿を表示するぺージを仮で制作名前は適当）をsingle.php(名前は決まってる)ファイルに書きます（事前につくっていたのでコピーします）。

記事のページはトップページと違い左と右の２カラムになっていて左に記事を表示させ、右にカテゴリを表示させるようにしています（PCで表示するとき）。

kiji.htmlのbodyの中身は下記が書いてあります

<body>

<div class="bwrap">
	<header>
		<h1>サイトのタイトルを表示させます</h1>
		<p class="logo">
			<a href="index.html">
				<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<nav>
		<ul>
			<li><a href="hp.html">ホームぺージ制作</a></li>
			<li><a href="works.html">制作実績</a></li>
			<li><a href="price.html">料金</a></li>
			<li><a href="flow.html">ご依頼の流れ</a></li>
			<li><a href="feature.html">マリオ君の特徴</a></li>
			<li><a href="question.html">よくある質問</a></li>
			<li><a href="company.html">会社概要</a></li>
			<li><a href="contact.html">お問い合わせ</a></li>
		</ul>
	</nav>
	<!--nav終わり-->
	<div class="contwrap">
		<article class="leftbox"> 
			<h2>ブログ</h2>
			<h3>ブログ記事のタイトル</h3>
			<p class="day">投稿日時</p>
			<ul class="kate">
				<li>カテゴリー</li>
			</ul>
			<div class="blogmain">
				記事の文章全部表示
			</div>
			<div class="pagenation02">  
				<p class="old"><a href="前の記事へのリンク">← 前の記事へ</a></p>
				<p class="new"><a href="次の記事へのリンク">次の記事へ→</a></p>
			</div>
			<p class="btn"><a href="blog.html">ブログの記事一覧はこちら→→</a></p>
		</article>
		<!--leftbox終わり-->
		<article class="rightbox"> 
			<h4>カテゴリー</h4>
			<ul>
				<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
				<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
				<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
			</ul>
		</article>
		<!--rightbox終わり-->
	</div>
	<!--contwrap終わり-->
	<footer>
		<nav>
			<ul>
				<li><a href="hp.html">ホームぺージ制作</a></li>
				<li><a href="works.html">制作実績</a></li>
				<li><a href="price.html">料金</a></li>
				<li><a href="flow.html">ご依頼の流れ</a></li>
				<li><a href="feature.html">マリオ君の特徴</a></li>
				<li><a href="question.html">よくある質問</a></li>
				<li><a href="company.html">会社概要</a></li>
				<li><a href="contact.html">お問い合わせ</a></li>
			</ul>
		</nav>
		<!--nav終わり-->
	</footer>
	<!--foote終わりr-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
</body>

これをsingle.phpに書きます。

その前にhome.phpの中身に書いてある全ぺージの共通になる部分を何も書いてないsingle.phpに貼り付けます。共通の部分は下記

これはそのほかのページににも使っていきます。

<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	
	
	ここにそれぞれのページの情報をかくよ！上下は共通
	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

ちなみにこれをパーツ化せずに全部書くとこんな感じ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="index,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta name="keywords" content="<?php if(is_home()): ?>
<?php wp_title(',',true,'right'); ?>
<?php elseif(is_page()): ?>
<?php wp_title(',',true,'right'); ?>
<?php elseif(is_single()): ?>
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?><?php echo ","?>
<?php elseif(is_category()): ?>
<?php single_cat_title() ?><?php echo ","?>
<?php elseif(is_tax()): ?>
<?php single_cat_title() ?><?php echo ","?>
<?php else: ?>
<?php endif; ?>キーワード02,キーワード03,キーワード04,キーワード05">
<meta name="description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta property="og:site_name" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php if(is_home()): ?>
<?PHP echo esc_url( home_url() ); ?>/">
<?php elseif(is_single()): ?>
<?php echo get_permalink()?>">
<?php elseif(is_category()): ?>
<?php 
$url = get_category_link( get_query_var('cat') );
echo $url;
?>">
<?php elseif(is_tax()): ?>
<?php echo get_term_link( $term, $taxonomy );?>">
<?php else: ?>
<?php echo get_page_link( $id );?>">
<?php endif; ?>
<meta property="og:image" content="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/snsmain.jpg">
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php wp_title('ページです。', true, 'right'); ?><?PHP bloginfo('description');?>">
<meta name="twitter:image" content="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/snsmain.jpg">	
<link rel="shortcut icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/favicon.ico">
<link rel="apple-touch-icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/apple-touch-icon.png">
<link href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/css/style.css" rel="stylesheet" type="text/css">
<!--ここにアナリティクスのタグをいれます。-->
<?PHP wp_head();//headの最適化競合防止など?>
</head>
<body>
<div class="bwrap">
	<header>
		<h1><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></h1>
		<p class="logo">
			<a href="<?PHP echo esc_url( home_url() ); ?>/">
				<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/rogo01.svg" alt="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<?PHP get_template_part("navi");//ここでnavi.phpよみこんでるよ?>
	<!--nav終わり-->

ここに個別記事のタグをいれていく！上下は共通

	<footer>
		<?PHP get_template_part("navi");//ここでnavi.phpよみこんでるよ?>
	<!--nav終わり-->
	</footer>
	<!--foote終わり-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
<?php wp_footer(); ?>
</body>
</html>

て感じですね

せっかくワードプレスで制作するなら、管理と更新が楽になるように設計したいですね。

ではkiji.hmlの中身の共通部分以外をsingle.phpに貼り付けます。

<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>

<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	
	<div class="contwrap">
		<article class="leftbox"> 
			<h2>ブログ</h2>
			<h3>ブログ記事のタイトル</h3>
			<p class="day">投稿日時</p>
			<ul class="kate">
				<li>カテゴリー</li>
			</ul>
			<div class="blogmain">
				記事の文章全部表示
			</div>
			<div class="pagenation02">  
				<p class="old"><a href="前の記事へのリンク">← 前の記事へ</a></p>
				<p class="new"><a href="次の記事へのリンク">次の記事へ→</a></p>
			</div>
			<p class="btn"><a href="blog.html">ブログの記事一覧はこちら→→</a></p>
		</article>
		<!--leftbox終わり-->
		<article class="rightbox"> 
			<h4>カテゴリー</h4>
			<ul>
				<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
				<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
				<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
			</ul>
		</article>
		<!--rightbox終わり-->
	</div>
	<!--contwrap終わり-->

	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

これをワードプレスのタグで置き換えてみます。

今回もhome.phoと同様に記事を出力する部分はループの中に書かないといけません。

こんな感じ

<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>

<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
	
	<div class="contwrap">
		<article class="leftbox"> 
			<h2>ブログ</h2>
			
			<!--ループスタート文章-->
			<?PHP if(have_posts()):while(have_posts()):the_post();?>
			<!--ループスタート文章-->
			
			<h3><?PHP the_title();//記事のタイトルを出力?></h3>
			<p class="day"><?PHP echo get_the_date();//投稿日を出力?></p>
			<?php the_category();//対象カテゴリーul表示 ?>
			<div class="blogmain">
				<?PHP the_content();//記事の本文を出力?>
			</div>
			<div class="pagenation02">  
				<p class="old"><?PHP previous_post_link('%link', '<< 前の記事へ');//古いページへのリンク?></p>
				<p class="new"><?PHP next_post_link('%link', '次の記事へ >>');//新しいページへのリンク?></p>
			</div>
			<!--ループ終わり文章-->
			<?PHP endwhile;endif;?>	
			<!--ループ終わり文章-->
			
			<p class="btn"><a href="<?PHP echo esc_url( home_url() );//URL出力 ?>/blog/">ブログの記事一覧はこちら→→</a></p>
		</article>
		<!--leftbox終わり-->
		
		<article class="rightbox"> 
			<h4>カテゴリー</h4>
			<ul>
				<?php wp_list_categories('title_li'); //すべてのカテゴリーをリンク付きで出力?>
			</ul>
		</article>
		<!--rightbox終わり-->
	</div>
	<!--contwrap終わり-->

	
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

置き換えてみました。

メインループ・サブループ違いは

記事などの出力はループで囲わないといけませんが、

ループスタート文章がまずhome.phpに記述したものと変わっています。
home.phpで使用したのはサブループという文章で
今回single.phpで使用したのはメインループという文章です。

メインループの方が記述が短くていいですね。

ちがいを簡単に説明すると

ループは

「スタートから終わりまでを囲っているところを連続して出力して」

っていう意味で

メインループを使うときは、ファイル自体が意味を持っているときに使います。
たとえば
single.php（基本ファイル名固定）は投稿の記事を出力するファイルと決まっています。ですので細かいことを指定しなくても、ファイルがそもそも投稿の記事を表示するものなので、

「スタートから終わりまでを囲っている部分に投稿の記事を連続して出力」してってことになります

もう一つ例をだすと
category.php（基本ファイル名固定）も投稿記事の指定したカテゴリー一覧の記事を出力するファイルときまっているので細かいことを指定しないメインループでよくて

「スタートから終わりまでを囲っている部分に投稿の記事の指定したカテゴリー一覧の記事を連続して出力」してってことになります

home.phpはトップページに使用するファイルで特に意味をもっていないので

home.phpにメインループで書くと

「スタートから終わりまでを囲っているところを連続して出力して」

って指示しても

「何を」

ってなっちゃいます。

なので前回の様にサブループを使用してpost_typeなどを指定して

「スタートから終わりまでをかっこている部分に投稿の記事を連続して出力」

というように細かく指示しないと表示されません。

以上がメインループとサブループの説明です。まちがってたらすいません。


今回は13行目から22行目までループで囲っています。

13行目記事のタイトル表示
14行目記事を書いた日付表示
15行目カテゴリーをリストでリンク付きで表示
これもhome.phpでつかったものと違います。今回はリンク付きで表示したいのでこちらを使用しています。
17行目記事の本文を出力
20行目前の記事へのリンク（文字はお好きなものに変更できます。）
21行目次の記事へのリンク（こちらも文字はお好きなものに変更できます。）

上記をループで囲っています。
記事等はループで囲わないと表示されません。

あとは右カラムの
34行目
カテゴリーをリンク付きで表示するタグです

15行目との違いは15行目は対象のカテゴリを表示で
34行目はすべてのカテゴリーです。

例をいうと美容師さんのサイトでカット事例という投稿タイプがあって

カテゴリーは
■ショートヘア
■パーマ
■カラー
■ロングヘアー

などのカテゴリーがあったとして

ショートヘアーでパーマをあてましたって記事を投稿した場合
カテゴリーはショートヘアとパートを選択して投稿すると思います。

その場合
15行目にはショートヘアとパーマのみがリスト形式で表示されます。

34行目はすべてのカテゴリーが表示されるので
・ショートヘア・パーマ・カラー・ロングヘアーがリスト形式ですべて表示されます。

以上でsingle.phpが完成です。

それではまた。

一覧へ
こっちもみて！関連記事

カテゴリー

人気!?記事

気になったら
連絡してね!

すいません

お電話は出れないことが多いので
ラインでもしもし・メールでもしもしが推奨です。

お時間をとらせていただきゆっくり
お電話させていただきます。

©Copy Rights MARIOKUN.All Rights Resarved.
Page Top
お問い合わせ

どうぞおじさん

作業中はお電話は出れないことが多いのでライン・メールでもしもしが推奨です。

お電話は出れないことが多いの折り返し致します。