｢Where did they go from here｣でWelcartに｢この商品を見た人はこんな商品も見ています｣機能を追加！ Welcart補完計画 [3]

2018.06.21

Wordpressでショッピングサイトを作るときの定番プラグイン「Welcartウェルカート」
お手軽にWordpressに販売機能を付けられるだけでなく、カスタマイズ次第では大手サイトに負けないくらい本格的なショッピングサイトを作ることも可能です。

第1回はWelcartに｢お気に入り｣機能を追加する｢WP Favorite Posts｣、第2回は｢最近チェックした商品｣機能を追加する｢Last Viewed Posts｣を紹介させていただきました。Welcartには基本的なショッピング機能は備わっているのですが、かゆい所に手が届かない事もしばしば。しかし、プラグインを導入する事によってこれらの足りない機能を補完する事が可能です。

最後となる今回は｢この商品を見た人はこんな商品も見ています｣のような｢おすすめ商品｣機能を追加するプラグイン｢Where did they go from here｣の使い方をご紹介したいと思います。

01.インストールと有効化

「Where did they go from here」からZIP形式でプラグインをダウンロードし、解凍後にFTPツール等でご自分のサイトのpluginsディレクトリにアップロードして下さい。Wordpressにログインすると［ダッシュボード］＞［プラグイン］の項目に「Where did they go from here」が追加されているので、こちらを有効化します。

Where did they go from here

02.オプションの設定

オプションの設定は［ダッシュボード］＞［設定］＞「WP Followed Posts」から行う事ができます。このプラグインは設定項目が多いのでタブごとに分けて見ていきましょう。

まずは「General」のタブです。

項目	説明
Add followed posts to	自動で関連記事(商品)を表示したい投稿タイプを指定できます。自分で記事中の好きな場所に表示させたい場合はテンプレートに「<?php if ( function_exists( 'echo_wherego' ) ) { echo_wherego(); } ?>」を挿入します。
List options
Number of posts to display	関連記事を表示する件数を指定します。
Post types to include	表示される投稿タイプの種類です。 Welcartメインで使うなら「post」のみで結構です。
Post/page IDs to exclude	リストから除外する投稿またはページのIDをカンマで区切って羅列します。
Exclude Categories	リストから除外したい投稿のカテゴリーのスラッグをカンマで区切って羅列します。
Exclude category IDs	リストから除外したい投稿のカテゴリーIDをカンマで区切って羅列します。

次は「Output」のタブです。

項目	説明
Heading of posts	このプラグインで表示されるリストの見出しが入ります。「この商品を見た人はこんな商品も見ています」のような文言を入れてください。
Show when no posts are found	投稿がない時の表示方法を指定します。「Blank Output」は何も表示しません。「Display custom text」は下の項目のカスタムテキストを表示します。
Custom text	上の項目で「Display custom text」を選択した場合のカスタムテキストを入れます。
Don't display on these posts/pages	特定の投稿やページにリストを挿入したくない場合は、その投稿またはページのIDをカンマで区切って羅列します。
Show post excerpt in list?	チェックすると投稿の抜粋をリストに表示します。
Length of excerpt (in words)	単語単位での抜粋の長さを指定します。
Limit post title length (in characters)	文字数で投稿のタイトルの長さを制限します。
Open links in new window	チェックすると新しいウィンドウでリンクを開きます。
Add nofollow to links	チェックするとリンクにnofollowを追加します。
Customize the output
Before the list of posts	リスト全体を囲むタグ等を指定します。 (例) <ul id="relateditem">
After the list of posts	リスト全体を閉じるタグ等を指定します。 (例) </ul>
Before each list item	投稿を囲むタグ等を指定します。 (例) <li>
After each list item	投稿を閉じるタグ等を指定します。 (例) </li>

次は「Thumbnail」のタブです。

