もしもアフィリエイトのAmazonプライム申込みのリンクをSANGOボタンを使って記事に挿入したいです。
しかし、やり方が分からず悩んでおります。
https://saruwakakun.com/sango/affiliate-btn
こちらの「アフィリエイトリンクを改変せずにボタンを使う方法」を参考にして「functions.phpにコードを貼り付け」と「style.cssに専用のCSSを貼り付け」までは行いました。
その後の手順について教えていただきたいです。
【質問1】いつもビジュアルエディターを利用しているので、ビジュアルエディターでリンクを貼る手順について
【質問２】貼り付けるアフィリエイトリンクのコードは、もしもアフィリエイトのアマゾンリンク（https://www.amazon.co.jp/tryprimefree）をどこでもリンクで作成したソースを貼り付けたら良いのでしょうか？
試しにブロックにカスタムHTMLを挿入し、もしもアフィのどこでもリンクで作成したソースを新しいボタンのショートコードで挟んで見ましたができませんでした…
SANGOユーザーでもしもアフィリエイトのプライム申込みリンクを貼り付けていらっしゃる方がいらしたらお知恵をお借りしたいです。
よろしくお願い致します。
みんなのコメント 28件
ベストアンサー
とりあえず「afbtn」は置いておいて、SANGO Gutenberg プラグインの【SANGO ボタンブロック】を使ってみてはどうでしょうか。
もしもアフィリエイトの Amazon アフィリエイトソースも「<a href ～」と、計測用コード「<img src ～」で分かれているので、【SANGO ボタンブロック】の URL に「<a href ～」、計測用コードに「<img src ～」を入力すれば良いです。
これで問題がない場合は、「afbtn」用に追記した各コードは削除してしまってよいかと思います。
何度もご返信くださりありがとうございます。
アドバイスいただいた通りSANGOボタンでとりあえずやってみようと思います。
ちなみに、この方法で「アフィリエイト成果が反映されている」と確認するためにはもしもアフィリエイトで成果が出ているか否かでしょうか？
なんせまだまだ訪問者の少ないブログなので、確認が取れるかどうかちょっと不安になりました^^;
ちなみに、追加CSSはコードを貼って公開ボタンを押すのですが、「何かうまくいかなかったようです」と原因不明の理由しか表示されず困っています。。。
>ちなみに、この方法で「アフィリエイト成果が反映されている」と確認するためにはもしもアフィリエイトで成果が出ているか否かでしょうか？
▶成果もそうですが、成果発生前のクリック数も確認できるようになりますよ。
>ちなみに、追加CSSはコードを貼って公開ボタンを押すのですが、「何かうまくいかなかったようです」と原因不明の理由しか表示されず困っています。。。
▶おそらくですが、サーバー側の Wordpress セキュリティ設定などが要因と予想されます。
「追加 CSS」が保存できなかったということは、「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の【準備1：functions.phpにコードを貼り付け】【準備2：style.cssに専用のCSSを貼り付け】も保存されていない可能性もありますね。
▶成果もそうですが、成果発生前のクリック数も確認できるようになりますよ。
なるほど！安心しました。ありがとうございます。
▶おそらくですが、サーバー側の Wordpress セキュリティ設定などが要因と予想されます。
「追加 CSS」が保存できなかったということは、「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の【準備1：functions.phpにコードを貼り付け】【準備2：style.cssに専用のCSSを貼り付け】も保存されていない可能性もありますね。
こちらも理解しました。ConoHaWingを使っているのですが、一時的にWAFをOFFにしてコードを更新してみようと思います。
ところで、SANGOボタンにURLと計測コードを入れてブロックを挿入し下書き保存をしたところ記事が真っ白になってしまいました…
他の固定ページの記事は変わりがないのですがSANGOボタンを挿入した記事だけ何度開いても真っ白です。これはSANGOのバグでしょうか？元に戻す方法って何かありますでしょうか？？
原因はわかりません。
一旦公開してみたりプレビューで見てみるなどしてみてください。
もし公開された場合、該当の URL をお教えください。確認します。
記事を開いても真っ白なのでプレビューや公開ボタンもなく何も押す場所がありません。
これはもう削除するしかないでしょうか…
>記事を開いても真っ白なのでプレビューや公開ボタンもなく何も押す場所がありません。
▶記事の編集画面のことでしょうか？
管理画面から記事一覧に移動して、そこから該当記事にて「編集」or「表示」をクリックしてみてください。
管理画面の記事一覧から編集や表示をクリックすると真っ白な画面が表示されます（＞＜）
添付した画像のようになります。
プラグインとの相性が悪い可能性もありますね。
セオリー操作ですが、一旦プラグインをすべて無効化して様子を見てみてください。
もし表示されるようであれば、プラグインとの相性問題です。
プラグイン無効化後、一つ一つ有効化しながら原因を突き止めてみてください。
キャッシュ削除で解決する可能性もあります。
https://saruwakakun.com/sango/comments?id=5523
色々とご提案いただきありがとうございます。
キャッシュを消したりブラウザを変えたりなどもしましたがダメでした。
幸いまだリード文しか書いていない未公開の記事だったので改めて書き直そうと思います。
アフィリエイトのボタン化についてですが、ConoHa WingでWAFを一時的にOFFにしながら「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の準備を行ってみたものの、やはりアフィリエイトリンクだけ反映されボタン化はされませんでした。。。
SANGOボタンのURLにAmazonプライム申込みリンク(https://www.amazon.co.jp/tryprimefree)を挿入し、アフィリエイト計測用コード欄に＜img>タグ部分を挿入して様子を見ていこうと思います。
すみません、ボタン化できなかったと書きましたが今改めてやってみてプレビューしたらできていました！
ご心配おかけしてしまい申し訳ありません。
そして素人で説明も大変なのに根気よく回答に付き合ってくださりありがとうございます。本当に助かりました。
質問者からのお礼コメント
改めまして、本当にありがとうございました。
こんな私の質問でも見捨てずに付き合っていただけて感動しました。
ブログ頑張りたいと思います。ありがとうございます。
>【質問1】いつもビジュアルエディターを利用しているので、ビジュアルエディターでリンクを貼る手順について
▶ビジュアルエディターでアフィリエイトリンクを貼り付けることは、基本的にはできないかと思います。
別でショートコードやショートカットなどを用いれば話は別ですが、そんなややこしいことをやるメリットはないので、おとなしくテキストエディターに切り替えてアフィリエイトリンクを貼りましょう。
ビジュアルエディターとテキストエディターの切り替えは、「Shift + Ctrl + Alt + M」のキーボードショートカットを利用すると楽ですよ。
>【質問２】貼り付けるアフィリエイトリンクのコードは、もしもアフィリエイトのアマゾンリンク（https://www.amazon.co.jp/tryprimefree）をどこでもリンクで作成したソースを貼り付けたら良いのでしょうか？
▶「どこでもリンク」で出力されたアフィリエイトソースを、そのまま貼れば良いかとは思います。
しかしこれで反映されなかったんですよね？
解決しない場合、ここではなく SANGO の公式フォーラムでご質問されたほうが、迅速で的確な回答を得られる可能性があります。
https://saruwakakun.com/sango/
さっそくのご回答ありがとうございます。
さらに質問になってしまいすみません。
・テキストエディター＝コードエディターの理解であっていますでしょうか？
・コードエディターで、
[afbtn class="raised main-bc strong"]
もしもアフィリエイトのどこでもリンクで作ったソース
[/afbtn]
を貼り付けるとコードの前後にや＜br>などが勝手に挿入されてしまいます。
以前、SANGO公式に質問をしたのですが回答を得られずこちらで質問させていただきました（＞＜）
もし解決方法をご存知でしたらご教授いただきたいです。
そうだったんですね、大変失礼いたしました。
>・テキストエディター＝コードエディターの理解であっていますでしょうか？
だいたい合っています。厳密には、テキストエディターは Classic Editior のエディターで、コードエディターはブロックエディター（Gutenberg）でのエディターですね。
>を貼り付けるとコードの前後にや＜br>などが勝手に挿入されてしまいます。
＜br＞は改行タグですね。
改行せずに、以下の方法でボタンとアフィリエイトソースを貼り付ける方法もありますよ。
例： [afbtn class="ボタン種類"]ここにアフィリエイトリンク[/afbtn]
「など」とありますが、別のタグも勝手に挿入されますか？例えば＜p＞などです。
返信ありがとうございます。
コードエディターはブロックエディターなんですね。知らなかったです。
公式では「テキストエディターを開きアフィリエイトリンクを貼る」と書いてあるので、私がコードエディターで編集していることが原因なのでしょうか？
もしそうなのであれば、SANGO Gutenbergのプラグインをダウンロードして今使っているのですが、https://saruwakakun.com/sango/gutenberg-introduction#Gutenberg-2の説明にあるプラグインのClassic Editorをダウンロード・有効化するとテキストエディターを開くことができるのでしょうか？
ちなみにコードエディターでアフィリエイトリンクを貼った時の画像を添付します。
おっしゃるとおり、も勝手に挿入されます。
すみません、コメント欄で半角で書くと消えてしまうようです。
おっしゃる通り＜P＞が勝手に挿入されます。
>コードエディターはブロックエディターなんですね。知らなかったです。
▶違います。
Classic Editor の中に「ビジュアエディター」モードと「テキストエディター」モード、Gutenberg（ブロックエディター）の中に「ビジュアエディター」モードと「コードエディター」モードがそれぞれ内包されていて、モードを切り替えて利用することができます。
で、Classic Editor の「テキストエディター」も、Gutenberg の「コードエディター」も、ほぼ同じです。
>公式では「テキストエディターを開きアフィリエイトリンクを貼る」と書いてあるので、私がコードエディターで編集していることが原因なのでしょうか？
>もしそうなのであれば、SANGO Gutenbergのプラグインをダウンロードして今使っているのですが、https://saruwakakun.com/sango/gutenberg-introduction#Gutenberg-2の説明にあるプラグインのClassic Editorをダウンロード・有効化するとテキストエディターを開くことができるのでしょうか？
▶「テキストエディター」も「コードエディター」も同じなので、そこは関係ありません。
>おっしゃるとおり、＜p＞も勝手に挿入されます。
▶デフォルトでは＜p＞タグが挿入される仕様です。＜p＞タグが挿入されるからといってアフィリエイトタグや SANGO ボタンが機能しないということはないのですが、肝心な Amazon アフィリエイトソースは反映されますか？されませんか？
WordPress デフォルトでは ＜br＞ や ＜p＞ が勝手に挿入される仕様です。
これを勝手に挿入されないようにすることもできます。function.php にコード（remove_filter('the_content', 'wpautop');）を追記するのが一番簡単ですが、初心者向けではありません。
なので function.php を触りたくない場合は、「Toggle wpautop」プラグインをインストールして使ってみると良いかと思いますよ。
https://knowledge-base.site/web_creative/web_creative-571/#pbr-2
ただし、そもそもの「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の事前設定をミスっている可能性もあるので、これで Amazon アフィリエイトソースを設定した SANGO ボタンが反映されるよになるとは限りません。
そいえば、Gutenberg（ブロックエディター）の「ビジュアエディター」モードでも、「カスタム HTML ブロック」を利用すれば、もしもアフィリエイトのアフィリエイトソースをそのまま貼り付けることができます。
これであれば「コードエディター」モードに切り替える必要はないですね。（失礼いたしました）
こちらもすでに試されていますか？
▶「テキストエディター」も「コードエディター」も同じなので、そこは関係ありません。
承知しました！
▶デフォルトでは＜p＞タグが挿入される仕様です。＜p＞タグが挿入されるからといってアフィリエイトタグや SANGO ボタンが機能しないということはないのですが、肝心な Amazon アフィリエイトソースは反映されますか？されませんか？
▶︎そいえば、Gutenberg（ブロックエディター）の「ビジュアエディター」モードでも、「カスタム HTML ブロック」を利用すれば、もしもアフィリエイトのアフィリエイトソースをそのまま貼り付けることができます。
これであれば「コードエディター」モードに切り替える必要はないですね。（失礼いたしました）
こちらもすでに試されていますか？
カスタムHTMLブロックに
[afbtn class="raised main-bc strong"]
もしもアフィリエイトのどこでもリンクで作ったソース
[/afbtn]
を貼り付けた状態を載せました。
画像のようにアフィリエイトソースのリンク部分だけ反映されています。ボタン表示にはなりません。
「Toggle wpautop」プラグインをインストールすると改善の余地があるでしょうか？
すみません、２枚画像を載せるつもりが１枚しか貼れていませんでした。
プレビュー前はこんな感じです。
アフィリエイトリンクが機能している一方でボタンが反映されないわけですね。
つまり、「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の事前設定が上手くいっていない可能性があります。
>「Toggle wpautop」プラグインをインストールすると改善の余地があるでしょうか？
▶これはおそらく関係ないでしょう。
「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の【準備1：functions.phpにコードを貼り付け】【準備2：style.cssに専用のCSSを貼り付け】のそれぞれの手順からやり直してみてはいかがでしょうか。
▶︎「SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法」の【準備1：functions.phpにコードを貼り付け】【準備2：style.cssに専用のCSSを貼り付け】のそれぞれの手順からやり直してみてはいかがでしょうか。
改めてコードの貼り付けをしてみましたが、やはりボタンだけ反映されませんでした…
貼り方に何か問題があるのでしょうか？画像を添付致しましたのでチェックしていただけたら嬉しいですm(__)m何度すみません。
コードを貼り付けるファイルは間違っていないと思います。
CSS については style.css ではなく、「追加 CSS」に貼り付けてみてはいかがでしょうか。
ちなみにですが、SANGO デフォルトの各ボタンは、「カスタム HTML ブロック」に貼り付けることで反映されますか？
▶︎CSS については style.css ではなく、「追加 CSS」に貼り付けてみてはいかがでしょうか。
追加CSSへ貼り付けようとするとなぜか公開ボタンが反映されず、上手くいきませんでした…
▶︎ちなみにですが、SANGO デフォルトの各ボタンは、「カスタム HTML ブロック」に貼り付けることで反映されますか？
SANGOデフォルトの各ボタンは「カスタムHTMLブロック」に貼り付けしません。
SANGOボタンブロックを挿入する形です。
今こちらの説明を読んだのですが、アフィリエイトの説明が載っていました…！
https://saruwakakun.com/sango/sango-block-button#i-2
この説明ではA8が例えで書かれていますが、もしもアフィリエイトでも正しく計測されるのでしょうか？
ソースコードからURL部分と、imgタグ部分
........
をメモしておいてください
とのことですが、もしもアフィリエイトだと若干書き方が異なるので同じように貼り付けても良いものでしょうか？
アフィリエイトは A8 以外にも様々あるので、もしもアフィリエイトでも対応しているとは思いますよ。
「計測用コード」は無視して、試してみてはいかがでしょうか。
それよりも追加 CSS を利用できないほうが気になりますね。
あなたの経験や知識を共有しませんか？
ほかのユーザーの相談に、コメントで参加してみましょう。
ログインしてコメントするはじめての方は無料登録