Knowledge Diary

【Shopify】日本語URLをメニューで登録する方法と効率化

Published：　Updated：

【Shopify】日本語URLをメニューで登録する方法と効率化

Shopifyでは、簡単にメニューを作成することができます。しかし日本語URLをそのまま登録することはできません。
例えば、ブログでタグ絞り込みURLを作成した場合など、日本語のままだと登録ができないです。


本記事では、日本語URLをメニューで登録する方法と、さらに効率的に管理する方法をご紹介します。


さあ、Shopifyのメニュー機能をさらに活用しましょう！

Index

［ CloseOpen ］

Shopifyでメニュー機能を使う方法

メニューの登録・編集については以下の記事で解説しています。

Related

【Shopify】メニューの登録・編集方法の解説

【Shopify】メニューの登録・編集方法の解説

日本語URLを登録するには日本語部分をURLエンコード（パーセントコード）に変換する！

日本語部分をURLエンコード（パーセントコード）に変換することで登録をすることができます。

URLエンコード（パーセントコード）とは

URLに含まれ特定の文字を、HTTPプロトコルで使用可能な文字に変換する手法。
URLにスペースや日本語などの非ASCII文字が含まれる場合に、％記号と2桁の16新数（ASCIIコード）でエンコードされます。

URLエンコードの方法

URLエンコードを手動で行うのは手間がかかるため、ツールやプログラムを使用して自動的にエンコードするのが一般的です。

▼オンラインツール
URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited

変換したい文字をツールで変換してからURLを設定できます。
※URLをエンコードするとhttps://〜の「:」「/」がエンコードされてしまうため注意

Googleスプレットシートを用いてURLエンコードの効率化と一覧化

Googleスプレットシートを用いて効率的にURLエンコードと一覧にする方法を紹介をします。
メニューは複数作成できるため、一覧にして保存しておくことで、毎回オンラインツールを使用する必要がなくなります。

Googleスプレットシートを作成する方法

ブログのタグをURLで指定する場合で紹介します。

作成手順

  1. GoogleA列にブログカテゴリハンドルを入力
  2. B列にタグ名を入力
  3. C列で「A列の文字」と「ENCODEURL関数でエンコードしたB列の文字」を結合する
  4. C列をコピーしてメニューのURLに入力する

ENCODEURL関数でエンコードする

="blogs/"&A1&"/tagged/"&ENCODEURL($B1)

上記のコードをC列に入力する。
これを設定するだけでA列とB列を入力するだけでC列にURLが表示されます！

スプレットシートでURLエンコードした場合の結果

※注意
A列のブログカテゴリハンドルはURLセーフ文字で設定されている前提となります。
カテゴリハンドルをURLセーフ文字以外で設定している場合、URLハンドルを変更するか、こちらもURLエンコードする必要があります。

別タブでカテゴリハンドルを管理してもっとわかりやすく

A列に毎回ブログハンドルを入れるのは大変。。
なので、ブログ名を選択するとブログハンドルが表示できるように変更しましょう。
VLOOKUP関数を用いることでさらに便利にすることができます！

作成手順

  1. カテゴリ用のタブを作成する
  2. カテゴリ用タブのA列にブログ名を入力
  3. カテゴリ用タブのB列にブログハンドルを入力
  4. URL一覧用タブに移動してA列にデータを埋め込む
  5. C列で「A列の文字を用いて取得したハンドル」と「ENCODEURL関数でエンコードしたB列の文字」を結合する
  6. C列をコピーしてメニューのURLに入力する

カテゴリ用のタブを作成する

タグを作成する

新しくカテゴリ用のタブを作成します。
このタブ名はVLOOKUP関数で使用します。

カテゴリ用タブにカテゴリ名とカテゴリハンドルを入力して、一覧用タブで表示をする

A列にカテゴリ名、B列にカテゴリハンドルを入力します。
データの入力規則を用いてプルダウンを作成する。

  1. A列を選択する
  2. データを開いて、データの入力規則をクリック
  3. ルールを追加します。
  1. 条件を「プルダウン（範囲内）」に変更
  2. ②をクリックすると④を表示する
  3. カテゴリ用タグに移動します。
  4. ⑤をクリックした後、A列を選択
  5. プルダウンを作成することができます。

VLOOKUP関数でブログハンドルを取得、ENCODEURL関数でエンコードする

="blogs/"&VLOOKUP($A1,'カテゴリ'!$A$1:$B,2,false)&"/tagged/"&ENCODEURL($B1)

上記のコードをC列に入力する。
A列でブログカテゴリを選択、B列でブログタグを入力するとC列にURLが出力されます。
これでサイト運営者が変わっても簡単にエンコードできます！

ブログハンドルが増えた場合

カテゴリ用タブに追加するだけで、プルダウンの選択肢が自動で増えます！
ハンドルを別で管理することで運用負担を減らせます。

まとめ

いかがでしたでしょうか。【Shopify】日本語URLをメニューで登録する方法と効率化についてご紹介しました。
リンクを整理して、ユーザーフレンドリーで回遊しやすいサイトを作りましょう。

関連記事 Related articles

この記事を書いた人

夢拓（MUHIRO）/ Webデザイナー（フロントエンド）

大学中退して飲食業界に就職。飲食業界のブラックな部分を知り退職、その後無職。職業訓練校と独学で今勤めている制作会社に入社。 主にデザイン・構築をメインにUI/UXやアクセシビリティに考慮したWebサイト制作。スクラッチ案件多数、Shopifyテーマカスタマイズは90サイト以上の実績あり。

View Profile

免責事項

  • 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
  • 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
  • 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
  • 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
  • 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。