読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

トップページを表示する

テンプレートタグの読み込み順序

f:id:webmaster-web:20160709212342p:plain


「index.php」には、ダッシュボードで指定された数だけ投稿記事が表示されています。
その数を超えた場合に表示された表示されるのが「ページャー」です。
しかし、投稿記事の一覧には、「次の記事」「前の記事」という概念はありません。
「次の記事」「前の記事」という概念は、「単独記事(投稿個別ページ)」のページにのみ必要になります。

トップページとは

  • 投稿記事が、ダッシュボードで設定された数だけ表示されるページ
前後の記事へのリンクを出力しないようにする
  • is single()
  • この 条件分岐タグ は、添付ファイルや固定ページを除く個別の投稿を表示しているかどうかをチェックします
  • 前後の記事へのリンクを個別ページのみ出力するようにする
<?php if( is_single() ): ?>

<div class="pagenav">
<span class="old">
<?php previous_post_link( '%link', '<i class="fa fa-chevron-circle-left"></i> %title'); ?>
</span>
<span class="new">
<?php next_post_link( '%link', '%title <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>
記事の個別ページヘのリンクを設定する
  • 各記事の個別ページヘのリンクは、「<?php the_permalink(); ?>」で出力します
<article <?php post_class(); ?>>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>


《プレビュー》

f:id:webmaster-web:20160709213542p:plain

記事の個別ページのタイトルにはリンクされないようにする
<?php if( is_single() ): ?>
<h1><?php the_title(); ?></h1>
<?php else: ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>


《プレビュー》

f:id:webmaster-web:20160709214902p:plain

1ページに表示する記事の数を変更する
  • 「設定」→「表示設定」で「1ページに表示する最大投稿数」を「3」にする

f:id:webmaster-web:20160709220318p:plain

前後のページヘのリンクを表示する
  • 投稿記事が設定されている最大数(3)を超えた場合には、「ページネーション」を表示する
<?php endwhile; endif; ?>

<?php if( $wp_query -> max_num_pages > 1 ): ?>
<div class="pagenav">
<span class="old">
<?php next_posts_link(); ?>
</span>
<span class="new">
<?php previous_posts_link(); ?>
</span>
</div><!-- /.pagenav -->
<?php endif; ?>

</body>


《プレビュー》

f:id:webmaster-web:20160710000546p:plain

リンクの表記を変更して矢印のアイコンを表示する
  • 前後の記事へのリンクを出力する記述と、パラメーターの指定方法が異なります
<?php if ( $wp_query->max_num_pages > 1 ): ?>

<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>
<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>


《プレビュー》

f:id:webmaster-web:20160710001607p:plain

記事の一覧と前後のページのリンクをグループ化する
<body <?php body_class(); ?>>
<div class="container">

  略

<?php endif; ?>
</div><!-- /.container -->

</body>

記述まとめ

<body <?php body_class(); ?>>
<div class="container">

<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>

<article <?php post_class(); ?>>

<?php if( is_single() ): ?>
<h1><?php the_title(); ?></h1>
<?php else: ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>

<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<i class="fa fa-clock-o"></i>
<?php echo get_the_date(); ?>
</time>

<span class="postcat">
<i class="fa fa-folder-open"></i>
<?php the_category( '' ); ?>
</span>
</div><!-- /.postinfo -->


<?php the_content(); ?>

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

<div class="pagenav">
<span class="old">
<?php previous_post_link( '%link', '<i class="fa fa-chevron-circle-left"></i> %title'); ?>
</span>
<span class="new">
<?php next_post_link( '%link', '%title <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>

</article>

<?php endwhile; ?>
<?php endif; ?>

<?php if ( $wp_query->max_num_pages > 1 ): ?>

<div class="pagenav">
<span class="old">
<?php next_posts_link( '<i class="fa fa-chevron-circle-left"></i> 古い記事' ); ?>
</span>
<span class="new">
<?php previous_posts_link( '新しい記事 <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->

<?php endif; ?>

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