blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。Update:2019/10/31こんにちは、katori@xxbicottです。これまでアフィリエイトリンクはカエレバさんを利用していたのですが、最近もしもアフィリエイトのかんたんリンクを使い始めました。このかんたんリンク、サイトに合わせやすいシンプルなデザインでありながらおしゃれで、Amazonや楽天などに対応してるんですが、複数枚の商品画像に対応していてスライダーで見れるという素敵ツールなんです。AirPods欲しい...しかし、最近このかんたんリンクで作ったリンクカードの商品タイトルテキストが、WordPressサイトで文字化けするという事象に遭遇しました。この記事では今回のケースの原因と、その対処法について紹介したいと思います。まとめ文字化けの原因について問題の事象は、このように商品名の日本語部分が文字化け(HTML特殊文字化・HTMLエンティティ化)されるというもの。Adsが原因で文字化けてしまうという事例をいくつか見かけました。Adsenseを記事の任意の配置できるというプラグインなんですが、これがかんたんリンクがあるページへ適用状態になっていると文字化けになってしまうとのこと。確認のためプラグインの中身を見てみると、広告設定にpostcontentを指定している場合コンテンツ内容をHTMLエンティティ化しているような処理を発見。Adsとかんたんリンクコードの相性が悪かったことが原因かなと思います。Adsを利用しない方法です。これはわざわざプラグイン本体を停止する必要はなく、当該投稿ページ編集画面から無効化設定を行えばいいだけ。すると、Adsense広告は出ませんがリンクカードは正常に表示されるようになります。Adsも使いたい!ということなら新バージョンになる前のかんたんリンクを使う方法があります。旧かんたんリンクはこちらからURL発行画面に飛べます。スタイリングされたリンクカードじゃない代わりに、文字化けは起きません。新かんたんリンクのリンクカードに拘らないのであれば、こちらをスタイリングして使うのもいいかもしれませんね。プラグインを無効化した上でエディタに直接広告コードを挿入する新かんたんリンクのリンクカードがいい!けどAdsense広告も使いたい!という方はこちら。Adsでページ単位で無効化設定を行った上で、エディタに直接アドセンスコードを貼る方法です。Adsが原因であるため、無効化した上で普通にコードを貼る分には全く問題ありません。ちなみに、エディタを汚したくなかったり今後の汎用的な運用を考えるなら、次に記載するショートコード化を用いるのをお勧めします。ショートコード化についてこちらはWordPress知識がある人向けですが、使用しているテーマのfunctions.phpにコードを記述することでオリジナルのショートコードを作成・使用することができます。以下のコードをfunctions.phpに記述すると、投稿ページに[gad_test]と入力するだけでアドセンスコードが挿入されたことになります。'test');この機能を使うと、コードが変わった時でもfunctions.phpを修正するだけで差し替えることができるので非常に便利。functions.phpはWordPressサイトにおいて非常に重要でデリケートなファイルなので、慣れてない方はあまり触らないほうがいいでしょう。まとめ個人的には新かんたんリンクのリンクカードデザインやスライダーが良い感じだなぁと思っているので、(3)プラグインを無効化した上でエディタに直接広告コード(もしくは広告コードのショートコード)を挿入する方法で運用していこうと思ってます。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。