項目	説明
Location of the post thumbnail	サムネイルの場所を指定します。「Display thumbnails inline with posts, before title」タイトルの前に表示。「Display thumbnails inline with posts, after title」タイトルの後に表示。「Display only thumbnails, no text」タイトルなしでサムネイルのみ。「Do not display thumbnails, only text」サムネイルなしでタイトルのみ。
Thumbnail width	サムネイルの幅
Thumbnail height	サムネイルの高さ
Thumbnail size attributes	サムネイルサイズの属性を指定します。「Use CSS to set the width and height」CSSを使って幅と高さを設定します。「Use HTML attributes to set the width and height」HTMLの属性を使って幅と高さを設定します。「No width or height set」幅または高さを設定せず、外部CSSで指定します。
Thumbnail meta field name	カスタムフィールドを使う場合に指定します。
Get first image	チェックすると記事で最初に表示される画像がサムネイルになります。
Use default thumbnail?	チェックするとサムネイルがない場合に下の項目のデフォルトサムネイルを表示します。
Default thumbnail	デフォルトサムネイルのURLを指定します。 (初期値はプラグイン中に含まれている画像を指定しております)

03.実際の使い方

このプラグインは前回、前々回のものと違ってPHPのカスタマイズは不要です。基本的に上のオプション項目を埋めると表示されるようになっています。｢Customize the output｣の項目に、前回の｢Last Viewed Posts｣で使ったHTMLとCSSを利用すれば、見た目の統一感を出ると思います。

「Add followed posts to」の項目で何も選ばず、リストを記事中の好きな場所に表示させたい場合は下記のコードをテンプレートに記述します。

<?php if ( function_exists( 'echo_wherego' ) ) { echo_wherego(); } ?>

CSS

#relateditem{
	list-style-type: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#relateditem li{
	width: 17.5%;
}

#relateditem li:hover span{
	transform: scale(1.1);
}

#relateditem li:nth-child(1):last-child {
	margin-right: 80%;
}

#relateditem li:nth-child(2):last-child {
	margin-right: 60%;
}

#relateditem li:nth-child(3):last-child {
	margin-right: 40%;
}

#relateditem li:nth-child(4):last-child {
	margin-right: 20%;
}

#relateditem img{
	width: 100%;
	margin-bottom: 1.0vw;
	transition: transform 0.3s ease-in-out;
}

#relateditem img:before {
	content: "";
	display: block;
	padding-top: 100%;
}

#relateditem h3{
	width:100%;
	height: 1.8em;
	overflow:hidden;
	margin-bottom: 1.0vw;
	
}

#relateditem p{
	width:100%;
	height: 3.6em;
	overflow:hidden;
	margin-bottom: 0.5vw;
}

#relateditem h4{
	width:100%;
	height: 1.8em;
	overflow:hidden;
}

RESULT

この商品を見た人はこんな商品も見ています

以上でWelcartに｢おすすめ商品｣機能を追加するカスタマイズは完了です。
ちなみに前回と同じ要領でPHPのカスタマイズを行えば、金額も表示する事が可能です。

編集するファイルは｢Where did they go from here｣のpluginsディレクトリの［includes］＞［public］の中にある「output-generator.php」です。
こちらの293行目あたりを書き換えれば金額表示も可能となります。PHPファイルをカスタマイズする場合は、プラグインのアップデートがあった場合に上書きされてしまいますので、必ずバックアップしておきましょう。

output-generator.php

if ( 'inline' === $args['post_thumb_op'] || 'text_only' === $args['post_thumb_op'] ) {

	$output .= 'usces_the_itemImage($number=0, $width=250, $height=250, $post, 'return')' . $title . '
' . mb_substr(str_replace(array("\r\n", "\r", "\n"), '', strip_tags(get_the_excerpt())), 0, 100) . '
￥' . usces_the_firstPrice('return') . '（税込）'; // Add title when required by settings.

}

関連記事を表示するプラグインには有名どころの｢Yet Another Related Posts Plugin｣もありますが、｢この商品を見た人はこんな商品も見ています｣を実現するには、こちらの｢Where did they go from here｣が合っている気がしました。

Yet Another Related Posts Plugin (YARPP)

01.インストールと有効化

02.オプションの設定

03.実際の使い方

以前の記事

新しい記事