ここでは、WordPressでよく使うJavaScriptのコードについて解説します。BMBではjsのコードはjs階層直下のgeneral.jsなどのファイルにまとめて書いています。ここではjQueryを読み込んでいることを前提としています。

クリック(.click)による起動

header.php(html)

general.js(JavaScript)

jsは基本的に、ブラウザで表示している最中は常に処理のきっかけを待っている状態です。だいたいのJSのコーディングでは、まずそのきっかけ(=フック)が何なのかを決めて記載する必要があります。ここで紹介する.clickもそのフックのうちの一つです。

上記の例ではハンバーガーメニューのボタンを押したときの動きを定義しています。このサイトのスマホ版で実際にクリックして動きを確認できます。
まずHTML側では、jsと連携させるために、大抵はIDやクラス名を付与します。上記の例では#humBtn,#humBox,#humBodyがそれにあたります。
次にjs側では、#humBtnをクリックしたときに、任意の処理を実行することを記載します。ここで「#humBtnをクリックしたとき...を実行する」というフックを決めているのが、jsの3-8行目の「$('#humBtn').click(function(){...});」の部分です。ここでは、クラスを付与/除去するような簡単な処理を実行しています（この部分は後述します）が、複雑な動きまではここでは書いていません。というのも見た目にかかわる複雑な処理は、基本的にcssで記載することが推奨されているので、jsの処理はシンプルになりがちです。

スクロール(.scroll)による起動

footer.php(html)

general.js(JavaScript)

.scrollというのもjsのフックとして用意されており、ページ内をスクロールした際にここに記載した処理が実行されます。ここで例として「ページトップに戻るボタン」を挙げています。実際の動きはこのサイトの「ページトップに戻るボタン」（ロケットが描かれているボタン）を参照してください。

ここの例でクリックの例と書き方が少し違う点として、クラスで指定したHTML要素を一度変数に代入しています。jsの3-5行目のあたりで代入し、16行目などで、その変数を利用しています。同じHTML要素を複数回使う場合などは変数にした方が便利です。

さて、このjs内で実際に「サイトをスクロールしたとき...を実行する」と書かれている場所は、jsの8-25行目の「$(window).scroll(function(e){...});」の部分です。クリックの時より中の処理が複雑ですが、フック起動の基本的な書き方はどのフックもだいたい同じです。複雑に見えている他の部分は、サイトの高さとPCの画面の高さを合わせて計算し、ページトップボタンの位置がいい感じになるようにするために記載されています。

ページ読込完了時(window.onload)の起動

header.php(html)

general.js(JavaScript)

ページ読み込み終了時の処理は「window.onload = function() {...}」と記載します。「window.onload」に処理(関数)を代入するような書き方をします。window.onloadのように処理が一回きりで、常に処理を待っている必要がないような処理についてはこのような書き方になる場合があります。ここの処理は、このサイトのトップページで「読み込み中」の表示を解除する際に使っています。

クラスの動的な制御(.addClass, .removeClass, .toggleClass)

header.php(html)

general.js(JavaScript)

見た目に関わる基本的な処理はCSSに記載するのが推奨されているため、動的に見た目を変える際はjsでクラスを動的に付与し、そのクラスによる挙動はcssに記載するというパターンが多いです。その際にjsで実行するのが、.addClass, .removeClass, .toggleClassといった処理になります(上記例のjsの6,8行目)。ここの実際の動きは、このサイトのPC版のG-navi部分含むコンテナが、スクロールによって、白いエリアからwidth100%の黒い帯に変化する動きがそれにあたります。

上記例のjsでは、サイトのスクロール数が300を超えたときに「open」というクラスを付与し(6行目)、超えてないときに「open」というクラスを除去します(8行目)。

同一インデックスの二つのHTML要素を同時に制御(.index + .eq)

index.php(html)

general.js(JavaScript)

タブ切り替えの動きを実装したいときは、上記の例のようなコードで実装できます。実際の動きはこのサイトのタブ切り替えの箇所で確認できます。

このjsはtabHeadのliをクリックすることで起動します(jsの3行目)。jsの6-8行目で、すでについていたタブの動き用のクラスを除去し、クリックしたliにクラスを付与しています。これだけだと、クリックしたtabHeadのliに連動したtabBodyのliに、クラスがまだつけられません。

tabHeadのliとtabBodyのliのクラスを連動させるための記述がjsの9-12行目の記述になります。10行目でまず、クリックしたtabHeadのliのインデックス番号を取得し(= .index())、変数に格納します。インデックス番号とは「何番目のliか」についての数値です。次に12行目でtabBodyのli（ここではtab-ctrlと記載していますが、同様の意味です）に対し、先ほどの変数の値と同じインデックス番号のものに限り(= .eq(index))、クラスを付与する処理を記述しています。これで、対応するtabHeadのliとtabBodyのliについて、連動した処理が実行できるようになっています。

ユーザエージェントによって、動的にHTMLを書き換え

ユーザエージェントとは、サイト訪問者がWEBサーバアクセス時に渡す、使用しているブラウザやOSについての情報のことです。このユーザエージェントを見ることで、iPhoneを使って見ているとか、chromeで見ているといったことがわかるのですが、jsでもこの情報を利用することができます。上記例ではif文の条件内で、ユーザエージェントの情報に基づいた評価を行っています。この例では、主にスマホに使われるユーザエージェント情報を用いて条件分岐することで、「スマホでアクセスしてきたとき...の処理を実行する」といった条件分岐を実装しています。ここでは、sp.css等のlinkタグをHTMLに追記する処理が書かれています。jsでsp.css等のlinkタグをHTMLに追記するのはWordPressが使えないような静的なサイトや、is_mobile()といったPHPの独自関数が使えない環境でよく使います。