Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマホ閲覧でブラウザバック時に、モバイ...
 
共有:
通知
すべてクリア

スマホ閲覧でブラウザバック時に、モバイルスライドインメニューが開いたままの状態で戻る

13 投稿
5 ユーザー
10 Reactions
566 表示
(@robjhon)
Trusted Member Registered
結合: 4年前
投稿: 40
Topic starter  

いつもお世話になります。

以前、下記トピックでも投稿しましたが、また、スマホで閲覧した際に、ブラウザの戻るボタン、あるいは、スワイプして、前のページに戻ろうとすると、モバイルスライドインメニューが開いたままの状態で戻るようになりました。

また、safariでタブでサイトを開いた後にいったん閉じ、しばらくたってから同じタブでサイトにアクセスしようとすると、モバイルスライドインメニューが開いたままの状態になります。

 

原因がわからず困っています。

よろしくお願いします。

 

↓前回のトピック

https://wp-cocoon.com/community/bugs/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%90%E3%83%83%E3%82%AF%E6%99%82%E3%80%81%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5/

----------------------------------------------
サイト名:ジュエリークラフト
サイトURL: https://jewelry-craft.online
ホームURL: https://jewelry-craft.online
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.4.2
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.0
カテゴリー数:39
タグ数:80
ユーザー数:357
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:64997 バイト
functions.phpサイズ:116507 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2022/04/F31A2795__w1920xh1080.webp
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Activity Plus Reloaded for BuddyPress 1.1.0
Advanced Dynamic Pricing for WooCommerce 4.5.4
AIOVG – Custom Templates
Akismet Anti-spam: Spam Protection 5.3
All-in-One Video Gallery (Premium) 3.5.2
All-in-One WP Migration 7.79
All-in-One WP Migration Unlimited Extension 2.54
BasePress 2.15.24
bbPress 2.6.9
Broken Link Checker 2.2.3
BuddyPress 11.3.1
CBX Bookmark & Favorite 1.7.17
CBX Bookmark & Favorite Pro Addon 1.3.13
Checkout Field Editor for WooCommerce 2.0.0
Classic Editor 1.6.3
Complianz | GDPR/CCPA Cookie Consent 6.5.6
Copy Anything to Clipboard 3.5.0
Favorites 2.3.3
GD bbPress Attachments 4.6
Google Listings and Ads 2.5.17
Health Check & Troubleshooting 1.7.0
Inline Google Spreadsheet Viewer 0.13.2
Instagram Feed Pro Personal 6.3.4
Jetpack 12.9.3
Jetpack Protect 1.4.2
KOMOJU Payments 3.0.5
MailPoet 4.40.0
MailPoet Premium 4.40.0
MathJax-LaTeX 1.3.12
MW WP Form 5.0.6
Payment Plugins for Stripe WooCommerce 3.3.54
Redirection 5.4.2
Simple Membership After Login Redirection v1.6
Simple Membership BBPress Addon v1.4
Simple Membership Google recaptcha 2.0
Simple WordPress Membership 4.4.0
SiteGuard WP Plugin 1.7.6
SWPM WooCommerce Addon 2.0
The Events Calendar 6.2.9
User Role Editor 4.64.1
WooCommerce 8.4.0
WooCommerce Amazon Pay 2.5.1
WooCommerce PayPal Payments 2.4.2
WP-Optimize - Clean, Compress, Cache 3.2.22
WP All Import 3.7.3
WP Mail Logging 1.12.0
WP Mail SMTP 3.11.0
WP ULike 4.6.9
XML Sitemap Generator for Google 4.1.16
Xserver Migrator 1.6.1
Yes/No Chart 1.0.12
YITH WooCommerce Wishlist 3.28.0
----------------------------------------------


   
引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7886
 

前回は、以下の手順で、私の環境(Android+Chrome)でも発生しました。

  • モバイルフッターボタンで、メニューを展開
  • そのメニュー内のリンクをクリックし、ページを表示
  • 戻るボタン

Android+Chromeだけでなく、Windows10+Chromeのデベロッパーツール上でも発生していました。

 

今回も、Android+Chromeで確認してみましたが、上記手順では発生しないようです。

上記のように、箇条書きで、こういう手順で発生しますということを、具体的に順番に、書いていただいた方が良さそうに思います。
(複数パターンあるのであれば、全ての手順を書いていただくと助かります)

私は今のところ、どういう手順で発生するのか、再現できていません。

 

投稿者:: @robjhon

スマホで閲覧した際に、ブラウザの戻るボタン、あるいは、スワイプして、前のページに戻ろうとすると、モバイルスライドインメニューが開いたままの状態で戻るようになりました。

Android+Chromeの環境では、戻るボタンで発生しないんですよね。
(その他にも条件が? それとも機種依存?)


   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2866
 

●ご参考

iPhone+Safari固有の問題のようです。
私のiPhoneでも同様な現象を確認しました。

https://stray-light.info/wp/ios-safari-backbutton/


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17168
 

投稿者:: @chu-ya

iPhone+Safari固有の問題のようです。
私のiPhoneでも同様な現象を確認しました。

