Nobutake Dogen.com

第6話「記事ページの作成」

記事ページを作ります。記事ページとはなんぞや。

ブログって記事のタイトルや「続きを読む」をクリックすると、その記事だけの個別のページになること多いじゃないですか、あれを作ります。

記事ページの作成

WordPressでは個別の記事ページには「single.php」というファイルを作るのが一般的だそうです。
「index.php」を同じ階層内にコピーして「single.php」という名前に変更してください。
そして

<?php the_content(続きを読む); ?>


続きを読む
だけを削除して

<?php the_content(); ?>

にしてください。

つまり「single.php」は↓のようになります。

<?php get_header(); ?>

	<div id="container">
		<?php if(have_posts()): while(have_posts()): the_post(); ?>
		<!-- ループ開始 -->
		<div class="post">
			<h2>
				<?php the_title(); ?>
				<!-- 記事タイトルを表示 -->
			</h2>
			<div class="post_info">
				<span class="post_date">
					<?php echo get_the_date(); ?>
					<!-- 投稿日時を表示 -->
				</span>
				<span class="post_category">
					<?php the_category(', '); ?>
					<!-- カテゴリーを表示 -->
				</span>
			</div>
			<?php the_content(); ?>
			<!-- 記事本文を表示 -->
		</div>
		<?php endwhile; endif; ?>
		<!-- ループ終了 -->
	</div>
	
 <?php get_footer(); ?>
 

と、これだけで記事ページ(single.php)は完成です。

タイトル部分をリンクにする

記事ページ自体は出来ましたが、トップページのタイトル部分をクリックして、その個別の記事ページに飛ぶようにします。
なぜならその方がそれっぽいから。

「index.php」を開き、

<h2>
  <?php the_title(); ?>
  <!-- 記事タイトルを表示 --> 
</h2>

を探して

<h2>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
  <!-- 記事タイトルを表示 --> 
</h2>

に変更します。
そうすると、トップページのみ記事のタイトル部分にリンクが追加されタイトルの文字が「style.css」のaタグに設定した色になっているかと思います。
そしてタイトル部分をクリックすると、それぞれの個別のページに飛べるようになっているかと思います。

好みの問題で、タイトル部分は黒に、マウスオンで青にするようにcssを追加しておきましょう。

h2 a {
	color: #333;
}
h2 a:hover {
	color: #0084d0;
}

もし「single.php」を作っていなかった場合は、個別のページのタイトルにまでリンクが付いてしまいます。
このように、役割によってページのテンプレートを作る感じですね。

次回は固定ページを作りましょう。そうしましょう。

目次

スポンサーリンク

Web Design | 2017年2月23日