「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

モバイルサイドバーの開閉について
 
共有:
通知
すべてクリア

[解決済] モバイルサイドバーの開閉について

21 投稿
4 ユーザー
14 Likes
637 表示
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  

モバイルサイドバーの開閉が少しおかしいような気がします。


サイドバーの検索窓を選択した途端に、サイドバーが閉じてしまい、入力ができない感じです。
(日本語入力のキーボードが出てきた瞬間に閉じてしまう)

以下は、Android実機で、日本語入力は「Gboard」です。
(他の日本語入力(ATOK)でも同様の動作でした)

 
 
デベロッパーツールでは、日本語入力が出てきませんので、再現しませんでした。
 

 
 
同一ページ内のリンクを選択した場合に、サイドバーが閉じないようです。
(リンク先が別ページであれば、閉じるみたいです)
 
以下は、デベロッパーツールのものですが、Android実機でも同様でした。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  

検索窓の件ですが、先程添付したものは、Android12のものです。

Android10(別機種)の端末でも確認しましたが、同様に検索窓を選択した途端に、サイドバーは閉じてしまいます。

古い機種ですので、少し反応が遅いですが、検索窓選択後に日本語入力が出てきて、サイドバーが閉じてしまうという動作は同じです。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

分かる範囲で回答します。

●回答①
iPhoneXr、Safariでは本現象は発生せず。
サイドバーが閉じる要因は、ウィンドウサイズが変更される事に起因します。

https://wp-cocoon.com/community/postid/65446/

●回答②
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.0
カテゴリ数:19
タグ数:146
ユーザー数:1
----------------------------------------------
以前から、同一ページ内のアンカーにジャンプするので、フッターモバイルボタン「サイドバー」は閉じません。
サイドバーにウィジェット「目次」を配置すれば分かります。
もしクリック時、閉じるよう仕様変更するなら以下に追加が必要です。

https://github.com/xserver-inc/cocoon/blob/4263e1f7d94ab6372be51ea23b1f4efe881ce5ec/javascript.js#L201

/* リンクをクリックしたら、サイドバーを閉じる */
$('a').click(function() {
  $('#sidebar-menu-input').prop('checked', false);
});

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  
投稿者:: @chu-ya

サイドバーが閉じる要因は、ウィンドウサイズが変更される事に起因します。

だとすると、Androidでは、入力ができなくなってしまいます。

投稿者:: @chu-ya

以前から、同一ページ内のアンカーにジャンプするので、フッターモバイルボタン「サイドバー」は閉じません。

いえ、以前は少なくとも、コメント欄は閉じていました。

デベロッパーツール上でも、閉じます。
(実機でも同様です。)

 
 
「同一ページ上は、これからは閉じないのが仕様」ということも、有りだとは思います。
 
ただ、入力ができないのは厳しい気がします。

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 
投稿者:: @mk2_mk2

いえ、以前は少なくとも、コメント欄は閉じていました。

確認しました。

●補足
ページのURLが含まれるか否かで動作が違う。

  • 目次、#toc1
  • コメント、ページURL+#comment-40

https://github.com/xserver-inc/cocoon/blob/4263e1f7d94ab6372be51ea23b1f4efe881ce5ec/javascript.js#L153-L162

●原因②
フッターモバイルボタン「サイドバー」のメニューリンクがクリックされたか上記の部分で判定している。

