1 min read

【コンテンツマネージャー】タグやプルダウンを使用して簡単に情報をカテゴリ分け!

Airi Shiroma By Airi Shiroma
【コンテンツマネージャー】タグやプルダウンを使用して簡単に情報をカテゴリ分け!

以前に、データベース(コンテンツマネージャー)を使用して、一括でページを簡単に作れる方法をブログにしましたが、とても便利な機能ということで多くの方が活用されているお声を多く聞きます。

データベースを使用して、一括でページを作成できる方法

とても便利なコンテンツマネージャーですが、カテゴリー分けを簡単にできたらいいなーと思う方も多いかと思います。

カテゴリーごとにデータベースのページを作成する方もいますが、少し面倒ですよね…

例えば、3つのカテゴリーの場合、それぞれのページのスマホ最適化の作業も必要になるので、時間がかかってしまいます。

しかし、タグやプルダウン機能を活用することで、とても簡単に、しかもカテゴリーごとにページを作らずに済みます!

 

イメージとしては…

カテゴリごとにページを作成する場合:

カテゴリごとの作成

タグやプルダウンを使用する場合:

プルダウン・タグを使用する場合

1ページでカテゴリー分けも完結するので、スマホ最適化の手間もかなり省けます!(→個人的には、これがとても嬉しい笑)

 

今回は、タグやプルダウンを使用して、コンテンツマネージャーの情報をカテゴリー分けする方法を解説していきたいと思います。

コンテンツマネージャーに情報が入っていることを前提に解説していきますので、コンテンツマネージャーの作成方法について知りたい方は、下記のブログをまずご覧ください。

データベースを使用して、一括でページを作成できる方法

また、今回のカテゴリ分けする際に使用するコードは、こちらの動画で紹介されたものを使用しています。

参考動画:https://www.youtube.com/watch?v=EV6Hc5tBlPM

 

タグやプルダウンを使用してカテゴリ分けのサンプル

 

タグやプルダウンでのカテゴリー分け表示は、下記のようになります。

 

・タグ

 

タグの場合は、複数のカテゴリーを選択して表示させることができます。

Image from Gyazo

 

・プルダウン

 

プルダウンは、1つのカテゴリのみを表示させることができます。

Image from Gyazo

 

※プルダウンを複数使用し、フィルターをかけて表示させる方法もありますが、この記事では、1つのプルダウンのみを使用した方法をご紹介します。

 

カテゴリー分けの方法(タグ編)

 

タグ、ドロップダウンで表示させる場合どちらも、設定方法はほぼ同じで、とても簡単です。

今回は、タグを使用したカテゴリー分けの方法をご紹介します。

 

・タグと情報の追加

 

ページにタグを追加します。

入力欄 > セレクトタグからお好きなタグを選びます。

タグ追加画面

ページに、リピーターを追加し、それぞれのパーツをコンテンツマネージャーに紐付けます。

リピーター

コンテンツマネージャーを開き、カテゴリー分けしたい項目が追加されているかを確認します。

私の場合は、レシピの調理レベル(初心者・中級者・上級者)でカテゴリ分けをしたいので、下記の項目をコンテンツマネージャーに追加しました。

コンテンツマネージャー項目

カテゴリ分けしたい項目「初心者・中級者・上級者」が合計で3つあるので、ページに追加したタグの「選択肢を管理」から、タグを3つに減らします。

Image from Gyazo

「ラベルを編集」からタイトル名を変更します。

ラベルの編集

上記のようにラベル名を変更しても「Value」の項目が一致していない場合は、「値を編集」をクリックし、ラベル名と同じ名前を入れます。

値の編集

「Value」の名称は、コンテンツマネージャーに表示されているカテゴリー分けをしたい項目の名称と一致している必要がありますので、打ち間違いにも気をつけてください!

フィールドキーの取得方法

タグの設定が完了したら、お好みでタグの色や大きさなど変更してくださいね!

 

・コードを入力する

 

リピーター、タグの設定が完了したら、最後はコードを入力するだけです!

画面右下の、矢印をクリックして、記入欄を開きましょう。

Image from Gyazo

開いたら、下記のコードをコピペしてください。

 

import wixData from 'wix-data';

 

$w.onReady(function () {

 

    $w('#selectionTagsID').onChange(() => {

        const selectedTag = $w('#selectionTagsID').value;

 

        let filter = wixData.filter();

 

        if (selectedTag.length > 0) {

            filter = filter.hasSome("FIELDKEY", selectedTag);

        }

 

        $w('#datasetID').setFilter(filter);

 

    })

});

 

コピペすると、3ヶ所ほど、赤波線で表示されているテキストがありますが、それは正しいコードを入れていないため、エラーとなっています。

これからエラー箇所に正しいコードを入力していきます。

コードコピペ

まず、「#SelectionTagsID」。

先ほど設定したタグをまずクリックし、右側に表示されるIDをコピーし、「#SelectionTagsID」の箇所に貼り付けます。

Image from Gyazo

 

下の行の「SelectionTagsID」も同じようにIDを貼り付けます。

 

次は、「FIELDKEY」を変更します。

ここに入力するのは、フィールドキーといい、コンテンツマネージャーで確認することができます。

コンテンツマネージャーを開いて、カテゴリー分けしたい項目の編集からフィールドキーをコピーします。

Image from Gyazo

 

コピーしたフィールドキーを貼り付けます。

Image from Gyazo

 

最後に、エラー表示されている「#DatasetID」を変更します。

ページに表示されているデータセットをクリックして、IDをコピーし、貼り付けます。

Image from Gyazo

 

そうすると、赤線エラーが消えて、全て設定完了になったことがわかります。

最後に公開し、プレビューでカテゴリー分けが問題なくされるか動作確認をしましょう♪

Image from Gyazo

 

プルダウンを使用する場合:

プルダウンを使用する際、設定方法はほぼ一緒です。

タグの時と同じようにプルダウンをページに追加し、ラベル・値名称を変更し、同じ手順でコードを入力すればカテゴリー分けでの表示が可能になります。

プルダウンもとても簡単に設定できるので、練習がてらお試しください♪

 

まとめ

 

タグやプルダウンを使用して簡単にカテゴリ分けできる方法を解説しましたが、問題なく設定できましたでしょうか?

今回、PC画面でのみの設定をご説明しましたが、カテゴリーの種類が何個あるかでタグ・プルダウンどちらにするか決めるのもおすすめです。

タグは、どうしてもカテゴリーの数が多いと、スマホでごちゃごちゃしたイメージを与えてしまいますが、プルダウンだとスマホで表示した際にスッキリ見えるので、状況に合わせてぜひ使い分けてくださいね!

 

弊社ブランドバディーズは、Wix公式パートナーの最高ランク、Legendに認定されています。マーケティングやブランディングを活かしたウェブサイト・オンラインショップ制作を行なっております。

Legend (1)

現在30分無料でWixに関するご相談を受け付けておりますので、Wixのサイト制作に関してご相談がありましたら、こちらよりご予約ください。

Wix無料相談受付



Related Articles

Wixデータベースの使い方!一括でページを簡単に作れる方法!

( 1 min read )

Tags: ブランディング, マーケティング, wix

Wix競合分析機能とは?SEO対策で使える競合分析ページの使い方・見方を徹底解説

( 1 min read )

Tags: ブランディング, マーケティング, wix

データベースで作成したページの管理方法(コンテンツマネージャーで情報追加・変更)

( 1 min read )

Tags: wix

ジャーニーマップをダウンロード!

オンラインとオフラインでメディア戦略を立てるときにご利用ください。