FROM CACHE - jp_header
解決済

カートボタンの文字化け

こころまち
新規メンバー
7 0 0

はじめまして。
カートの購入ボタン文字化けしてしまいます。
英語だと勿論問題ないのですが、日本語にすると以下のようになってしまいます。

買い物&#1…

 

他のWordpress内での文字化けはありません。

カートボタンと、遷移先のみが文字化けします。
安心して購入してもらうためにも早々に文字化けをしないようにしたいです。

アドバイスよろしくお願いします。

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
990 373 690

成功

横から失礼します。

見たことが無く検索でも類似の事例が見つけられれていないため解決策がご提案できるわけではないのですが、一応以下記載します。

 

ここまでの流れを拝見しまして、恐らくお使いのWPテーマやプラグインの設定や機能、またはご利用の環境が影響しているのではと思いました
そのため以下3点に付き記載します。

  • プラグインが原因である場合
  • テーマが原因である場合
  • ペースト時の動作が原因の場合

 

■プラグインが原因である場合

WPのセオリーとしてプラグインを全て停止して確認する方法が考えられます。
これで改善した場合は、一つ一つ有効化しながら原因となるプラグインを特定し、問題のプラグインがわかれば設定変更や別プラグインの利用を検討できます。

 

■テーマが原因である場合

テーマが原因である場合は以下などの方法が考えられます。

  • テーマを変更する
  • 現在とは違う場所にコードを貼って動作する場所を探す
  • お使いのWPテーマのヘルプを調べる
  • テーマ作成者に問い合わせる

 

「テーマを変更する」場合、公開サイトでのテーマ変更は厳しいことが多いので、以下のプラグインなどを利用すれば比較的楽に別のテーマでの状態を確認できると思います。
これで改善するのであれば、テーマが原因であるとみてほぼ間違い無いかと思います。

WP Theme Test(このプラグイン名で検索すると操作方法の解説ページがいろいろ出てきます)
https://ja.wordpress.org/plugins/wp-theme-test/

 

■ペースト時の動作が原因の場合

可能性は相当に低いですが以下も確認いただければと思います。

  • 実際に目的の箇所にペーストした際、コード内の「買い物カゴに追加」という文字は日本語のままかどうか

 

重要なのは「実際にWPの管理画面なりファイルなりにペーストされた際にどうなっているのか」という点です。
この時点で日本語から変換されている場合は、お使いのブラウザかテキストエディタ、またはPC自体を変更することで解決できるかと思います。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

13件の返信13

junichiokamura
Community Manager
1200 280 506

WordPressとおっしゃってますが、BuyButtonを利用されているということですか?

おそらく、手前のサイトがShift JISで表示されていて、ブラウザがそのままShopifyをShift_JISで開こうとしているのではないかと思います。

Senior Partner Solutions Engineer
こころまち
新規メンバー
7 0 0

アドバイスありがとうございます!
公式にコンタクトとっても返信は1週間以上来ないので、Shopifyの利用を再検討していました…。
そんな中にご回答いただけた事、深く感謝しております。

説明不足を補います。
当方は自前のWordpressを利用してサイトを構築し、Buy Button だけをWordpressに組み込んでいます。
ShopifyをShift_JISで開こうとしているとのことですが、その場合においてどのようにしたら文字化けを防げるのでしょうか?
具体的なアドバイスをいただけると非常に助かります。
どうかよろしくお願いします。

junichiokamura
Community Manager
1200 280 506

WordPress側がShift_JISであるというのは仮定なので、詳細情報をいただかないと正確な答えは出せませんが、私が以前試したWordPressへの貼り付けは文字化けせずうまく動作しました。

おそらくですが、Shopifyから貼り付けたコードはUTF-8で、そこにボタンのラベルなどが日本語で入っていて、それをWordPressのShift_JISで書かれたページソースに貼り付けたので、文字コードが混在して、Wordpressの文字コードが優先されて文字化けを起こしていると思います。

文字コードを同一ページで同居させるのは、通常のウェブサイトではできないので(無理ではないですが、かなりトリッキーになります)、WordPress側を現状の主流であるUTF-8に変えていただくのがよろしいかと思いますが、いかがでしょうか?

Senior Partner Solutions Engineer
こころまち
新規メンバー
7 0 0
お返事ありがとうございます。
まず、当方ではstyle.cssにて
@charset "utf-8";
を設定してあります。

なので、通常は文字化けは一切起きません。
このshopifyの"Buy Button"だけが文字化けするのです。
こう考えると、shopifyにてボタンを作った際に、「コードをコピーする」というボタンをクリックする前に、内容のどこかを編集して文字化けを防ぐ必要があると思っています。

よろしくお願いします。

