ワードプレス single.phpを作ってみる

サンプル

<?php get_header(); ?>

<?php while ( have_posts() ) : ?>

<?php the_post(); ?>

<?php if ( has_post_thumbnail() ) : ?>
<div class=”hero eyecatch”>
<?php the_post_thumbnail( ‘samplewp-hero’ ); ?>
</div>
<?php endif; ?>

<div class=”content-area has-side-col”>
<div class=”main-column”>
<div class=”box-generic”>
<h1 class=”box-heading box-heading-article”><?php the_title(); ?></h1>
<div class=”box-content”>

<article class=”entry”>
<?php the_content(); ?>
</article>

<div class=”meta-data”>
<time class=”meta meta-entry-date” datetime=”<?php echo get_the_date( DATE_W3C ); ?>”><?php echo get_the_date(); ?></time>
<p class=”meta meta-author”><?php the_author_posts_link(); ?></p>
<p class=”meta meta-cat”><?php the_category( ‘, ‘ ); ?></p>
<p class=”meta meta-tag”><?php the_tags(); ?></p>
</div>

<?php the_post_navigation( array(
‘prev_text’ => ‘前の記事：%title’,
‘next_text’ => ‘次の記事：%title’,
) ); ?>
</div>
</div>

<?php if ( comments_open() || get_comments_number() ) :
comments_template();
endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php endwhile; ?>

<?php get_footer();

ここでは

<?php get_header(); ?>

でheader部を読み込んで

<?php while ( have_posts() ) : ?>

<?php the_post(); ?>

でループが始まっています。

また、

<?php endwhile; ?>

でループを終了させ、最後に

<?php get_footer();

でfooter部を読み込ませています。

個別投稿画像表示について

<?php if ( has_post_thumbnail() ) : ?>

でアイキャッチ画像を表示します。

<div class=”hero eyecatch”>
<?php the_post_thumbnail( ‘samplewp-hero’ ); ?>
</div>
<?php endif; ?>

アイキャッチ画像が指定されていない場合は、<div class=”hero eyecatch”>が出力されません。

個別投稿タイトル、本文表示について

<h1 class=”box-heading box-heading-article”><?php the_title(); ?></h1>

タイトル表示は<?php the_title(); ?>で個別タイトル表示されます

また、

<article class=”entry”>
<?php the_content(); ?>
</article>

で投稿本文が表示されます。

また、

<div class=”meta-data”>
<time class=”meta meta-entry-date” datetime=”<?php echo get_the_date( DATE_W3C ); ?>”><?php echo get_the_date(); ?></time>
<p class=”meta meta-author”><?php the_author_posts_link(); ?></p>
<p class=”meta meta-cat”><?php the_category( ‘, ‘ ); ?></p>
<p class=”meta meta-tag”><?php the_tags(); ?></p>
</div>

ここでは

<?php echo get_the_date( DATE_W3C ); ?>”><?php echo get_the_date(); ?>投稿日

<?php the_category( ‘, ‘ ); ?>カテゴリー

<?php the_tags(); ?>タグ

となり、

<?php the_author_posts_link(); ?>

がアーカイブリンクになります。

前後投稿リンク表示について

<?php the_post_navigation( array(
‘prev_text’ => ‘前の記事：%title’,
‘next_text’ => ‘次の記事：%title’,
) ); ?>

ここでは前後ナビリンクは「the_post_navigation」を使って出力しています。