はじめまして。
カートの購入ボタン文字化けしてしまいます。
英語だと勿論問題ないのですが、日本語にすると以下のようになってしまいます。
買い物…
他のWordpress内での文字化けはありません。
カートボタンと、遷移先のみが文字化けします。
安心して購入してもらうためにも早々に文字化けをしないようにしたいです。
アドバイスよろしくお願いします。
WordPressとおっしゃってますが、BuyButtonを利用されているということですか？
おそらく、手前のサイトがShift JISで表示されていて、ブラウザがそのままShopifyをShift_JISで開こうとしているのではないかと思います。
1 Like
アドバイスありがとうございます！
公式にコンタクトとっても返信は１週間以上来ないので、Shopifyの利用を再検討していました…。
そんな中にご回答いただけた事、深く感謝しております。
説明不足を補います。
当方は自前のWordpressを利用してサイトを構築し、Buy Button だけをWordpressに組み込んでいます。
ShopifyをShift_JISで開こうとしているとのことですが、その場合においてどのようにしたら文字化けを防げるのでしょうか？
具体的なアドバイスをいただけると非常に助かります。
どうかよろしくお願いします。
WordPress側がShift_JISであるというのは仮定なので、詳細情報をいただかないと正確な答えは出せませんが、私が以前試したWordPressへの貼り付けは文字化けせずうまく動作しました。
おそらくですが、Shopifyから貼り付けたコードはUTF-8で、そこにボタンのラベルなどが日本語で入っていて、それをWordPressのShift_JISで書かれたページソースに貼り付けたので、文字コードが混在して、Wordpressの文字コードが優先されて文字化けを起こしていると思います。
文字コードを同一ページで同居させるのは、通常のウェブサイトではできないので（無理ではないですが、かなりトリッキーになります）、WordPress側を現状の主流であるUTF-8に変えていただくのがよろしいかと思いますが、いかがでしょうか？
お返事ありがとうございます。
まず、当方ではstyle.cssにて
@charset “utf-8”;
を設定してあります。
なので、通常は文字化けは一切起きません。
このshopifyの"Buy Button"だけが文字化けするのです。
こう考えると、shopifyにてボタンを作った際に、「コードをコピーする」というボタンをクリックする前に、内容のどこかを編集して文字化けを防ぐ必要があると思っています。
よろしくお願いします。
PS 公式のサポートって全然返事が来ないのですね…ひどい
まず、元の文字化けしている部分（HTMLエンコードで共有されている部分）がBuyButtonのどの部分（ボタンのラベルなのか、カートの明細なのかなど）か教えていただけますか？
こう考えると、shopifyにてボタンを作った際に、「コードをコピーする」というボタンをクリックする前に、内容のどこかを編集して文字化けを防ぐ必要があると思っています。
おそらく、文字化けというよりかは、コピーしているコードの時点で日本語がエンコードされたりしている可能性もあるので、お使いのコードを丸々こちらに共有いただけますでしょうか？
PS 公式のサポートって全然返事が来ないのですね…ひどい
サポートは返事が来ないことはありませんが、日本のサポートは現在混み合っていて返事が返ってくるのに時間がかかっています。
いつも丁寧なご回答に感謝しております。
文字化けは、ボタンのラベル、カートの明細など、商品名以外は全てだと思って頂いて良いと思います。
以下にコードをそのまま貼り付けますので、一度お目通し頂けると幸いです。
よろしくお願いします。
横から失礼します。
書かれたコードはコメントアウトされ非表示になっていますので、添付の画像にあるようにソースコード貼り付け用のボタンを押し、出てきた画面内に貼り付けられることをお勧めします。
なお、実行すると以下のような感じになります。
(前述の「</>」ボタンをして出てくる画面にあるLanguageという文字の下のボタンを押して「HTML/XML」か「JavaScript」を選ぶと適した状態で表示されるはずです)
1 Like
JIZO様
ご丁寧なアドバイス感謝します。
Wordpress上では普通に表示されるのに、ブラウザ上でサイトを見ると文字化けしている。
私のサイトの環境によるエラーなのでしょうか…。
だとしたら、何が原因になっているのか全く分かりません。
とりあえず、コードを貼り付けます。
もうShopifyを諦めて、BASEとかに移行するしかないのかなぁ…
支払いも無駄になってしまうのもありますが、自分のやりたいことを形にできないのが残念です…
コードの共有ありがとうございます。
いただいたコードを自分のWordPressに貼り付けてブラウザで表示してみましたが、添付のように文字化けせずにちゃんとチェックアウトできます。ですので、まずコードは問題ありません。
（検証あとにすぐに削除したのでご安心ください）
貼り付けた方法は、WordPressから記事を作成し、そのエディタ上で、「+」で「カスタムHTML」を選択して、そこに共有いただいたコードをはりつけただけです。
WordPressは、自身で立ち上げたものではなくて、他のサービスが提供しているホスト型のものを使っています。そのバージョンも添付しました。
設定に文字コードをいじる部分はなさそうですが、ほぼ最新のものなので、UTF-8で扱われていると思います。
Wordpress上では普通に表示されるのに、ブラウザ上でサイトを見ると文字化けしている。
私のサイトの環境によるエラーなのでしょうか…。
テキストではわかりにくいので、画面のスクリーンショットをあげていただけますか？
WordPress上では表示されるとは、プレビューのことでしょうか？
コードをWordPressに挿入する手順は正しいか？（上記のようなやり方で行っているか）
など。
junichiokamura様
毎回ありがとうございます。
添付画像は、サイト上で表示されているものです。
コードに問題が無いとなると、あとはテーマとのマッチングでしょうか？
ちなみに、ご説明頂いたような感じの場所は当方のテーマにはなくて、HTMLとして直接打ち込んでいます。
Wordpress云々という部分は忘れてください。
ECサイトを作ったのは初めてなのですが、WPではいくつもサイト立ち上げしているので、打ち込んだ方法は間違えないと思うのですが…。
八方塞がりですかね。Shopifyとの相性が悪かったかなぁ…
横から失礼します。
見たことが無く検索でも類似の事例が見つけられれていないため解決策がご提案できるわけではないのですが、一応以下記載します。
ここまでの流れを拝見しまして、恐らくお使いのWPテーマやプラグインの設定や機能、またはご利用の環境が影響しているのではと思いました
そのため以下3点に付き記載します。
- プラグインが原因である場合
- テーマが原因である場合
- ペースト時の動作が原因の場合
■プラグインが原因である場合
WPのセオリーとしてプラグインを全て停止して確認する方法が考えられます。
これで改善した場合は、一つ一つ有効化しながら原因となるプラグインを特定し、問題のプラグインがわかれば設定変更や別プラグインの利用を検討できます。
■テーマが原因である場合
テーマが原因である場合は以下などの方法が考えられます。
- テーマを変更する
- 現在とは違う場所にコードを貼って動作する場所を探す
- お使いのWPテーマのヘルプを調べる
- テーマ作成者に問い合わせる
「テーマを変更する」場合、公開サイトでのテーマ変更は厳しいことが多いので、以下のプラグインなどを利用すれば比較的楽に別のテーマでの状態を確認できると思います。
これで改善するのであれば、テーマが原因であるとみてほぼ間違い無いかと思います。
WP Theme Test(このプラグイン名で検索すると操作方法の解説ページがいろいろ出てきます)
https://ja.wordpress.org/plugins/wp-theme-test/
■ペースト時の動作が原因の場合
可能性は相当に低いですが以下も確認いただければと思います。
- 実際に目的の箇所にペーストした際、コード内の「買い物カゴに追加」という文字は日本語のままかどうか
重要なのは「実際にWPの管理画面なりファイルなりにペーストされた際にどうなっているのか」という点です。
この時点で日本語から変換されている場合は、お使いのブラウザかテキストエディタ、またはPC自体を変更することで解決できるかと思います。
1 Like
ちなみに、ご説明頂いたような感じの場所は当方のテーマにはなくて、HTMLとして直接打ち込んでいます。
Wordpress云々という部分は忘れてください。
具体的この部分のスクリーンショットを共有いただけますか？
「ご説明頂いたような感じの場所は当方のテーマにはなくて」共有した画面はWordPressの投稿編集画面であり、Shopifyのテーマ編集ではありません。
Wordpress云々という部分は忘れてください。
WordPressを使っていないということでしょうか？
なるべく詳細にどのようにしてBuyButtonを貼り付けているのかの手順を共有いただければ、解決策があると思います。
Jizo様、お世話になります。
全て試していたのですが、最初に試してから一度もトライしてなかったのはプラグインのみ。
ダメ元で、もう一度やってみようとやってみたら、今回はなんと成功したのです！
よってプラグインの干渉だったと思われます。
同じテーマでを利用していて、ひとつは普通に表示され、こちらはダメという時点で、しつこくプラグインの試行をすべきでした。
そこを思い出させてくれたJizo様に感謝しています。
Jizo様のアドバイスには毎回丁寧さと優しさを感じていました。
本当にありがとうございます。
感謝しかありません(
)
改めてありがとうございました！