PS 公式のサポートって全然返事が来ないのですね…ひどい

junichiokamura
Community Manager
1200 280 506

まず、元の文字化けしている部分(HTMLエンコードで共有されている部分)がBuyButtonのどの部分(ボタンのラベルなのか、カートの明細なのかなど)か教えていただけますか?

こう考えると、shopifyにてボタンを作った際に、「コードをコピーする」というボタンをクリックする前に、内容のどこかを編集して文字化けを防ぐ必要があると思っています。

おそらく、文字化けというよりかは、コピーしているコードの時点で日本語がエンコードされたりしている可能性もあるので、お使いのコードを丸々こちらに共有いただけますでしょうか?

PS 公式のサポートって全然返事が来ないのですね…ひどい

サポートは返事が来ないことはありませんが、日本のサポートは現在混み合っていて返事が返ってくるのに時間がかかっています。

 

Senior Partner Solutions Engineer
こころまち
新規メンバー
7 0 0
いつも丁寧なご回答に感謝しております。
文字化けは、ボタンのラベル、カートの明細など、商品名以外は全てだと思って頂いて良いと思います。
以下にコードをそのまま貼り付けますので、一度お目通し頂けると幸いです。
よろしくお願いします。



Jizo_Inagaki
Shopify Partner
990 373 690

横から失礼します。

書かれたコードはコメントアウトされ非表示になっていますので、添付の画像にあるようにソースコード貼り付け用のボタンを押し、出てきた画面内に貼り付けられることをお勧めします。

スクリーンショット 2020-11-27 21.54.38.png

なお、実行すると以下のような感じになります。

 

 

<!--  &amp;amp;lt;br&amp;amp;gt;/*&amp;amp;lt;![CDATA[*/&amp;amp;

 

 

(前述の「</>」ボタンをして出てくる画面にあるLanguageという文字の下のボタンを押して「HTML/XML」か「JavaScript」を選ぶと適した状態で表示されるはずです)

スクリーンショット 2020-11-28 12.30.19.png

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
こころまち
新規メンバー
7 0 0

JIZO様

ご丁寧なアドバイス感謝します。
Wordpress上では普通に表示されるのに、ブラウザ上でサイトを見ると文字化けしている。
私のサイトの環境によるエラーなのでしょうか…。
だとしたら、何が原因になっているのか全く分かりません。

とりあえず、コードを貼り付けます。

もうShopifyを諦めて、BASEとかに移行するしかないのかなぁ…
支払いも無駄になってしまうのもありますが、自分のやりたいことを形にできないのが残念です…

