コピペで出来る!wordpressの「次の記事」とかをjQueryツールチップで実装

2014.5.25 webツール

wordpressで次の記事の内容をTooltipで表示

記事のページによくある「次の記事」「前の記事」を、テキストリンクだけでなく、マウスオーバーしてフワッと浮き上がるツールチップ形式で前後の記事のタイトルを表示したいと思います。

wordpress記事の前後の投稿タイトルを表示する

<!--ページナビ-->
<ul class="p-navi">
    <?php
      $prev_post = get_previous_post();
      if (!empty( $prev_post )){ ?>
    <li class="prev">
   	<a href="<?php echo get_permalink( $prev_post->ID ); ?>">前の記事</a>
    	<p class="ttip"><?php echo $prev_post->post_title; ?></p>        
    </li>
    <?php } ?>
    <?php
      $next_post = get_next_post();
      if (!empty( $next_post )){ ?>
      <li class="next">
      	<a href="<?php echo get_permalink( $next_post->ID ); ?>">次の記事</a>
    	<p class="ttip"><?php echo $next_post->post_title; ?></p>
      </li>
    <?php } ?>
</ul>

get_previous_post()で、表示中の記事の一つ前の記事の情報を、get_next_post()で、次の記事の情報を取得し、各情報を変数に代入します。
get_previous_post:WordPress私的マニュアル
get_next_post:WordPress私的マニュアル

表示中の記事が最新だったり、一番最初に書いた記事だった場合にはその部分を読み込まないように、if(!empty($~))で条件分岐させましょう。

get_previous_post()もしくはget_next_post()で取得した記事の情報化から、タイトルとリンクを取得します。

//前の記事
<a href="<?php echo get_permalink( $prev_post->ID ); ?>">前の記事</a>
<p class="ttip"><?php echo $prev_post->post_title; ?></p>

//次の記事
<a href="<?php echo get_permalink( $next_post->ID ); ?>">次の記事</a>
<p class="ttip"><?php echo $next_post->post_title; ?></p>

コード中のこの部分が出力しています。

リンクはget_permalink()を使い、引数となるIDは、既に取得した前後の記事の情報からメンバ変数を使って取得します。
get_permalink:WordPress私的マニュアル

<p class=”ttip”>で囲まれた部分が前後の生地のタイトルで、今回ツールチップにする箇所です。

ツールチップをjQueryで表示する

マウスオーバー時のみ表示したいので、jQueryセレクタでオブジェクトを指定しマウスオーバーしていない時は非表示にします。

$(".ttip").css({ "display" : "none"});

スタイルはお好みで。

$(".ttip").css({
	"margin" : "0" ,
	"padding" : "2px" , 
	"border-radius": "4px" ,
	"position" : "absolute" ,
	"bottom" : "-2em" ,			
	"background-color" : "rgba(10,10,10,.7)" ,
	"filter" : "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#33333333,EndColorStr=#33333333)" ,
	"color" : "#fff" ,
	"font-size" : ".8em" ,
	"line-height" : "1.1" ,
	"display" : "none"
});

$(".prev > .ttip").css("left" , "10px")
$(".next > .ttip").css("right" , "10px")

$(".p-navi li").css({"position" : "relative"})

ツールチップはposition:absoluteで位置を指定しているため、親要素のliにはposition:relativeを指定しましょう。

続いてマウスオーバーの効果を指定します。

$(".p-navi li a").mouseover(function(){
 $("+ .ttip" , this).fadeIn("slow");
})

 

$(“+ .ttip” , this)の「this」は、処理中の要素の…という意味なので、マウスオーバーしたaリンクのとなりの.ttip(ツールチップ)ということになります。

メソッドチェーンでfadeIn(“slow”)と指定します。もっとゆっくりフェードインしたい場合は数値を指定します。
fadeIn([speed], [callback]) – jQuery 日本語リファレンス

続けて、マウスが離れた時の処理をmouseout()で指定します。

mouseout(function() {
 setTimeout(function(){
  $(".ttip").fadeOut("fast");
 } , 2000)
})

setTimeout()は、一定時間が経過した後に、第1引数に設定した関数の処理を開始させる命令です。上記の場合は2秒間です。
一定時間で繰り返す(setTimeout)-JavaScript入門
マウスオーバーして表示されてから少し残って消えることになります。

全部書くとこんな感じです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	
 $(".ttip").css({
	"margin" : "0" ,
	"padding" : "2px" , 
	"border-radius": "4px" ,
	"position" : "absolute" ,
	"bottom" : "-2em" ,			
	"background-color" : "rgba(10,10,10,.7)" ,
	"filter" : "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#33333333,EndColorStr=#33333333)" ,
	"color" : "#fff" ,
	"font-size" : ".8em" ,
	"line-height" : "1.1" ,
	"display" : "none"
});
 $(".prev > .ttip").css("left" , "10px")
 $(".next > .ttip").css("right" , "10px")
	 
 $(".p-navi li").css({"position" : "relative"})
 $(".p-navi li a").mouseover(function(){
	$("+ .ttip" , this).fadeIn("slow");
 }).mouseout(function() {
  setTimeout(function(){
	$(".ttip").fadeOut("fast");
 } , 1000)
 })
});
</script>

 <!--ページナビ-->
 <ul class="p-navi clearfix">
     <?php
        $prev_post = get_previous_post();
        if (!empty( $prev_post )){ ?>
     <li class="prev">
      	<a href="<?php echo get_permalink( $prev_post->ID ); ?>">前の記事</a>
      	<p class="ttip"><?php echo $prev_post->post_title; ?></p>
        
     </li>
     <?php } ?>
     <?php
       $next_post = get_next_post();
       if (!empty( $next_post )){ ?>
      <li class="next">
       	<a href="<?php echo get_permalink( $next_post->ID ); ?>">次の記事</a>
      	<p class="ttip"><?php echo $next_post->post_title; ?></p>
      </li>
      <?php } ?>
</ul>

 

ツールチップのデモ

 

以上です!
ちなみに万が一jQueryが読み込まれない環境の場合は、ツールチップがそのまま表示されてしまいます
一応「前後の記事の概要を確認する」目的は果たしていますが。やはり見た目が気になる場合はposition:absoluteでなく普通に配置してもいいかもしれません。

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。