«
»

【改訂版】13.投稿ページを作成する single.php

2014年01月31日 追記・変更

loop.phpの呼び出しをファイルではなく、中身自体をコピーペーストする

今現在、single.phpのファイルの中身はindex.phpと同じ内容。
ここから変更をしていくのだが、今回も変更箇所は、メイン部分のみとなる。

現在の記述 single.php

<!-- ヘッダー読み込み header.phpを読み込んでくれる -->
<?php get_header(); ?>

   <div id="contents">

	<!-- メイン部分の読み込み loop.phpを読み込んでくれる -->
	<?php get_template_part( 'loop' ); ?>

	<!-- サイドバー読み込み sidebar.phpを読み込んでくれる -->
	<?php get_sidebar(); ?>


   </div><!-- /#contents -->

<!-- フッター読み込み footer.phpを読み込んでくれる -->
<?php get_footer(); ?>

loop.phpの呼び出しではなく、中身自体をコピーペーストする

<!-- ヘッダー読み込み header.phpを読み込んでくれる -->
<?php get_header(); ?>

   <div id="contents">



	<!-- main -->
      <div id="main">


	<!-- ▼表示する記事がある場合、ループ開始▼ -->
<!--
■if( have_posts() ) 
該当ページで表示する記事があるかどうかを判断している。
記事があった場合、if内の処理を実行する。
■have_post()
ワードプレスの条件分岐テンプレタグ。条件式に使用する。
もし記事がある場合、trueを返す。
■while( have_posts() ) 
該当ページで表示する記事があるかどうかを判断している。
phpのループ構文while文。条件式がtrueの間、処理を繰り返す。
■the_post();
現在の記事番号の取得と、カウンターの増減をするテンプレタグ。
while文のループ内で記述する$i++;のような変数の増減と同じ。
ループ内の処理の一番最初に記述する点に注意。
これがないと現在の記事番号が変化しないため、ループから抜け出せれない。
-->
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>

<!--
■the_permalink();
該当記事のURLを出力してくれるテンプレタグ
■the_title();
該当記事のタイトルを出力してくれるテンプレタグ
-->
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<p>

<!--
■the_content();
該当記事の本文を出力してくれるテンプレタグ
()内の引数は、記事入力内でmoreを使用した際に表示させる文。
なので、moreを使わなかった場合、表示されない。
-->
	<?php the_content('続きを読む &rarr;'); ?>

	<br clear="all" />
	</p>


	<div class="meta">
<!--
■the_date();
該当記事の投稿日を出力してくれるテンプレタグ
-->
	投稿日: <?php the_date(); ?><br />

<!--
■the_category();
該当記事が所属するカテゴリー名とリンクを出力してくれるテンプレタグ
()内の引数は、カテゴリーを出力した後の区切り文字を指定出来る。
■the_tags();
該当記事が所属するタグ名とリンクを出力してくれるテンプレタグ
()内の引数は the_tags('前', '区切り文字', '後'); という形で使用可能。
引数は省略出来るので、今回は第2引数まで入力をしている。
the_tags('タグ: ',' ');
■the_author_posts_link();
該当記事の投稿者名とリンクを出力するテンプレタグ
-->
	カテゴリー: <?php the_category('|'); ?> <?php the_tags('タグ: ',' '); ?> | 投稿者: <?php the_author_posts_link(); ?>
	</div>

<?php endwhile; else: ?>
	<p>
	記事がない場合に表示させる文章など。

	<br clear="all" />
	</p>



<?php
endif;
?>
	<!-- ▲表示する記事がある場合、ループ開始▲ -->



	<!-- ▼もし記事が表示数より多い場合、ページャーを表示する▼ -->
<!--
■$wp_query->max_num_pages
総ページ数を取得する。
■if文の条件式の内容
総ページ数が1より多い場合、ページャーを表示する。
-->

<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<div style="width:100%">
	<div style="float:left">
<!--
■previous_posts_link('&laquo;次ページ');
previous_posts_link();の引数でリンクする文字を決めている。
-->
	<?php previous_posts_link('&laquo;前ページ'); ?>
	</div>

	<div style="float:right">
