WordPressの「Simplicity2」に移行できなかったデザインの不具合の修正の実例

////参考になった内容があればシェアをお願いします////

アイキャッチ

以前の記事で書いたとおり、本ブログをWordPressのテーマ「Simplicity」から「Simplicity2」に移行しました。

HTMLやCSSなどの知識が乏しい私でもできたWordPressの「Simplicity2」への移行

基本的なデザインはSimplicityを引き継いでいるのですが、なぜかうまく引き継げなかった内容もありました。

本記事では、その不具合と対応について紹介したいと思います。

Simplicity2への移行を考えている方の何かの参考になれば幸いです。

スポンサーリンク

1. 記事の下の定型文が記事の上に表示されてしまう不具合

以前、以下の記事で書いたとおり、本ブログでは毎回の記事の最後に定型文を入れています。

WordPressの記事の下に自動で定型文を入れる方法

Simplicity2に移行してブログを表示させると、この定型文が、なぜか記事の冒頭にきてしまう不具合がありました。

正直、あせりましたが、改善方法は簡単でした。

そもそも定型文は、前述の記事で解説しているとおり、以下のように入れていました。

  • WordPressの管理画面の左側のメニューの「外観」→「ウィジェット」を表示。
  • 定型文を書いた「テキスト」を「投稿本文下」へドラッグ。

この「投稿本文下」に定型のテキストを入れていたのに、Simplicity2に移行後、なぜか「投稿本文上」に「テキスト」が移動していたのです。

理由はよくわかりませんが、もとのように「投稿本文下」に移動すれば解決できました。

2. サイドバーの「人気記事」が表示されていない不具合

本ブログは、以前の以下の記事で紹介したとおり、WordPressのプラグイン「WordPress Popular Posts」を使って右側のメニューにアクセス順位にもとづく「人気記事」を表示させていました。

「Simplicity」の「人気記事」をPVのランキングにするには「WordPress Popular Posts」を使う必要があった

Simplicity2に移行してから、この人気記事が表示されなくなっていたのです。

これも理由はよくわかりませんが、WordPressの管理画面の「外観」→「ウィジェット」を見てみると、サイドバーウィジェットの一覧から「人気記事」がはずれていました

よって、これを一覧に戻せば、解決しました。

3. グローバルナビの色が黒から白に変わってしまった不具合

トップ画面のタイトル下のグローバルナビの背景は黒色だったのに、Simplicity2に移行したら白色に変わっていました。

グローバルナビの色は、WordPressの管理画面の「外観」→「カスタマイズ」→「色」で設定できるのですが、ここはちゃんと黒色になっています。

黒色になっているのに、表示は白色です。

以前の以下の記事で書いたとおり、グローバルナビの文字を大きくしたいために、子テーマのスタイルシート(Style.CSS)にコードを書いていたのですが、試しにこれを削除してみました。

【第5回】初心者の私でもできた「Simplicity」のカスタマイズ(其ノ貮)

すると無事、黒色に戻りました。

ただ、当然、以前より文字の大きさは小さくなりましたが。

4. 見出しタグ(H2)が反映されない不具合

この不具合の解決が一番苦労しました。

Simplicity2に移行してから、特に見出しタグ(H2)をさわっていないのにも関わらず、表示がおかしくなりました。具体的には、スタイルシート(Style.CSS)に書いたとおりにはならず、デフォルト?のH2タグの見出しとCSSに書いた内容が混合されている感じです。

CSSに書いたコードが反映されない対処法をネットで調べてみると、以下のサイトがわかりやすかったのですが、いずれも解決には至りませんでした。

CSSが効かない・反映されないときの対処法まとめ
【初心者向け】CSSが効かないときや、うまく反映されないときの対処法を総まとめました。Wordpress、はてなブログ、ライブドア、FC2など全共通の対処法です。
WordPressでCSSを修正したけど反映されないときに確認すべきこと
<2016/11/21更新>WordPressでCSSを修正したのに何回リロードしても反映されないなんてこと、ありませんか?大抵の場合、キャッシュが悪さをしています。対処方法をご紹介します。

Simplicityに特化したCSSが反映されない場合の記事も確認しましたが、ダメでした。

[FAQ]WordPressテーマのカスタマイズで変更したCSSが反映されない
Wordpressテーマ(子テーマ)のstyle.cssなどでCSSを変更したとします。けれど、「サイトを閲覧しても変更部分が反映されていなかった」なんて場合の対処方法です。 フォーラムへの不具合に関する質問で一番多いのは、この「CSSが

他には、「header.php」の”style.css”付近に手を加えるという方法もあるようですが、Simplicity2のアップデートのたびに同じことをしなければいけないようなのでやめました。

WordPressでcssの修正を即座に反映する『Simplicity2編』
Simplicity2の「lib/scripts.php」に手を加えて、スタイルシート(style.css)の変更が即座に反映されるように設定しました。Googleを検索するとたくさん出てくる修正方法とはちょっと違いました。cssの修正が反

また、「function.php」や「lib/scripts.php」を修正するという方法もあるようですが、私には難しくて試す気にはなりませんでした。

[Simplicity]CSSを更新したのにすぐ反映されない場合の対処法 - atuweb : つながりを作るWebプログラマ
「 CSSを更新したのにすぐに反映されない 」というのはWebデザイナさんなら一度は経験されていると思います。 当ブログで利用しておりますSimp

結局、粘り強く探した結果、以下のサイトで紹介されている、子テーマのコードの最初に親テーマを書くことで、無事反映がされました

詳しくは、以下のサイトの「親テーマのスタイルが子テーマに反映されて思った通りの装飾にならないって事でしたら、CSSは親テーマを読み込んで、子テーマのスタイルを上書きするのが原因です」のあたりに解説があります。

見出しのカスタマイズがデフォルトのデザインと重複してしまう
Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 見出しのカスタマイズがデフォルトのデザインと重複してしまう このトピックには3件の返信が

あと、パソコンのブラウザのキャッシュが、前のスタイルを記憶しているため、CSSのコードが反映されないことがありますので、ブラウザでブログを表示後、スーパーリロード(Macの場合:Command+R Windowsの場合:Ctrl + F5)をした方がよいかと思います

スーパーリロードとは、ブラウザのキャッシュを消去してウェブページを再読込することです。

5. おわりに

Simplicity2に移行後、本記事のとおり、うまく移行できなかったデザインを修正するのにあわせ、新たにカスタマイズをした部分もありますので、それについては、別の記事で紹介したいと思います。


以上です。

本記事は参考になりましたか?
もし、少しでも参考になったことがあれば、フォロー&応援クリックをいただけるとうれしいです!!



にほんブログ村 スマホ・携帯ブログ iPhoneへ
にほんブログ村 子育てブログ パパの育児へ
にほんブログ村 健康ブログ 冷えとり健康法へ



スポンサーリンク

////参考になった内容があればシェアをお願いします////

////フォローはこちらから////