WordPressで、jQuery使って、記事の終わりにオススメ記事をにゅっと表示させるやつを、オリジナルで作る方法

最近、記事の最後までいくと、
右下からにゅっと表示させるやつ流行ってますよね。

↓こんなやつ
記事を読み進めるとオススメ記事を表示する Slide for SimpleReach を導入してみた | Lifehacking.jp

WordPressでプラグインがあるみたいで、結構いろんなひとが使っていたので、
僕も使ってみようかなぁ、と思ったのですが、みんなと同じデザインは嫌だ！
ということで、自作してみました。

以下の記事が死ぬほど参考になりました。
jQueryで特定の要素までスクロールした時に特定の要素を表示させる | hlw.me

まず、テンプレートのヘッダー（header.php）編集画面のhead内、
こんなかんじで（コピペするだけじゃダメですよ）jqueryを呼び出して、

<script type="text/javascript" src="/js/jquery.js"></script>

その下に、以下のコードをコピペします。

<script type="text/javascript">
$(function(){
    DelayVisibleContents("#recommendSwitch", "#recommend", 50, 500, 500, 3000);
});
var DelayVisibleContents = function(t, c, h, d1, d2, m){
        var f = 0;
        $(c).css({height: 0}).hide();
        setInterval(function() {
            var tPs = $(t).offset().top;
            var wHt = $(window).height();
            var bSc = $(this).scrollTop() + wHt;
            if(f == 0 && (bSc > tPs && bSc - m < tPs)) {
                f++;
                $(c+":not(:animated)").css("display","block").animate({height:h+"px"},{"duration":d1,complete:function(){f++;}});
            } else if(f >= 2 && (bSc <= tPs || bSc - m >= tPs)) {
                f--;
                $(c+":not(:animated)").animate({height:"toggle"},{"duration":d2,complete:function(){$(this).css({height: 0}).hide();f--;}});
            }
        }, 300);
}
</script>

次に、単一記事の編集画面（single.phpもしくはloop-single.php）内の、
記事の終わり（the_contentというphpがあると思うので、その下）に以下をコピペ。

<div id="recommendSwitch"></div>

これが、id=recommendSwitchまで（記事の終わりまで）スクロールしたら表示する、というスイッチの設定になります。

次に、実際の表示部分になります。単一記事編集画面のget_footerの上あたりに、以下をコピペします。

<div id="recommend">
<?php query_posts('showposts=1&orderby=rand');?>
<?php if(have_posts()):while(have_posts()):the_post();?>
<p>あわせてどうぞ</p>
<h2><a href="<?php the_permalink();?>""><?php the_title();?></a></h2>
<?php endwhile;endif;?>
<!--recommend--></div>

showposts=1&orderby=randという記述で、記事をランダムに1つだけ取ってきてます。

あとは、CSSで#recommendをオリジナルに設定すれば、完成！
当ブログでは、現在以下のようなCSSになっています。

#recommend{
display:none;
position:fixed;
right:6px;
bottom:6px;
width:400px;
height:auto;
padding:5px;
-moz-border-radius:12px;
-webkit-border-radius: 12px;
border-radius:12px;
line-height:1.1;
background:#333;
color:#fff;
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
#recommend p{
padding-top:4px;
padding-left:10px;
font-size:12px!important;
color:#ccc;
}
#recommend h2{
font-size:12px!important;
height:auto!important;
padding-left:10px;
}
#recommend a{
color:#fff;
}

display:none;
position:fixed;
right:10px;
bottom:10px;
の記述は必須です。
border-radiusと、opacity設定をすると、それっぽくなります。

参考：こちらのブログでも、同じ設定でにゅっとオススメ記事でます。

ぜひ！