<!--
■next_posts_link('&laquo;次ページ');
next_posts_link();の引数でリンクする文字を決めている。
-->
	<?php next_posts_link('次ページ&raquo;'); ?>
	</div>
</div>
<?php endif; ?>
	<!-- ▲もし記事が表示数より多い場合、ページャーを表示する▲ -->


<!-- ▼ここにコメントの入力欄を記述する -->


      </div>
	<!-- /main -->



	<!-- サイドバー読み込み sidebar.phpを読み込んでくれる -->
	<?php get_sidebar(); ?>


   </div><!-- /#contents -->

<!-- フッター読み込み footer.phpを読み込んでくれる -->
<?php get_footer(); ?>
93行目から120行目までのページャーを書き換える必要がある。
また、123行目の箇所に「コメント入力欄」を追加する。

ページャーの記述は2パターン

記事一覧ページで使うページャー用のリンク出力テンプレタグと、投稿ページで使うページャー用のリンク出力テンプレタグが存在する。
参考：覚えるべきWordPressテンプレートタグ

今回、使用するページャーは個別記事用のページャー

<!-- ページナビゲーション -->
<?php if( get_previous_post() ): ?>
前ページ：<?php previous_post_link('%link', '« %title'); ?>
<?php endif;
if( get_next_post() ): ?>
次ページ：<?php next_post_link('%link', '%title »'); ?>
<?php endif; ?>
<!-- /ページナビゲーション-->
上記をページデザインに当てはめる必要がある。

元々のHTMLファイルの投稿ページのページャー記述

「absolutepath_relativepath.html」のソースを確認すると、下記のようになっている。
<!-- ページャー -->

<div style="width:100%">
	<div style="float:left">
	<a href="php_html.html">&laquo; phpとhtmlの違いは？</a>
	</div>

	<div style="float:right">
	<a href="wordpressplugin.html">WordPressのプラグインとは？ &raquo;</a>
	</div>

</div>
<!-- /ページャー -->
先ほどの「今回、使用するページャーは個別記事用のページャー」のテンプレートタグの記述を参考に書き直す。

書き直したページャー部分の記述

<!-- ▼前か次のページが存在する場合のみ表示する▼ -->
<?php if( get_previous_post() || get_next_post() ){ ?>
<!-- ページャー -->
<div style="width:100%">

<?php if( get_previous_post() ): ?>

	<div style="float:left">
	<?php previous_post_link('%link', '« %title'); ?>
	</div>

<?php endif;
if( get_next_post() ): ?>

	<div style="float:right">
	<?php next_post_link('%link', '%title »'); ?>
	</div>

<?php endif; ?>

</div>
<!-- /ページャー -->
<?php } ?>
<!-- ▲前か次のページが存在する場合のみ表示する▲ -->

ページャーのソースを置き換えた single.php

灰色の箇所が書き換えたソース部分。
<!-- ヘッダー読み込み header.phpを読み込んでくれる -->
<?php get_header(); ?>

   <div id="contents">



	<!-- main -->
      <div id="main">


	<!-- ▼表示する記事がある場合、ループ開始▼ -->
<!--
■if( have_posts() ) 
該当ページで表示する記事があるかどうかを判断している。
記事があった場合、if内の処理を実行する。
■have_post()
ワードプレスの条件分岐テンプレタグ。条件式に使用する。
もし記事がある場合、trueを返す。
■while( have_posts() ) 
該当ページで表示する記事があるかどうかを判断している。
phpのループ構文while文。条件式がtrueの間、処理を繰り返す。
■the_post();
現在の記事番号の取得と、カウンターの増減をするテンプレタグ。
while文のループ内で記述する$i++;のような変数の増減と同じ。
ループ内の処理の一番最初に記述する点に注意。
これがないと現在の記事番号が変化しないため、ループから抜け出せれない。
-->
<?php
if(have_posts()) :
while(have_posts()) :
the_post(); ?>

<!--
■the_permalink();
該当記事のURLを出力してくれるテンプレタグ
■the_title();
該当記事のタイトルを出力してくれるテンプレタグ
-->
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<p>

