12：ページ内容表示用ループ

公開日:2018年11月04日更新日:2018年11月06日

WordPress

オリジナルテーマ作成

タイトルや本文など、固定ページや投稿のページ内容を表示するにはページ内容表示用ループを記述します。

投稿一覧やアーカイブページにも適用できるようにループを使用して記述します。

<?php
if (have_posts()){
  while (have_posts()){
    the_post();
    echo '記事が存在しています';
  }
}else{
  echo '記事が存在しません';
}
?>

ページ内容表示用ループはHTMLタグと併用することが多いため、代替構文を使用すると便利です。

<?php /***** ループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
  記事が存在しています
<?php endwhile; ?>
<?php else: ?>
  記事が存在しません
<?php endif; ?>
<?php /***** ループ終了 *****/ ?>

index.php

ハイライト部分書き換え

<?php get_header(); ?>

  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">
<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // リンク ?>
<a class="post-link <?php echo 'post-id'.$id; ?>" href="<?php the_permalink(); ?>">

<?php // タイトル ?>
  <h2 class="title"><?php the_title(); ?></h2>

<?php // 抜粋文 ?>
  <div class="excerpt"><?php the_excerpt(); ?></div>

<?php // 公開日時 ?>
  <div class="release-date">公開日時：<?php the_time('Y年m月d日'); ?></div>

<?php // 最終更新日時 ?>
  <div class="modified-date">最終更新日時：<?php the_modified_date('Y年m月d日'); ?></div>
</a>

<?php endwhile; ?>
<?php else: ?>
<div class="no-post">
  <div class="inner">
    <p>記事が存在しません</p>
  </div><!-- /.inner -->
</div><!-- /.no-post -->
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>
        </div><!-- /.inner -->
      </div><!-- /.main-loop -->

    </div><!-- /.main -->
    <?php get_sidebar(); ?>
  </div><!-- /.content -->


<?php
get_footer();

style.css

投稿一覧リンクをデザイン

/* ========================================== */
/*投稿一覧リンク設定*/
a.post-link {
  display: block;
  text-decoration: none;
  border: solid 1px;
  margin: 10px;
}

出力されたHTML

body内抜粋

<div class="container index hello-world">

  <div class="header">
    <div class="inner">
      <h1><a href="http://localhost/lesson1">レッスン１</a></h1>
      <p>Just another WordPress site</p>
      <p>wireframe04</p>
      <div class="theme_img"><img src="http://localhost/lesson1/wp-content/themes/wireframe04/img/image.png" alt="テーマ内画像" /></div>
    </div><!-- /.inner -->
  </div><!-- /.header -->

  <div class="global_nav">
    <div class="inner">
      <div class="menu">
        <ul>
          <li class="page_item page-item-2"><a href="http://localhost/lesson1/sample-page/">サンプルページ</a></li>
        </ul>
      </div>
    </div><!-- /.inner -->
  </div><!-- /.nav -->


  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">
<a class="post-link post-id1" href="http://localhost/lesson1/hello-world/">
  <h2 class="title">Hello world!</h2>
  <div class="excerpt"><p>WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !</p></div>
  <div class="release-date">公開日時：2018年11月03日</div>
  <div class="modified-date">最終更新日時：2018年11月03日</div>
</a>
        </div><!-- /.inner -->
      </div><!-- /.main-loop -->

    </div><!-- /.main -->
      <div class="sidebar">
        サイドバーコンテンツ
      </div><!-- /.sidebar -->
  </div><!-- /.content -->


  <div class="footer">
    <div class="inner">
      <div class="copyright">
        © 2018        <a href="http://localhost/lesson1">レッスン１</a>.
      </div>
    </div><!-- /.inner -->
  </div><!-- /.footer -->

</div><!-- /.container -->