商品リンク作成の「Rinker」プラグインで、リンク切れが起きてサムネイル画像が非表示になってしまう時に「画像準備中」などを表示させて対処した記録です。
- Rinkerのリンク切れで画像が消えてしまった
- リンク切れの更新がすぐできない
という時に利用できる方法です。
Rinkerのリンク切れ対策
WordPressブログで簡単に商品リンクを作成・掲載できる便利なプラグインの「Rinker」を愛用中です。
本当に便利でありがたく使わせていただいています❤️
そんなRinkerですが、商品リンク先がリンク切れになってしまうと、管理画面から手動でリンク先修正をするまでは
商品のサムネイル画像が非表示になってしまいます。
WordPress上の管理画面でチェックできることですし、そんなに高頻度で起こることではないのですが
自分がチェックするまでにリンク切れが起きてブログの読者さんに見づらい思いをさせてしまうのを懸念して
リンク切れの間に「画像準備中」のようなサムネイルを表示をさせて
ブログの見栄えや読者さんの見やすさを損なわないように対処してみました。
色々と方法はあると思いますが、今回私が実際にやってみた対処法を記録してみました。
画像準備中はこんな感じになります
実際に実装してみたイメージです。
上がリンク切れのままサムネイルが消えてしまっている状態で、
下が「画像準備中」を表示させた状態です。
何もないよりは見栄えがよくなって、安心感があるように思います。
リンク切れ「画像準備中」の画像を作ってアップする
まずは、「画像準備中」として表示させる画像を作ってアップロードします。
正方形で作っておくと無難だと思います。
私はテレビの「しばらくお待ちください🌸」のイメージみたいな綺麗なお花にしました。笑
リンク切れのサムネイル画像にのみ付くクラス名
このリンク切れになっている要素に対してCSSを書いて画像準備中のサムネイルを表示させます。
リンク切れになると、そのリンク切れの要素にのみ付くクラス名「yyi-rinker-no-item」が現れるのです。
特定の要素に対してCSSを書くので、リンク切れではない通常のリンクの時はそのままで
リンク切れの時のみCSSを適用させることができます。
実際に書いたCSSはこちら
Rinkerタグ内のリンク切れサムネイルにのみ表示されるクラス「div.yyi-rinker-contents.yyi-rinker-no-item div.yyi-rinker-image」にCSSを追加します。
div.yyi-rinker-contents.yyi-rinker-no-item div.yyi-rinker-image {
width: 30%!important;
background: url(画像URL) center / cover no-repeat!important;
}
@media (max-width:900px) {
div.yyi-rinker-contents.yyi-rinker-no-item div.yyi-rinker-image {
width: 100%!important;
}
}backgroundプロパティで背景画像として「画像準備中」画像を表示させています。
また私はRinkerの要素全体に独自のCSSを追加しているので、
必要に応じてCSSを調整してくださいね。
（私は、スマホサイズ表示のみリンクボタンをテキストリンク に変えたりしています。）
リンク切れに気づいたら素早く更新するのが一番！
今回は
- Rinkerのリンク切れが発生
- 管理画面等で修正・更新するまでの間
- 自動で「画像準備中」サムネイルを表示させる
という流れで、
手動で対処する前の段階で自動で対処できることはしよう。
という方法なのでブログ運営の観点から見ると、リンク切れには気づいたらすぐ更新等対応するのが一番良いとは思っています。
これはできるだけブログ読者さんに違和感なく見てもらえるための対処法です。
リンク切れを対処するまでの間の対処法！
うまく利用するとブログの利便性も上がり、自分の手間も最小限にできると思いますので、よければ参考にしてください。
コメント