Customized YARPP

YARPPをカスタマイズしてサムネイル画像と抜粋を表示 – Customized YARPP

Customized YARPP

Pocket

Yet Another Related Posts Pluginとは

関連記事を表示する Yet Another Related Posts Plugin で抜粋表示ができるようにカスタマイズを行います。オリジナルのソースコードは変更しませんので、ダッシュボードの設定画面でいつでも変更可能です。

YARPP カスタマイズ後の表示例

カスタマイズ後の表示例

Yet Another Related Posts Plugin の基本設定

Yet Another Related Posts Plugin の設定画面へ移動

Yet Another Related Posts Plugin の設定画面へ移動

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 設定 > YARPP を選び Yet Another Related Posts Plugin の設定画面に移動します。

Yet Another Related Posts Plugin の表示形式を選ぶ

Yet Another Related Posts Plugin の表示形式を選ぶ

表示形式 ウェブサイト用 の項目から カスタム ボタンを押します。同時にテーマをフォルダに移動するかどうかを問われますので テンプレートを移動 ボタンをクリックしましょう。wp-content > plugins > yet-another-related-posts-plugin > yarpp-template にある以下の6つのファイルが wp-content > themes > yet-another-related-posts-plugin > twentyfourteen(利用中のテーマ名に読み替えてください)へ移動されます。

  1. yarpp-template-example.php
  2. yarpp-template-list.php
  3. yarpp-template-multilingual.php
  4. yarpp-template-photoblog.php
  5. yarpp-template-random.php
  6. yarpp-template-thumbnail.php

Yet Another Related Posts Plugin(YARPP)のカスタマイズ

YARPP テンプレートファイルの準備

テーマフォルダに移動された6つのファイルの中の任意のファイル(例えば yarpp-template-example.php)を書き換えるか、新たに任意の名称(例えば yarpp-template-standard.php)のファイルを7つ目のテンプレートファイルとしてテーマフォルダの中にアップロードして書き換えます。
新しいテンプレートファイルを利用する場合は、FTPクライアントソフトでテーマフォルダ(6つのテンプレートファイルが存在してる場所)内に新規のファイルを作成するか、中身は空白で構いませんので任意の名称(例えば yarpp-template-standard.php)のファイルを作成してテーマフォルダ(6つのテンプレートファイルが存在してる場所)内にアップロードしてください。
以下の説明は、yarpp-template-standard.php という新しいファイルを作成し利用することを前提とし解説しますので、既存のファイル(例えば yarpp-template-example.php)を利用する際は随時読み替え、上書きで対応してください。

テーマ編集画面へ移動

YARPP テンプレートファイルの書き換え

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 外観 > テーマ編集 を選び テーマの編集 の画面に移動します。

YARPP テンプレートファイルの書き換え

YARPP テンプレートファイルの書き換え

編集を行いたいテンプレートファイル名 yarpp-template-standard.php をクリックします。
下記のコードを編集画面に入力し ファイルを更新 をクリックし変更を保存します。
YARPP Template: Standard に記載された名称が テンプレートファイル名 になります。

<?php 
/*
YARPP Template: Standard
Author: mitcho (Michael Yoshitaka Erlewine)
Description: A Standard YARPP template.
*/
?>
<?php if (have_posts()):?>
<div class="yarpp-standard">
<h5>こんな記事も読まれています</h5>
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<dl><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( array(50,50) ); ?></a>
		<div class="date"><?php the_date(); ?></div><a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--><small><?php the_excerpt(); ?></small>
</dl>
		<?php endif; ?>
	<?php endwhile; ?>
</div>

<?php else: ?>
<!-- <p>No related photos.</p> -->
<?php endif; ?>

CSSファイルを書き換える

CSSファイルを書き換える

テーマのCSSファイル style.css に下記入力例のコードを追記して YARPP の表示形態を整えます。

style.css入力例

/* YARPP standard*/

.yarpp-standard h5{
	font-weight: 700;
	font-size: 14px;
	color: inherit;
	padding: 5px;
	border: solid 1px #ff9900;
	border-radius: 3px;
	margin: 10px 0;
}

.yarpp-standard dl{
	clear:both;
}

.yarpp-standard img{
	float:left;
	margin: 0px 10px 5px 0;
}

.yarpp-standard a.title {
	font-weight: 700;
	text-decoration:none;
	color: #483D8B;
}

.yarpp-standard a.title:hover {
	color: #3366ff;
}

.yarpp-standard small {
	color: #A9A9A9;
}

.yarpp-standard .date {
	font-size: 0.8em;
	color: #66cc99;
}

テンプレートファイルを指定する

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 設定 > YARPP を選び Yet Another Related Posts Plugin の設定画面に移動します。

テンプレートファイルを指定する

テンプレートファイル: のファイル名から利用するテンプレートファイル名 Standard を選択します。

最後に必ず 変更を保存 をクリックすることを忘れないようにしてください。