記事を一時保存できるWP Favorite Postsの設定からカスタマイズ
ページを一時保存できる「WP Favorite Posts」プラグインをカスタマイズして、保存一覧ページ（固定ページ）に写真とカスタムフィールドも表示できるようにします
求人サイトで求人ページを一時保存したり、ECサイトで商品ページを一時保存できる機能をワードプレスでも使えるようにしたのがプラグイン「WP Favorite Posts」です。
主にWelcartでワードプレスをECサイトにした時に、商品ページを一時保存する時にも使われるプラグインです。
WP Favorite Postsの特徴
- 保存したページ情報はブラウザのクッキーに保存されます
- 保存した一覧ページはプラグイン内の「wpfp-page-template.php」をカスタマイズします
- 保存一覧ページには、ページャーも表示されます
WP Favorite Postsの設定
WP Favorite Postsをインストールして有効化します。
設定からWP Favorite Postsの設定を進めていきます。設定はとても簡単です。
オプションの設定
まずはオプションの設定です。
今回は、オリジナルのボタンを好きな場所に設置することを前提にしています。
ウィジェットも使いません。
設定ができたら、一旦「Updete options」を押して設定を保存しておきましょう。
Most favorited posts statisticsのカスタムフィールド
Most favorited posts statisticsを「Enabled（有効）」にした場合、記事が保存されるとカスタムフィールド「wpfp_favorites」にカウントされます。
記事の保存が削除されると「wpfp_favorites」のカウントも減ります。
ラベルの設定
保存ボタンや、削除ボタンの文言、保存一覧ページの設定をおこないます。
全てを記入する必要は無く、無記入の欄があってもOKです。
例えば、一番最後の欄はオプションで「登録ユーザー限定」がOFFなら、無記入でもOKです。
WP Favorite Postsのボタン設置
記事ページ（single.php）に「保存ボタン」を設置する場合は下記のコードを記入します。
PHP
<?php if (function_exists('wpfp_link')) { wpfp_link(); } ?>保存一覧ページ（固定ページ）
保存された記事の一覧ページ（固定ページ）を用意して、下記のショートコードを記入すればOKです。
ShortCode
[wp-favorite-posts]以上でWP Favorite Postsの設定から、ボタンの設置、保存一覧ページは完了です。
続いて、カスタマイズしていきます。
WP Favorite Postsのカスタマイズ
保存した一覧ページ（固定ページ）には、タイトルしか表示されませんが、「wpfp-page-template.php」をカスタマイズして、写真や、カスタムフィールドの値が表示されるようにします。
ただし、WP Favorite Postsはバージョンアップでテンプレート「wpfp-page-template.php」の仕様がガラリと変わることもあるので、カスタマイズはほどほどにした方が良いです。
カスタマイズ前に、デフォルトで生成されるHTMLを知っておくとデザイン、コーディングに役立ちます。
シングルページや、カテゴリーページなどに設置した「保存ボタン（リンク）」は下記のようなHTMLが生成されます。
生成された保存するボタン
<span class='wpfp-span'> <img src='http://○○.jp/.../../loading.gif' alt='Loading' title='Loading' class='wpfp-hide wpfp-img' /> <a class='wpfp-link' href='?wpfpaction=add&postid=106' title='保存する' rel='nofollow'>保存する</a></span> 生成された解除ボタン
<span class='wpfp-span'> <img src='http://○○.jp/.../../loading.gif' alt='Loading' title='Loading' class='wpfp-hide wpfp-img' /> <a class='wpfp-link' href='?wpfpaction=remove&postid=106' title='保存解除' rel='nofollow'>保存解除</a></span>生成されたローディング
設定でアイコンをONにした場合は、ローディングGifの前にアイコン表示用の<img>タグが生成されます。
<span class='wpfp-span'> <img src='設定したアイコン' /> <img src='http://○○.jp/.../../loading.gif' alt='Loading' title='Loading' class='wpfp-hide wpfp-img' /> <a class='wpfp-link' href='?wpfpaction=remove&postid=106' title='保存解除' rel='nofollow'>保存解除</a></span>保存一覧ページ
保存した記事一覧ページ（固定ページ）はテンプレート「wpfp-page-template.php」が読み込まれて、下記のようなHTMLが生成されます。
<div class='wpfp-span'><ul><li><a href='記事URL' title='記事タイトル'>記事タイトル</a><a id='rem_101' class='wpfp-link remove-parent' href='?wpfpaction=remove&page=1&postid=101' title='保存解除' rel='nofollow'>保存解除</a></li></ul><div class="navigation"><div class="alignleft"></div><div class="alignright"></div></div><img src='https://www.boueki.jp/job-offer/job52of/wp-content/plugins/wp-favorite-posts/img/loading.gif' alt='Loading' title='Loading' class='wpfp-hide wpfp-img' /><a class='wpfp-link' href='?wpfpaction=clear' rel='nofollow'>全ての保存を解除</a></div>wpfp-page-template.phpの中身
バージョン1.6.6では下記のようになっていて、カスタマイズする箇所も分かりやすくなっています。
矢印の箇所に「写真」と「カスタムフィールドの値」が表示されるようにカスタマイズします。
写真が表示されるようにカスタマイズ
サムネイルが表示されるget_the_post_thumbnailで記事の写真を表示させることができます。
サムネイルのサイズ指定も可能です。サンプルでは横260px、縦180pxに設定しています。
実際のコードは下記になります。figureタグは適宜ご変更ください。
echo "<li><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a> ";echo '<figure>' . get_the_post_thumbnail($post_id,array(260,180,true)) ."</figure>";wpfp_remove_favorite_link(get_the_ID());echo "</li>";カスタムフィールドが表示されるようにカスタマイズ
カスタムフィールドの値を表示できるようにするにはget_post_metaでカスタムフィールドの値を表示させることができます。
サンプルではカスタムフィールド「cf_name」の値を表示する設定です。
get_post_meta($postID, "cf_name" ,true)ループ外なので、下記の設定も必要となります。
global $wp_query;$postID = $wp_query->post->ID;実際のコードは下記になります。
global $wp_query;$postID = $wp_query->post->ID;echo "<li><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a> ";echo '<figure>' . get_the_post_thumbnail($post_id,array(260,180,true)) ."</figure>";echo "<p>". get_post_meta($postID, "cf_name" ,true) ."</p>";wpfp_remove_favorite_link(get_the_ID());echo "</li>";カスタムフィールドが複数ある場合はそのまま追加していってください。
global $wp_query;$postID = $wp_query->post->ID;echo "<li><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a> ";echo '<figure>' . get_the_post_thumbnail($post_id,array(260,180,true)) ."</figure>";echo "<p>". get_post_meta($postID, "cf_name" ,true) ."</p>";echo "<p>". get_post_meta($postID, "cf_name" ,true) ."</p>";echo "<p>". get_post_meta($postID, "cf_name" ,true) ."</p>";wpfp_remove_favorite_link(get_the_ID());echo "</li>";これで、一時保存した固定ページに、写真とカスタムフィールドの値が表示されてサンプルのようになります。
以上Wp Favorite Postsのカスタマイズ方法でした。
