Rinkerカスタマイズ|ラベルやリボンをつけてオススメ&星マーク付きのちょっと目立つデザインにする。

Rinkerカスタマイズ|ラベルやリボンをつけてオススメ&星マーク付きのちょっと目立つデザインにする。

2019 12/12

今回はWordPressの商品管理プラグイン「Rinker」のカスタマイズとして、ラベルやリボンをつけて目立つデザインにする方法を解説していきます。

Rinkerは元々のデザインでも十分に見やすくオシャレなのですが、ネット上にも多くのカスタマイズ記事が溢れているように手軽に自分好みのデザインにできる点もメリットの1つでしょう。

そういった中で「ボタン」「レイアウト」などのカスタマイズ記事は多かったものの、「ラベル」「リボン」などをつけるちょっとしたカスタマイズが少なかったので備忘として記事にしました

カスタマイズ前後の見た目はこんな感じです(スマホで見ればスマホver.のデザインも見れます)。

カスタマイズ前

SWELL
WordPressテーマ
カスタマイズ後
SWELL
WordPressテーマ
NEW
SWELL
WordPressテーマ

オススメ

SWELL
WordPressテーマ

ラベルや星マークをつけて「この商品はオススメです!」といったことをアピールできるので、他サイトとの差別化だったり読者へのアピールポイントを増やしたい場合にはぜひ参考にしてもらえれば嬉しいです。

カスタマイズの際には子テーマを導入しておくことと、あくまで自己責任でお願いします(※エラーなどがあれば気軽にお問い合わせくださいね)。

目次

Rinkerにラベルやリボンをつけるカスタマイズコード

それでは早速Rinkerカスタマイズコードの解説に入っていきたいと思いますが、今回のコードはサルワカさんの「CSSで作る!綺麗なWeb用リボンデザイン22選」の記事で紹介されているコードを参考にさせていただきました。

サルワカ | サルでも分かる図解説...
CSSで作る!綺麗なWeb用リボンデザイン22選
CSSで作る!綺麗なWeb用リボンデザイン22選HTMLとCSSのコピペで使えるWeb用のリボンデザイン集です。横だけでなく、縦や斜めのもの、ボッ クスに折り込まれるような立体的なデザインのものまで揃えました。

こちらはRinker用の記事ではありませんがリボンデザインを取り入れる際には非常に参考になります、今回はこの記事を参考に以下3パターンのコードを掲載しているのでお好みで選んでもらえればと思います。

  • 右上に「縦」のリボンをつける
  • 右上に「斜め」のリボンをつける
  • 左上に「オススメ」ラベルをつける

※各カスタマイズコードにある「Rinkerショートコード」の箇所に、自身のコードを挿入してください。

右上に縦のリボンをつける

SWELL
WordPressテーマ

右上に斜めのリボンをつける

NEW
SWELL
WordPressテーマ

左上に「オススメ」ラベルをつける

オススメ

SWELL
WordPressテーマ

Rinkerカスタマイズコードを貼り付けて確認

Rinkerカスタマイズコードの中からお好みで1つを選んでコピーしたら、テーマファイル内のスタイルシートに貼り付けるだけで完了です。

カスタマイズが反映されないという場合には、キャッシュを削除してから確認してみましょう。

キャッシュの削除:「Ctrl」+「F5」

補足:「再利用ブロック」でコードを保管しておく

ちなみに…CSSコードはスタイルシートに貼り付けてしまえばそれで済みますが、HTMLコードについてはRinkerで商品リンクを作るたびに貼り付けなければいけないため少し手間がかかります。

そこでブロックエディターの「再利用ブロック」にコードをあらかじめ登録しておくとかなり時短になるので、今回のカスタマイズを実装する際には以下の流れを参考にぜひ再利用ブロックを活用してもらえればと思います。

STEP
HTMLコードを「カスタムHTML」ブロックに貼り付ける
画像
「フォーマット」の中にある「カスタムHTML」
画像
お好みのコードを貼り付ける

「フォーマット」項目の中にある「カスタムHTML」ブロックに、HTMLコードを貼り付けましょう。

STEP
「再利用ブロックに追加」でコードを登録する
画像
右上にある3点マークをクリックすると出てくる
画像
「再利用ブロック」は編集しない

ブロックの詳細設定の中にある「再利用ブロックに追加」をクリックし、基本となるコードを再利用できるよう登録しておきましょう。

呼び出す際にわかりやすいように、登録名も「リンカー」などに設定しておくのがオススメです。

STEP
「再利用可能」ブロックでコードを呼び出す
画像
ブロック郡の下の方にある

実際にカスタマイズ済みのRinkerを挿入する際には、先ほど登録したブロックを「再利用可能」項目の中から呼び出しましょう。

ただ、これで「Rinkerショートコード」の部分をRinkerで作ったショートコードに変えれば完璧!といきたいところなのですが、「再利用ブロック」のまま編集してしまうと過去に同ブロックを使用した箇所までコードが編集されてしまいます(ショートコード部分だけ変えるという使い方ができない)。

そのため、ショートコードを張り替える際には「再利用ブロック→通常のブロック」へと変換する必要があります。

STEP
「通常のブロックへ変換」しショートコードを貼り付ける
画像
再利用ブロック→通常のブロック(カスタムHTML)へ変換

再利用ブロックで呼び出したものを、詳細設定の「通常のブロックへ変換」で編集可能な状態にしましょう。

すると再び「カスタムHTML」ブロックとして編集できるようになるので、最後にここで「Rinkerショートコード」を商品リンクで作成したショートコードに差し替えれば完了です

こうして解説してみると文字上ではちょっと手間がかかっているように見えますが、実際は「再利用ブロック」に登録しておくことで③④の手順だけでカスタマイズ版Rinkerを挿入することができます。

その際にかかる時間も30秒〜1分程度ですので、それだけの時間をかけるかかけないかでRinkerの見た目を差別化できるというのは大きなメリットでしょう。個人的にオススメのカスタマイズです。

Rinkerカスタマイズまとめ

ということで今回は、WordPressではおなじみの商品管理プラグイン「Rinker」のカスタマイズとして、ラベルやリボンをつける方法についてお伝えしてきました。

個人的に「再利用ブロック」はクラシックエディターで活躍した「AddQuicktag」の上位互換機能のように感じていますが、あらかじめ登録しておいたブロックを呼び出しRinkerのショートコードを差し替えるだけで済むので、とてもやりやすいカスタマイズだと思います。

計測はしていませんがラベルやリボンをつけるだけで費用対効果や読者に与える印象も変わっていきますし、他のブログとのちょっとした差別化にもなるのでオススメです。ぜひご活用ください〜。

この記事も読まれています

目次