サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年4月4日 17:08
不具合・カスタマイズ対象ページのURL： https://wp-cocoon.com
相談内容：サイトがスマホ表示の時にモバイルフッターメニューを使用しているのですが、目次に戻るボタンを押すと目次に戻らず再読み込みされます トップに戻るボタンでも押すと再読み込みされます
不具合の発生手順：モバイルフッターメニューの目次へ戻るボタンやトップに戻るボタンの動作の不具合
解決のために試したこと：COCOON公式サイトでも同様なことが起きていないか確認したら 自サイトと同じことが起こっていました。
大門未知子 reacted
2023年4月4日 18:47
モバイルフッターメニュー表示の時、機種に関係なく本現象が発生します。
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.8.4
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------
●原因
モバイルメニュー「#TOP」「#TOC」ボタンのリンク先がhref="."となっている。
この為、メニュークリック後、ページがリロードされる。
●対策
href="#"では？
2023年4月4日 19:01
既に、chu-yaさんもお書きになっていますが、href="."みたいですね。
https://github.com/xserver-inc/cocoon/commit/161f2bfd716d4ec3bffd8fbf97477def60493213
ちなみに、パーマリンクが「数字ベース」の場合。
（「https: //ドメイン/archives/123」のような場合）
リンク先が、「https: //ドメイン/archives/」になってしまうので、タップすると「404」になります。
2023年4月5日 12:26
クリックしたら JavaScript で移動させているため href を書けない、けど href を書かないと Lighthouse（PageSpeed Insights）で「リンクはクロールできません」と指摘されるための変更でしょうか。
PageSpeed InsightsのSEO項目のリンククロール対策（SNSボタンやモバイルメニューボタン）
<a> ではなく <button> で作るのが 1 番いいと思います。
もしくは、JavaScript を削除して、href はきちんと書き CSS の scroll-behavior: smooth を使うかでしょうか。ただ、scroll-behavior: smooth は他のページ内リンクにも影響するのが欠点かもしれません。
この投稿は2年前ずつAkiraに変更されました
わいひら reacted
2023年4月5日 19:59
ご連絡ありがとうございます。
とりあえず一旦href="."を削除することで対応しました。
もともとbuttonで対応させようとしていたのですが、どうしてもCSSを大きく変更する必要がありCSSの優先度が変わってしまうため、ユーザーさんのカスタマイズに影響が出てしまう恐れがあったため取りやめました。
https://github.com/xserver-inc/cocoon/commit/0b8639684d71aef1c504a09f5642e47aad7c6892
僕の環境（パソコン）では問題なかったんですが確かに皆さんが書かれているようなことも起こりますね。申し訳ないです。
今後完全に対応するとしたらCSS優先度が上がるのを承知の上でするしかないかもしれません。
とはいえPageSpeed Insightsでポイントが数点下がるだけなので、実質的にはhref="."を削除が最も影響はないのかなと思います。
この投稿は2年前ずつわいひらに変更されました
ｍｋ２ reacted
2023年4月5日 20:13
ご対応いただきありがとうございます。
修正され、動作も問題ないことを確認しました。
もともとbuttonで対応させようとしていたのですが、どうしてもCSSを大きく変更する必要がありCSSの優先度が変わってしまうため、ユーザーさんのカスタマイズに影響が出てしまう恐れがあったため取りやめました。
これは確かに・・・。
最近はないですが、一昔前はモバイルフッターボタンのカスタマイズのご質問がそこそこあった記憶があります。
私も少しだけしているので、buttonに変更されるならと、修正するつもりで待ち構えていました。
影響のある方は多いかもしれないですね。
トピック主のtonchinさんにも、ご確認いただければと思います。
わいひら reacted
2023年4月5日 22:01
この部分で一旦修正は試みたのですが
https://github.com/xserver-inc/cocoon/commit/4e637e03c18331d250b9f663acc3b20a8c5ce47e
CSS優先度が変わるので一旦元に戻して
https://github.com/xserver-inc/cocoon/commit/d65071c4d910d74397c8666fb1388226cb74f871
ついhref="."で対応をしてしまった感じです。
https://github.com/xserver-inc/cocoon/commit/161f2bfd716d4ec3bffd8fbf97477def60493213
mk2さんが書かれた通り、フォーラムなどでもモバイルメニューのカスタマイズの問い合わせが多かったことから「変更して良いものか？」と悩みました…。
一旦最初のものに変更してみて、様子を見てみるというのもありかもしれませんね。
でも変更してしまったら元に戻せなくなるような気がします。
2023年4月5日 22:48
個人的には・・・（無責任な発言かもしれないですが）。
「べき論」で言えば、修正なのかもしれないです。
ただ、必ず修正しなければならないものでなければ、今のままで良いのではないかと、私は思います。
変更してしまうと、やはり影響は大きいと思います。
そして、ご利用の方々の反応も多い気がします。
その際は、仕様が変わった（あるべき姿になった）とは捉えてはもらえずに、不具合だという反応が強そうで、ちょっと怖い感じがします。
（WordPress 6.0や6.1の頃を見ても、事前に対応しているのに、それでも不具合だと(VerUpを怠っているのに)。6.2は事前に対応したんだね的な発言もあり・・・そうじゃないんですけどねぇ）
ご利用の方々に影響がないのが良いのかな・・・と思います。
（必ずそうしなければならないのであれば、別ですけれど）
2023年4月6日 01:00
<a> タグを維持される場合は、preventDefault() でブラウザの動作を停止するといいかもしれません。
例えば目次の場合、<a> タグに href 属性を書きます。
https://github.com/xserver-inc/cocoon/blob/master/tmp/mobile-toc-button.php#L24
<a href="#toc"
そして、<a> タグをクリックした時の処理に preventDefault() を追加します。
https://github.com/xserver-inc/cocoon/blob/master/javascript.js#L45-L51
$('.go-to-toc-common').click(function (event) {
event.preventDefault();
//目次へ移動する
$('body,html').animate(
{
scrollTop: $('.entry-content .toc').offset().top,
},
800
);
});
通常の <a> タグをクリックした時と同じく、URL を変更し履歴に残すのもいいかもしれません。
const addFragment = (fragment) => {
const url = new URL(location.href);
url.hash = fragment;
history.pushState(null, '', url.href);
};
$('.go-to-toc-common').click(function (event) {
event.preventDefault();
addFragment('toc');
//目次へ移動する
$('body,html').animate(
{
scrollTop: $('.entry-content .toc').offset().top,
},
800
);
});
ただ、親テーマを変更していて不思議だったのが、href="#toc" にした場合に JavaScript を何も変更せずとも正常に動いてる。preventDefault() とか不要かもしれません。
この投稿は2年前 3回ずつAkiraに変更されました
わいひら reacted
2023年4月9日 19:29
ただ、親テーマを変更していて不思議だったのが、href="#toc" にした場合に JavaScript を何も変更せずとも正常に動いてる。
試してみたら確かにそうでした。
冒頭でchu-yaさんが書かれたようにhref="#"でも動作したので変更しておきました。
https://github.com/xserver-inc/cocoon/commit/4b5914fc8468c6ff3e84e0012703c1f4077faa13
これだと別の問題があったりしたりするんだろうか。
2023年4月11日 14:50
全て href="#" にするのは、まずいと思います。
href="#" は現在のページの先頭へのリンクのため、「トップボタン」には適しています。ただ、「目次へボタン」と「コピーボタン」は、私であれば変更します。
「目次へボタン」は、#toc が適しているように思えます。
<a href="#toc"
「コピーボタン」はリンク先がないため、href は書かず role="button" を使うのはどうでしょうか？
<a role="button" tabindex="0"
一応 Lighthouse で確認したところ、これであれば指摘されませんでした。また、axe DevTools でも、これらの <a> タグに関するアクセシビリティのエラーを指摘されませんでした。
この投稿は2年前 2回ずつAkiraに変更されました
わいひら reacted
2023年4月11日 21:07
ご確認ありがとうございます。
#tocは必ずしもid="toc"がある部分に飛ぶわけではないので#にしてしまいました。
ただあってもなくても動作は同じなのと動作意図も伝わりやすいので#tocに変更しておきました。
role="button"の発想はなかったです。こちらも修正しておきました。
https://github.com/xserver-inc/cocoon/commit/04cf5b739f16a6a7168291ac8bdc26cf9a5760ca
PageSpeed Insights（Lighthouse）でもチェックしてみましたが僕の環境でも問題ありませんでした。
素晴らしい解決方法を教えてくださりありがとうございます！
2023年4月12日 12:46
role="button" を使う場合は、tabindex="0" も必要です。tabindex="0" がない場合は、tab キーで操作した時にフォーカスが当たらなくなります。
<a role="button" tabindex="0"
#tocは必ずしもid="toc"がある部分に飛ぶわけではない
申し訳ないです。ショートコードやプラグインの目次を考慮していませんでした。
であれば、Google クローラーなども考慮し、「目次へボタン」も role="button" tabindex="0" がいいかもしれません。リンク先の id="toc" がない時も href="#toc" とするのは、何か気持ち悪いです。
もしくは、Cocoon 設定 > 目次の「目次を表示する」のチェックの有無で切り替えるのもいいかもしれません。
例えば、tmp/mobile-toc-button.php をこのように変更するとかでしょうか。
<?php 省略 $link_attr = is_toc_visible() ? 'href="#toc"' : 'role="button" tabindex="0"'; ?> 省略 <a <?php echo $link_attr; ?> class="go-to-toc-common toc-menu-a menu-button-in"<?php echo $on; ?>>
この投稿は2年前ずつAkiraに変更されました
わいひら reacted
2023年4月13日 19:18
role="button" を使う場合は、tabindex="0" も必要です。
そうなんですね。追加しておきました。
https://github.com/xserver-inc/cocoon/commit/dd0fae3035ef2815800fed0a876f49a22bd58a4f
であれば、Google クローラーなども考慮し、「目次へボタン」も role="button" tabindex="0" がいいかもしれません。リンク先の id="toc" がない時も href="#toc" とするのは、何か気持ち悪いです。
そうですね。確かにそうかもしれません。
こちらも同様に変更しておきました。
ありがとうございます！
Akira reacted
2023年4月15日 19:26
こちらこそお手数おかけしました。
ありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。