<!--
■the_content();
該当記事の本文を出力してくれるテンプレタグ
()内の引数は、記事入力内でmoreを使用した際に表示させる文。
なので、moreを使わなかった場合、表示されない。
-->
	<?php the_content('続きを読む &rarr;'); ?>

	<br clear="all" />
	</p>


	<div class="meta">
<!--
■the_date();
該当記事の投稿日を出力してくれるテンプレタグ
-->
	投稿日: <?php the_date(); ?><br />

<!--
■the_category();
該当記事が所属するカテゴリー名とリンクを出力してくれるテンプレタグ
()内の引数は、カテゴリーを出力した後の区切り文字を指定出来る。
■the_tags();
該当記事が所属するタグ名とリンクを出力してくれるテンプレタグ
()内の引数は the_tags('前', '区切り文字', '後'); という形で使用可能。
引数は省略出来るので、今回は第2引数まで入力をしている。
the_tags('タグ: ',' ');
■the_author_posts_link();
該当記事の投稿者名とリンクを出力するテンプレタグ
-->
	カテゴリー: <?php the_category('|'); ?> <?php the_tags('タグ: ',' '); ?> | 投稿者: <?php the_author_posts_link(); ?>
	</div>

<?php endwhile; else: ?>
	<p>
	記事がない場合に表示させる文章など。

	<br clear="all" />
	</p>



<?php
endif;
?>
	<!-- ▲表示する記事がある場合、ループ開始▲ -->




<!-- ▼前か次のページが存在する場合のみ表示する▼ -->
<?php if( get_previous_post() || get_next_post() ){ ?>
<!-- ページャー -->
<div style="width:100%">

<?php if( get_previous_post() ): ?>

	<div style="float:left">
	<?php previous_post_link('%link', '« %title'); ?>
	</div>

<?php endif;
if( get_next_post() ): ?>

	<div style="float:right">
	<?php next_post_link('%link', '%title »'); ?>
	</div>

<?php endif; ?>

</div>
<!-- /ページャー -->
<?php } ?>
<!-- ▲前か次のページが存在する場合のみ表示する▲ -->


<!-- ▼ここにコメントの入力欄を記述する -->


      </div>
	<!-- /main -->



	<!-- サイドバー読み込み sidebar.phpを読み込んでくれる -->
	<?php get_sidebar(); ?>


   </div><!-- /#contents -->

<!-- フッター読み込み footer.phpを読み込んでくれる -->
<?php get_footer(); ?>

サイトを表示して確認

前ページ、次ページの投稿ページ用のページャーが出力された。
orijinal13_01 これで残るは、コメント入力欄の表示のみだ。

コメントテンプレートを読み込む

テンプレタグのcomments_template();を使えば、コメント一覧表示と入力フォームが表示される。
現在のテーマディレクトリから comments.php ファイルを読み込む。
このファイルが無いときは、代わりに wp-includes/theme-compat/comments.php を読み込む。
<?php comments_template(); ?>
コメント一覧の表示は、wp_list_comments();を使うのが慣習らしい。
wp_list_comments();だけの記述ではコメントが表示されない。
理由としては、comments_templateを呼んだ際に、コメントを取得しているため。
もしwp_list_comments();を使用したいならば、get_commentsなどを用いてコメントを取得し、得られた結果を第2引数として wp_list_comments(); に指定すれば良い。

コメント一覧と、入力フォームが表示された

orijinal13_02
WordPressのオリジナルテーマ作成は、以上で完了となる。
ここまでの完成ファイルは、こちらからダウンロード出来る。
最後に Theme Check プラグインでチェックするのだが、配布する訳でないのならそこまで必要ではない。
時間がある際、Theme Checkの記事を執筆する。

関連記事

【改訂版】12.固定ページを作成する page.php 【改訂版】08.共通部分の中身を書き換える　loop.php 覚えるべきWordPressテンプレートタグ 【改訂版】06.共通部分を分割して別ファイルとしてインクルード 【改訂版】01.オリジナルテーマとは？ HTMLをWordPressテーマ化 【改訂版】04.まずはスタイルシートの設定と、index.phpの作成をする。 ページナビゲーションと活用する事でユーザビリティを向上させるページ記事目次の作り方 query_posts()を利用して記事表示方法の幅を広げる

この記事が気に入ったら下のボタンをクリック

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る