サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年7月28日 16:20
現在ハンバーガーメニュー内にページ内遷移の設定を入れております。
------
外観＞メニュ
#sample
------
SP時にハンバーガーメニューを開き、リンクをクリックするとバックの方で遷移はしているのですが
ハンバーガーメニューが開いたままになっております。
こちらをリンクをクリックした際に遷移とともに閉じたいのですがどのようにしたらいいでしょうか？
下記記事の内容がとても近いと思ったのですが、おそらく解決方法が削除となり
参考にすることができませんでした。
また
「サイトURL?#sample」も試しましたが、こちらだと一度画面が切り替わり遷移すると言う感じで
もう少しスムーズにできればと思います。
イメージです↓
This topic was modified 1年前 by lolyu-mi
Topic starter
2023年7月28日 17:14
カスタムリンクの部分に
「#sample」と入力しました
また記載いただいた「https:～#sample」ですとイメージ通りの動きになりました。
（リンクを押すと遷移し、ハンバーガーメニューは閉じる）
ありがとうございます。
2023年7月28日 17:38
@lolyu-mi さん
「#sample」と入力される場合は、JavaScript でメニューを閉じればいいように思えます。コードは、子テーマの javascript.js に追加します。
const targetMenus = document.querySelectorAll('.menu-drawer [href^="#"]');
const naviMenuInput = document.getElementById('navi-menu-input');
targetMenus.forEach((item) => {
item.addEventListener('click', () => {
naviMenuInput.checked = false;
});
});
わいひら reacted
2023年7月28日 17:43
@akira さん
母体に問題があるのでは？と思います。
ここで言われている「ハンバーガーメニュー」の定義が、Cocoonモバイル時の、メニュー(グローバル) or スライドインメニューを示すなら。
●現象
例えば、ウィジェット[C]目次をサイドバーに配置した。
モバイル時、スラインドインメニューで、サイドバーに配置した目次が表示される。
この時、目次をクリックすると、該当の見出しにページ移動するが、スライドインメニューは開いたままとなる。
●原因
目次のリンクは#toc1...となり、URLが無い。
この為、163行目のindexOutがfalseになる。
●対策
条件が不要で、単にクリックしたら、propでメニューを閉じればいいのでは？？
リンクをクリックして、メニューを開いている必要は、無いと思いますが。
わいひら reacted
2023年7月28日 19:15
条件が不要で、単にクリックしたら、propでメニューを閉じればいいのでは？？
(href.indexOf(url) != -1) &&に関してはこちらで一気に実装しているので、＃だけだと何か問題があって実装した（後から付け加えた）わけではなさそうです。
https://github.com/xserver-inc/cocoon/commit/1c1f9389aa978449cbdb837684cd7776b1667f03
#～ だけで反応するように修正しておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2023年7月28日 20:00
二重投稿になったので削除しました。
2023年7月28日 20:04
@yhira さん
メニューが閉じる条件は以下の2つ。
- ページが、リロードされる。
- 今回、#の場合はリロードされないので、メニューを閉じるように修正した。
しかし、target=_blankの時、（ページリロードとならないので）メニューは開いたままとなる。
この為、条件不要で、リンクをクリックすれば、メニューが閉じで良いのでは？
以前の修正ですが、ソースからの推測ですが。
.menu-drawerだけでなく、スライドメニューにも対応した。
この為、関数drawerCloserを新設。←元々、条件考慮が足りないのでは？
2023年7月29日 23:37
そうですね。
GitHubのファイルを修正しておきました。
2023年7月30日 00:13
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.3.4
カテゴリー数：6
タグ数：15
ユーザー数：1
----------------------------------------------
モバイル時、以下のリンクをクリックした際、メニューが閉じる事を確認しました。
- メニュー(.menu-drawer)
- スラインドインメニュー(#slide-in-sidebar)
わいひら reacted
2023年7月30日 18:25
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。