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

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

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

モバイルメニューでページ内で遷移したと...
 
共有:
通知
すべてクリア

[解決済] モバイルメニューでページ内で遷移したときにスライドを自動的に閉じたい(iOS環境)

25 投稿
3 ユーザー
10 Likes
4,123 表示
(@cocoon初心者)
Active Member
結合: 5年前
投稿: 6
Topic starter  

初めまして。
この度、初めてCocoonを利用させていただいている者です。

モバイルのメニューより、同ぺージ内で遷移したいと思っているのですが、メニューをタップした際に自動的にメニュー(スライド)を閉じられないかと思い、相談させていただきました。

メニューの裏ではリンク先は移動になっているのですが、上部の×をタップしないとメニューが閉じず、こちら対応法を教えていただければ幸いです。


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

普通は添付画像のように、モバイルメニューでもページが遷移するとスライドインメニューは閉じると思います。
動作端末と、ブラウザはなんでしょうか?


   
(@cocoon初心者)
Active Member
結合: 5年前
投稿: 6
Topic starter  

わいひら様

お返事ありがとうございます。
動作端末は「iPhone7Plus」
ブラウザは「Safari」を利用しております。
PC上で、Cocoonのレスポンシブテストを行っても同じ状況になります。
(ブラウザはChromeです)

リンク先が別ぺージの場合は自動で閉じてくれるのですが
同ぺージ内での遷移ですと、×を押さない限り閉じてくれないのです。

お手数おかけして申し訳ございませんが
宜しくお願いいたします。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

こんにちは。

確かにiOSだと、同ページ遷移で閉じてくれないんですね。

でもjavascriptでボタンクローズの関数を入れるのも面倒ですね・・・。

簡単にユーザー側で出来る対策としては、リンク先を以下のようにパラメータを入れても良さそうです。

https://example.com/example.html?#example

何かしらパラメータ「?」が入ると、別ページへの遷移になりますので。

SEO的にもcanonicalがあるので重複コンテンツにならないです。


   
わいひら reacted
(@cocoon初心者)
Active Member
結合: 5年前
投稿: 6
Topic starter  

たなかま様
お返事ありがとうございます!
なるほど!それは簡単にできて助かります。
そちらの方法で対処させていただきたいと思います。

iOSがダメで、他の環境だと自動で閉じるのですね。
他の環境で試したことが無く、気づきませんでした。
ありがとうございました!


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

すいません。
僕はiOS環境を持っていないため、質問させてください。
他のテーマで同様のメニューがある場合は、iOS環境ではページ遷移した時にメニューが閉じますか?
また、以下のように?だけだとメニューが閉じますかー?
https://example.com/example.html?
修正できそうなら、しようと思うのでよろしけば教えていただければ幸いです。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

他のテーマで同様のメニューがある場合は、iOS環境ではページ遷移した時にメニューが閉じますか?

手持ちの他テーマで似たようなメニューを探したのですが、見つからないですね・・・。

また、以下のように?だけだとメニューが閉じますかー?
https://example.com/example.html?  

はい、その場合は閉じます。遷移になります。

パラメータだと、アクセス解析で計測が分かれるのが微妙ですね。

 

ちなみに

https://example.com/example.html#example

のようなフルパスだとiOSのみ閉じないですが、

#example

のような相対パスだと他の環境でも、メニューが閉じないのが再現できます。

 


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

ご確認ありがとうございます。

パラメータだと、アクセス解析で計測が分かれるのが微妙ですね。

この問題とどう折り合いをつけるかですよね。
ちなみに、単なる?ありと、?なしではアクセス解析は同一と扱ってくれるのだろうか。
ここら辺は、調べたことがなかった。

あとiOSの場合、以下のタイプのURL記述だとページ遷移するでしょうか。
//example.com/example.html


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

プロトコル省略のリンクを試しました。

//example.com/example.html

だと、ページ遷移になって、閉じました。

 

//example.com/example.html#example

だと、同ページのままで閉じませんでした。

 

ちなみに、単なる?ありと、?なしではアクセス解析は同一と扱ってくれるのだろうか。

