WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WhiteTiger】テーマ サブディレクトリサイトで本文下のランキング画像が表示されない現象を修正

公開日:2019(平成31)年3月31日/最終更新日:



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

まだまだ【WhiteTiger】テーマネタは続きますよ~(笑)。

個別記事をデベロッパーツールで見てたらエラーが・・・。それは本文下のカテゴリー別ランキング表示の王冠マーク。

発生したのはサブドメインにインストールしているこのサイトでのこと。

たまたまデベロッパーツールを見たこと、ドメインルートのサイトには【WhiteTiger】テーマが入っていないことからたまたま発見しました。そもそも本文下のランキングに王冠マークがあるなんて知らなかったし・・・。

で内容を見てみると、参照先となっているドメインルートの画像がないから表示できないよ~~というエラーでした。

まあ単純にドメインルートのサイトへ【WhiteTiger】テーマをアップロードしておけば済む話ですけど、何の気なしに削除してしまったときには困るので対処しました。

行ったのは単純にCSSの修正をしたこと。

もともと

.category_in_populars ul li:first-child .ranking_image {
background-image: url(/wp-content/themes/white-tiger/images/ranking_1.png);
}

.category_in_populars ul li:nth-child(2) .ranking_image {
background-image: url(/wp-content/themes/white-tiger/images/ranking_2.png);
}

.category_in_populars ul li:nth-child(3) .ranking_image {
background-image: url(/wp-content/themes/white-tiger/images/ranking_3.png);
}

となっていて、これはドメインの一番上の階層にあるwp-contentの中の・・・画像ですよと書かれています。

それを

category_in_populars ul li:first-child .ranking_image {
background-image: url(./images/ranking_1.png);
}

.category_in_populars ul li:nth-child(2) .ranking_image {
background-image: url(./images/ranking_2.png);
}

.category_in_populars ul li:nth-child(3) .ranking_image {
background-image: url(./images/ranking_3.png);
}

と/wp-contentの手前に「.(ドット)」を付けて、1つ上の階層です!として「image」フォルダの中を参照するように指定してやっただけ。

他の環境(階層構造とか)では分かりませんが、このサイトの場合はこれで解消されました。

それからどこだったか忘れましたが、CSSの中に閉じ子が1つ多い箇所もあり、ついでに修正しておきました。

自身でテーマの作成ができるようなスキルはありませんが、こうして1つ1つ対処していくのも面白いですよ!!