php22 「次のページ」「前のページ」の表示

記事が増えてくると、すべての記事を1ページに収めるのは読み手にとって良い状態ではありません。
そこで、管理画面の「設定」から「表示設定」で一度に表示する記事数を調整し、その前後の記事を表示できるよう、編集していきましょう。

 

「次のページ」「前のページ」の表示

今回はユーザ向けに日本語でページリンクを作っていきます。

<?php endif; ?>
<p class=”pagenav”>
<span class=”prev”><?php previous_post_link(‘&laquo; 前のページ’); ?></span>
<span class=”next”><?php next_post_link(‘次のページ &raquo;’); ?></span>
</p>
</div>

前後ページ両方とも入れた、大きなくくりで「pagenav」とクラス名を付けておきます。

「次のページ」「前のページ」の各場所にも「prev」「next」とそれぞれクラス名を付けましょう。

どちらもスタイルシートでデザインしやすくするための設定です。

「previous_post_link」で、1つ前のページにジャンプします。

「next_post_link」で、1つ次のページにジャンプします。

「&laquo;」と「&raquo;」は、「 ≪ 」「 ≫ 」などの記号を表示するための記述です。

 

ここまでの記述の確認

index.php

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<title>
<?php bloginfo(‘name’); ?>
</title>
<!– スタイルシート呼び出し –>
<link href=”<?php echo get_stylesheet_uri(); ?>” rel=”stylesheet” type=”text/css”>
</head>
<body>
<!– コンテナ –>
<div id=”container”>
<!– ヘッダー部分 –>
<div id=”header”>
<h1>
<a href=”<?php bloginfo(‘url’); ?>”>
<?php bloginfo(‘name’); ?></a>
</h1>
<h2>
<?php bloginfo(‘description’); ?>
</h2>
</div>
<!– コンテンツ部分 –>
<div id=”content”>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class=”post”>
<h3>
<a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
</h3>
<?php the_content(); ?>
<p class=”postinfo”>
<?php the_date(); ?>
<?php the_time(); ?>
/記事カテゴリー:
<?php the_category(‘,’); ?>
</p>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>記事がありません</h2>
<?php endif; ?>
<p class=”pagenav”>
<span class=”prev”><?php previous_post_link(‘&laquo; 前のページ’); ?></span>
<span class=”next”><?php next_post_link(‘次のページ &raquo;’); ?></span>
</p>
</div>
</div>
</body>
</html>