【Wraptas】Notinoの同期ブロックを活用して、ブログにおすすめの記事を表示させる

【Wraptas】Notinoの同期ブロックを活用して、ブログにおすすめの記事を表示させる

こんにちは!須那です。
 
プロトアウトスタジオのWebサイトがWraptasに移行してから半年以上が経過しました。
移行した時より、Wraptas,Notion共にどんど機能が増えており、やれる幅がどんどん広がっていていろいろ試すのが楽しいです。
 
今回はブログ記事のページセッション数を増やすことを目的に、ブログ記事下部におすすめ記事が表示される仕組みを作ってみたので、そのことを記事にしました。
 

Notionの同期ブロックを使用する

Notionには複数の箇所にわたってコンテンツブロックを同期できる「同期ブロック」という機能があります。同期ブロックを使えば、ページが違う複数のブロックをすべて同時に編集できます。
今回はその同期ブロックを利用しておすすめ記事をすべての記事に表示されるように作っていいきます。
 

ブログ記事用テンプレートページを作成

まずは「ブログテンプレート」というテンプレートページを作成し、そこに同期ブロックを設置します。
ブログを書く際にはこのテンプレートページを選択することで、すでにページに同期ブロックが設置された状態で記事を書けるという流れです。
 
同期ブロックを設置し、そこにギャラリービューを追加していきます。
同期ブロックは赤線で囲われているので、その中に同時編集をかけたいコンテンツを入れていきます。
 
 

フィルター設定で表示記事を選別

本来ならPV数などで、人気の記事を上位に表示したいところですが機能的に厳しそうなので、ブログ記事のプロパティに「pickup」というタグを手動で追加して、ギャラリービューのフィルターで表示記事を操作しています。
タグやフィルターを変更するだけで、すべての同期ブロックに追加されているギャラリービューの表示も変更がかかるので、手間がかからずすべての表示を変えることができます。
 
 
後は、ギャラリービューの表示数を任意の数に制限することで、ブログ記事におすすめ記事が表示される仕組みの完成です。
表示数制限するCSSは下記のリンクを参考にしてください。
※同期ブロックの個別IDはすべて同じになるので、Wraptasのサイトデザイン編集の追加CSSで一括で変更をかけることができます。
 
これによって下記のコンテンツが完成しました。
ブログ記事を見に来てくれた方に、新着記事だけでなく、読んでほしい記事をお勧めすることができます。
 
 

最後に

今回はNotinoの同期ブロック機能を活用して、Wraptasでのブログ記事表示の改善に挑戦しました。
まだまだ色んな機能があり拡張性も高いので、今後もNotionやWraptasについて発信していきたいと思います。