五藤隆介(goryugo) 
関連記事をいい感じに表示させるために、以前はYARPPというプラグインを使ってLinkWithin風のデザインのものを使っておりました。
その後、なんだか気分が変わってZenbackというサービスを使っていたのですが、なんかこいつが全然いい感じの関連記事を出してくれない。
でもZenbackの見た目はいい感じである。
ならばYARPPを使ってZenback風にしてやろう、ということで、YARPPを使ってZenback風の関連記事一覧を作ってみました。
デザインはだいたいなんとかなる
CSSでのデザインに関しては、SafariやGoogle Chromeでページを右クリックして「要素の検証」で見てやれば、まぁだいたいわかります。
となると必要になってくるのは「ツイート数」をどうするのか、ってのと、長いタイトルをどうやって「…」にして省略してやるか、ってこと。
これもちょろっと調べてみたら、わりと簡単に実現できました。
ツイート数を取得する
ツイート数の取得はこんな感じで。
参考：WordPressで記事のツイート数だけを取得して表示する方法 | NANOKAMO BLOG
テーマファイルのfunction.phpの中に、ツイートを読み込む関数を追加
function.php
[php]
/*
* Get Social Button Count twitter
*/
function get_social_counts($url){
$counts= array();
//encode url
$encode_url= urlencode($url);
//twitter tweetcount
$tweetcount = file_get_contents(‘http://urls.api.twitter.com/1/urls/count.json?url=’. $encode_url, true);
$decode_tweetcount = json_decode($tweetcount, true);
$twitter_tweetcount= $decode_tweetcount[‘count’];
//set array
$count[‘twitter’] = $twitter_tweetcount;
return$count;
}
[/php]
そして、ツイート数を表示させたいところに以下の2文を入れる
ツイート表示部分
[php]
<?php $socialCount = get_social_counts(get_permalink()); ?>
<?php echo htmlspecialchars($socialCount[‘twitter’], ENT_QUOTES); ?>
[/php]
タイトルの長い文字数を省略する
こいつも、ちょいと調べたらmb_substrという関数を使ってやれば良い模様。
この場合は、0文字目から30文字目までを残して、以降を「…」にする
[php]
<?php echo mb_substr($post->post_title, 0, 30).’…’; ?>
[/php]
実際のソース
実際に書いたのはこんな感じ。
なんか、サムネイルがない場合にも if ( has_post_thumbnail() ) が全部Trueになってしまって、うまくうごかんくて謎だったからCSSで無理矢理なんとかしました。（そのうち改めてちゃんと見直したい）
yarpp-template-linkwhithin.php
[php]
<div class="related"><span>関連する記事</span></div>
<?php if(have_posts()):?>
<div class="related-post">
<ul class="related-list">
<?php while(have_posts()) : the_post(); ?>
<li class="related-item">
<div class="related-item-thumbnail">
<a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail( array(110,110) ); ?>
<?php $socialCount = get_social_counts(get_permalink()); ?>
<span class="related-entry-socialcount"><?php echo htmlspecialchars($socialCount[‘twitter’], ENT_QUOTES); ?> ツイート</span>
<?php else : ?>
<img width="110px" height="110px" src="https://goryugo.com/wp-content/plugins/wp-ogp/default.jpg" />
<?php endif; ?>
</a>
</div>
<div class="related-item-title">
<a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>">
<?php echo mb_substr($post->post_title, 0, 30).’…’; ?> </a>
</a>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php else: ?>
<!– 関連記事がない場合のHTMLを以下に書いておく –>
<?php endif; ?>
[/php]
style.css
[css]
/* Zenback風 */
.related{
border-bottom:1px solid #72C803;
margin-bottom:10px;
}
.related span{
font-weight:bold;
background:#72C803;
color:#ffffff;
font-size:15px;
padding:5px;
}
#entry_foot{
clear:both;
}
.related-list{
list-style-type:none;
margin:0;
}
.related-item{
float:left;
margin:0 8px 20px 7px;
width:110px;
height:220px;
overflow:hidden;
}
.related-item-thumbnail{
width:110px;
height:110px;
background-image: url("https://goryugo.com/img/related.png");
position:relative;
}
.related-item-title{
font-size:13px;
margin-top:5px;
}
.related-entry-socialcount{
position:absolute;
left:0;
bottom:0;
width:100px;
margin:0;
padding:3px 5px;
text-align:left;
font-size:12px;
display:inline-block;
background-color:#999999;
color:#ffffff;
linge-height:1.2;
}
/* Zenback風おわり */
[/css]
なんかツッコミどころとかあれば、教えていただければ幸いです。
YARRP導入に関してなどは「関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする」をどうぞ。
関連記事表示はいいんだけど、過去記事には全然アイキャッチとか設定していないので、そいつらを順番に手動でアイキャッチ画像付けたりする作業に勤しんでおります。
