【備忘録】WordPressのナビゲーションバーをフローティングメニューにするには

とりあえず動くようにするには程度です。
CSSやJavaScriptは素人なので、微妙なところで調整できてない可能性が大です。
ですので構築する上で参考にするのはいいのですが、鵜呑みにはしないでください。

ただ出来るだけ汎用性のあるコードにしたいので、CSS不要のJavaScriptのみで制御する方法を書き出しておきます。

フローティングメニューとは

スクロールしたときに追尾してくるヤツですよ。
サイドメニューはいろいろとあるみたいですけど、ナビゲーションバーは見かけないので、やってみることにしました。

当然プラグイン化だよね？

筆者はデザイナーではなく、プログラマーに属します。
どうせやるなら、ガリガリとテーマに書くんじゃなくて、プラグインでやっちゃえない？

と思いました。

フローティングメニューの構成を知らねば！

フローティングメニューはシステムから考えると、

• idで括られた要素をスクロールする

ってことです。

ナビゲーションバーでそれを行うためには、ページ全体のidと、フローティングメニューにしたいエリアのidをしった上で、フローティングにしたいエリアについては、positionをabsoluteにしとかないといけないと。でtopは絶対に必要。

ナビゲーションバー全体のidはなんだ！？

ってのが大事になるのです。
でもそれってWordPressの公式テーマでさえ、バラバラです。

• Twenty ElevenとTwenty Twelve
  　全体: page
  　グローバルナビゲーション: access
• Twenty Thirteen
  　全体: page
  　グローバルナビゲーション: navbar

ってな感じですよ。

JavaScriptだけで制御するプラグインを作ってみたよ

最初、CSSにposition:absolute を入れたり、topを入れたりしてたんだけど、
そもそも、ナビゲーションバーのtop位置ってわからん！！調べるの面倒（いや要素の検証とかで簡単に調べることできるけど）、汎用性ない！！と思いました。

とりあえず何か自動生成できないのって思ったんですが、JavaScriptからそれらの値を探しだして自動設定できるじゃないですか！！

ならやってみないといけないってことで、実質１日ぐらいかけてゴニョゴニョと

• https://github.com/kimipooh/wp-floating-menu-framework

なものを作ってみました。

まぁCSSとかJavaScriptは素人かつデザインやレイアウトなんて「考えたくなーい」な人間がちょっと興味が出たのでやってみたって感じです。

だからJavaScriptコードは洗練されていないと思います。そのあたりはreadmeにも書きましたが、直してもらったらいいと思います。

もし公式プラグイン化するなら、jsファイルは名前変更で有効化されるようにしとかないといけませんね。アップグレードしたときにjsファイルが上書きされちゃいますし。

まぁそのあたりも盛り込んで置きましたけど....詳細は、readmeJ.txtでも読んでくださいな。