wordpress

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)を買ったので、もうテーマを変えようかと・・・。

CHECK
JIN VS Affinger
JINのユーザーが次にAffinger5を買った理由~JINとAffinger5を比較します

続きを見る

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

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

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

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

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

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

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

-wordpress
-, , , ,

© 2022 50blog~アラフィフライフ