https://stray-light.info/wp/ios-safari-backbutton/

Cocoonもこの対応をした方がいいのだろうか。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7886
 

「bfcache」というものみたいです?

バックフォワード キャッシュ
https://web.dev/articles/bfcache?hl=ja

上記の記事には以下のようにありました。

bfcache は、パソコンとモバイルの両方で、長年にわたって Firefox と Safari の両方でサポートされています。

私のAndroidに、Firefoxをインストールしてみましたが、事象は発生せず・・・。

更には、以下のようにもあります。

Chrome バージョン 86 以降では、ごく一部のユーザーを対象に、Android のクロスサイト ナビゲーション用に bfcache が有効になっています。今後のリリースでは、追加のサポートが段階的にリリースされます。バージョン 96 以降では、パソコンとモバイルを使用するすべての Chrome ユーザーに対して bfcache が有効になっています。

Android+Chromeや、Windows+Chromeのデベロッパーツール上でも発生せず・・・。
うーん・・・良く分からんです。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 7886
 

かなり古いですが、以下の記事には・・・。

iOS safari の戻る/進むボタンと bfcache について
https://qiita.com/kyaido/items/5cf9482146b945a4bf67

 

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
  }
};

ただこの方法だと、bfcache が使用された場合に必ずリロードされてしまうので、実際には

リロード以外の処理でなんとかする
必要な時だけリロードさせる
などにしたほうが bfcache による体感速度の向上も保ったまま対策ができるので良いかと思います。

こんな書き方だったりします。

 

比較的新しい以下では、ブラウザによって挙動が違うニュアンスも?(直接関係ある内容ではないですが)

Yahoo! JAPAN Tech Blog
ブラウザの戻る/進むを高速に!ヤフーにおけるBFCache有効化に向けた取り組み
https://techblog.yahoo.co.jp/entry/2023072430429932/

話が難しいです。


   
わいひら reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

とりあえず、tmp/mobile-sidebar-button.php の 16 行目 にでも autocomplete="off" を追加し、Safari で動作を確認するのがいいかもしれません。

<input autocomplete="off" 以下省略

autocomplete="off" で問題が解決しない場合は、pageshow イベントでの処理を試します。試す場合は、イベントハンドラではなく普通に addEventListener() を使うのがいいです。

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 処理を書く 
  }
});

また、今回のケースでは、リロードは不適切です。リロードしてしまうとスクロール位置を復元できなくなります。例えば、下にスクロールした位置から別のページに移動した後に戻ってきた時に、ページの先頭まで戻ります。これはユーザー体験を損ないます。サイドバーを閉じるだけでいいため、私であれば javascript.js の 158 行目以降 にある処理を行います。

※ サイドバー以外にも処理が必要な箇所はあるかもしれません。

バックフォワードキャッシュは、iOS や Safari 固有のものではありません。CLS の改善に効果があることから、Google はサイトにバックフォワードキャッシュを適用するよう推奨しています。

参考:ページが bfcache の対象であることを確認する

バックフォワードキャッシュについては、バックフォワード キャッシュ の説明が分かりやすいと思います。

ちなみに、ご質問者の robjhon さんのサイトはリクエストヘッダーの Cache-Control に no-store があるため、Chrome ではバックフォワードキャッシュは無効です。

This post was modified 9か月前 by Akira

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17168
 

投稿者:: @akira

とりあえず、tmp/mobile-sidebar-button.php の 16 行目 にでも autocomplete="off" を追加し、Safari で動作を確認するのがいいかもしれません。

とりあえず autocomplete="off" 属性を追加しておきました。
https://github.com/xserver-inc/cocoon/commit/4877cc7cbb392fd193cfdd4a4ca3165e06c57763

もし不具合環境をお持ちの方がおられましたら試してみていただけると幸いです。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
返信引用
(@robjhon)
Trusted Member Registered
結合: 4年前
投稿: 40
Topic starter  

皆様ご返信ありがとうございます。

@chu-ya さんが同様の現象を確認されたということで、私だけではないということで少し安心しました。

 

サーバーキャッシュ、ブラウザキャッシュをいずれも消去し、高速化を解除した状態で確認した結果をまとめました。

 

android(chrome)と、iphone11:Safari(ios16.3.1)では発生せず、

iphone14:Safari(ios16.5.1)だけ発生しました。

 

ホーム用テンプレートを使用していたので、そのテンプレートが影響しているかと思い、現在は、Cocoonのデフォルトテンプレートを使用しています。

 

また、@akira さんに教えて頂いた

<input autocomplete="off"

では改善しませんでした。

 

また、 javascript.jsの「})(jQuery);」直前に次のように追記して見ましたが、改善しませんでした。

// ページが表示されたとき(ブラウザバック含む)に実行
window.addEventListener('pageshow', function(event) {
  // ページがキャッシュから読み込まれた場合(ブラウザバック時など)
  if (event.persisted) {
    // モバイルサイドバーのチェックボックスを非選択にして閉じる
    $('#sidebar-menu-input').prop('checked', false);
  }
}, false);

 

 

