スライドボックス、ソーシャルボタン、関連記事

flickrholdr_400_300_programing
  • ????????????????????

Yet Another Related Post Plugin (YARPP) はブログ内のポストの関連度をいい感じに計算してくれるプラグインです。

このプラグインは非常に多機能ですが、そのひとつにテンプレートを使って見た目を自由にカスタマイズできる機能があります(テンプレート機能を有効にするためにはプラグインのフォルダの中にあるテンプレートファイルを現在使用しているテーマフォルダの中に移動させる必要があります)。

そこでjQueryによるスライドボックスと組み合わせたテンプレートを作ってみました(ついでにソーシャルボタンもくっつけてみました)。

以下の内容を yarpp-template-slidebox.php として現在のテーマフォルダの中に保存してください。そうすると YARPP の設定の部分で yarpp-template-slidebox.php が選択できるようになるので選択するだけです。
ただし、以下の $where_sb 変数は各自設定してください。通常はコメントフォームとかフッターのIDを指定すればOKだと思います。

<?php /*
Example template
Author: flyio
*/

/* Setting */
$numcol = 2;  // Number of columns of table
$where_sb = "YOUR_FOOTER_OR_SOMEWHERE"; // Where does the slidebox get into the screen? 
                                                                     // (Should be given by ID)

/* Parameter calculation */
$thewidth = strval(100/$numcol) . "%";
$the_permalink_org = get_permalink($post->ID);

?>
<div id='slidebox' style='background-color: #000;color: white;padding: 0;height:200px;left: 0;position:fixed;top:-200px;width: 100%;opacity: 0.9;'>
  <div style='width: 960px; margin: 0 auto;'>
    <div class='relatedpost'>
      <h3 style='color:white; border: none; background-image: none; padding: 10px 0 0 0;'>この記事に関連する記事</h3>
<?php if ($related_query->have_posts()):?>
      <table class='relatedposttable' style='width: 100%; border-width: 0;'>
        <?php $cnt=0;?>
	<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
        <?php if( $cnt%$numcol==0 ){ echo '<tr style="border-width: 0;">'; } ?>
	<td style="border-width: 0;width: <?php echo $thewidth?>; font-size: 120%;"><a href="<?php the_permalink() ?>" rel="bookmark" >■ <?php the_title(); ?>(関連度:<?php echo get_the_score()*10; ?>%)</a></td>
        <?php if( $cnt%$numcol==$numcol-1 ){ echo '</tr>'; } ?>
        <?php $cnt = $cnt + 1; ?>
	<?php endwhile; ?>
      </table>
<?php else: ?>
      <p>No related posts.</p>
<?php endif; ?>
    </div>

    <div class='slidesocialbuttons' style='float: right; margin: 10px;'>
      <a href="http://b.hatena.ne.jp/entry/<?php the_permalink_org; ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="flyio">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
      <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink_org; ?>&amp;layout=button_count&amp;show_faces=true&amp;width=90&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
    <span class='close'>閉じる</span>
    </div>
  </div>
</div>
<script type="text/javascript" src="/jquery_ui/js/jquery-1.5.1.min.js"></script>
<script>
$(function(){	
	$(window).scroll(function(){
		var distanceTop = $('#<?php $where_sb; ?>').offset().top - $(window).height();
		
		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'top':'0px'},400);
		else 
			$('#slidebox').stop(true).animate({'top':'-200px'},200);	
		});
		
		$('#slidebox .close').bind('click',function(){
        $(this).parent().parent().parent().remove();
	});
});
</script>
はてなブックマーク - スライドボックス、ソーシャルボタン、関連記事
Pocket