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"> <h2><?php the_title(); ?></h2> <div id="main-content"> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </div> </div>
上記コードの7～10行目にある
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
が、意味合いとしては
「もし【投稿（もしくは固定ページ）】に記事がアップされている場合」
という、条件分岐の記述になります。
そして、その条件分岐のPHPを終わらせる記述が14行目の
<?php endwhile; endif; ?>
になるので、こちらも記述抜けがないよう気を付けましょう。
（<?php endwhile; endif; ?>の記述がないと、エラー表示されてしまいます。。。）
省略したPHPコードの記述方法
ちなみに上記でも説明させていただいたように、上記PHPコードの7～10行目および14行目は条件分岐のコードになるため、実際には
<div id="content"> <h2><?php the_title(); ?></h2> <div id="main-content"> <?php the_content(); ?> </div> </div>
上のように省略した記述でも記事内容を表示させることは可能のようです(^-^)
それでは、各コードの説明を以下にまとめておきます。
ページタイトルを反映させる
ページタイトルを反映させるには、以下のコードに書き換えましょう。
<?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の編集画面から記事の追加・ページの追加が可能になりますので、是非ともご活用ください！
