コーディング Web制作 jQuery

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

【jQuery】URLによって条件分岐させる方法
URLによって背景色変えたりしたいけど、WordPressじゃなくても条件分岐させられる?

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

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

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

【これだけは覚えておきたい】WordPress条件分岐タグまとめ

そして今回は解説はWordPressではなく静的サイトの場合になります。

ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。

実案件では「ヘッダーは共通でお願いします」と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。

効率よくコーディングしたい人はこちら

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

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

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

【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

 

いくつか例を見ていきたいと思います。

  • 条件にマッチしたページだけ処理を書く
  • 条件を複数書く(or)
  • 条件を複数書いて、どの条件にも当てはまらない時の処理も書く

それでは順番に解説していきます。

 

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

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

  • サイトの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"); // お問い合わせとブログページ以外
  }
});

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

 

コーディング案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, jQuery
-,