今回は、WordPressの商品リンクの管理を楽にするプラグイン『Rinker』がデザイン崩れした場合の対処方法について、見てみたいと思います。よろしくお願いいたします。
Rinkerのデザイン崩れについて
Rinkerプラグインを使用すると、上の画像の様な商品リンクを作成することが出来ます。
このプラグインを適用した時に、たまに上の画像の赤い枠の中の様な、デザイン崩れが起きる事があります。使用しているテーマの影響を受けているためです。その為、プラグインを少し修正して、上書きする必要があります。
今回はその方法について、見てみたいと思います。よろしくお願いいたします。
プラグインの修正方法について
プラグインの修正方法について、見てみたいと思います。よろしくお願いいたします。
①開発者ツールの起動
まず、デザイン崩れが起きている箇所の、原因を詳しく調査します。今回は、Microsoft Edgeの開発者ツールを使っています。
- Microsoft Edgeの開発者ツールは、以前のInternet Explorerと同様に、F12キーで起動できます。
- Chromeでは、右クリック → 検証を選択することで、デベロッパーツールが表示されます。
- ショートカットキーはWindowsの場合はF12キー、macOSの場合はCommand＋Option＋Iキーを入力します。
②開発者ツールで、要素を選択する。
デザイン崩れが起きているページをブラウザで開いた状態で、開発者ツールを起動します。
すると、下の様な画面になります。画面の右側に、開発者ツールが開いています。この開発者ツールの上部の左上の要素を選択するボタン（□に矢印）を押すと、デザイン崩れが起きている場所を選択出来るようになります。
実際に、要素を選択してみると、その要素の名前や、適用されているスタイルなどが分かります。
今回は、①ラベルと、②ラベルのめくれている場所の合計２か所が対象だと分かりました。ちょうど①下の画像と、②上の画像の下部分です。
つまり、２か所に、デザイン崩れが起きていて、内容をまとめると、このような感じです。
- ラベル 背景に色がついている。
- ラベルのめくれている場所 背景に色がついている。めくれるようになっている。
それでは、次は、この２つを実際に直してみたいと思います。よろしくお願いいたします。
③プラグインエディターで修正する。
WordPressのプラグインを修正するには、プラグインエディターを使います。
WordPressのメニューから、プラグイン→プラグインエディターを開きます。
すると、下の様なプラグインを編集画面になります。
右上から、編集するRinkerプラグインを選択し、選択ボタンを押します。すると、内容が表示されるので、その中から、css内のstyle.cssを開きます。
このstyle.cssファイルを選択したのは、②の項の一番下の画像の赤枠で囲っている箇所を見ると分かりますが、要素が、style.cssファイルから来ていることが分かります。
プラグインを編集画面で、ctrl+Fキーを押すと、要素を検索することが出来ます。検索すると２つの原因のうち、今回は、①のラベルの部分の１つだけが見つかりました。
今回は、下記の様に修正します。
①ラベルの部分
要素が存在するため、検索して見つかった要素の中に、background: none;を追加する。
①ラベルの部分
div.yyi-rinker-contents ul.yyi-rinker-links{
background: none;
}
/* リストの背景要素を削除 */
↑こっちは、CSS要素が存在する。
下の画像が、実際に追加してみた画像です。
②ラベルのめくれた部分
こちらは要素が存在しないため、style.cssの一番下に、新規に、下記のul～｝までを追加します。
②ラベルのめくれた部分
ul.yyi-rinker-links::after {
display:none;
}
/* ページめくりの右側要素を削除 */
下の画像が、実際に追加してみた画像です。
これで、修正は完了です。
修正後の注意点について
修正後の注意点について、見てみたいと思います。よろしくお願いいたします。
修正が反映されない場合、キャッシュを削除すると、反映されます。少し時間が掛かる場合もあります。
今日は、WordPressで、更新や変更が反映されない時の対処方法について、見てみたいと思います。よろしくお願いいたします。 反映されない原因は？ 黒猫 更新や変更が反映されない時の原因は、キャッシュです。 スラリン […]
また、プラグインが更新された場合、今回の修正が元に戻ってしまう場合があるので、その際は同じ要領で修正すると、直ります。
以上となりますが、またWordPressについて、役に立ちそうな記事があったら、書いてみたいと思います。お読みいただきありがとうございました。よろしくお願いいたします。