関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

Comment(0) | Trackback(0)

Categories | ブログ(WordPress)


最近記事の下に「関連記事」なる、ブログ内の関連ページを抽出し、

サムネイル等でリンク貼り付けしてるブログを良く見かける。

あれって流行なのかな・・・

ビジュアル的にグットだし、ユーザーがブログ内をクロールし易くする

意図もあるんだろう。こりゃ真似っこしてみよう^^

ってことで、ググッてみたら

LinkWithin」とか「Yet Another Related Posts Plugin」などの

プラグインだったんですね。

当方「Yet Another Related Posts Plugin」略してYARPPを導入しました。

何故にこれを選んだかというと、LinkWithin は登録が必要だから。

2013 0615 01 300x196 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

ただそれだけです。

では、Yet Another Related Posts Plugin をブログにインストールです。

DL先がこちら↓

2013 0615 02 300x131 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

 

2013 0615 03 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

ダウンロードした圧縮ファイルを解凍し、テーマフォルダの「plugins」に

フォルダーごとアップロードします。

それからブログ(ダッシュボード)のプラグインで有効化するだけで、

関連記事らしきものがリストで単一記事のフッターに表示される。

2013 0615 04 400x55 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

ダッシュボードの「設定」めくると「関連記事 (YARPP) 設定」があるので、

そこで細かな表示設定ができる。

2013 0615 05 300x272 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

因みに何もいじらなくても、デフォルトはリストで関連記事が表示され

まぁ問題なく動きます。

しまい?

んにゃ、これから本題のカスタマイズします。

YARPPのカスタマイズ!!

「関連記事 (YARPP) 設定」でサムネイル表示をチョイスし

どない表示されるか確認したところ、あれ?なんで?

関連記事にサムネイルが表示されんです。

そう、当方今まで投稿時に「アイキャッチ画像」の設定をしたことありません。

なので当然ノーイメージですぅ。

で、試しにアイキャッチ画像を1記事に設定してみました。

え!どうして?

記事のヘッダー辺りにアイキャッチが表示されちゃいます。

ならばと、”content.php”をいじり非表示になるよう修正しまいた。

<?php the_post_thumbnail(); ?>

<!-- <?php the_post_thumbnail(); ?> -->

非表示にしなくても、この関数を削除するだけでも良かったりします(笑)

問題点を攻略したところで、今度は当方ブログサイズに合うようにデザイン。

で、若干アレンジを加えたファイル「yarpp-template-relative.php」を

新たに作成しテーマフォルダーに追加(アップロード)。中身はこんな感じ

 

<h4 class='yarpp-related'>関連記事</h4>
<?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="wp-content/themes/hcz-blog/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>No related posts.</p>
<?php endif; ?>

 

 

それから「style.css」にこう追記

/* 関連記事 */
div.yarpp-related {
	overflow:hidden;
	}
div.yarpp-related h3 { 
	margin:40px 15px 20px 15px;
	padding-left:10px;
	font-size: 0.875em;
	border-bottom:dotted 1px #096aa2;
	border-top:dotted 1px #096aa2;
	border-left:solid 8px #096aa2;
	background-color:#E3E7E4;
	}
.related-entry {
	vertical-align: top;
	float: left;
	width:115px;
	font-size: 12px;
	margin-left:15px;
	}
.related-entry img{
	padding:4px;
	margin-bottom:6px;
	border: #ccc 1px solid;
	width:100px;
	height:100px;
}

 

レイアウトをデザインした結果このようになります。

2013 0617 01 300x149 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

次に、先に話したようにアイキャッチって今まで設定したことないので

ノーイメージが連発。サムネイル表示にした意味ないので、

今まで投稿した数百の記事に、一括でアイキャッチ画像の設定をします。

使うはプラグイン:Auto Post Thumbnail

ダッシュボードのプラグインで検索してインストの有効化

Auto Post Thumbnailの設定で「Generate Post Thumbnail」ボタンをクリック。

するとジワーっと数分でアイキャッチ画像を作ってくれます。

でぇ、完成がこちら

2013 0617 02 300x143 関連記事プラグイン:Yet Another Related Posts Plugin(YARPP) カスタマイズ

いい感じになりました。

しまい

TAGS: / / / / | 2013年6月17日 |

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です