تغییر قالب و سوییچ بین فایل‌های CSS با جاوااسکریپت

یکی از قابلیت‌هایی که در طراحی وب می‌توان در نظر گرفت، تغییر قالب سایت توسط کاربر است. می‌توان از جاوااسکریپت برای انتخاب فایل‌های CSS استفاده کرد که روش بسیار ساده‌ای است و همین‌طور می‌توان این قابلیت را به کمک PHP پیاده‌سازی کرد.

در این مقاله به روش تغییر ظاهر سایت با فعال یا غیرفعال کردن فایل‌های CSS توسط کاربر می‌پردازیم که در هر سایتی کاربرد دارد. حتی در WordPress هم با ویرایش کوچک قالب، می‌توان این قابلیت را فراهم کرد. با ما باشید.

قرار دادن چند فایل CSS در Head سایت

برای فراهم کردن قابلیت تغییر ظاهر سایت از طریق سوییچ کردن بین فایل‌های استایل یا CSS، حداقل دو فایل CSS اصلی و جایگزین نیاز دارید. معمولاً در طراحی وب، فایل‌های استایل در Head سایت قرار می‌گیرد و به محض باز شدن سایت، بارگذاری می‌شود. بنابراین تصور کنید که در حال حاضر سایت شما در بخش Head دارای تگ Link فایل CSS با آدرس فایل CSS اصلی یا قالب پیش‌فرض است. دقت کنید که عنوان استایل اصلی، default است:

<head>
<title>عنوان صفحه</title>
	<link rel="stylesheet" type="text/css" href="https://it-planet.ir/wp-content/theme/alireza3/alireza75.css" title="default" />
</head>

دومین قالب سایت را می‌توانید با اضافه کردن یک تگ Link دیگر در بخش Head تعریف کنید اما در مورد دومین فایل، rel را alternate stylesheet تنظیم کنید و البته عنوان دومین CSS را alternate وارد کنید:

<head>
<title>عنوان صفحه</title>
	<link rel="stylesheet" type="text/css" href="https://it-planet.ir/wp-content/theme/alireza3/alireza75.css" title="default" />
	<link rel="stylesheet" type="text/css" href="https://it-planet.ir/wp-content/theme/alireza3/dark.css" title="alternate" />
</head>

انتخاب قالب یا تغییر قالب سایت‌ها به کمک جاوااسکریپت

اگر همه‌ی کاربران از مرورگر Firefox استفاده می‌کردند، نیازی به انجام مراحل بعدی نبود و کاربر در صورت نیاز می‌توانست از طریق منوی View و گزینه‌ی Page Styles یکی از قالب‌ها را انتخاب کند. اما متأسفانه تمام مرورگرهای مدرن امروزی و مرورگرهایی که عملاً بازنشسته شده‌اند، این قابلیت مفید را ندارند. بنابراین برای سوییچ کردن قالب در مرورگرهایی مثل اینترنت اکسپلورر یا سافاری و بقیه، باید چاره‌ی دیگری اندیشید.

یک راهکار ساده که با کمترین تغییر در سایت‌ها انجام می‌شود، ویرایش Head و افزودن یک فایل JavaScript است که حاوی توابعی برای تغییر قالب از طریق فعال و غیرفعال کردن فایل‌های استایل است. بنابراین در Head سایت و پس از دو لینک مربوط به CSS اصلی و جایگزین، فایل جاوااسکریپت styleswitcher را اضافه کنید:

<head>
<title>عنوان صفحه</title>
	<link rel="stylesheet" type="text/css" href="https://it-planet.ir/wp-content/theme/alireza3/alireza75.css" title="default" />
	<link rel="stylesheet" type="text/css" href="https://it-planet.ir/wp-content/theme/alireza3/dark.css" title="alternate" />
<script type="text/javascript" src="https://it-planet.ir/wp-content/theme/alireza3/scripts/styleswitcher.js"></script>
</head>

دقت کنید که فایل styleswitcher.js می‌تواند در کنار فایل CSS اصلی و جایگزین و در یک فولدر قرار بگیرد و در عین حال می‌توانید آن را در فولدری مثل scripts قرار دهید. نکته‌ی اصلی استفاده از آدرس صحیح فایل است تا به درستی در فرانت‌اند سایت بارگذاری شود.

