WordPress テーマの作成

WordPressで過去記事のリンクを作成する

更新日:

WordPressでテーマの作成/その7

トップページには、『設定』→『表示設定』の『1ページに表示する最大投稿数』で指定された件数の記事を表示しますが、複数のページに分けて過去記事も表示できるようにしたいと思います。1ページに表示する最大投稿数はデフォルトでは10ですが、このテストサイトでは、5件しか投稿記事がありませんので、最大投稿数を2に変更しておきます。

まず、『wp-content/themes/winroad theme』フォルダに、ページネーション用のカスタムパーツテンプレート『pagenation.php』ファイルを作成し、下記のコードを入力します。

<p class="pagenation">
<span class="oldpage"><?php next_posts_link('« 古い記事'); ?></span>
<span class="newpage"><?php previous_posts_link('新しい記事 »'); ?></span>
</p>

次に、『home.php』ファイルを下記のように変更します。

<?php get_header(); ?>

<!-- コンテンツ -->
<div id="content">
<p class="title">投稿記事</p>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
	<?php get_template_part('content'); ?>
<?php endwhile; endif; ?>

<!-- ページネーション -->
<?php get_template_part('pagenation');?>
<!-- /ページネーション -->
</div>
<!-- /コンテンツ -->

<?php get_footer(); ?>

ページネーションもスタイルシートでデザインを指定しやすいようにコンテンツグループの中に入れておきました。

それではブラウザで確認してみます。

リンクのデザインを指定する

『style.css』ファイルに下記のタグを追加します。

/* ページネーション */
p.pagenation	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	overflow: hidden}	/*コンテンツの回り込み禁止*/

span.oldpage	{
	float: left}	/*古い記事のリンクを左揃え*/

span.newpage	{
	float: right}	/*新しい記事のリンクを右揃え*/

それでは、再度ブラウザで確認してみます。

本日は以上です。

-WordPress, テーマの作成
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.