single.phpを作る / wordpressのテーマのを自作する

2019年8月24日 22:16 カテゴリー: Wordpress

前回はトップページが完成しました。次は単独の記事を表示するためのページを作ります。ファイルの名前はsingle.phpにしましょう。

前回のトップページでした説明は省略していきます。まだ見ていない方、この記事でわからないことがあった方はそちらも参照してみてください。

まずはコードを見ていきましょう。

single.phpのコード

<?php get_header(); ?>
	<!--メインカラムとサイドバーをひとまとめ-->
	<div class="page">

		<!--メインカラム-->
		<div class="main">
			
			<!--記事の表示領域-->
			<article>
				
				<!--ifとwhileの始まり。重要!消しちゃダメ!-->
				<?php if(have_posts()): while(have_posts()): the_post(); ?>
				
				<!--記事タイトルの表示。-->
				<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
				
				<!--日付、カテゴリー等のデータを表示するボックス-->
				<div class="meta">
					
					<!--日付、時間の表示。表示方法の変更は設定で変更-->
					<?php the_date(); the_time(); ?>
					
					<!--カテゴリーの表示-->
					カテゴリー: <?php the_category(' > ','multiple'); ?>
					
				</div>
				
				<!--投稿記事の表示-->
				<?php the_content(); ?>
				
			<!--ifとwhileの終了。重要!消しちゃダメ!-->
			<?php endwhile; endif; ?>
		</article>
			
		</div>
		
		<!--サイドバーの表示-->
		<?php get_sidebar(); ?>
		
	</div>

	<!--フッターの表示-->
	<?php get_footer(); ?>

割と長めなコードですが、ほとんどは前回の記事で解説してあります。

コードの解説

<?php get_header(); ?>
	<!--メインカラムとサイドバーをひとまとめ-->
	<div class="page">

		<!--メインカラム-->
		<div class="main">

省略!!

<article>

</article>

コンテンツをひとまとめに指定する意味があります。ブログでは記事を表示するときに使えばいいと思います。

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

省略!!

タイトル部分

<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

記事のタイトルを表示します。詳しく見ていきましょう。

<h1>

</h1>

ページの中で一番重要な見出し。このテーマでは記事タイトルで使います。

<a href="リンクしたいページのURL">リンク文字</a>

言わずとも知れたリンクタグですね。知らない方はこれだけ覚えて帰りましょう!あとはコピペでおっけいです。 正直言うとこのリンク全く必要ないかなって思っていますが、 多くのブログでこの仕様になっているので、念のためつけています。リンクが必要ない方は、下記で説明する記事タイトル以外を消せばリンクが外れます。

<?php the_permalink(); ?>

記事のURLを表示します。

<?php the_title(); ?>

記事のタイトルを表示します。

メタい情報の表示

<div class="meta">
		<?php echo get_the_date();  the_time(); ?>
		カテゴリー: <?php the_category(' > ','multiple'); ?>
</div>

日付とか、カテゴリとかはこのボックスでまとめてあります。

<div class="meta">

</div>

これはボックスを意味しています。classで名前をmetaと名付けています。この間に入っているものはmetaという名前のボックスに入ることになります。今はあまり関係ないですが、デザインをするときに、ボックスに入れる事、名前を付けることが非常に重要になっていきます。

<?php the_date(); the_time(); ?>

日付と時間を出力します。設定画面で設定した表示形式にならない場合は

the_date(); を消して、 echo get_the_date(); に変更してみてください。

カテゴリー: <?php the_category(' > ','multiple'); ?>

カテゴリーを表示します。カテゴリー:カテゴリーリンク > カテゴリーリンク というように表示されます。

the_category(); これだけでカテゴリーは表示できますが、もう少し設定することにします。

‘ > ‘ 真ん中の>を変更すると区切り文字を変更することができます。

記事の表示

<?php the_content(); ?>

記事を表示します。これだけ!簡単!


			<!--ifとwhileの終了。重要!消しちゃダメ!-->
			<?php endwhile; endif; ?>
		</article>
			
		</div>
		
		<!--サイドバーの表示-->
		<?php get_sidebar(); ?>
		
	</div>

	<!--フッターの表示-->
	<?php get_footer(); ?>

前回の記事参照でお願いします。

まとめ

コードの解説は以上です。前回の記事で理解できていればそんなに難しくないですよね!?

HTML、PHP編はあともう少しで終わりです!それが終われば今度は楽しい楽しいデザイン編です!もう少しだけ頑張りましょう!

次の記事

WordPressのテーマを作るまとめ