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

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

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

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

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

例えば、こういうの↓

リンク

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

商品の一切が表示されず、ソースがそのまま表示されているではありませんか！！
①を修正したのに、文字部分がアヤシく文字化けしているではありませんか…！！（ 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 の場合は

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

で、確認できます。

解決策

参考にさせて頂いたサイトそのままですが、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;
}

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

もっと詳しく学ぶなら・プロ講師から学べる

ちゃんと学ぶ、WordPress テーマ開発講座

WordPressで既存テーマのカスタマイズではない、オリジナルのウェブサイトを作ろう

詳しく見る

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

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

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

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

原因は主に2つ？

調べてみたところ、

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

の2つみたいです。

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

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

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

AGF ブレンディカフェラトリースティックアソート 20本【スティックコーヒー】【コーヒーつめあわせ】【濃厚ビターカフェラテ、濃厚ミルクカフェラテ、濃厚キャラメルマキアート、濃厚抹茶ラテ各5本】

Amazonで見る

楽天で見る

元のページはこちらから

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;
}

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

もっと詳しく学ぶなら・プロ講師から学べる

【tailwindcss】CSSが苦手な人向けじっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】