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

2023.10.192026.10.11

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

例えばコンテンツ販売機能のついたテーマ（例えばJIN:R）を買ったり、

外部サービス（例えばCodoc）を仲介してstripe決済したりです。

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

日本語サポート

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

ちなみに手数料は取られますが、Codocのプラグインを使った有料記事制作もおすすめです。

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

やり方は簡単です。

Jetpackの「有料コンテンツ」ブロックを使います。支払いを受け取るにはWordPress.comアカウントとStripeの連携が必要です。公式ガイドの現在の手順を確認してください。

最初の環境構築が手間なので注意しましょう。

環境構築

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

設定から支払いボタンを有効化をクリックします。

後は案内に従ってStripeと連携したり、WordPressアカウントと連携したりします。

この辺の詳しい過程は割愛します。案内に従って連携してください。

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

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

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

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

ブロック挿入ツールでJetpackの有料コンテンツブロックを選びます。下の画面は撮影時点のもので、現在のブロック名や並びとは異なる場合があります。

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

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

ゲスト表示には購入前の訴求を、購読者ビューには購入後に見せるコンテンツを入れます。購読者ビューは有料購読者にだけ表示され、ゲスト表示は購読していない閲覧者に表示されます。

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

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

デフォルトの状態です。

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

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

もし購入してるのに有料コンテンツが表示されない場合はWordPressアカウントにログインしてみましょう。

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

購入しているかしていないかの情報はWordPressアカウントに記録されるようです。

続きです。

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

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

これがあなたの WordPress.com アカウントになります。

と記載されているようにWordPress.comアカウントを所持してないユーザーは決済時にアカウントも作成されたことになります。

ここで購入履歴が記録されるので、すでに購入している場合はログインすることで有料コンテンツが閲覧できます。

おまけ

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

有料コンテンツ（購入済み）

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

まず2つのボタンそれぞれにボタンにクラス（swell-btn）を追加しましょう。

あとは下記の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;
}