Ver2.5.1で動的にPCサイドバーをモバイルサイドバー(#slide-in-sidebar)とした。
「サイドバー」をクリックしないとサイドバー#slide-in-sidebarは存在しない
この為、上記の部分が動作せず、サイドバーが開いたままになる。

●対策
以下の部分に以下の部分を移動する。

//モバイルサイドバーをクリックしたら閉じる
drawerCloser('#slide-in-sidebar a', '#sidebar-menu-input');

https://github.com/xserver-inc/cocoon/blob/4263e1f7d94ab6372be51ea23b1f4efe881ce5ec/javascript.js#L194


   
わいひら reacted
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1062
 

①(検索窓を選択するとサイドバーが閉じる)について私も再現確認してみました。

Android10 / Chromeでは再現し、
iPhone13 / Safariでは再現しませんでした。

Androidだけの症状っぽいですね。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 
投稿者:: @haruinoue

Android10 / Chromeでは再現し

Android持っておらず。
ポイントはWindow:resizeイベントが起きているかですね...


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  

Androidの開発環境がある訳ではありませんので、細かいことは分からないです。

ただ、検索窓の件は、Androidで発生することは間違いなさそうですね。

はるさん、いつもありがとうございます。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

先の動作を見ると、下から入力パッドが出ており。
ウィンドウの高さが変化しているなら、以下の部分を置換えれば分かるかと。
幅が変わった時のみサイドバーを閉じます。

  //リサイズした時はサイドバーを元に戻す
  var vw = window.innerWidth;
  $(window).resize(function () {
    if (vw != window.innerWidth) {
      $('#sidebar-menu-input').prop('checked', false).change();
    }
    vw = window.innerWidth;
  });

https://github.com/xserver-inc/cocoon/blob/4263e1f7d94ab6372be51ea23b1f4efe881ce5ec/javascript.js#L202-L205


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  

chu-yaさん

ありがとうございます。

既に手元にはスマホしかなく・・・。

私のサーバー環境は、まだCocoonを最新にバージョンアップしていないこともあり、明日確認させていただきます。

しかし、明日もしばらくスマホしかない状態が続きますので、夜遅めの確認になると思います。

(先にどなたかが、ご確認くださると嬉しい・・・)


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  

検索窓の件。

投稿者:: @chu-ya

幅が変わった時のみサイドバーを閉じます。

  //リサイズした時はサイドバーを元に戻す
  var vw = window.innerWidth;
  $(window).resize(function () {
    if (vw != window.innerWidth) {
      $('#sidebar-menu-input').prop('checked', false).change();
    }
    vw = window.innerWidth;

上記chu-yaさんご提示のコードで、解消されたように思います。

(サーバー上に新規環境を作って、Cocoonも新規インストール、上記コードを上書いただけの環境で確認しました。あまり他の部分の確認はしていません)


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

サイドバーのクリックに関しては、chu-yaさんのコードをまま使わせていただきました。
chu-yaさんありがとうございます!
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

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


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

こちらのサイドバーの検索フォームの不具合ですが、

トップページのWordPressデフォルトの検索フォームでも同様の現象が起きますか?
https://wp-cocoon.com/


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  
投稿者:: @yhira

トップページのWordPressデフォルトの検索フォームでも同様の現象が起きますか?
https://wp-cocoon.com/

はい、トップページでも発生しますね。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 
投稿者:: @mk2_mk2

はい、トップページでも発生しますね。

Ver2.5.1.1でも対応不十分と言う事ですか?(YES/NO)
---
以下ですが、slide-in-sidebarの動作なので、検索窓とは関係ないです。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  
投稿者:: @chu-ya

Ver2.5.1.1でも対応不十分と言う事ですか?(YES/NO)

いえ、そういうことではないと思います。

わいひらさんが何を気になさったのかは分かりませんけれど。

トップページと、フォーラムのサイドバーの検索窓は、違うものですので、その辺り?


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

@yhira さん

先のmk2さんの指摘の以下の部分の移動が漏れています。
確認願います。

//モバイルサイドバーをクリックしたら閉じる
drawerCloser('#slide-in-sidebar a', '#sidebar-menu-input');

 


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  
投稿者:: @chu-ya

以下ですが、slide-in-sidebarの動作なので、検索窓とは関係ないです。

はい、理解しています。

私が確認のためにサーバーに作った環境では、Cocoon公式サイトで言えば、トップページにある検索窓と同じものを設置して確認しました。

フォーラムの検索窓は、設置がちょっと面倒くさいので、私のテスト環境では設置していません。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 
投稿者:: @mk2_mk2

トップページと、フォーラムのサイドバーの検索窓は、違うものですので、その辺り?

報告があったのはGoogle検索の方だったので、どっちでも同じなのかなと単に思いました。

投稿者:: @chu-ya

先のmk2さんの指摘の以下の部分の移動が漏れています。
確認願います。

実装忘れ恐れ入ります。
GitHubと当サイトに適用しておきました。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
Topic starter  

ご対応いただき、ありがとうございます。

Cocoon公式サイトにて確認させていただきました。

Android実機でも問題ないと思います。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16312
 

ご確認いただきありがとうございます!


   
共有:

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

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

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

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

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

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

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

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