2012年06月17日 category : WordPress tags :

YARPPをカスタマイズして関連記事をサムネイル+タイトルに変更

このエントリーをはてなブックマークに追加

yarpp-thumbnail-title

WordPressのプラグイン関連記事(YARPP)をカスタマイズしてサムネイル+タイトルにします。

テンプレートファイルが利用可能なYARPPをカスタマイズして関連記事をサムネイル&タイトルリンクの形で出力してみます。提供されているテンプレートにはタイトルリンクのみ、サムネイル(アイキャッチ画像)のみはあるんですけどね。

YARPPはカスタマイズしたテンプレートが使用可能ですので、アイキャッチ画像+タイトルという形式で関連記事のテンプレートを作成します。ローカル(あなたのPC)からサーバへのファイル転送が必要ですのでFTP操作可能な方を対象とした記事になります。

01 . 下準備

関連記事を表示するプラグインYARPPを利用しますのでWordPress管理画面からインストールして有効化しておきます。インストールとテンプレートファイルについては以下の記事を参照ください。

WordPressに関連記事を表示する!YARPPの導入と設定のコツ
YARPPのテンプレートを使って表示をチェック有効にする方法

02 . テンプレートファイルの作成手順

ファイル名は「yarpp-template-」で始まる名前とし、ファイル形式UTF-8で作成します。ファイル名はこんな感じです。「yarpp-template-thumbnail-title.php」

この作成したファイルに処理を書くことでオリジナルのテンプレートが作れます。出来上がったテンプレートファイルを使用しているテーマ直下にアップロードします。

サーバ(ホスト側):/wp-content/themes/使用しているテーマ名/

WordPress管理画面の関連記事(YARPP)を開き、「テンプレートを使って表示」にチェックをいれ、作成したテンプレート名を選択し「変更を保存」をクリックしたら完成です。

03 . テンプレートファイル

こんなイメージです。

related-post-image

オリジナルテンプレートのサムネイル表示「yarpp-template-thumbnail.php」をベースにタイトル取得の処理を追加しました。あとはCSSで調整して完成:)

yarpp-template-thumbnail-title.php

<div id="related-post">
	<h3>関連記事</h3>
	<?php if (have_posts()):?>
	<ul>
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<li>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(array(130,130)); ?><?php the_title(); ?></a>
		</li>
		<?php endif; ?>
	<?php endwhile; ?>
	</ul>
	<?php else: ?>
	<?php endif; ?>
</div>

・アイキャッチ画像を使用している場合のみ表示されます。
・array(130,130)でアイキャッチ画像のサイズを指定しています。
・CSS管理用にid=related-postでくくっています。
・文字コードはUTF-8で保存

CSSはこんな感じです。表示数などによりサイズ幅やアイキャッチ画像のサイズは調整が必要です。floatで並べているので必要に応じてclearしてください。あくまでSampleですのでご自身のサイトに合わせて調整が必要になると思います。

#related-post{
	width: 600px;
	height: 400px;
}
#related-post h3{
	font-size: 110%;
	margin-bottom: 5px;
	padding-left: 10px;
}
#related-post ul li a{
	width: 150px;
	display: block;
	padding: 10px;	
	float: left;
}
#related-post ul li a:hover{
	background-color: #EEEEEE;
}

related-size

確認はしておりますが、COPYでのご利用は自己責任でお願いしますm(__)m

HOME >>  WordPress > YARPPをカスタマイズして関連記事をサムネイル+タイトルに変更