【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(“https://jun1ro1210.com/wp-content/uploads/2016/12/gahag-0038844404-1-2-e1505260703272.jpg“);
display: block;
position: relative;
left: 1em;
}

色をつけた部分がワードプレス画像のURLです。

以前はこのCSSでサイトマップに画像が挿入されてたんですよ!

 

今回は入れ子対策として、さらに記述を付け足していきました!

 

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

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

 

完成形のCSSがこんな感じです。

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

.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(“https://jun1ro1210.com/wp-content/uploads/2016/12/gahag-0038844404-1-2-e1505260703272.jpg”;);
display: block;
position: relative;
left: 1em;
}

 

スポンサーリンク

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

CSSをいじってみた結果、無事に画像が挿入できました!

 

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

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

 

いっくんのまとめ

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

 

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

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

 

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

 

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

見やすくなって良かったです。

もし記事を書くときに、管理画面や投稿画面が重いと思ったらサーバー乗り換えがおすすめです。

高性能な「エックスサーバー」にすると、ブログ運営の効率が格段に上がりますよ!