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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

トップページを表示する

前後の記事へのリンクを出力しないようにする

  • 前後の記事へのリンクを個別ページのみ出力するようにする
<?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>


記事の個別ページのタイトルにはリンクされないようにする
<?php if( is_single() ): ?>
<h1><?php the_title(); ?></h1>
<?php else: ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php endif; ?>
1ページに表示する記事の数を変更する
  • 「設定」→「表示設定」で「1ページに表示する最大投稿数」を「3」にする

前後のページヘのリンクを表示する
<?php endwhile; endif; ?>

<?php if( $wp_query -> max_num_page > 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>
リンクの表記を変更して矢印のアイコンを表示する
<?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; ?>


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

  略

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

</body>