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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

前後の記事へのリンクを表示する

前後の記事へのリンクを表示する

  • class名を「pagenav」「old」「new」とする
<?php the_content(); ?>

<div class="pagenav">
<span class="old">
<?php previous_post_link(); ?>
</span>
<span class="new">
<?php next_post_link(); ?>
</span>
</div><!-- /.pagenav -->

</article>


矢印をアイコン表示する
  • リンクのパラメーターを「%link」と指定し、前後に矢印記号を挿入します
<div class="pagenav">
<span class="old">
<?php previous_post_link( '<i class="fa fa-chevron-circle-left"></i> %link' ); ?>
</span>
<span class="new">
<?php next_post_link( '%link <i class="fa fa-chevron-circle-right"></i>' ); ?>
</span>
</div><!-- /.pagenav -->


矢印アイコンをリンクの一部にする
  • パラメーターを「%title」を追加し、矢印アイコンと記事タイトルがセットでリンクするように指定する
<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 -->


リンクのデザインを指定する
  • 「border-radius」で角丸にする
/* 前後の記事へのリンク */
.pagenav a {
  padding: 5px 10px;
  border: 1px solid #CCC;
  border-radius: 6px;
  font-size: 12px;
  color: #666;
  text-decoration: none;
}
リンクを左右に配置する
.pagenav .old a {
  float: left;
}
.pagenav .new a {
  float: right;
}
.pagenav {
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 40px;
}