ろばの穴・別館 Annex

アップル製品への熱い想い & PCガジェット全般のメモ

Wixのブログを2つ以上のWebページで使い分ける

ホームページ作成サービスのWixは昨年、旧ブログのサポートを終了し、新ブログに統合しました。

現在ブログは1つのサイトで1つしか作れません。

今までは(若干ズルっぽいですが)カテゴリごとに旧ブログと新ブログを使い分けて2ページで運営していましたので、今後はどうしたもんかと考えあぐねていました。

その後、ひとつに統合された新ブログを今まで通り2本立てで表示する方法を思いつきました。この方法なら1つのブログからWebページをいくつでも作れます。

自分でも忘れそうなので、備忘録としてまとめておこうと思います。

※ 参考にされる方は、必ずマイサイトで現在のサイトを複製し、テスト用のサイトで練習してから行ってください。

できあがりイメージです。

ブログ図解

今回は、ブログの中からカテゴリ=「コラム」の記事だけを表示するページを作ってみます。

Wixの「データベース」機能について

先にデータベース機能の簡単な説明から。

Wixには、いつの間にか「データベース」機能が装備されていました。

Wixでの概念と呼び方
・データの集合=「コレクション」
・コレクションからある条件でデータを抽出したセット=「データセット

「コレクション」は商品一覧などのようにユーザが一から作成することもできますし、「ブログ」などデフォルトで存在するものもあります。今回はブログのデータを「コレクション」として使います。

この中から、カテゴリ=「コラム」と設定した記事だけを絞り込んだデータセットを作ります。このデータセットと接続することで(今回は「タイル型」の)リストとしてコラムをWebページに表示します。同様の手順で、カテゴリ=「xxx」のページを複数作れます。


ブログ記事から あるカテゴリだけを表示する手順

1)ブログでカテゴリをWebページ分作っておく
今回は「コラム」「活動記録」の2つを作ることにします。

1.1カテゴリ>コラム作成

*1

1.2ブログでカテゴリ作成管理

 

 

2)「データセット」を作ります

記事を表示するためのWebページを新たに作っておきます。
・左メニューの追加>コンテンツマネージャ>データセット を選びます。
新しい「コレクション」がページに追加されます。これは実際には表示されないアイテムです。

2.1コンテンツマネージャ>データセット

2.2データセットアイコン

・設定>データセット名 今回は「コラムDS」と命名

2.3データセットに命名

・設定>コレクションを接続>Post を選びます。
「Post」というのはブログの各記事のことです。

2.4データセットを設定

 

★ 今回の手順ではココが一番重要です。
・・フィルターを追加>フィールド に「Categories」を設定 ★

2.5フィルタ>カテゴリ

2.6フィルタを追加

 

・・Value に「コラム」を設定 ★

2.7フィルタにカテゴリを設定

・できあがったデータセット

2.8データセットアイコン

 

 

3)リストの部品を追加する
・追加>リスト&グリッド>リピーター

3.1パーツ>リピーター
今回はタイル型のリピーターをページに配置します。

 

4)リピーターにデータセットを接続する

ここで「接続」という概念が出てきます。リピーターに、対象となるデータセットを指定する作業です。

・データに接続>データセットを接続>先ほど作った「コラムDS」を接続

4.1リピーターにデータセットを接続

4.2リピーターにデータセットを接続する

 

5)リピーターの中の繰り返しパーツにデータを「接続」する
ここで再度「接続」という概念が出てきます。コレクションからUI(ユーザインターフェイス)部品に表示するデータを設定する作業です。各UI部品の「コネクタ」形アイコンを押すと設定画面が表示されます。UI部品によって、それぞれ適したデータ型が設定できるようになっています。
(「接続」設定は、リピーターの先頭のアイテムで設定すれば、すべてのリピーターアイテムに適用されます。)

今回の例)
・画像>データに接続>画像元の接続先>Cover Image(画像)

5.5画像をデータに接続

5.6画像をデータに接続

 

 

・タイトル>データに接続>Title(テキスト)

4.1リピーターにデータセットを接続

5.8タイトル


・概要テキスト>データに接続>テキストの接続先>Excerpt(テキスト)

(英語でちょっと分かりにくいですが「Excerpt」は、ブログの編集時に、

 設定>記事の設定>詳細タブ>記事の抜粋

に入力したテキストを指します。)

5.8概要


・日付>データに接続>Published Date(日時) => 日付のフォーマットも選べます

5.7日付


・本文ボタン>データに接続>クリック時の動作を選択>Post Page URL

ブログ本文にジャンプするURLを指します。

5.9本文へのリンク


・「いいね!」の数を表示するテキスト>データに接続>クリック時の動作を選択>Like Count(数値)

5.10いいねの数

 

・設定後のリピーター部品

(ハートマークは「❤️」の画像を貼っています)

5.11設定後

・プレビューすると、こんな風に表示されます = できあがり!

5.12プレビュー

 

運用方法

ブログ記事編集時に、「カテゴリ」で「コラム」を設定しておくと、この記事は「コラム」ページに表示されます。

99.1記事にカテゴリを設定


おまけ

「コレクション」の中身も表で参照できます => 煩雑なので、次の記事で書きます。

まとめ

疲れた・・・

 

ここまで読んでくださった方も疲れさまでした。

 

*1:新規カテゴリを追加するとき、入力欄が勝手にリピートがかかったようになるので、別のエディタからコピペするとうまく入力できます(私の環境だけかな?)。