以上を踏まえてテストした結果がこちらです。

 

<テストの条件>

ホーム起点で回遊するパターンと、記事起点で回遊するパターンの2つを試しました。

 

■テストA:ホーム起点で記事を回遊してホームに戻る

1.Google検索から「ジュエリークラフト」で検索してホーム画面を表示する(検索結果1番目)

2.ホーム画面の上段メニュー「記事」をタップして記事一覧ページに遷移する(target=_self)

3.記事一覧ページ見出し「新着記事」から、最初の記事に遷移する(target=_self)

4.遷移した記事下部のブログカードから、別のページ(カスタム投稿)に遷移する(target=_blank)

5.ブラウザバックで3に戻る

6.さらにブラウザバックで2に戻る(記事一覧ページ)

7.さらにブラウザバックで1に戻る(ホーム)

8.スマホ下部メニューを表示し「ホーム」をタップしてホームに遷移する(target=_self)

9.ホーム内見出し「新着記事一覧」から最初の記事に遷移する(target=_self)

10.遷移した記事下部のブログカードから、別のページ(カスタム投稿)に遷移する(target=_blank)

11.ブラウザバックで9に戻る

12.さらにブラウザバックで8に戻る(ホーム)

 

■テストB:記事起点で回遊してホームに戻る

1.Google検索から「石留め種類」で検索してホーム画面を表示する(検索結果1か2番目)

2.ホーム画面の上段メニュー「記事」をタップして記事一覧ページに遷移する(target=_self)

3.記事一覧ページ見出し「新着記事」から、最初の記事に遷移する(target=_self)

4.遷移した記事下部のブログカードから、別のページ(カスタム投稿)に遷移する(target=_blank)

5.ブラウザバックで3に戻る

6.さらにブラウザバックで2に戻る(記事一覧ページ)

7.さらにブラウザバックで1に戻る(石留め種類の記事)

8.スマホ下部メニューを表示し「ホーム」をタップしてホームに遷移する(target=_self)

9.ホーム内見出し「新着記事一覧」から最初の記事に遷移する(target=_self)

10.遷移した記事下部のブログカードから、別のページ(カスタム投稿)に遷移する(target=_blank)

11.ブラウザバックで9に戻る

12.さらにブラウザバックで8に戻る(ホーム)

 

 

■テストA

<android:chrome>

発生せず

 

<iphone11:Safari(ios16.3.1)>

発生せず

 

<iphone14:Safari(ios16.5.1)>

6.さらにブラウザバックで2に戻る(記事一覧ページ)で発生

7.さらにブラウザバックで1に戻る(ホーム)で発生

12.さらにブラウザバックで8に戻る(ホーム)で発生

 

 

■テストB

<android:chrome>

発生せず

 

<iphone11:Safari(ios16.3.1)>

発生せず

 

<iphone14:Safari(ios16.5.1)>

6.さらにブラウザバックで2に戻る(記事一覧ページ)

7.さらにブラウザバックで1に戻る(石留め種類の記事)

12.さらにブラウザバックで8に戻る(ホーム)

 

 

発生する条件はわかりましたが、原因と対策がわかりません。

 

よろしくお願い致します。


   
わいひら reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@robjhon さん

<input autocomplete="off"

では改善しませんでした。

robjhon さんの現在のサイトの場合は、tmp/mobile-sidebar-button.php ではなく tmp/mobile-navi-button.php の 16 行目 の <input> に autocomplete="off" を付けます。その後、「MENU」と書かれたボタンで動作を確認します。

※ robjhon さんは、autocomplete="off" が付いていない状態で動作を確認されたように思えます。autocomplete="off" がある状態の動作を知りたいです。


   
わいひら reacted
返信引用
(@robjhon)
Trusted Member Registered
結合: 4年前
投稿: 40
Topic starter  

@akira さん、直りました!

tmp/mobile-navi-button.php の 16 行目 の <input> に autocomplete="off" を付けました。

いろいろ悩んでいたのが解決しました。

ありがとうございます。

引き続きよろしくお願いいたします!


   
わいひら reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@robjhon さん

お手数をおかけしました。試していただきありがとうございます。おかげさまで対処方法が明確になりました。

>> わいひらさん

必要な箇所全ての <input> に autocomplete="off" を付ければ問題は解決すると思います。ただ、どこが必要な箇所かは調べていません。ヘッダーモバイルメニューとフッターモバイルボタンあたりの <input> が変更の対象になるとは思います。


   
わいひら and robjhon reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17168
 

ブラウザバックで影響しそうなスライドインしてくる部分にautocomplete="off"属性を追加しておきました。
https://github.com/xserver-inc/cocoon/commit/de6be302960de17593709c579e3ef8d96b1adc77
最終的に以下の部分に追加しました。

・サイドバー
・メニュー
・検索
・シェアボタン
・フォローボタン

シェアボタンとかフォローボタンは大丈夫と思いますが一応追加しておきました。
※不具合関係は持っていないので動作確認はしていないです。間違ってたら申し訳ないです。


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました