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

このブログ「いつもていねいに」を書いている 小田やかた です。
プロフィールはこちら、Xのアカウントはこちらです。

以前の記事で書いたとおり、本ブログを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

小田やかた

ブロガー＆Kindle作家。二人の子どもを持つ共働きサラリーマンです。（プロフィールの詳細）iPhone・iPadアプリを活用した効率的なインプットとアウトプットの方法を発信しています。