もしもアフィリエイトの「かんたんリンク」が表示されない・文字化けした場合の解決方法

この記事にはプロモーションが含まれています

もしもアフィリエイトの「かんたんリンク」が、おかしなことになっていました…

裏方の話になってしまうのですが、このサイトではもしもアフィリエイトを使わせてもらっています。

もしもアフィリエイトを使うと、色々な商品を表示・オススメすることができてとても便利なのです。

例えば、こういうの↓

…が、ここ最近サイトを確認していておかしなことに気が付きました。

1. 商品の一切が表示されず、ソースがそのまま表示されているではありませんか！！
2. ①を修正したのに、文字部分がアヤシく文字化けしているではありませんか…！！（ 2023-08-19追記）

これは困った…😰

ということで、もしもアフィリエイトのかんたんリンクが表示されない・文字化けしている場合の解決方法をご案内します。

WordPress利用環境

• WordPressバージョン → WordPress5.7.2
• 使用テーマ → XeoryBase（子テーマ利用）
• 記事作成用プラグイン → WP Githuber MD

表示不具合の詳細と解決方法は？

ひとつづつ、確認していきます。

1.商品の一切が表示されず、ソースがそのまま表示されている

表示がおかしくなった”かんたんリンク周辺のHTMLソース”を確認してみると、どうやらScriptタグのみ（なぜか勝手に）削除されています。（ソースの確認方法は、コチラからどうぞ ） そのため、ソースがそのまま表示されていたことが判明しました（ここまで来るのに、すごく時間がかかった…😅）

もしもかんたんリンクが「リンク」とだけ表示される場合は、こちらのページが参考になるかもしれません

AMP対応（もしもかんたんリンク対応策も）の、顛末記

続きを見る

参考サイト

WordPressの投稿画面でHTMLタグが消える現象を解決する方法ajike developer's blog

HTMLタグが消えた原因

…というわけで参考サイトによると（以下、私のザックリした要約ですが）、

記事投稿時、WordPress側で（勝手に）一部タグが削除されるため、表示がおかしくなっていた。

ということが判明しました。（私の場合はScriptタグのみ削除されていた）

「勝手に」と書いてしまいましたが、そもそもはWordPressの記事を守るため（おかしなエラーを出さないため）の仕様です🙇💦

ソース確認の方法

Google Chrome の場合は

1. 検証したいサイトを開いて、右クリック
2. 「検証」or.「ページのソースを表示」を選択
3. ソースを確認する

で、確認できます。

解決策

参考にさせて頂いたサイトそのままですが、WordPressで利用しているテーマの「function.php」に以下のソースを追記することで解決します。

元のソースは参考サイトをご参照 →ください。

私は

• Scriptタグが使いたい
• ボタンやdata属性は使わない
• ついでにCSSも消えると困る

ので、以下のように変更しました。

// HTMLエディタで使用できるタグを追加
add_filter('wp_kses_allowed_html', 'customKsesAllowedHtml', 10, 2);

function customKsesAllowedHtml($tags, $context)
{
    if ($context == 'post') {
        $tags['script'] = true;
        $tags['div'] = array(
            'id' => true,
            'class' => true,
            'style' => true
        );
    }
    return $tags;
}

これで無事、もしもアフィリエイトのかんたんリンクを正しく表示することができました😀

2.①を修正したのに、文字部分がアヤシく文字化けしている

…と、本来ここまでの記事だったのですが、久しぶりにこのページを確認してみると

• もしもかんたんリンクが文字化けしている

ではないですか…！！
ざっくり原因を探ってみました。

原因は主に2つ？

調べてみたところ、

1. WordPress の Advanced Ads というプラグインと相性が悪くて文字化け
   • 参考：＜解決済み＞もしもの 「かんたんリンク」で文字化けが発生した時の対処法【Advanced Ads】 | webico blog
2. わからない
   • 参考：もしもアフィリエイトが正常に表示されないエラーの解決法 | 調査マニア通信

の2つみたいです。

もしもかんたんリンクの文字化け対処方法

このサイトでは Advanced Ads プラグインを使ってませんので、原因はわからずじまいです😥
なのですが、コチラのページ にあるように自作のかんたんリンクを使うことで対処できました😀

見た目はこんな感じになります。

元のページはこちらから

AMP対応（もしもかんたんリンク対応策も）の、顛末記

続きを見る

以下に、同じコードをそのまま載せておきますので、ご自由にご利用下さい。
（参考サイトなどの詳細は、元のページをご覧ください）

HTML部分

• FontAwesome を使っています。利用されていない場合は、>>など他の文字に置き換えてください
• リンクタグはそれぞれの提携中プロモーション（もしもアフィリエイトのAmazonや楽天市場）から、商品タグを発行してください

<div class="Shpng_box">
<div class="Shpng_img">
画像リンク（発行タグそのまま貼り付け）
</div>
<div class="Shpng_info">
<p>文字リンク（発行タグそのまま貼り付け）</p>
<div class="Shpng_btn"><a href="リンクタグを発行してください">Amazonで見る <i class="fa fa-chevron-right"></i></a></div>
<div class="Shpng_btn"><a href="リンクタグを発行してください">楽天で見る <i class="fa fa-chevron-right"></i></a></div>
</div>
</div>

CSS部分

/** Box部分 **/
div.Shpng_box {
  margin: 0;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: no-wrap;
}
div.Shpng_box div.Shpng_img {
  position: relative;
  width: 160px;
  height: 160px;
  float: left;
  padding-right: 20px;
  flex-grow: 0;
}
div.Shpng_box div.Shpng_info {
  width: 100%;
  flex-grow: 1;
}

/** ボタン部分 **/
.Shpng_btn{
  float: left;
  margin-right: 1em;
  font-size: 14px;
}

.Shpng_btn a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 0.6em 0.8em;
  width: 200px;
  color: white;
  font-weight: 700;
  background-color: darkorange;
  border-radius: 0.8vh;
}

.Shpng_btn a:hover {
  text-decoration: none;
  color: white;
  background-color: orange;
}

これで、商品リンクが貼れると思います👍

まとめ

あちこちサイトを探しても、かんたんリンクの不具合が

• 皆さんの症状とケースが違う
• 解決策になかなかたどり着けなかった

ので、覚え書きとして記事にしてみました。 何かの手助けになれば、幸いです。

参考にさせていただいたサイト様、この場を借りて、ありがとうございました！