記事のページによくある「次の記事」「前の記事」を、テキストリンクだけでなく、マウスオーバーしてフワッと浮き上がるツールチップ形式で前後の記事のタイトルを表示したいと思います。
wordpress記事の前後の投稿タイトルを表示する
get_previous_post()で、表示中の記事の一つ前の記事の情報を、get_next_post()で、次の記事の情報を取得し、各情報を変数に代入します。
get_previous_post:WordPress私的マニュアル
get_next_post:WordPress私的マニュアル
表示中の記事が最新だったり、一番最初に書いた記事だった場合にはその部分を読み込まないように、if(!empty($～))で条件分岐させましょう。
get_previous_post()もしくはget_next_post()で取得した記事の情報化から、タイトルとリンクを取得します。
//前の記事 前の記事
post_title; ?>
//次の記事 次の記事
post_title; ?>
コード中のこの部分が出力しています。
リンクはget_permalink()を使い、引数となるIDは、既に取得した前後の記事の情報からメンバ変数を使って取得します。
get_permalink:WordPress私的マニュアル
で囲まれた部分が前後の生地のタイトルで、今回ツールチップにする箇所です。
ツールチップを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入門
マウスオーバーして表示されてから少し残って消えることになります。
全部書くとこんな感じです。
以上です！
ちなみに万が一jQueryが読み込まれない環境の場合は、ツールチップがそのまま表示されてしまいます。
一応「前後の記事の概要を確認する」目的は果たしていますが。やはり見た目が気になる場合はposition:absoluteでなく普通に配置してもいいかもしれません。
でわ！
