【jQuery】URLによって条件分岐させる方法

ページによって背景色変えたりしたいけど、WordPressじゃなくても条件分岐させられる？

例えばヘッダーの背景色を以下のようにしたいとします。

トップページ → 白
お問い合わせページ → 灰色
上記以外 → 黒

WordPressの場合は各ページのテンプレートで条件分岐できます（詳しくは以下の記事を参照下さい）

jQueryを使ってURLによって条件分岐させる方法

今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

条件にマッチしたページだけ処理を書く

例えば以下の条件だとします。

サイトのURLは『https://sample.jp/』
お問い合わせページのURLは『https://sample.jp/contact』
お問い合わせページのヘッダーだけ背景色を変える

そして基本となるコードはこちらです。

$(window).bind("load", function () {
  if (document.URL.match("/マッチさせたいURL")) {
    // URLがマッチした場合の処理
  }
});

マッチさせたいURLは、全体のURLの一部がマッチすればOKとなります。

これに今回の例を当てはめると以下になります。

$(window).bind("load", function () {
  if (document.URL.match("/contact")) {
    $("header").css("background-color", "#ff7f50");
  }
});

これでURLにcontactが含まれるページのヘッダーのみ、背景色が変わります。

条件を複数書く（or）

次は条件を複数書いてみます。

サイトのURLは『https://sample.jp/』
お問い合わせページのURLは『https://sample.jp/contact』
ブログページのURLは『https://sample.jp/blog』
お問い合わせページとブログページのヘッダーだけ背景色を変える

基本となるコードはこちらです。

$(window).bind("load", function () {
  if (document.URL.match("/マッチさせたいURL①")) {
    // URL①がマッチした場合の処理
  } else if (document.URL.match("/マッチさせたいURL②")) {
    // URL②がマッチした場合の処理
  }
});

これに今回の例を当てはめると以下になります。

$(window).bind("load", function () {
  if (document.URL.match("/contact")) {
    $("header").css("background-color", "#ff7f50"); // お問い合わせページ
  } else if (document.URL.match("/blog")) {
    $("header").css("background-color", "#90ee90"); // ブログページ
  }
});

条件を複数書いて、どの条件にも当てはまらない時の処理も書く

次は条件を複数書いてみます。

サイトのURLは『https://sample.jp/』
お問い合わせページのURLは『https://sample.jp/contact』
ブログページのURLは『https://sample.jp/blog』
お問い合わせページとブログページのヘッダーだけ背景色を変える
お問い合わせページとブログページ以外のヘッダーの背景色を変える

基本となるコードはこちらです。

$(window).bind("load", function () {
  if (document.URL.match("/マッチさせたいURL①")) {
    // URL①がマッチした場合の処理
  } else if (document.URL.match("/マッチさせたいURL②")) {
    // URL②がマッチした場合の処理
  } else {
    // URL①とURL②以外の場合の処理
  }
});

これに今回の例を当てはめると以下になります。

$(window).bind("load", function () {
  if (document.URL.match("/contact")) {
    $("header").css("background-color", "#ff7f50"); // お問い合わせページ
  } else if (document.URL.match("/blog")) {
    $("header").css("background-color", "#90ee90"); // ブログページ
  } else {
    $("header").css("background-color", "#f0e68c"); // お問い合わせとブログページ以外
  }
});

今回はヘッダーの背景色を変えましたが、もちろん他にもいろんな処理が可能なのでぜひ試してみて下さい。

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。