サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年6月28日 22:03
素晴らしいテーマCocoonには本当にお世話になっております。
以下、追加機能のリクエストになります。
ヘッダー、フッター双方で利用できるモバイルメニューの検索ボックスなのですが、検索ボックスボタンアイコンをタップした時点で入力待ちになるような挙動にはできませんでしょうか？
現状では
1.検索ボタンアイコンをタップ
2.表示された検索ボックスをタップ
3.検索文字列を入力
の3ステップが必要ですが、2ステップを飛ばしてすぐに文字入力できるようになると検索機能の使い勝手が向上するのではと考えております。
ぜひご検討いただけたら幸いです。
2019年6月29日 23:00
一応、jQueryを用いて実装してみました。
ただ、AMPページでは定まったスクリプトしか使用できないので、現状のままだと思います。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
Topic starter
2019年6月30日 15:16
迅速な対応ありがとうございます。
早速試してみましたが理想通りの挙動です。
ampページで機能しないのは残念ですがぜひ正規のアップデート版でも採用していただけたら幸いです。
2019年6月30日 17:13
わいひらさん
Cocoonのトップページで試しました。
iPhoneだとinputにフォーカスした時、ズームされて表示がおかしくなります(添付画像)
この現象はフォントサイズが16px未満の時に発生するので、#search-menu-content .search-editに16px以上のフォントサイズを指定すると恐らく改善されます。
「iphone input フォーカス」とかで検索すると色々出てくると思います！
わいひら reacted
2019年6月30日 19:35
大きなお世話ですが、AMP で実装する基本的な方法はこんな感じです。
①検索フォームの input タグに id を付ける（例：id="s" と付けるとします）。
②検索アイコンの要素に on 属性を付ける。
https://notepad.pw/share/qjz1ew09n
on 属性の focus で「タップをすると id が s の要素にフォーカスする」挙動をします。
参考： https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events#*-(all-elements)
role 属性と tabindex 属性は、button タグ以外で on 属性を付ける際に必須です。ないと AMP エラーが出ます。
ただ、実際に Cocoon で試したわけではありません。また、input タグにただ単に id を付けてしまっては、id の重複が出るサイトが続出しそうな気がします。
それに、検索アイコンの部分も、PHP での置換か、条件分岐で一般ページと AMP ページとで変えるかしないといけないので面倒そうです。
わいひら reacted
2019年6月30日 20:12
草村さん。ありがとうございます！
iPhoneにそんな挙動があるのですね^^;
やはり、iPhoneは手ごわい…。
こんな感じで修正してみました。
https://github.com/yhira/cocoon/commit/9049007baebd56208cda83606e641134122f8300
修正版はこちら。
https://github.com/yhira/cocoon
もしよろしければ、ご確認いただければ幸いです。
2019年6月30日 20:13
Akiraさんありがとうございます！
AMPでも、もういろんなことが結構できるんですね。
ちょっと一筋縄ではいかないかもしれませんが、この後ちょっと試してみようと思います。
2019年7月1日 03:54
わいひらさん
テスト環境で現在のCocoonと同じスキン「Bizarre-food（グリーンソバ）」を適用して試しましたが、改善されていません。
このスキンの場合フォームにフォントサイズが指定されているのでそちらが優先されるようです。
子テーマのstyle.cssに以下を追加して、検索ボタンをタッチしたら添付画像のような表示になりました。
#search-menu-content .search-edit {
font-size: 16px;
}
なので、16pxが適用されればズームされる現象は改善されるかと思います！
わいひら reacted
2019年7月1日 20:20
あー！確かに。スキンのことまで考えていませんでした。
少しでも、AMPのCSSサイズを削減したくてなるべく少ない記述にしたのが、良くなかったですね^^;
1.8.7.2で書き込んでいただいたコードで修正しておきました。
草村 reacted
2019年7月1日 20:26
AMP対応に関しては、昨日あらためてコードを見てみたらヘッダーモバイルボタンを実装した際に、AMPページのモバイルボタンを表示しないようにしていたのでした^^;
なので、現在の仕様では実装する必要がありませんでした。。
モバイルボタンに、スクリプトによる出し入れ機能を付けた時、「複雑化したモバイルボタンを今後コストをかけてAMP対応する必要があるのか？」と思ったことをきっかけに、「そもそもAMPページにモバイルボタンは必要なのか？」ということになり、なくしたのを失念しておりました。
申しわけありません。
2019年7月1日 22:55
わいひらさん
1.8.7.2にアップデートして試したら、ズームは改善され前回添付した画像と同じ状態になりました！
iPhoneでは検索ボタンタップと同時にスクロールも起きるので画面サイズの違う端末で見え方も変わってくるかも？と思い、ついでなので手元にある端末で確認しました。
iPhone8/iPhone6/iPad pro2 iOS12.x系
→問題なしでした。
iPad mini/iPad2/iPod touch5 iOS9.3.5
→フォームが画面外に表示されました。
ただこちらは、かなり古くアップデートも不可能な端末です。
iOS10～11は不明ですが、最新iOS12では大丈夫という感じでした。
参考になれば幸いです。
わいひら reacted
2019年7月2日 20:08
動作確認ありがとうございます！
古いバージョンでは、不具合が出たままなんですね。
端末がiPhoneかどうかを条件分岐して、スクリプトを適用しない処理を追加したほうがいいんだろうか。
とりあえず、ここは現状のまま様子見をしようと思います。
このトピックは、オープンにしておいて、問題があるようなら修正しようと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。