トップページの記事を複数ページで表示する

トップページの記事を複数ページで表示する

• トップページに表示する記事の数を少なくして複数のページにわけて表示します

関数

トップページの場合は中身を出力

<?php if(is_home()): ?>
〜
<?php endif; ?>

前のページへのリンクを出力

<?php previous_posts_link(); ?>

次のページへのリンクを出力

<?php next_posts_link(); ?>

１ページに表示する記事の数を指定

• 「設定」→「表示設定」

古い記事のページへのリンクを追加する

• 新しい記事から表示されているため、「next_posts」は、現在の表示から見て、それ以前の新しい記事という意味になります

<?php endwhile; endif; ?>

<p class="pagelink">
<?php next_posts_link(); ?>
</p>

リンクの表記を変更する

<?php endwhile; endif; ?>

<p class="pagelink">
<?php next_posts_link('&laquo; 前の記事'); ?>
</p>

新しい記事のページへのリンクを追加する

• 新しい記事から表示されているため、「previous_posts」は、現在の表示から見て、この表示よりも新しい記事という意味になります

<?php endwhile; endif; ?>

<p class="pagelink">
<?php previous_posts_link(); ?>
</p>

リンクの表記を変更する

<?php endwhile; endif; ?>

<p class="pagelink">
<?php next_posts_link('次の記事 &raquo;'); ?>
</p>

リンクを区別できるようにする

<p class="pagelink"><span class="oldpage">
<?php next_posts_link('&laquo; 前の記事'); ?>
</span></p>
<p class="pagelink"><span class="newpage">
<?php previous_posts_link('次の記事 &raquo;'); ?>
</span></p>

リンクのデザイン

• 記事を新しいものから順に時系列にしたがってリンクを作る場合、Webページでは「古い記事のリンクを左向き」「新しい記事のリンクを右向き」に設定するのが一般的です

リンクをトップページにだけ出力する

• 前の記事へのリンクのみ表示させ、次のリンクは表示させない

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

<p class="pagelink"><span class="oldpage">
<?php next_posts_link('&laquo; 前の記事'); ?>
</span></p>
<p class="pagelink"><span class="newpage">
<?php previous_posts_link('次の記事 &raquo;'); ?>
</span></p>

<?php endif; ?>

リンクを左右に配置する

/* pagelink */
span.oldpage {
  float: left;
  margin: 0 0 15px 0;
  display: inline; /* IE6 対策 */
}
span.newpage {
  float: right;
  margin: 0 0 16px 0;
  display: inline; /* IE6 対策 */
}
p.pagelink a {
  color: #0c8bcd;
  font-size: 0.75em;
}