WordPressテーマ「JIN」でスマホスライドメニューに不具合?

当ページのリンクには広告が含まれています。
JIN不具合

2018年末にWordPressテーマ「JIN」をアップデートしてから非常に困っています。

本当に困っています。

2019年5月5日追記:

同じような現象に悩んでおられて解決された方からコメントをいただきました!

早速教えていただいたように修正してみたところ、正しく表示されるようになりました!

結論から言うと、「JINのheader.phpを子テーマJIN Childにコピーしてカスタマイズしていたが、JINのアップデートにより親のheader.phpが変更になっている。

旧バージョンのheader.phpをベースにカスタマイズしたheader.phpには新しいバージョンに必要な記述がないため不整合を起こしている」というものです。

新header.phpを親テーマからコピーしてJIN Childのheader.phpとして再編集すれば解決!

 

目次

スマホサイドメニューがうまく表示されない

私はテーマ「JIN」を2つのサイトで利用させていただいています。

テーマ自体はとても気に入っています。

ところが、バージョン: 1.830にアップデートした後からスマホスライドメニューの表示がおかしなことになってしまいました。

スマホスライドメニューはハンバーガーメニューとも呼ばれ、スマホ右上(テーマによっては左上)にある「三」の字のようなボタンをクリックしたときに表示されるメニューです。

不具合現象

まずは【OKな表示】と【NGな表示】を見てみてください。

【OKな表示】

OK画像

【NGな表示】

NG画像

分かりますか?

JINのスマホスライドメニューは投稿ページの上にオーバーレイでメニューが表示されるようになっています。

【OKな画像】はメニュー背面の投稿ページにかなりぼかしが効いていてメニューが良く分かると思います。

【NGな画像】はメニュー背面の投稿ページがある程度分かるぐらいのぼかし具合で、メニューが同化してしまい、良く分からない感じになっています。

しかも、メニューを選ぶこともできない状態になっていました。

JINのアップデートが原因だと確信するまで

そもそも自分のサイトをあまりスマホでみないため、メニューがこんなことになっているなんて全然気づきませんでした。

え?いつからこうなの?どうして?

と困惑します。

バックアップから戻す?でも最近結構カスタマイズしてるし記事も書いてる・・・。

どうしよう?

けれど、「タイミング的にJINのバージョンアップからじゃないのかな?」と想像し、たまたままだアップデートしていなかった【OKな表示】のサイトの「JIN」をバージョンアップしてみました。

すると、メニューは【NGな表示】となりました。

これで、JINのアップデートの影響でメニューが崩れたと確信しました。

応急対策までの道のり

自力で解決を試みる

アップデートが原因であり、大々的に「不具合」の報告がない以上、私の環境に問題があるのだと考えました。

そこで、よく言われている「プラグインとの相性」を疑い、片っ端からプラグインを無効化しキャッシュのクリアをしました。

