「読みっぱなしを防ぐ」いいね機能の作り方｜会員サイトの学習効率が上がる仕組み

ABOUT US

RYO代表

1985年大阪生まれ。英語コーチ・オンライン起業家。

現在は英語コーチングサービス「RYO英会話ジム」を6年以上運営。
2020年から海外ノマドとして世界を旅しながら、オンラインで生計を立てています。

現在は、自分のスキルを商品化してオンライン起業したい人向けに、ノマドコーチングを提供。

得意分野：

英語コーチング（商品開発・教材制作）
Webサイト設計・売れる導線設計
SNS／SEO・AEOマーケティング
オンラインで生計を立てる仕組みづくり

趣味： 英語学習、ノマド生活、筋トレ、資産運用

ライフスタイル：
柔軟で自由な働き方を追求し、パンデミック以前からデジタルノマドを実践。
今後は、AI時代でも通用する「スキルを資産に変える働き方」を体系化し、広めていきたいと考えています。

1 【WordPress】あとで見返せる「いいね機能」の作り方｜Favoritesで実装
2 なぜ「いいね機能」を入れたのか
3 できること（完成イメージ）
4 コミュニティ運営との相性がいい理由
5 使用プラグイン
- 5.1 Favorites（WordPressプラグイン）
6 実装手順
7 実際に使っているCSS（完成版）
8 まとめ
9 最後に

【WordPress】あとで見返せる「いいね機能」の作り方｜Favoritesで実装

RYOです。今回は、
英語コーチングの会員ページに「いいね機能」を実装したので、その方法を共有します。

「あとで見返せる仕組み」を作りたい方や、
コミュニティ運営をしている方には特におすすめです。

なぜ「いいね機能」を入れたのか

英語学習では、

あとで復習したい
重要な表現をもう一度見たい

こういった場面がかなり多いです。

ただ、ブックマーク機能がないと
記事が流れてしまって再度見つけにくいという課題がありました。

そこで今回、

ワンクリックで記事を保存できる「いいね機能」を導入しました。

できること（完成イメージ）

記事に「いいね」ボタンを設置
押すと保存される
会員ページで一覧表示できる

受講者ごとに「自分専用の復習リスト」が作れるようになります。

コミュニティ運営との相性がいい理由

この機能は、単なる便利機能ではなく、

学習体験そのものを変えます。

インプット → 保存 → 復習の導線ができる
コンテンツの「使われ方」が変わる
継続率が上がる

特に、オンラインサロンやスクールなど、
コンテンツが蓄積されていくサービスとの相性はかなり良いです。

使用プラグイン

Favorites（WordPressプラグイン）

主な機能：

投稿ごとにお気に入り登録
ユーザーごとに保存管理
ショートコードで一覧表示

シンプルで扱いやすく、カスタマイズもしやすいのが特徴です。

実装手順

① プラグインをインストール

WordPress管理画面で
「Favorites」と検索 → インストール → 有効化

② 記事に「いいねボタン」を設置

[favorite_button]

記事の下など、任意の位置に設置できます。

③ 一覧ページを作る（会員ページ）

[user_favorites include_thumbnails="true" include_buttons="true"]

これで、保存した記事一覧が表示されます。

実際に使っているCSS（完成版）

デフォルトのままだと少し味気ないので、
カードUIに整えています。

/* =========================================
   Favorites（ブックマーク一覧）完成版CSS
========================================= */

/* リスト初期化 */
.entry-content ul.favorites-list,
.entry-content ul.favorites-list li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ドット削除 */
.entry-content .favorites-list li::before,
.entry-content .favorites-list li::after,
.entry-content .favorites-list li::marker,
.entry-content .favorites-list a::before,
.entry-content .favorites-list a::after {
  content: none !important;
  display: none !important;
}

/* 装飾対策 */
.entry-content .favorites-list li > span,
.entry-content .favorites-list li > i {
  display: none !important;
}

/* カードレイアウト */
.favorites-list li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;

  padding: 16px;
  margin-bottom: 16px;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;

  transition: all 0.2s ease;
}

/* ホバー */
.favorites-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* サムネイル */
.favorites-list img {
  width: 100px;
  border-radius: 8px;
}

/* タイトル */
.favorites-list a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
  line-height: 1.5;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ボタン */
.favorites-list .simplefavorite-button {
  min-width: 140px;
  text-align: center;

  background: #f4a62a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;

  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ボタンホバー */
.favorites-list .simplefavorite-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  background: #e6951f;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .favorites-list li {
    grid-template-columns: 1fr;
  }

  .favorites-list img {
    width: 100%;
  }

  .favorites-list .simplefavorite-button {
    margin-top: 8px;
  }
}