Velo初心者向け｜現在のページURLを取得して表示する方法

WixでWebサイトを作成していると、「このページのURLを画面上に表示したい」と思う場面があります。

通常のエディターではURLを取得する機能はありませんが、Veloを使えば、現在のページURLを簡単に取得して表示することができます。

この記事では、Velo初心者でもわかるように、現在のページURLを取得し、ページ上に表示する方法を解説します。

① テキスト要素をページに設置する

テキスト要素にID「urlText」を設定した画面です

まず、URLを表示するためのテキスト要素をページ上に配置します。

• テキストボックスを追加

• プロパティパネルからIDを urlText に変更

（Veloでは要素のID指定が重要になります）

📌 このテキスト要素が、URLを表示する場所になります。

② Veloコードを貼り付ける

続いて、Veloのコードエディターを開いて、以下のコードを貼り付けましょう。

import wixLocation from 'wix-location';

$w.onReady(function () {
  const currentUrl = wixLocation.url;
  $w("#urlText").text = `このページのURL：${currentUrl}`;
});

🧩 解説：

• wixLocation.url は現在表示しているURLを取得するプロパティです。

• #urlText は先ほど設定したテキスト要素のID。

• ページ読み込み時にURLを取得し、テキストに反映しています。

Veloコードを入力した状態のVeloエディター画面です

④ プレビューで確認する

ページをプレビュー表示すると、先ほど配置したテキスト要素に「このページのURL：〇〇」という形でURLが表示されているはずです。

ページに現在のURLが表示されているプレビュー画面です

📝 ワンポイント：プレビューで表示されるURLについて

プレビュー画面で表示されるURLは、Wixの編集者専用のURLになります（例：https://editor.wix.com/...）。これは正常な挙動です。

プレビュー時：開発者向けのURLが表示される

公開後：本番用のURL（例：https://www.mydomain.com/...）が表示される

本番で正しいURLを確認したい場合は、一度サイトを公開してご確認ください。

④ 応用編：クエリパラメータ（?utm=xxxなど）にも対応できる！

さらにステップアップすると、以下のような応用も可能です👇

import wixLocation from 'wix-location';

$w.onReady(function () {
  const query = wixLocation.query;
  const utm = query.utm || "パラメータなし";
  $w("#urlText").text = `このURLのutmパラメータ：${utm}`;
});

→ URLに ?utm=LINE などが含まれていると、その値を取得できます。

まとめ

• Veloを使えば、現在のページURLを簡単に取得して表示できる

• テキストに表示するだけでなく、コピー機能やパラメータ制御などの応用も可能

• 初心者でも「ページとURLのつながり」を理解する第一歩になります！