【PS Auto Sitemap】テーマ変更後に不具合が出た時の対処法!

どうも!いっくんです!(@ikkun_blog

 

ブログの「サイトマップページ」って大事ですよね。

うちは「PS Auto Sitemap」で作ってて、カテゴリの下には画像を挿入してました

 

しかし先日テーマを変更したら、画像が表示されなくなったんです!

悩んでから解決するまでの流れを書いていきますね!

 

スポンサーリンク

テーマを変更したらサイトマップが崩れた?

先日、ワードプレスのテーマをこれまでのSimplisity2からスワローに変更しました!

 

テーマ変更すると必ずCSSとかは書き直しになるのでね・・・

ちゃんと事前にコピペしておいて、新しく記入し直しましたよ。

 

作業は思ってたよりスムーズにできて、かなり満足のいくレイアウトに仕上がったんですけど。

 

「サイトマップページ」の画像の挿入だけがうまくいきませんでした!

 

スポンサーリンク

「PS Auto Sitemap」で作ったサイトマップ

うちのブログは、これまでプラグインの「PS Auto Sitemap」でサイトマップページを作ってました。

 

これまでは先輩ブロガーのヨスさんのサイトマップページに倣って・・・

CSSを使ってカテゴリ項目ごとに画像を挿入してたんですよ。

 

だからもちろん、新テーマでも同じようにしたかったんですけど。

新テーマの方も同様にCSSを記述しても、なぜか画像が表示されません!

 

悔しいので何度やり直しますけど、それでもダメです。

確認してみると・・・子テーマが競合してるようでした!

 

競合してるっぽい?!現状の把握と対策!

子テーマと競合してるっぽいのは分かったのでね。

現状の把握をするために、まずこれまでの設定がどんな感じだったか書いていきます。

 

そのあとに対についても説明していきますね!

サイトマップページのテキストについて

Auto Sitemapで、サイトマップページを作るときには・・・

本文にテキストとしてコレ↓を記述するのが基本です!

 

<!– SITEMAP CONTENT REPLACE POINT –>

 

とりあえずこれさえ挿入すればサイトマップは作れるんですよ。

でもコレだけじゃシンプル過ぎる「文字や記号」しか表示されないのでね!

 

デフォルトの状態から、<ul>や<li>のデザインを調整するには・・・

このページ自体を入れ子の<div>で囲みます!

 

そうすると次のような形になります!

 

<div id=”sitemap-page”><!– SITEMAP CONTENT REPLACE POINT –></div>

 

最初のテキストを<div id=”sitemap-page”>と</div>で囲むわけですね。

これで「 #sitemap-page 」に入っているulという名のCSS指定ができるようになります!

 

ちなみに今回の一件と、ここのテキスト設定は関係はなくて・・・

後者のテキストをそのまま入れておいて間違いはありませんでした!

 

CSSの設定について

問題はCSSの方でした!

こっちの設定を変更しない限り、うまくいかないのは明らかだったのでね。

 

ちなみに以前のテーマで使っていたCSSはこんな感じです!

/*———————————
サイトマップページ
——————————–*/

#sitemap-page ul li {
font-size : 100% ;
margin-bottom : 1em ;
}

.cat-item-11:before {
content: url(“http://jun1ro1210.com/wp-content/uploads/2016/12/gahag-0038844404-1-2-e1505260703272.jpg”);
display: block;
position: relative;
left: 1em;
}

 

ワードプレス画像のURLが入ってるのが分かるかと思いますけど・・・

以前はこれで画像が挿入されたんですよ!

 

でもコレを挿入しても、テーマ変更後はうまくいかなかったのでね。

さらに記述を付け足していきました!

 

すべての画像の記述の前に「.entry-content #sitemap-page」を入れました。

こうすることでentry-content の中の #sitemap-pageに入っているulを指定します!

 

そして変更後がこんな感じです↓

*———————————
サイトマップページ
——————————–*/

.entry-content #sitemap-page ul li {
      font-size : 100% ;
      margin-bottom : 1em ;
}
.entry-content #sitemap-page ul li:before{transform: none;
}
.entry-content  #sitemap-page ul li .posts_in_category{
display:none;
}

.entry-content #sitemap-page .cat-item-11:before {
content: url(“http://jun1ro1210.com/wp-content/uploads/2016/12/gahag-0038844404-1-2-e1505260703272.jpg”;);
display: block;
position: relative;
left: 1em;
}

 

スポンサーリンク

ちゃんと画像が挿入されました!

ハイ!こんな感じになりました。

なんとか無事に画像が挿入できましたよ!

 

やっぱりCSSの子テーマとの競合が原因だったみたいですね。

CSSの記述を変えたことで解決しましたよ!

 

いっくんのまとめ

今回は、サイトマップページの画像挿入についてでした。

 

画像を挿入したいのに「うまくいかない・・・!」って悩んでる方がいたら。

もしかしたら子テーマが原因かもしれないのでね。

 

うちは今まで平気だったものが、テーマ変更後にダメになったので案の定でした笑

テーマの乗り換えってメリットは多いですけど、こういったエラーも起こり得ますからね。

 

なんにせよ、サイトマップページって読者さんにとってはかなり大事ですから!

少しや見やすくなったので良かったです。