MENU

info@ryuichiroshimoda.com

記事の部分プレビューと段階的な表示を実現するWordPress記事保護・課金プラグインを作ってみた

日記

WordPress記事の途中から先をグラデーションフェードで隠し、パスワード入力を促すプラグインを作ってみた。

ブログパーツと連携して、柔軟なペイウォール（コンテンツ課金）システムを構築できる。

このシステムの開発のきっかけはブログコンテンツの収益化がアフィリエイトやスポンサード広告しかない現状を憂いてだった。

ライターは自分の記事の価値を信じていたとしても、広告を重ねることでしかコンテンツを収益化できない。

いや、たしかにnote.comなど市井のサービスにはコンテンツの販売をサポートしてくれるものもあるにはある。

しかし、そのプラットフォームに自分の大切なコンテンツを預けなければならない。

プラットフォームの意向に沿わなければ何が起こるか分からない。

そんな不安を感じなくて済むのは自分のサイトの中でそのシステムを実現することしかない。

言わば自分のブログを有料note化するようなもの。

このような問題を解決してくれそうなプラグインには以前からも有料コンテンツプラグインとして有料・無料さまざまなものがあったが、会員サイトに変更せねばならなかったり、記事を保護するのと引き換えに検索結果の順位を大きく落としてしまうものや、なにより素人が実装するには複雑すぎるものが多かった。

場合によっては無料で読ませてあげたい人、タイミングもあるだろう。

そのような柔軟さにかけるものも多かった。

それらを解決するために。

目次

📖 こんな時に役立ちます

  • 記事の前半だけ見せて、続きは有料会員限定にしたいとき
  • SWELLテーマのブログパーツを活用して、決済ボタンを自然に配置したいとき
  • 既存のパスワード保護機能では「記事全体」が隠れてしまうのが困るとき

✨ 特徴

  • 部分プレビュー — 記事の冒頭（指定文字数）のみを表示し、残りをグラデーションフェードで隠す
  • Cloudflare APO対応 (v2.0) — CSR方式により全ユーザーに同一HTMLを配信。エッジキャッシュと完全互換
  • 署名付き認証 — HMAC-SHA256による署名付きトークンで、Cookieの改ざんを防止（httpOnly）
  • ブログパーツ連携 — パスワードフォームの前後に任意のコンテンツ（決済ボタン等）を表示可能
  • 購入ステータスバルーン (v1.2.1) — note.comスタイルの「買われています」バルーンをリアルタイム表示
  • レンダリングキャッシュ (v2.0.3) — 大量ショートコードを含む記事のAJAX応答をTransientキャッシュ
  • Cloudflareキャッシュ自動パージ (v2.0.4) — 設定保存時にCloudflare APIでエッジキャッシュを自動クリア
  • 有効化/無効化パージ (v2.0.5) — プラグインのオン/オフ時にもCloudflareキャッシュを自動パージし、保護状態を即時反映
  • 柔軟な設定 — 投稿タイプごとの有効化、プレビュー文字数を管理画面から調整

📦 インストール

  1. このリポジトリをZIP形式でダウンロード
  2. WordPress管理画面の「プラグイン」→「新規追加」→「プラグインのアップロード」
  3. ZIPファイルをアップロードして有効化

🚀 使い方

1. 基本設定

管理画面の「設定」→「プレビュー保護」を開きます。

設定項目説明
サイト共通パスワードコンテンツ閲覧に必要なパスワード
パスワード記憶期間認証後、ブラウザに保存される日数
プレビュー文字数保護前に表示する文字数
ぼかし効果の強さv2.0で廃止（グラデーションフェードに変更）

2. ブログパーツ設定（決済導線の設置）

  1. WordPressの「ブログパーツ」で、決済ボタンなどを含むコンテンツを作成
  2. 「プレビュー保護」設定で、作成したパーツを選択
  3. 「表示位置」でフォームの前（上部）か後（下部）かを選択

これにより、保護された記事の末尾に「ここから先は…」という案内と決済ボタンが表示されます。

3. 購入ステータスバルーン設定 (v1.2.0)

note.comの「買われています｜過去24時間」と同様のバルーンを表示し、ソーシャルプルーフとして機能させます。

前提条件:

  • Google Apps Script（GAS）側に doGet エンドポイントが設定されていること
  • GAS側のスクリプトプロパティに PURCHASE_STATUS_API_KEY が設定されていること

設定手順:

  1. 「購入ステータスバルーン」セクションの バルーン表示 にチェックを入れる
  2. GAS WebアプリURL にGASデプロイ後のウェブアプリURLを入力
  3. APIキー にGAS側の PURCHASE_STATUS_API_KEY と同じ値を入力
  4. 設定を保存

動作仕様:

  • ページスクロールでパスワードフォームエリアが画面に入ると、バルーンがフェードイン表示
  • 3秒間表示後、自動的にフェードアウト（✕ボタンで即座に閉じることも可能）
  • 過去24時間の購入データはGAS APIから取得され、WordPress側で30分間キャッシュ
  • Stripe決済とnote.comメンバーシップ購入の両方を自動検出・統合カウント

📁 ディレクトリ構成

content-preview-protector/
├── content-preview-protector.php  # メインファイル
├── includes/                      # クラスファイル
│   ├── class-core.php            # コア機能・API連携
│   ├── class-admin.php           # 管理画面
│   └── class-frontend.php        # フロントエンド・バルーンHTML
├── assets/                        # CSS/JS
└── SPECIFICATION.md              # 詳細仕様書
日記
目次