30代は創造する

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

01. 1ページに表示する記事の件数を設定する
動作確認ができるように、2件に設定しました。
設定 ＞ 表示設定 ＞ 1ページに表示する最大投稿数



02.次ページへを表示
次ページへのリンクを表示します。
・記述
<p class="pagelink">
<span class="oldpage"><?php next_posts_link(); ?></span>
</p>
・出力
<p class="pagelink">
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=2" >次ページへ &raquo;</a></span>
</p>



03.前ページへを表示
次ページへのリンクを表示します。
・記述
<p class="pagelink">
<span class="newpage"><?php previous_posts_link(); ?></span>
<span class="oldpage"><?php next_posts_link(); ?></span>
</p>
・出力
<p class="pagelink">
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/" >&laquo; 前ページへ</a></span>
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=3" >次ページへ &raquo;</a></span>
</p>



04. 表示する文字の変更
表示を、古い記事、新しい記事に変更します。
・記述
<?php if(is_home()): ?>
<p class="pagelink">
<span class="oldpage"><?php next_posts_link('&laquo; 古い記事'); ?></span>
<span class="newpage"><?php previous_posts_link('新しい記事 &raquo;'); ?></span>
</p>
<?php endif; ?>
・出力
<p class="pagelink">
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=3" >&laquo; 古い記事</a></span>
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/" >新しい記事 &raquo;</a></span>
</p>

関数のカッコ内に文字を記述することで、表示を変更できます。
<?php if(is_home()): ?> ～ <?php endif; ?>は、
トップページの場合のみ、囲まれた部分を表示します。

05. リンクを左右に表示する
style.cssを編集し、リンクを左右に表示させます。

/* ページリンク */
span.oldpage  {float: left}

span.newpage  {float: right}

p.pagelink a  {font-size: 0.75em;
  color: #0c8bcd;}

p.pagelink  {overflow: hidden;
  width: 100%}

[0回]