こちらを参考にしました。
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が変化するページが作成できました。
ページトップの参考サイトでは詳細にコードの説明をされておりますので、ぜひそちらもご覧ください！