サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年10月8日 22:06
Amazonと楽天市場の商品リンクコードを利用させていただいています。
ほとんどの場合は、Amazon、楽天、Yahoo！で事足りますが、商品によっては、任意のサイトへのリンクもあって欲しいな、と思うことがあります。
Amazon、楽天、Yahoo!のようにAPIで自動でリンクを作成してくれることろまでは望んでいませんが、何とかして手動で生成したリンクボタンを横並びにすることはできないでしょうか？
Amazonボタン（商品リンク） 楽天ボタン Yahoo!ボタン 手動設定リンクの囲みボタン
と言った具合に４つのボタンが一列に表示されてくれると良いのですが、何か手は無いでしょうか？
見た目が一列になっていれば良いので、手動で設定したリンクの囲みボタンまでも商品コードで呼び出す必要は全然ありません。
素人考えで、２カラムの左側に商品リンクコード、右側に手動で設定したリンクの囲みボタン、をそれぞれ挿入してみましたが、残念ながら左右でデザインが全く揃いませんでした。
以上よろしくお願いします。
2018年10月8日 23:22
素人考えで、２カラムの左側に商品リンクコード、右側に手動で設定したリンクの囲みボタン、をそれぞれ挿入してみましたが、残念ながら左右でデザインが全く揃いませんでした。
ここら辺は、実際にどのようなカスタマイズされたかがわからないので、何とも言えないです。
実際カスタマイズされた状態で、URLをいただいてソースコードでも見ないと、アドバイスするにしても難しいかもしれません。
Topic starter
2018年10月8日 23:56
２カラム（２：１）の左側に楽天の商品リンクコード、右側にリンクの囲みボタンを挿入してみました。
Topic starter
2018年10月8日 23:59
囲いボタンが違う場所に表示されるので、４つのボタンを一列に表示させたいです。
囲いボタンだけ移動しても商品リンクコードのグレーの外枠に掛かってしまうので、可能なら外枠を消したり、広げたりできたらよいのですが。
Topic starter
2018年10月9日 00:14
＞わいひら様
私の素人考えで、２カラムと囲みボタンで何とかならないかと思ってやってみましたが、商品リンクに４つめのボタンを追加したいという要望が叶えば、やり方としては何でも良いと思っています。
すごく難しいことを質問してさせていただいているように自分でも思うのですが、どうぞよろしくお願いします。
2018年10月9日 17:21
divでリンクとショートコードを囲ったほうが良いかもしれません。styleが邪魔になってくるので。
デベロッパーツールが動かないので、HTMLの変更ができない＾＾；
ちょっと放置後また見に行きますね。
2018年10月9日 18:01
直りません＾＾；
div class=hogeで囲んで、ショートコードとリンクをいれる。ソニーストアもclass属性gehoをつける
.product-item-buttonsnのwidthを75%位に、ソニーストアの.hogeをposition: absolute;と指定してbotoom: 数字px; right: 数px;と位置調整。
メディアクエリにあわせてソニーストアの高さを合わせる感じで調整しながら、ブラウザの幅によってwidth:数vw;にするとかですかね。
結構面倒かもですが、やる気になればstyleを付けられると思います！
2018年10月9日 19:53
あと。その商品リンクを導入してないので不明ですが、キャッシュ削除など色んな機能が付いていると思います。それを無視してもいいなら、もしかしたらもっと簡単に済むかもしれません。※CSSとか、全てチェックしないといけないので。
需要があるか不明な事をメディアクエリをすべてチェックして、1人の為にするのは効率とか考えてしまいます。
時間があれば一度チェックしてみたい件ですが❦
上記レスを見て。はぁ？全くもって、意味不明と思われたら申し訳ないです＞＜
2018年10月9日 19:55
あと。スマホ・PCどちらも同じスタイルでやりたいんですよね？？？
2018年10月9日 20:09
カラムレイアウトを使った方法では、おそらく出来ないと思います（できる事はできるけれどかなりトリッキーなCSSを書く必要がある。逆にかなり難しい）。
やるにしても、PHPの知識と、テキスト置換の知識は必要になります。
サポート対象外のものにもあるように、高度なPHPのカスタマイズ方法は、サポート外となるのでやり方のヒントだけ書きます。
やり方の1つの手順としては、こちら。
- lib/shortcodes.phpのget_search_buttons_tag関数全体をコピーする
- 子テーマのfunctions.phpにペーストしてオーバーライドする形で関数を書き換える
もう一つはフックを使う方法があります。
- lib/shortcodes.phpのget_search_buttons_tagをフックする
- ボタンを追加する形の置換をして返り値として返す
いずれにせよPHPの知識は必要になります。
2018年10月10日 09:08
カスタマイズするよりプラグイン「Rinker」使うのが無難ですね
自由ボタンが２つも作れます
直販サイトの方が多くのコミッションを得られるので
追加ボタン欲しいですよね
2018年10月10日 19:55
なるほど。そういう意図か。
この記事の中盤のボタン追加みたいなやつですね。
https://affiliate150.com/how-to-use-rinker#AmazonYahoo2ASP
URLとキャプション追加だけで良いのであれば、ショートコードオプションという形で実装できるかも。
Topic starter
2018年10月10日 22:23
＞かうたっくさん、わいひらさん
ありがとうございます。わいひらさんのアドバイスを元にやってみましたが、うまくはいきませんでした。
ボタン追加までは出来ました。
しかし、ショートコードのオプションに任意のリンクアドレス指定が出来る項目を追加して、ボタンのURLに指定するのは残念ながらうまくは行きませんでした。
＞サニーさん
なるほど、Rinkerならボタン追加できるのですね。やりたいことは正しくそれなので、Rinker良さそうです。
＞わいひらさん
はい、ショートコードオプションに例えば、” https://www.sony.jp ”と追加したら、ソニーのボタンが追加されるようなイメージでおりました。
リンクアドレスやボタンのインプレッションはその都度ショートコードで指定するイメージです。Amazonや楽天のようなAPIは一切使用せず、URLは毎回直打ちで問題ありません。
Rinkerのボタン追加機能がまさしくそれです。
2018年10月11日 19:48
Rinkerのイメージをみたところ、いけそうなのでオプションで機能追加出来ればと思います。
TODOリストには入れたので、いずれ機能追加出来ればと思います。
ただ、他にもやらなければならないこともあるので、いつまでできるかまでは、ちょっとわからないです。
Topic starter
2018年10月11日 21:49
わいひらさま
ありがとうござます。実装されるのを楽しみに待ちたいと思います。
よろしくお願いします。
Topic starter
2018年10月11日 23:10
＞わいひらさん
わいひらさんばかりに無理を言って申し訳ないと思って、色々いじってみたところ、なんとなく出来たようです。
URLをコードオプションで指定すると、自動で４つめのボタンが出現するようにしてみました。
2018年10月12日 20:37
関数かフックの方法で実装されたんですね。
ただ一応、実装したものをアップしておきます。
https://github.com/yhira/cocoon/archive/master.zip
こんな感じでURLを入力すると、前後に「公式ページ」というキャプションで表示されます。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn2_url="https://www.sony.jp/ichigan/products/ILCE-7M3/"]
[rakuten id="emedama:10126462" kw="ILCE-7M3K" btn1_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn2_url="https://www.sony.jp/ichigan/products/ILCE-7M3/"]
テキストの入力すると、ボタンのキャプションとして表示されます。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn1_text="ソニー公式" btn2_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn2_text="詳細"]
[rakuten id="emedama:10126462" kw="ILCE-7M3K" btn1_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn1_text="ソニー公式" btn2_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn2_text="詳細"]
アフィリエイトリンクもタグを改変しないで利用できるように、タグで挿入できるようにもしました。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">公式ページ</a>' btn2_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">製品ページ</a>']
[rakuten id="emedama:10126462" kw="ILCE-7M3K" btn1_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">公式ページ</a>' btn2_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">製品ページ</a>']
ただし、タグで入力する場合は、オプション値を囲む場合「'（シングルコーテーション）」にする必要があります。
もしくは、タグの方の囲みを「'（シングルコーテーション）」にするか。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>公式ページ</a>" btn2_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>製品ページ</a>"]
[rakuten id="emedama:10126462" kw="ILCE-7M3K" btn1_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>公式ページ</a>" btn2_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>製品ページ</a>"]
Topic starter
2018年10月13日 00:21
わいひらさん
ありがとうございます。早速インストールしてみましたが、残念ながら出来ませんでした。先のわいひらさんのコメント中の商品コードを全種類をそのままコピペしてみましたが、いずれも商品ボタンは追加されませんでした。
shortcord.phpを見てみたところ、”btn1_tag”や”btn2_tag”といった関数が見当たらなかったのですが、アップいただいたcocoon-master.zipファイルが実装前のバージョンという可能性はないでしょうか？
とんちんかんなことを言っていたらすみません。
あるいは私のやり方が間違っているか、、、
以上よろしくお願いします。
Topic starter
2018年10月13日 00:36
shortcodes.phpでした。失礼しました。
ちなみに、アップいただいたcocoon-masterをインストール後の親テーマのバージョン:は、1.2.9.1です。
以上よろしくお願いします。
2018年10月13日 20:26
書き込んだあとしばらくして、GitHubにアップされていないのに気づいてアップしたので、古いものをダウンロードされたのかもしれません。
そのとき書き込みはなかったので、ダウンロードされてないと思っていたのですが、既にダウンロードされていたのかもしれません。
もう一度ダウンロードしてアップしてみてもらえますか。
Topic starter
2018年10月13日 22:40
わいひらさん
再度ダウンロードしてみたところ、無事ボタンが追加されていました。
自分でもボタン追加までは出来ましたが、タグ改変なしでアフィリエイトリンク追加は難しそうだったので、わいひらさんのバージョンを有難く使わせていただきます！
cocoonは神テーマですね。
ありがとうございました。
わいひら reacted
2018年10月14日 19:35
動作確認ありがとうございます！
うまく動作したようでよかったです ?
そう言っていただけるとは恐縮です。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。