概要
WordPressテーマ「SANGO」は、その美しいデザインと高速な読み込み速度、そして高いカスタマイズ性で多くのブロガーやWebメディア運営者に愛されています。しかし、SANGOの標準機能には「記事のお気に入り（ブックマーク）機能」が含まれていません。ユーザーが後で読み返したい記事を保存できる機能は、サイトの滞在時間を延ばし、リピート率を劇的に向上させるための強力な武器となります。本記事では、SANGOの設計思想を尊重しつつ、プラグインに頼らずに、あるいは最小限の構成で、堅牢かつ洗練されたお気に入り機能を実装するための技術的アプローチを詳細に解説します。
お気に入り機能のアーキテクチャ設計
お気に入り機能を実装する際、最も考慮すべきは「データの保存先」です。一般的に、ログインユーザーのみを対象とする場合は「ユーザーメタ」を利用するのが最も効率的ですが、SANGOを利用する多くのサイトでは「未ログインユーザー」に対しても機能を提供したいケースが多いでしょう。
未ログインユーザー向けには「localStorage」を利用したクライアントサイドでの保存が最適です。サーバーへの負荷をかけず、ブラウザのキャッシュ領域を活用することで、高速かつスムーズな体験を提供できます。一方で、ログインユーザーと未ログインユーザー双方をカバーし、端末間で同期させたい場合は、WordPressのREST APIとデータベース（wp_postmeta等）を組み合わせたサーバーサイド実装が必要となります。今回は、実務レベルで汎用性が高い「localStorageを活用した実装」をベースに解説を進めます。
フロントエンドとlocalStorageの連携
まず、フロントエンドの処理から着手します。ユーザーが「お気に入り」ボタンをクリックした際、その記事のID（post_id）をブラウザのlocalStorageに保存・削除するロジックをJavaScriptで記述します。
// assets/js/favorite.js
document.addEventListener('DOMContentLoaded', () => {
const favButtons = document.querySelectorAll('.js-fav-btn');
const updateFavUI = (btn, isFav) => {
btn.classList.toggle('is-active', isFav);
btn.querySelector('.label').textContent = isFav ? 'お気に入り済み' : 'お気に入り';
};
favButtons.forEach(btn => {
const postId = btn.dataset.postId;
const favorites = JSON.parse(localStorage.getItem('my_favorites') || '[]');
if (favorites.includes(postId)) updateFavUI(btn, true);
btn.addEventListener('click', () => {
let favs = JSON.parse(localStorage.getItem('my_favorites') || '[]');
const index = favs.indexOf(postId);
if (index > -1) {
favs.splice(index, 1);
updateFavUI(btn, false);
} else {
favs.push(postId);
updateFavUI(btn, true);
}
localStorage.setItem('my_favorites', JSON.stringify(favs));
});
});
});
SANGOのデザインに馴染ませるCSS実装
SANGOの洗練されたUIを損なわないためには、ボタンのデザインが重要です。SANGOのスタイルガイドに準拠し、ホバー時のインタラクションや、アクティブ時のカラーリングを慎重に設計します。
/* style.css (子テーマ) */
.js-fav-btn {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
background: #fff;
}
.js-fav-btn.is-active {
background: #ff5722; /* SANGOのメインカラー等に合わせて調整 */
color: #fff;
border-color: #ff5722;
}
.js-fav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
バックエンド：お気に入り一覧ページの作成
お気に入りした記事を表示する専用ページを作成するには、WordPressの「固定ページ」テンプレートを活用します。`page-favorites.php`を作成し、クエリパラメータで渡されたIDリストをもとに記事を取得します。
// page-favorites.php 内のループ処理
$favorites = get_query_var('fav_ids'); // JSから送信されたID群を受け取る想定
$args = array(
'post_type' => 'post',
'post__in' => $favorites,
'posts_per_page' => -1
);
$query = new WP_Query($args);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
get_template_part('parts/list-item'); // SANGO標準のパーツを流用
endwhile; endif; wp_reset_postdata();
実務アドバイス：UX向上のための「もう一歩」
実装にあたり、シニアデザイナーの視点からいくつかのアドバイスを提示します。
1. フィードバックの重要性：ボタンを押した際にアニメーションやトースト通知を出すことで、ユーザーは「アクションが成功した」ことを確実に認識できます。
2. キャッシュ戦略：localStorageはブラウザの制限を受けるため、長期間メンテナンスされない場合はデータが消える可能性があります。重要なサイトであれば、ログイン必須のDB保存方式を強く推奨します。
3. 負荷対策：記事数が増えるとクエリの重さが増します。`get_posts`の引数で必要なフィールドのみを取得するよう最適化し、クエリの実行回数を最小限に留めてください。
4. SEOへの配慮：お気に入り一覧ページは、ユーザー固有のデータであるため、noindexを設定し、検索エンジンにインデックスさせないようにしましょう。
まとめ
SANGOでお気に入り機能を実装することは、単なる機能追加ではなく、サイトのファンベースを強化するための戦略的な施策です。localStorageを活用した実装は、サーバーへの負荷を抑えつつ、ユーザーに快適なUXを提供できる非常にバランスの良い手法です。
もちろん、より高度な要件（複数デバイスの同期、お気に入り記事の分析など）が必要な場合は、WP REST APIを用いたDB連携へとステップアップする必要があります。しかし、まずはこの基本的なアプローチでユーザーの反応を見て、そこから機能を拡張していくのがWeb開発の王道です。
SANGOという素晴らしい土台の上に、独自の機能という「個性」を乗せることで、あなたのメディアはより一層強力なものへと進化するでしょう。コードの保守性、UIの整合性、そしてユーザーへの配慮。これらを意識した設計こそが、プロフェッショナルなWeb制作の要諦です。ぜひ、本記事を参考に、あなただけの最高のお気に入り機能を実装してみてください。
コメント