URLパラメータを用いて、リンク元によってCSSを切り替えるJavaScript

シェアする

こちらを参考にしました。

https://ghweb.info/post-3829.html

WordPressのテーマにCocoonを使用していると固定ページや投稿ごとにJavaScriptを設定する機能があるため、コピペですぐ使用できます。

そういった機能がないテーマの場合は以下をどうぞ。

https://www.nxworld.net/wordpress/wp-custom-css-and-custom-js.html

具体的にどう使ったか

私の場合はメインドメインにプライバシーポリシーや店舗情報のページを設置し、サブドメインからアクセスする際に各サブドメインのcssを読み込むことで、「違うサイトへ移動した」という印象を減らそうとしました。

例として次のようにしています。

  • メインドメインの店舗情報(https://maindomain.com/shop-information/)をサブドメインで使用する
  • サブドメインAのCSS(https://subA.maindomain.com/style.css)、サブドメインBのCSS(https://subA.maindomain.com/style.css)を URLパラメータで切り替える

URLパラメータの方法を選んだのはアクセス解析したいからです。

メインドメインの固定ページ(投稿)へ設定するJavaScript

function getStyle() {
    var str = location.search.substring(1);
    if(str){
        var setStyle = str.split("=");
        var css = setStyle[1];
        }
    switch (css){
        case 'A':
        document.write('\n<link rel="stylesheet" type="text/css" href="https://subA.maindomain.com/style.css">');
        break;
        case 'B':
        document.write('\n<link rel="stylesheet" type="text/css" href="https://subB.maindomain.com/style.css">');
        break;
        }
}
getStyle();

case ‘A’:
このAがサブドメインからリンクを貼るときのURLパラメータとなります。管理しやすいように自由に設定してください。

href=”https://subA.maindomain.com/style.css”
どのcssを読み込むのかの指定です。

サブドメインからリンクを貼る

サブドメインAからは、以下のURLでリンクを貼ります。

https://maindomain.com/shop-information/?css=A

サブドメインBからは、以下のURLでリンクを貼ります。

https://maindomain.com/shop-information/?css=B

末尾のAやBが、JavaScriptのcaseに設定した文字列になります。

これで、同じURLにアクセスしているけれど、リンク元によってCSSが変化するページが作成できました。

ページトップの参考サイトでは詳細にコードの説明をされておりますので、ぜひそちらもご覧ください!