<div id='product-component-1606705876785'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src=scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'kokoromachi-gift.myshopify.com',
      storefrontAccessToken: '2c802e67099fa5d303d5d9b0555181fa',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '4577988706398',
        node: document.getElementById('product-component-1606705876785'),
        moneyFormat: '%C2%A5%7B%7Bamount_no_decimals%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        },
        "text-align": "left"
      },
      "title": {
        "font-size": "26px"
      },
      "button": {
        "font-weight": "bold"
      },
      "price": {
        "font-size": "18px"
      },
      "compareAt": {
        "font-size": "15.299999999999999px"
      },
      "unitPrice": {
        "font-size": "15.299999999999999px"
      }
    },
    "layout": "horizontal",
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true,
      "description": true
    },
    "width": "100%",
    "text": {
      "button": "買い物カゴに追加"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-weight": "bold"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold"
      }
    },
    "text": {
      "title": "買い物カゴ",
      "total": "小計",
      "empty": "カートを空にする",
      "notice": "送料/割引はこの後の決済画面で表示されます",
      "button": "注文する",
      "noteDescription": "メモ欄"
    },
    "contents": {
      "note": true
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

 

junichiokamura
Community Manager
1200 280 506

コードの共有ありがとうございます。

いただいたコードを自分のWordPressに貼り付けてブラウザで表示してみましたが、添付のように文字化けせずにちゃんとチェックアウトできます。ですので、まずコードは問題ありません。

(検証あとにすぐに削除したのでご安心ください)

貼り付けた方法は、WordPressから記事を作成し、そのエディタ上で、「+」で「カスタムHTML」を選択して、そこに共有いただいたコードをはりつけただけです。

WordPressは、自身で立ち上げたものではなくて、他のサービスが提供しているホスト型のものを使っています。そのバージョンも添付しました。

設定に文字コードをいじる部分はなさそうですが、ほぼ最新のものなので、UTF-8で扱われていると思います。


Wordpress上では普通に表示されるのに、ブラウザ上でサイトを見ると文字化けしている。
> 私のサイトの環境によるエラーなのでしょうか…。

テキストではわかりにくいので、画面のスクリーンショットをあげていただけますか?

WordPress上では表示されるとは、プレビューのことでしょうか?

コードをWordPressに挿入する手順は正しいか?(上記のようなやり方で行っているか)

 

など。

Screen Shot 2020-11-30 at 1.09.16 PM.pngScreen Shot 2020-11-30 at 1.18.42 PM.pngScreen Shot 2020-11-30 at 1.10.01 PM.pngScreen Shot 2020-11-30 at 1.09.45 PM.pngScreen Shot 2020-11-30 at 1.09.29 PM.png

Senior Partner Solutions Engineer
こころまち
新規メンバー
7 0 0

junichiokamura様

毎回ありがとうございます。

添付画像は、サイト上で表示されているものです。
コードに問題が無いとなると、あとはテーマとのマッチングでしょうか?
ちなみに、ご説明頂いたような感じの場所は当方のテーマにはなくて、HTMLとして直接打ち込んでいます。
Wordpress云々という部分は忘れてください。

ECサイトを作ったのは初めてなのですが、WPではいくつもサイト立ち上げしているので、打ち込んだ方法は間違えないと思うのですが…。

八方塞がりですかね。Shopifyとの相性が悪かったかなぁ…

 

 

サイト上での文字化けサイト上での文字化け

Jizo_Inagaki
Shopify Partner
990 373 690

成功

横から失礼します。

見たことが無く検索でも類似の事例が見つけられれていないため解決策がご提案できるわけではないのですが、一応以下記載します。

 

ここまでの流れを拝見しまして、恐らくお使いのWPテーマやプラグインの設定や機能、またはご利用の環境が影響しているのではと思いました
そのため以下3点に付き記載します。

  • プラグインが原因である場合
  • テーマが原因である場合
  • ペースト時の動作が原因の場合

 

■プラグインが原因である場合

WPのセオリーとしてプラグインを全て停止して確認する方法が考えられます。
これで改善した場合は、一つ一つ有効化しながら原因となるプラグインを特定し、問題のプラグインがわかれば設定変更や別プラグインの利用を検討できます。

 

■テーマが原因である場合

テーマが原因である場合は以下などの方法が考えられます。

  • テーマを変更する
  • 現在とは違う場所にコードを貼って動作する場所を探す
  • お使いのWPテーマのヘルプを調べる
  • テーマ作成者に問い合わせる

 

「テーマを変更する」場合、公開サイトでのテーマ変更は厳しいことが多いので、以下のプラグインなどを利用すれば比較的楽に別のテーマでの状態を確認できると思います。
これで改善するのであれば、テーマが原因であるとみてほぼ間違い無いかと思います。

WP Theme Test(このプラグイン名で検索すると操作方法の解説ページがいろいろ出てきます)
https://ja.wordpress.org/plugins/wp-theme-test/

 

■ペースト時の動作が原因の場合

可能性は相当に低いですが以下も確認いただければと思います。

  • 実際に目的の箇所にペーストした際、コード内の「買い物カゴに追加」という文字は日本語のままかどうか

 

重要なのは「実際にWPの管理画面なりファイルなりにペーストされた際にどうなっているのか」という点です。
この時点で日本語から変換されている場合は、お使いのブラウザかテキストエディタ、またはPC自体を変更することで解決できるかと思います。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
junichiokamura
Community Manager
1200 280 506

ちなみに、ご説明頂いたような感じの場所は当方のテーマにはなくて、HTMLとして直接打ち込んでいます。
> Wordpress云々という部分は忘れてください。

具体的この部分のスクリーンショットを共有いただけますか?

ご説明頂いたような感じの場所は当方のテーマにはなくて」共有した画面はWordPressの投稿編集画面であり、Shopifyのテーマ編集ではありません。

Wordpress云々という部分は忘れてください。

WordPressを使っていないということでしょうか? 

なるべく詳細にどのようにしてBuyButtonを貼り付けているのかの手順を共有いただければ、解決策があると思います。

 

Senior Partner Solutions Engineer
こころまち
新規メンバー
7 0 0

Jizo様、お世話になります。
全て試していたのですが、最初に試してから一度もトライしてなかったのはプラグインのみ。

ダメ元で、もう一度やってみようとやってみたら、今回はなんと成功したのです!
よってプラグインの干渉だったと思われます。

同じテーマでを利用していて、ひとつは普通に表示され、こちらはダメという時点で、しつこくプラグインの試行をすべきでした。
そこを思い出させてくれたJizo様に感謝しています。
Jizo様のアドバイスには毎回丁寧さと優しさを感じていました。

本当にありがとうございます。
感謝しかありません(*^_^*)
改めてありがとうございました!