top of page

hand-dot.com

head1

id

Table of contents

Veloを使って"特定"のWixブログの記事を会員限定にする

やること

Wixでは特定のブログ記事に対して有料プランの設定をしたり、ブログ記事全体に対してアクセス制限を設定することはできる。


今回作る機能は、特定のカテゴリーの記事に対して会員登録を必須とする制限をVeloで追加します。

動きとしては下記のGIFになります。

特定のカテゴリーの記事の場合には会員登録をさせるようにします。

会員登録が既に行われている場合には通常の記事と同じように表示することができます。


実はWixブログのサブスクリプション(定期購読)機能を使い、0円のプランを作成すれば登録しないと読めない記事をコーディング無しで作成できます。


自分の場合は定期購読してもらうようなコンテンツを書いているわけではなく、8割は自分のために記事を書いています。しかしお金の話などプライベートにしたいことは、他の人に見られる状態なのは微妙だなと思っており、この機能が欲しくなりました。そのため、現在は会員登録ユーザーは承認制となっております。


注意点としてはスクリプトを使用して非表示にしているため、コンテンツはサーバーから返却されていますのであくまでも子供騙し程度の効力ですので悪しからず。

 

実装


前提条件としてWix Blogがインストールされていること。

ブログ記事のページコードを書いていきます。下記の画像の赤枠を参考に記事の要素にIDを割り振る必要があります。

また、ライトボックスを作成し、サインアップボタンにIDを割り振ります。

ライトボックスについて: https://support.wix.com/en/article/wix-editor-about-lightboxes

スクリプトは下記です。

6行目のPRIVATE_CATEGORY_IDというのは今回の処理を適応するカテゴリーIDです。自分で作成して、 REPLACE_ME の部分を書き換える必要があります。

簡単にやっていることを説明すると、

  • post.getPost で記事のIDを取得

  • 記事のcategoriesに PRIVATE_CATEGORY_IDが含まれており、ログインをしていない場合にライトボックスを表示

  • ライトボックス側はサインアップボタンをクリックした場合にログインモーダルを開く

  • ログインが成功した場合、記事を表示

  • ライボックスを閉じた場合、ログインをキャンセルした場合どちらも記事一覧ページに遷移させる

雑ですが、こんな感じ。ではでは。


参考Velo API:

bottom of page