神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【WordPress】投稿ページ・固定ページに投稿内容を表示させる方法

2015.11.14
WordPress

 WordPressのオリジナルテーマを作成した際、必ず必要になってくるのが
・single.php
・pafe.php

の2つのファイルになります。このファイルにWordPressの投稿ページ・固定ページに入力した内容を反映させるタグを記述することでWordPressの投稿で入力した内容を反映させることができるようになります!

1. ページの構成を決める

 まず、投稿ページ・固定ページの構成を決めます。例えば、どこにページタイトルを表示させるのか、記事内容を表示させるのか、などといった構成をまずはhtmlソースで決めることから始めましょう!
 今回は以下のような構成にしました。

<div id="content">
	<h2>ページタイトル</h2>
	<div id="main-content">
		記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文記事本文
	</div>
</div>

このソースに、WordPressの投稿内容を反映させるコードを当てはめていきます。

2. PHPコードを記述する

 それでは実際にPHPコードを記述していきましょう!
まず初めにPHPコードに書き換えた内容を紹介したいと思います。

<div id="content">

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

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

		<div id="main-content">
		<?php the_content(); ?>

	<?php endwhile; endif; ?>

      </div>

</div>

上記コードの3~6行目にある

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

と13行目の

<?php endwhile; endif; ?>

この両方のタグが投稿内容を取得・表示させるには必要なタグとなりますので、まずこのタグは必ず入れるようにしましょう。

また、各コードの説明は以下にまとめておきます。

ページタイトルを反映させる

 ページタイトルを反映させるには、以下のコードに書き換えましょう。

<?php the_title(); ?>

このコードを記述することで自動的にページタイトルを反映させることができるようになります。
今回はページタイトルをh2タグで囲いたかったので、見本コードでは

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

と記述しています。

記事本文を反映させる

 続いて記事本文を反映させるには以下のコードを記述しましょう。

<?php the_content(); ?>

このコードを記述することで投稿内容を反映させることができるようになります!
上記の見本コードでは<div id=”main-content”>~</div>で記事本文を囲んでいたので、

<div id="main-content">
	<?php the_content(); ?>
</div>

という風に記述しています。

まとめ

 以上が投稿ページ・固定ページに投稿を反映させるのに必要なコードになります!以上のコードをsingle.phpおよびpage.phpに記述することでWordPressの編集画面から記事の追加・ページの追加が可能になりますので、是非ともご活用ください!

関連記事

スポンサーリンク
検 索