試したことはないのですが、google analyticsだと、別ページになるかと思います。

タイトルでソートすれば良さそうですが、URLはパラメータで別れるはずです。

逆にクリック数は計測できますねw(GTMでやった方が良いと思いますが)

 

モバイルメニューはてっきりjsだと思っていたのですが、CSSで実装できるんですね。

昔、仕事でも同様の不具合があって、その時はjQueryで関数を用意したのを覚えています。

テーマにjQuery増やすのも微妙かなとは個人的に思いますので、今のままでもいいのかなと・・・。


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

試験的に、スライドインメニュー(のみ)のURLからURLスキームを取り除く処理を書いてみました。
https://github.com/yhira/cocoon/commit/9e8acf1cdacb593796ebd3dc7db6790ef7433e6c
当サイトにも適用させてみました。
当サイトのスライドインメニューは、iOS上でクリックも閉じて遷移しますでしょうか。

試したことはないのですが、google analyticsだと、別ページになるかと思います。

そうなんですね。じゃあやめたほうがよさそうですね。

モバイルメニューはてっきりjsだと思っていたのですが、CSSで実装できるんですね。

そうなんです。JavaScriptを利用すると、AMPで確か当時動かせなかったのでCSSにしました。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

試験的に、スライドインメニュー(のみ)のURLからURLスキームを取り除く処理を書いてみました。
https://github.com/yhira/cocoon/commit/9e8acf1cdacb593796ebd3dc7db6790ef7433e6c  
当サイトにも適用させてみました。
当サイトのスライドインメニューは、iOS上でクリックも閉じて遷移しますでしょうか。