کدهای زیر را در فایل styleswitcher.js پیست کنید تا انتخاب قالب جایگزین و ذخیره کردن Cookie در مرورگر کاربر، انجام شود.

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

توجه کنید که با استفاده از کوکی، زمانی که کاربر برای اولین بار قالب جایگزین یا اصلی را انتخاب و فعال می‌کند، در دفعات بعدی مراجعه به وب‌سایت نیز همان قالب فعال می‌شود چرا که تابع تغییر استایل، بررسی می‌کند که آیا کوکی ذخیره شده است یا خیر و اگر کوکی ذخیره شده، مقدار خاصی داشته باشد، قالب مربوط به آن مقدار بارگذاری می‌شود.

اکنون به مرحله‌ی فعال کردن قالب پیش‌فرض یا قالب جایگزین به صورت دلخواه و توسط کاربر می‌رسیم. می‌توانید دو تگ a که در حقیقت لینک در صفحه ایجاد می‌کند را برای این کار در نظر بگیرید و در بخشی از قالب سایت مثل body یا footer قرار دهید. نکته‌ی اصلی این است که این دو لینک، فایل‌های استایل default و alternate را با تابعی به اسم setActiveStyleSheet که در فایل styleswitcher.js، فعال و غیرفعال می‌کنند:

<body>
<a href="#" onclick="setActiveStyleSheet('default'); return false;" target="_blank">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;" target="_blank">Change style to alternate</a>
</body>

می‌توانید نام لینک را به صورت دلخواه تغییر بدهید و موقعیت لینک‌ها را در صفحه جابجا کنید و همین‌طور می‌توانید کلاسی برای لینک اول و دوم در نظر بگیرید و ظاهری مثل آیکون ماه برای تم تاریک و مخصوص شب و آیکون خورشید برای تم معمولی سایت در نظر بگیرید. برای قرار دادن عکس به جای متن، می‌توانید از تگ img استفاده کنید. مثل نمونه‌ی زیر:

<body>
<a href="#" onclick="setActiveStyleSheet('default'); return false;" target="_blank"><img src="https://it-planet.ir/moon.png" /></a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;" target="_blank"><img src="https://it-planet.ir/sun.png" /></a>
</body>

inetsolutionسیاره‌ی ‌آی‌تی

سوالات و پاسخ‌ها و دیدگاه‌ها

آشنایی با AutoHotKey و انجام کارهای پیچیده با کلیدهای کیبورد

علیرضا شیریگفت:

سلام برای تغییر عملکرد دکمه‌های کیبورد میتونید از برنامه PowerToys مایکروسافت استفاده کنید که قبلاً معرفی کردیم. برای شورت‌کات‌هایی مثل Ctrl + C هم فکر میکنم جواب میده. تغییر دکمه های کیبورد و استفاده از کلید دیگری به جای کلید خراب در ویندوز

پاسخ

رضاایلانیگفت:

سلام بنده میخوام ی کد بنویسم ک مثلا بجای کلیدهای ترکیبی ctrl+c یا کپی یک کلمه؛ با زدن کلید F1 کیبورد اینکار اعمال شود و بجای past کردن ک کلیدهای ترکیبی ctrl+v است با کلید F2 این مورد انجام شود ممنون میشم کدش رو بهم بگید

چگونه تنظیمات Paste در Word را تغییر دهیم تا همواره متن ساده پیست شود؟

کا ظ مگفت:

سلام ببخشید چطور میتونم در محیط ورد با یک کلیک روی کلمه کپی بشه . و با یک کلیک در جای دیگر پیس بشه . یعنی به متن حالت کپی بدم

آشنایی با نمودارهای اکسل و کاربرد انواع نمودار در اکسل

علی امیریگفت:

من فقط از نمودار ستونی استفاده میکردم ولی با خوندن این مقاله متوجه شدم که نمودار xy برای کار من خیلی بهتر هست. با تشکر از سایت خوبتون.

ترس از عصب کشی دندان و دندانپزشکی نداشته باشید + معرفی یک دندانپزشکی

جوادگفت:

به نظرم عصب کشی دندان زیاد ترسناک نیست. ترسناک در اصل کشیدن دندانه