最終更新日：2022年8月17日
ついついPCからの確認のみで『これでよし！』と思っていましたが、スマホやタブレットから見るとハンバーガーメニューが動作しなくなっているっぽいですね。
調査するのでちょっと待っていてください……。
はー、試行錯誤結果を書こうと続きを読むを作ろうとして、“続き”と“続きを読む”の2種があることに気づく。“続きを読む”を選ぶとリンクだけぽっと出てくる。このリンク、いじれない。一応記事ページには飛ぶらしいが……？ 検索しても“続き”と“続きを読む”の違いは出てこないし、何なんでしょうね……。
まぁそれはさておき、試行錯誤の結果。
1.検索フォームがナビゲーションに入っていないからハンバーガーメニューが動作しない
まずはこれ。
どうやら検索フォームをナビゲーションメニュー（上のメニュー）に入れないと、ハンバーガーメニューが動作しなくなるみたい。
というわけで、ナビゲーションメニュー（<nav>タグ内）に入れた。
2.ハンバーガーメニューを選択すると検索フォームが邪魔な位置に出る
ハンバーガーメニューは動作するようになりました。
しかし、いざハンバーガーメニューを選択すると、検索フォームが大変邪魔な位置に出現します。
具体的には、ハンバーガーの三本線と重なってしまう。
検索フォームはナビゲーションには入ったものの、メニューには入っていないからこういうことが起こるようだ。
じゃあもうメニューに検索フォームを……。
3.検索フォームをメニューに追加する
フックってのを使って、メニューに検索フォームをくっつけるみたいなことしました（フックって初めて触れるワードなんだけど、認識これで合ってるかな……）
結果、お問い合わせの隣に検索フォームが出ました。
しかし、なんかバランス悪いなぁ……。
メニューを二段に分けて、一段目検索フォーム、二段目普通のメニューにしたい……。
検索しても、
トップページ
HOME
↑こーゆー二段表示にするっていうページしか出てこないし。
そうじゃないんだよ……。普通にメニューを二段に分けたいんだよ……。
で、そんなことを考えて、『せめてフォームをピンクにすればまとまりよくならないだろうか……』なんて考えて、フッターにも検索フォームがくっついていることに気づく。
いらん！！（下のプライバシーポリシー・免責事項のすぐ右隣に検索フォーム出てきちゃうのね）
4.フッターから検索フォームを削除する（ヘッダーメニューにのみ検索フォームを表示する）
ifで条件書いてやると、ヘッダーメニューにのみ検索フォームが表示されるようになりました。
しかし、やはりちょっとバランスがよろしくない……。
フックって、必ず後ろについちゃうものなのかな……？
5.プラグインを入れた（タグ追加は諦めた）
色々調べている中で気づいたんだけど、検索フォームってウィジェットだけじゃなく、固定ページなんかにも追加できるという情報が。
で、これも色々調べていて気づいたんだけど、クリックでぱっと検索フォームに切り替わる（でも別にページが切り替わるわけではない）作りもあったのね。
これを何て言うのかぱっと思いつかなかったんだけど、ポップアップってやつですね。実際にポップアップなのかはともかく、ポップアップという言葉を思いついた私は、ポップアップで検索フォームが出せないか試してみることにした。
Popup Makerというプラグインを入れて、試してみると、ようやくすっきり検索フォームを実装することができました……！！ ハンバーガーメニューでもまぁちょっと微妙かもしれないがもうよし！（ハンバーガーではアイコンより文字の方がわかりやすい気がするけどね）
もうめちゃくちゃに書き殴ったタグ群いらんな……。
結局、テーマいじりを全くしなくて済みました。
Popup Makerはクラシックエディターなので、一見検索フォームを出すものが見当たりません。
適当に固定ページや投稿ページに行って、
↑この“検索”ってやつ出して、コードエディターからコード調べます。
そして、Popup Makerにそのコード貼り付け。もちろんビジュアルじゃなくてテキストの方から貼り付けるんだぞ。
これでだいたいよし。
あとはCookieを有効にせず、閉じるボタンでない場所を押しても閉じるようにしたり、色変えたり……。
準備ができたら、メニューのカスタムリンクを追加する。
最初は選べないかもしれないが、のちに編集しようと思うとPopup Makerで作ったポップアップへのリンクも作れるようになっている。
“検索”って文字だと、普通にページが切り替わる他のメニューと差別化できず不親切に感じたため、虫めがねのアイコンにしました。これはEASELあちこち見てて気づいたんですが、EASELではFont Awesomeってのを使っているんですね。
Font Awesomeを使おうと思って
とりあえずFont Awesomeのそれをコピペして出した。
しかし、Font Awesomeのサイトを見ると、会員登録が必要とのこと。以前はそういうの不要だったそうですが、会員登録が必要になったらしい。
えーめんどくさいなー。テーマが使ってるならテーマ利用者が使ってもいいんじゃね？ てか会員登録必要なのになんで使えるんだ？ 疑問は尽きないが、英語のためよくわからない。
まぁでも便利なシロモノだし、登録すればいいか……なんて思って、その前に規約をきちんと読もうと、Google先生に翻訳してもらいながら読んでいたら、まぁよくある“公序良俗に違反するサイトでは使わないで”的なことが書いてあるっぽいのですよ。
これ、日本ならまだ二次元サイトはOKだったりNGだったり曖昧な受け取り方がされるんですが、海外となるとそうもいかないんですわ。
商用はよくてもアダルトサイトで使っていいのか……、そういうことは書かれていないので、他のいい素材を探すことにしました。
ICOOON MONOに辿り着く
そういえば学校の課題でもお世話になったサイトでした。
ここ、日本語サイトですし、ライセンスもかなりゆるいんですよね。早い話、再配布と直リンク以外は禁止していないのです。（一応使うならちゃんと読んでね）
SVGも配布しているので、もうここのアイコンを使おう！
SVGの使い方に苦戦する
まず、虫めがねのアイコンをSVG形式でダウンロードしました。
WordPressにアップロードしようとすると、エラー吐きやがります。
PHP追加するとアップロードできるという噂がありますが、今はできません。もうさ、Google先生、古い記事は下げて？
プラグインを入れると、SVGがアップロードでき、メディアファイルとして扱えるようになります。新しいWordPressではプラグインを入れないとSVGのアップはできないそうです。
しかし、“SVGをアップロードする＝SVGを画像として使う”のですね。
こうなると、でかいアイコンがどどーんと出てしまう。サイズの調整はできるけど、カーソルを乗せて色変更とかができない。
で、CSSとかでこいつを調整するにはどうすればいいのか調べていくと、インラインSVGにすればよいとのこと。
HTML5から、インラインSVGというものが使えるようになったそうです。
今まではSVGはアップロードして画像として使うしかなかったようですが（多分）、HTMLタグとして直接SVGが記述できるようになったそうな。
よくわからんが、加工は禁止されていないのと、SVGを配布している以上、ICOOON MONOさんの素材をタグとしてサイトに表示しちゃっても問題ないだろう。
SVGをテキストファイルで開いてコピー→メニューのカスタムリンクのテキストにペースト
これで、SVGをアップロードしなくても虫めがねを表示することができました。
さて、ではCSSで色変更。
しかし、これに大変苦戦する。SVGだから変更できるはずなのに！？
色々調べると、<style>とか色情報が書いてあるところを削除する必要がありました。これをしないと、色変更できません。
そして、ようやくできました。ふへー。
結局SVG関連でプラグインを追加したり、PHPを追加したりということは必要なかったです。
パソコンから見ると、虫めがねにカーソル乗せると色が変わるけど、虫めがねからちょっと外れた場所も有効リンクになってるー。……まぁ、もうこれくらいいいやいいや。
ほんっとぐっちゃぐっちゃの日記ですが、自分用メモなのでこれでいいのです……。
もし検索からこの記事に飛んできた人、わかりづらいことが書いてあってごめんね……。