最近、記事の最後までいくと、
右下からにゅっと表示させるやつ流行ってますよね。
↓こんなやつ
記事を読み進めるとオススメ記事を表示する 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設定をすると、それっぽくなります。
参考：こちらのブログでも、同じ設定でにゅっとオススメ記事でます。
ぜひ！