でも治らない・・・。(´;ω;`)ウゥゥ

JINのサポートに問い合わせしてみる

これはもう無理だと判断し、サポートに問い合わせしました。

年末年始を挟んだこともありなかなかお返事をいただけなかったのですが、やっといただいたお返事は以下の通りです。

さて、お問い合わせいただいた件ですが、
こちらJINテーマの不具合となります。
ご不便お掛けし申し訳ございませんが次回以降のアップデートにご対応させていただければと思います。

また、対応策に関してですが、
以下コードをWordPressの管理画面より「外観」→「カスタマイズ」→「追加CSS」に
そのままコピペで追記していただければ幸いでございます。

.cps-info-bar.animate{
z-index:2;
}

そうかぁ。

やっぱり不具合なんだ・・・。

教えていただいた通り、ダッシュボードの【外観】→【テーマの編集】から【追加CSS】に上記のコードを貼り付けました。

が、治らない・・・。

メニューが選択できない(押せない)・・・。

ご迷惑をおかけしていると承知してましたが、再度問い合わせたところ、以下の回答をいただきました。

問題の件確認いたしました。
確かに押せないですね・・・。

こちら取り急ぎの対応とはなってしまいますが、
以前同様以下コードを追加していただけますでしょうか?

@media (max-width: 767px)
.sp-menu-box{
z-index:4;
}

追加し保存した後、キャッシュをクリアにした状態で再度ご確認の程
宜しくお願い致します。

本当に申し訳ないです。

またまたその通りコードをコピペしましたが、エラーになってしまいました。

「@media (max-width: 767px)」この行を外せばエラーにならないのでこのまま保存。

これでメニューは選べるようになりました。

ただし、画面の表示は同じ状態です。

NG画像

スクロールさせるとスクロールするポイントによって投稿記事がスクロールしたり、メニューがスクロールしたり・・・。

気を付けてクリックしないと一体どこをクリックしているのか分からない状態です。

現在の状況

何度も何度もサポートしていただいて申し訳なく思った私は、「これで様子を見る」とお伝えしました。

次のバージョンアップで解決することを夢見てます。

ただ、もう最初に気づいてから1カ月半経ち、結構複雑な心境です。

先日新しいサイトのためにAffinger5(WING)を買ったので、もうテーマを変えようかと・・・。

あわせて読みたい
JINのユーザーが次にAffinger5を買った理由~JINとAffinger5を比較します [sc_hello] このブログのWPテーマは「JIN」です。 「JIN」はブログを立ち上げて初めて買った有料のテーマです。 wordpress自体が初めてで右も左も分からない人にとって...

Affinger5(WING)のスマホスライドメニューは「JIN」とは全く異なり、投稿ページの左側にスライドして現れます。

しかもかなり融通が利くので、この際テーマを変更しようかとも思っています。

だいぶ気合が必要ですが・・・。

もっと勉強して自分で解決できるようになるといいのですが。

近日中にテーマを変更するかどうか結論を出したいと思います。

尚、【OKな表示】のサイトはこれを機にAffinger5(WING)にすでに変更済みです。

結局、本サイトも先日よりAffinger5(WING)に変更作業中です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

もっと輝く50代応援メディア『50blog』を運営するアラフィフ女子まつみ@老後戦略家です。
現在は社内SEとして働きながら、これからの新しい働き方のために猛烈にポジティブに活動中です。
楽しく過ごす50代、おしゃれに暮らす50代、未来に備える50代。
50代は大忙しです。
もう若くないから・・・なんて言わずにもっともっと輝きましょう!

一緒にがんばる仲間も募集中!twitterフォローよろしくお願いいたします。

コメント

コメント一覧 (2件)

  • はじめまして。三年坊主と申します。
    私も同じ現象で困っていてこちらの記事にたどりつき、試行錯誤していたのですが、私の場合は
    ・header.phpを親テーマから子テーマにコピーしてカスタマイズしていた
    ・親テーマアップデート後に、子テーマのheader.phpを古いまま使っていた
    のが原因だったようで、
    ・アップデート後の親テーマを子テーマにコピー→子テーマのカスタマイズ内容を手動で追加
    で本日解決しました。参考までにコメントにて共有させていただきました。
    https://twitter.com/SannenBouzu/status/1124890939137200129

    • 三年坊主さん
      ありがとうございます。

      何をどうしたら治るのか分からず、当ブログはあきらめてAffingerにテーマを変更しました。

      ただ、もう一つ別のサイトはJINのままで同じ現象だったので、教えていただいた方法を試したところ解決しました。
      実際、header.phpのどこを編集したのか不明なのですが・・・。

      おそらく何かの記事を見て好奇心でheader.phpをいじり、その時は満足する結果を得たのだと思います。
      覚えていない・・・って最低ですね(笑)

      今後は変更した点はちゃんと記録する等今回のようなことがないようにしたいと思います。
      Affingerに変更するのに相当苦労したので、もうJINには戻せないのが悲しいです(´;ω;`)ウゥゥ

      とにかく、三年坊主さんのおかげで解決です。
      ありがとうございました!

三年坊主 へ返信する コメントをキャンセル

目次