WordPressテーマ制作-ステップ15-single.php作成

投稿日:

Pocket

シングルページの編集をします。ファイルはsingle.phpです。シングルページは記事を一件表示します。そのままですね。 見せ方はarchive.phpと同じにするので、archive.phpの内容をsingle.phpにコピーします。

<div id="contents">
<h2><?php wp_title(); ?></h2>
<?php if ( have_posts()): ?>
<ul>
<?php while ( have_posts() ) : the_post(); ?>
<li>
<p>
<span>日付:<a href="<?php the_permalink(); ?>"><time datetime="<?php the_time('y-m-d'); ?>"><?php the_time( get_option('date_format') ); ?></a></span>
</p>
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) :
the_post_thumbnail('thumbnail');
else :
echo '<img src="';
bloginfo( 'template_url' );
echo '/images/the_post_thumbnail_default.png" alt="デフォルト画像" />';
endif; ?>
</a>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<p>
<?php the_excerpt(); ?>
</p>
<p>
<span>カテゴリー:<?php the_category(','); ?></span>
<span><?php the_tags(); ?></span>
</p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>

 

まず、タイトルの出力をwp_title関数からthe_title関数に変更します。

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

また、本文中の<h3>~</h3>を削除しタイトルの重複表示をなくします。サムネイル画像も必要ないので、表示しないように該当箇所を削除します。 以下の部分を削除

<a href=”<?php the_permalink(); ?>”>
<?php if ( has_post_thumbnail() ) :
    the_post_thumbnail(‘thumbnail’);
    else :
    echo ‘<img src=”‘;
    bloginfo( ‘template_url’ );
    echo ‘/images/the_post_thumbnail_default.png” alt=”デフォルト画像” />’;
    endif; ?>
</a>
<h3><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h3>

archive.phpではコンテンツの抜粋を表示するthe_excerpt関数を使用しましたが、こちらでは記事全文を表示するthe_content関数を使用します。

<p>
          <?php the_excerpt(); ?>
</p>
<p>
          <?php the_content(); ?>
</p>

次に記事が複数ページに分割されている場合に対応するためwp_link_pages関数を追加します。 この関数は記事内に<!–nextpage–>と記述されている場合に、ページを分割する機能に対応するものです。 前後の記事へのリンクをprevious_post_link、next_post_link関数で設定します。

<div >
      <?php posts_nav_link(); ?>
</div>
    <div >
      <?php wp_link_pages(); ?>
      <p>
        <span >
          <?php previous_post_link(); ?>
        </span>
        <span >
          <?php next_post_link(); ?>
        </span>
      </p>
    </div>

最後にコメントの表示に対応するため、comment_templateを追加します。

    <div >
      <?php comment_template(); ?>
    </div>

コメントはコメントテンプレートを作成します。ファイル名はcomments.phpとなります。シングルページへのコメントを表示するためのテンプレートファイルを作成します。ソースは以下のようになります。

<?php if ( post_password_required() ) : ?>
<p>このページはパスワード認証が必要です。パスワードを入力してください。</p>
<?php return;
endif; ?>
<?php if ( have_comments() ) : ?>
<h3><?php the_title(); ?>に<?php echo get_comments_number(); ?>件のコメント</h3>
<?php endif; ?>
<?php wp_list_comments(); ?>
<?php comment_form(); ?>

 

パスワード付きのコメントに対応するため<?php if ( post_password_required() ) : ?>の記述を追加します。 コメントの有無をhave_comments関数で判定して、コメントがある場合はタイトルと件数を出力します。<?php if ( have_comments() ) : ?>~<?php endif; ?>まで。 次にwp_list_comments関数を使用して、コメントを表示します。 最後にcomment_form関数を使用して、コメント投稿欄を表示します。 single.phpのコンテンツ部分のソースはこんな感じですね。

<div id="contents">
 <h2><?php the_title(); ?></h2>
 <?php if ( have_posts()): ?>
 <ul>
 <?php while ( have_posts() ) : the_post(); ?>
 <li>
 <p class="meta">
 <span>日付:<a href="<?php the_permalink(); ?>"><time datetime="<?php the_time('y-m-d'); ?>"><?php the_time( get_option('date_format') ); ?></a></span>
 </p>
 <p>
 <?php the_content(); ?>
 </p>
 <p class="meta">
 <span>カテゴリー:<a href="<?php the_permalink(); ?>"><?php the_category(','); ?></a></span>
 <span><?php the_tags(); ?></span>
 </p>
 </li>
 <?php endwhile; ?>
 </ul>
 <?php endif; ?>
 <div class="single_navi">
 <?php wp_link_pages(); ?>
 <p>
 <span class="single_navi_pre">
 <?php previous_post_link(); ?>
 </span>
 <span class="single_navi_next">
 <?php next_post_link(); ?>
 </span>
 </p>
 </div>
 <div class="comm">
 <?php comments_template(); ?>
 </div>
 </div>

 

Pocket

カテゴリー:WordPress,テーマ タグ: , , , , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です