2020.10.01  2021.04.04

JavaScriptを使ってURLで条件分岐をする方法を紹介

こんにちは!マコブログです!

今回は、URLに特定の文字列が含まれているかを検証し、それぞれの場合での条件分岐を書く方法を解説していきます。

WordPress関数(is_page()等)でページごとに条件分岐するのは簡単なんだけど…。それ以外の方法でURLを参照して条件分岐がしたいといった方にお勧めな方法をご紹介していきたいと思います。

※今回の内容はHTMLで静的サイトを作成する方でもページごとに条件分岐ができるようになるのでオススメです!

実際に条件分岐を書いてみる。

※使用する方法はjQueryを用いているので、jQueryの読み込みはお忘れなく。



まずは、使用しているjsファイルに、下記記述をしてください。

jQuery(function ($) {
$(window).bind('load', function() {
// URLにhogehogeが含まれていたら実行
if (document.URL.match('文字列VER1')) {
文字列VER1がURLに含まれていたら実行したい内容
} else if (document.URL.match('文字列VER2')) {
文字列VER2がURLに含まれていたら実行したい内容
} else {
それ以外の場合に実行したい内容
}
})
});


上記の記述を簡単に説明すると、

文字列VER1がURLに含まれているかを確認し、含まれている場合は、true、含まれていない場合は、falseを返します。

それを条件分岐のifと併用しているといった感じになります。

上記は「文字列VER1」「文字列VER2」「それ以外の場合」の3つの条件分岐となっていますが、

もっとレパートリーを増やしたい場合、else if (document.URL.match(‘hogehoge’)) {}の部分を付け足して様々なレパートリーが作れます。

WordPressではなくHTMLなどの静的サイトでもjQueryさえ読み込んでいれば使用可能なので、静的サイトでも使ってみてください。


まとめ

いかがでしたでしょうか?

本日はjQueryでURLに特定の文字列が含まれていたら実行する条件分岐の方法をご紹介しました。

遷移前のページのURLを参照して条件分岐する方法についてはこちらを参照してください。
遷移前のページのURLを参照して条件分岐する方法

今までURLでの条件分岐に苦手意識を持っていた方は、この記事を読んでその気持ちが少しでもなくなれば幸いです。

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →