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設定をすると、それっぽくなります。
参考：こちらのブログでも、同じ設定でにゅっとオススメ記事でます。
ぜひ！
