WordPress｜有料記事を作る方法！note風コンテンツを簡単実装

2023.10.192026.10.31

noteのような記事の途中から有料コンテンツを販売する方法はいくつかあります。

ここではJetpackの有料コンテンツブロックを使い、ゲスト向けの案内と購読者向け本文を分ける方法を紹介します。

本記事の画面例は2023年10月のものです。

現在の操作は公式ガイドと照合し、決済・購読者認証・公開範囲を確認してから販売を始めてください。

しかしAutomattic製で公式プラグインディレクトリにあるJetpackに有料販売のコンテンツ機能があるので、紹介いたします。

日本語サポート

有料コンテンツを作成するこのガイドでは、有料購読者のみが閲覧できるコンテンツを作成する方法を説明します。

別の方法としてcodocもあります。

導入方式、手数料、購入者の認証方法が異なるため、次の記事で比較してください。

有料コンテンツブロックの使い方

ブロックを置くだけで販売準備が完了するわけではありません。

接続先と料金プラン、ゲスト向け表示、購読後の閲覧を順に確認します。

Jetpackの「有料コンテンツ」ブロックを使います。

支払いを受け取るにはWordPress.comアカウントとStripeの連携が必要です。

公式ガイドの現在の手順を確認してください。

Jetpack接続済みサイトのブロックエディターで使います。

ブロック利用の有料アップグレードと取引手数料は別です。

Jetpackの取引手数料とStripe側の手数料を、利用するプラン・国・通貨に応じて確認してください。

環境構築

プラグインの検索からJetpackのプラグインをインストール。

以下は旧設定画面の参考例です。

現行の公式手順では有料コンテンツブロックを追加し、初回の支払い設定に表示される案内からStripeへ接続します。

サイトを接続しているWordPress.comアカウントと、入金先にするStripeアカウントを確認して連携します。

自己ホストのWordPress管理画面のユーザーと、WordPress.comアカウントは区別してください。

有料コンテンツブロックのプラン選択から、名前・通貨・金額・支払い間隔（単発・月額・年額）を設定し、閲覧を許可するプランを選択します。

複数プランを選ぶと、そのいずれかの購読者が閲覧できます。

各記事を個別販売したい場合は、同じプランを共有する範囲にも注意してください。

余談ですが、Jetpackは多機能なので、使わない機能をOFFにしたいときは下記のURLを開きます。

https://ドメイン名/wp-admin/admin.php?page=jetpack_modules

有料コンテンツブロックの作成

設定が完了したら記事編集画面を開きましょう。

ブロック挿入ツールでJetpackの有料コンテンツブロックを選びます。

下の画面は撮影時点のもので、現在のブロック名や並びとは異なる場合があります。

記事編集画面のJetpackブロック一覧から、支払いを選んで有料コンテンツを利用する様子。

有料コンテンツブロックは、タブブロックのように購読者ビューとゲスト表示の切り替えができます。

ゲスト表示には購入前の説明を、購読者ビューの内側には選択したプランの購読者へ見せる本文を入れます。

リスト表示で入れ子の位置を確認してください。

管理者・編集者は未購読でも内容を見られるため、販売前にはログアウト状態と購読者の状態を分けて確認します。

有料コンテンツブロックを未購入のユーザーが見たときに表示される、購読ボタン付きのデフォルト表示例。

ユーザから見た有料コンテンツブロック

デフォルトの状態です。

購入していないユーザーはこのように購読ボタンが表示されます。

未購入のユーザーに対して有料コンテンツブロックに購読ボタンが表示されている画面。

購入済みで表示されない場合は、購入に使ったWordPress.comアカウントでログインし、購読プランと対象ブロックに選ばれたプランを照合してください。

購入済みにもかかわらず有料コンテンツが表示されない場合の、ログインに関する案内画面。

購読者の認証はWordPress.comで行われ、自己ホストサイトのローカルユーザーとして追加される仕組みではありません。

続きです。

購読ボタンを押すと決済画面が表示されます。

購入後、記事内の有料コンテンツが表示されます。

上の画像には、当時のWordPress.comアカウント作成の案内も含まれています。

現在の購入時は、表示されるWordPress.comの認証・登録案内を確認してください。

この改訂では新規登録や決済の完了まで試していません。

有料コンテンツブロックが制限するのは本文のHTMLです。

画像・動画・ファイルは直リンクを知る人が取得できるため、機密ファイルを保護する仕組みとして扱わないでください。

販売するファイル自体のアクセス制限は別途必要です。

おまけ

以下は有料コンテンツブロックのサンプルとして表示していたコンテンツです。

ボタンの装飾例（現在は一般公開）

Jetpackの有料ボタンの見た目のカスタマイズを紹介します。

購読ボタンとログインボタンの各ブロックの追加CSSクラスに swell-btn を付けます。

既存のクラスは残してください。

変更前のCSSを控え、追加CSSへ以下の例を入れます。

同じクラスを使うほかのボタンにも適用されるため、対象範囲を確認してください。

色を変更する場合は文字と背景のコントラスト、キーボードのフォーカス、スマホ幅での改行も確認してください。

.wp-block-premium-content-buttons.wp-block-buttons {
    margin-top: 2em;
}

.swell-btn {
    display: block;
    margin: 0 auto 2em;
    position: relative;
    text-align: center;
}

.swell-btn a {
    background: #b18e37;
    display: inline-block;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 0;
    min-width: 64%;
    padding: 12px 24px;
    position: relative;
    text-decoration: none;
    width: auto;
    border-radius: 80px;
}
.wp-block-premium-content-login-button a {
    background-color: #c7c7c7!important;
}