ブログ開設・改造

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

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

あわせて読みたい
HTMLやCSSなどの知識が乏しい私でもできたWordPressの「Simplicity2」への移行本ブログは2015年9月からWordPressの「Simplicity」というテーマを使っていましたが、先日、「Simplicity2」...

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

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

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

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

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

あわせて読みたい
WordPressの記事の下に自動で定型文を入れる方法 ブログの記事の一番下に、毎回同じフレーズを入れています。今までコピペで入れていたのですが、そうすると入れ忘れたりすることがあるん...

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

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

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

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

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

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

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

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

あわせて読みたい
「Simplicity」の「人気記事」をPVのランキングにするには「WordPress Popular Posts」を使う必要があったWordPressのテーマ「JIN」での導入事例はこちらの記事をご覧ください。 WordPressのテーマ「JIN」で「WordPre...

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

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

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

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

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

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

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

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

あわせて読みたい
【第5回】初心者の私でもできた「Simplicity」のカスタマイズ(其ノ貮) IT初心者の私でもWordPressを始めてブログを立ち上げることができましたので、実際に私が取り組んだ内容を以下のとおりシリー...

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

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

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

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

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

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

  • CSSが効かない・反映されないときの対処法まとめ
  • WordPressでCSSを修正したけど反映されないときに確認すべきこと
  • Simplicityに特化したCSSが反映されない場合の記事も確認しましたが、ダメでした。

    [FAQ]WordPressテーマのカスタマイズで変更したCSSが反映されない

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

    WordPressでcssの修正を即座に反映する『Simplicity2編』

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

    [Simplicity] CSS を更新したのにすぐ反映されない場合の対処法 – atuweb : つながりを作るWebプログラマ

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

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

    見出しのカスタマイズがデフォルトのデザインと重複してしまう

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

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

    5. おわりに

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


    以上です。

    本記事は参考になりましたか?
    もし、少しでも参考になったことがあれば、フォロー&シェアしていただけるとうれしいです!!


    ABOUT ME
    ottaka18
    ottaka18
    二人の子どもを持つ共働きサラリーマンパパ。現在、小学生と保育園児の子育てに奮闘中です。 本ブログは、PhoneとPCでの情報管理、文章作成、タスク管理がメインテーマのブログです。WorkFlowy、 Evernote、たすくまなどのアプリを使って知的生産のある暮らし(新しい価値を生む暮らし)を目指しています。