僕が勘違いをしていたら申し訳ないのですが、URLスキームがなくても、(#toc1とかの)同ページ遷移は、メニューが閉じないですね。

同ページ遷移というのが、ページ内リンクのことでした。

 

URLスキームあり・なし、どちらでも以下の同ページ遷移ならメニューが閉じます。

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

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

これだと再読み込みになって、メニューが閉じるのです。

 


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

ということは、#XXXX みたいなものがあるURLがあるメニューのみで発生する症状ですか?

いずれにせよ、とりあえずGitHubは元に戻しておきました。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

ということは、#XXXX みたいなものがあるURLがあるメニューのみで発生する症状ですか?

はい。スレッドを立てられたcocoon初心者さんも、#XXXXのアンカーリンクで起こるご相談なのだと思います。


   
わいひら reacted
(@cocoon初心者)
Active Member
結合: 5年前
投稿: 6
Topic starter  

わいひら様
たなかま様

色々ご対応いただきまして有難うございます。
専門的なお話しのようでしたので、
閲覧のみにさせていただいておりました^^;;

そうです。
「#XXXX みたいなものがあるURLがあるメニューのみで発生する症状」
です。

シングルページを作りたいと思っておりましたので
同じぺージ内で移動させたかったのですが、それではスライドが閉じませんでした。
別ぺージへのリンクは問題なく、動作(自動で閉じる)しております。

説明不足で大変失礼いたしました。
宜しくお願いいたします。


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

メニューの裏ではリンク先は移動になっているのですが、

これは、アンカーリンクのことだったんですね。
違う意味でとっていました ?

アンカーリンクでの動作ということであれば、たなかまさんの書かれた方法で、手動で対応をとった方が良いのかな。Analyticsの計測も違ってしまうみたいだし。

それとも、Analytics計測が変わったとしても、iOS環境だけ以下のようなURLにしたほうがよいでしょうか。
ttps://example.com/example.html?#example
こちらもやろうと思えばできると思います。

もし希望があればお聞かせいただければと思います。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

わいひらさん、すみません。

さきほどリアルタイム計測で試したところ、「?」単体だと、analyticsの計測は、まとめられるみたいです。かなり思い込みしてました・・・。

https://example.com/example.html?

https://example.com/example.html?#example

上記、両方のパターンとも、analyticsの計測ではexample.htmlでまとめられます。

「?a」とかだと、さすがに別ページ扱いですね。

 

個人的にはレアなケースだと思うので、テーマに実装まではしなくても良いかなとは思います。


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

さきほどリアルタイム計測で試したところ、「?」単体だと、analyticsの計測は、まとめられるみたいです。

だとしたら、機能を追加しちゃっても良いかもしれませんね。
ただ、以下の形式のURLだったらどうなるんだろうと思いました。

ttps://example.com/?p=13#example

この場合は、以下のようにすればいいのかな?

ttps://example.com/?p=13&#example

ということで、試しに環境を作ってみたら、Firefoxでも多分iOSと同じ現象が再現できました^^;iOSだけの動作だと思って、試してませんでした。
https://wpsubdir.im-cocoon.net/?p=13

このページのモバイルメニューをiOSで試すとaメニューは、ページ遷移してメニューが閉じる。b,c,dメニューは、アンカーリンクで跳ぶだけという感じですよね(b,c,dはメニューが閉じない)。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

iOSで動作チェックしました。

このページのモバイルメニューをiOSで試すとaメニューは、ページ遷移してメニューが閉じる。b,c,dメニューは、アンカーリンクで跳ぶだけという感じですよね(b,c,dはメニューが閉じない)。

はい、その通りになっています。

基本のパーマリンクとカスタムのパーマリンクで処理が分岐するのは面倒ですね・・・。


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

一応、以下の動作になるような処理をテスト的に書いてみました。

ttps://example.com/example.html#example
ttps://example.com/?p=13#example

ttps://example.com/example.html?#example
ttps://example.com/?p=13&#example

コードがこちら。
https://github.com/yhira/cocoon/commit/45d943c0cc1d9c13c47d68d6aab2e7ec52f82201

ただ今のは、移動先のページでは以下のように変換する処理を書く必要がありますね。
ttps://example.com/example.html?#example
ttps://example.com/?p=13&#example

ttps://example.com/example.html#example
ttps://example.com/?p=13#example

今回、レアケースとして手動対応にするか、それとも処理を追加するか、ちょっと考えてみようと思います。


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

めちゃくちゃ勉強になります。

コードの公開ありがとうございます!


   
(@cocoon初心者)
Active Member
結合: 5年前
投稿: 6
Topic starter  

わいひら様

たなかま様

ありがとうございます!

ひとつ教えてください。

「移動先のページでは以下のように変換する処理を書く」

というのはどういう意味なのでしょうか?

勉強不足で、大変申し訳ありません?


   
たなかま
(@tanakama)
Prominent Member Registered
結合: 6年前
投稿: 600
 

「移動先のページでは以下のように変換する処理を書く」

想像ですが、テーマのテンプレート側で、移動した後にリダイレクトなどでURLを戻すってことではないでしょうか?(わいひらさん、違っていたらごめんなさい)

リンクしたときにパラメータが残ってると微妙なので。

ユーザー側で何かしないと、ってことではなさそうです。


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

移動先のページでは以下のように変換する処理を書く

移動先でまたモバイルメニューを開いて、アンカーリンクに飛ぼうとすると、今度また同様の動作になるので、移動先でまた変更用の処理を書く必要があるということです。

ただ、今回AMPのことを考えて、URLの変更で何とかしようとしました。
けれど、よくよく考えたらAMPページではモバイルボタンが表示されない仕様に以前変更したので、AMPのことを考慮する必要はありませんでした^^;
なのでjQueryで処理してしまうことにしました。
対応版を以下にアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
動作としては、以下の条件でメニューが閉じるようになっています。

  • 現在のページとリンク先のページが同じページのURL
  • URLにアンカーリンクに飛ぶ#xxxxといったものがついている

https://github.com/yhira/cocoon/commit/1c1f9389aa978449cbdb837684cd7776b1667f03


   
(@cocoon)
Active Member
結合: 5年前
投稿: 6
Topic starter  

わいひら様
たなかま様

ご対応いただきましてありがとうございました^^

リンクの書き方を変更し、更新いただいた新しいファイルに差し替えましたところ
問題なく動いております。

有難うございました!


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

動作確認ありがとうございます。


   
共有:

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

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

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

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

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

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

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

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