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

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

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

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

  • 投稿記事のページャー(ページを移動する仕組み)
  • $format(文字列) (オプション) リンクの文字列の書式
  • リンクの前後に追加する文字を設定できます
  • 「%link」と文字列内に表記すると「$link」(次のパラメータ)に置き換えられます
  • 「Go to %link」とすると「Go to <a href=...」となります。スタイルをつけるには HTML タグを入れます
前の記事へのリンクを出力
<?php previous_post_link(); ?>
次の記事へのリンクを出力
  • 初期設定での使用
  • 次の投稿(投稿の作成日順)へのリンクを、そのタイトルと右アンギュラークォート(»)として表示します
<?php nex_post_link(); ?>
<?php the_content(); ?>

<?php previous_post_link(); ?>
<?php nex_post_link(); ?>
  • ()中が空の場合は、初期値が入ります
  • 初期値: '&laquo; %link'(nex_previous_link の場合)
  • 初期値: '%link &raquo;'(nex_post_link の場合)


《プレビュー》

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

class名を付与する
  • 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>


《プレビュー》

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

矢印をアイコン表示する
  • リンクのパラメーターを「%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 -->


《プレビュー》

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

矢印アイコンをリンクの一部にする
  • パラメーターを「%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;
}


《プレビュー》

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

リンクを左右に配置する
.pagenav .old a {
  float: left;
}
.pagenav .new a {
  float: right;
}
.pagenav {
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 40px;
}


《プレビュー》

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