WordPressでテーマ自作(第9回:前後記事をリンク表示させるには)

スポンサーリンク


WordPress(ワードプレス)で自作テーマを作りながら仕組みを学ぶ長期連載も9回目となりました。ここまで、テーマの立ち上げからフォントアイコンの設定まで紹介しましたが、今回は前後への記事リンクを表示できるようにしましょう。

リンクを表示させるためのテンプレートタグ

最初に、これまで投稿された記事はデフォルトで用意されていた「Hello World」のみだったので、適当に記事を2つ投稿してみました。これがなければリンクが表示されませんからね。すると、index.phpには記事が3つ並びました。

記事を2つ追加

記事を2つ追加

続いて、前後の記事へとつながるリンクを表示させるテンプレートタグを紹介します。本文の終わりに打ち込むと次の記事への移動がスムーズに行えるので、置く位置は本文の後にします。

//前後のリンクを表示させる
<?php the_content();?>
 <?php previous_post_link(); ?>
  <?php next_post_link(); ?>

実際に記述してみると、ページは以下のように変化しました。

ページ全体にリンクが貼られた

ページ全体にリンクが貼られた

3つの記事に各ページへのリンクができあがりましたね。リンクをクリックしてみると、個別記事のページへと飛ぶことができます。

個別ページも表示できるようになりました

個別ページも表示できるようになりました

リンクのテンプレートタグにつく「«」「»」を変更する

リンクのテンプレートタグを記述すると、リンクの前には「«」「»」が付きます。これは、HTMLの文字コードでは「&laquo;」「&raquo;」と打つことで表示されます。

今度は「«」「»」をアイコンフォントで装飾して見栄えをよくしてみましょう。そのためにはタグにクラス名を指定しなければなりません。

  //リンクのテンプレートタグにクラスを指定させよう

 <div class="pagenav">
 <span class="old">
  <?php previous_post_link(); ?>
 </span&gt;
 <span class="new">
   <?php next_post_link(); ?>
 </span>
 </div>

  

これで準備が整いましたので、アイコンフォントの装飾に移ります。アイコンフォントは前回使用したFontAwesomeを利用します。
テンプレートタグによって出力された記号をどのように変化させるのかといえば「パラメーター」の出番です。パラメーターの値を「’%link’」と記述して、%の直前、または直後に使いたいフォントアイコンを挿入しましょう。
FontAwesomeにおける左向き矢印アイコンは「fa-chevron-circle-left」、右向きは「fa-chevron-circle-right」です。


<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>

  
リンクの矢印がフォントアイコンに変わった

リンクの矢印がフォントアイコンに変わった

これで矢印のフォントアイコンが表示されました。しかし。アイコン自体は黒色でカーソルの上に乗せても何の変化もありません。つまり、リンクになっていない状態なのです。これを解決するためには「’%link’」で囲まれた中にアイコンフォントのコードを記述するのではなく、「,(カンマ)」で区切った後に「’%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-left"></i>'); ?>
</span>
</div>

  
矢印にもリンクが貼られた

矢印にもリンクが貼られた

リンクをスタイルシートで装飾する

最後にリンクをスタイルシートで装飾してみましょう。ここで記述したクラス「pagenav」はリンク全体にかかり、「old」は一つ前の記事、「new」は一つ後の記事だという意味をわかりやすくするためにつけた任意の文字列です。
ここではリンクをそれぞれ丸囲みにしてフォントも通常よりも小さな文字に設定。内側に余白を持たせ、色も灰色に変化させましょう。

/*前後の記事リンク*/
.pagenav a {padding:10px;
border:solid 1px #cccccc;
color:#666666;
font-size:12px;
text-decoration:none}
スタイルシートで装飾

スタイルシートで装飾

カラー「#cccccc」は薄めのグレー、「#666666」は通常のグレーを意味します。

フロートのせいで装飾が崩れてしまう

これで、スタイルシートによってリンクが装飾されました。デザインはこの限りではないため自由に変えて変化を楽しみましょう。
この状態でも問題はありませんが、せっかくなのでリンクも左右それぞれの端に置くように設定します。

  /*前後の記事リンクを左右の端に置く*/
.pagenav .old a {float:left}
.pagenav.new a {float:right}
  

すると、問題が発生します。フロートの関係で見出しが引っ張られて、体裁が崩壊してしまいました。

リンクと見出しの体裁が崩壊

リンクと見出しの体裁が崩壊

これを解決するには、リンクの入れ子「pagenav」のoverflowを「hidden」にしましょう。さらに、上下の記事との余白を開けるために上下のmarginも適量分開けてみます。

  //記事のレイアウト崩れを解消させて、上下に空きを入れる
  .pagenav {overflow:hidden;
  margin-top:40px;
  margin-bottom:40px}
  
スタイルシートでoverflow=hiddenを入れたことによって体裁が元通りに

スタイルシートでoverflow=hiddenを入れたことによって体裁が元通りに

以上で前後リンクの挿入方法の紹介を終わりにします。次回は、トップページの装飾について触れていきたいと思います。

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。