「Yet Another Related Posts Plugin」(YARPP)をカスタマイズ

カスタマイズ以前紹介した関連記事をサムネイル付で表示してくれるプラグイン、「Yet Another Related Posts Plugin」

そのままでも、問題なく使えるのですがサイトとの横幅が合わなかったり、サムネイルが切り取りではなく、縮小され変な感じなってしまっていたので思い切ってカスタマイズすることにしました。

「Yet Another Related Posts Plugin」については関連記事をサムネイル付で表示してくれるプラグイン「Yet Another Related Posts Plugin」(YARPP)を導入をご確認ください。

1.PHPファイルを作成する

まず最初にPHPファイルを作成します。
PHPってなによ??って方は下記のPHPコードを丸丸コピーして「yarpp-template-relative.php」の名前で保存してください。
PHPに詳しい方は自作お願いします。

<div class=”related-post”>
<h3>関連してる(かもしれない・・・)記事です。(; ̄ー ̄A アセアセ・・・</h3>
<?php if ($related_query->have_posts()):?><?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<div class=”related-entry”>
<a href=”<?php the_permalink();?>” class=”thumbnail”>
<!–アイキャッチ画像–>
<?php
if (has_post_thumbnail()) {
the_post_thumbnail(array(150,150));
} else {
?>
<!–アイキャッチが設定されていないときの画像–>
<img src=”<?php bloginfo(‘template_url’); ?>/images/no-image.jpg”>
<?php } ?></a>
<!–関連記事のタイトル部分–>
<a href=”<?php the_permalink();?>” title=”<?php the_title_attribute(); ?>”><?php
echo mb_strimwidth($post->post_title, 0, 50, “…”);
?></a></div><?php endwhile; ?>
<?php else: ?>
<p>関連記事はありません。Σ( ̄ロ ̄lll) ガビーン</p>
<?php endif; ?>
</div>

上記を「yarpp-template-relative.php」の名前で保存できたら、FTPソフトを使って自分の使っているワードプレスのテーマの中に掘り込みます。

yarpp-template-relative.phpをアップロードアップロードする場所は自分が今現在利用しているテーマフォルダの中になります。

TETSUの場合は
/xn--u9j9edet4c2fzhoa9qmb7m.com/public_html/wp-content/themes/wp の中になります。
※wpはTETSUが現在利用しているテーマなのでここは人それぞれ違います。

無事アップされているか確認無事アップロードできたら、ダッシュボード⇒外観⇒テーマの編集で「yarpp-template-relative.php」が追加されているか確認してみてください。「yarpp-template-relative.php」が追加されていたら次に進みましょう。

Yet Another Related Posts Pluginにyarpp-template-relative.phpを適用させる

適応させるyarpp-template-relative.phpをYARPPに適用させます。

設定の関連記事(yarpp)を開いて、表示設定ウェブサイト用のテンプレートファイルでyarpp-template-relative.php選んで「変更を保存」するだけです。

これで「Yet Another Related Posts Plugin」(YARPP)をカスタマイズ終了です。
後はスタイルシートで自分のサイトに合わせて微調整していってください。

TETSUのスタイルシートです。ご参考程度に

.related-post{
height:100%;
}
.related-post{
width:580px;
overflow:hidden;
margin-top:5px;
}
.related-entry {
vertical-align: top;
float: left;
width:123px;
font-size: 13px;
min-height: 210px;
margin-bottom:0px;
padding: 0px 10px 0px 10px;
display: block;
}
.related-entry img{
padding:4px;
margin:0px 0px 0px 0px;
border: #ccc 1px solid;
width:123px;
height:123px;
}

no-image.jpgの設定

忘れるところでした。
最後にno-image.jpgの設定をしておきましょう。

NO-IMAGE表示例上記のPHPコードは画像がない場合に、任意の画像を表示するコードになっています。
お好みの画像をno-image.jpgの名前で保存してFTPソフトで自分が利用しているテーマの「images」フォルダに掘り込んでください。

TETSUの場合は
/xn--u9j9edet4c2fzhoa9qmb7m.com/public_html/wp-content/themes/wp/images
となります。

もし手ごろな画像が無ければ、TETSUがへっぽこなりに頑張って作成した下記の
「NO IMAGE」画像をご利用ください。
ご自由にご利用下さい
※右クリックで「名前をつけて保存」でno-image.jpgと保存して下さい。

リンクの一つでも貼っていただけると幸いです。
もちろん「リンクなんて貼らないよ~~~」と言う方でも、よろしければ「NO IMAGE」画像をご利用ください。


タグ

2013年1月14日 | コメント/トラックバック(0) |
カテゴリー:WordPress

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ


7 + 二 =

※コメントを送信する前に上の数式の計算をお願いします。

このページの先頭へ