ポチップに Amazonレビュー へのリンクを追加する方法
SAVA他の人の製品レビューも気になるなぁ…
ポチップ(Pochipp)では Amazon、楽天、Yahoo!ショッピング の3つのショッピングサイトのほかに、ユーザーがカスタムボタンを2つまで追加することができます。
カスタムボタンのうちの1つを使ってユーザーレビューへのリンクを作成する方法を紹介します。ふつうに作るとボタンリンクができあがりますが、ここで少し控えめなテキストリンクを作成することができます。
以下の画像のように、ボタンリンクの上にテキストリンクが挿入されます。
レビューへのリンクを使いたい製品に対して 追加CSS を当てるだけなので、追加CSSを使わなければ通常通りにカスタムボタン2を使うことが可能です。
クリックできる目次
ポチップブロックを追加
WordPressの記事編集画面から通常通りにポチップのブロックを挿入しましょう。
右側のサイドパネルにある、カスタムボタン2 に Amazonレビュー へのリンクとテキストを追加していきます。レビューへのリンクURLは任意で設定しましょう。
- カスタムボタン2のURL：https://amazon.co.jp/XXX
- カスタムボタン2のテキスト：ユーザーレビューを見る
そしてサイドパネルの一番下、高度な設定の 追加CSSクラス に is-style-amazon-review と入力して下さい。
ドット(.) を入れずに入力しましょう。
実際にはこのように編集します。
SAVAよく使うものなら、ポチップへ製品を登録して管理画面からカスタムリンク2を追加しよう。
ビフォーアフター
上が通常通りにカスタムボタンを追加した場合、下が追加CSSを当てた場合のポチップブロックです。
style.css を編集
追加CSS を当てた製品にだけ、ポチップのカスタムボタン2 を テキストリンクにするための設定です。
WP子テーマ/ style.css に追記します。
/*--------------------------------------
ポチップ レビューリンク
--------------------------------------*/
.is-style-amazon-review.pochipp-box[data-btn-style="dflt"] .-custom_2 {
-webkit-box-ordinal-group: -1;
-ms-flex-order: -2;
order: -2;
min-width: 100% !important;
}
.is-style-amazon-review.pochipp-box[data-btn-style="dflt"]
.-custom_2
> .pochipp-box__btn {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
background: none !important;
text-align: left;
padding-left: 1.2rem;
}
.is-style-amazon-review.pochipp-box[data-btn-style="dflt"]
.-custom_2
> .pochipp-box__btn
span {
color: #555;
text-decoration: underline;
font-size: 0.8em;
}
.is-style-amazon-review.pochipp-box[data-btn-style="dflt"]
.-custom_2
> .pochipp-box__btn::before {
font-family: icomoon;
content: "\e9d8";
color: orange;
opacity: 1;
width: unset;
height: unset;
top: unset;
background: none;
}使いやすいWPテーマ「SWELL」
コメント