تغییر قالب و سوییچ بین فایل‌های 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سیاره‌ی ‌آی‌تی

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

آموزش حذف کیبوردهای اضافی در ویندوز ۱۰ از تمام بخش‌ها

احمدگفت:

زنده باد ، اون فرمان آخری کارمو راه انداخت. همیشه برقرار باشید

پاسخ

علت نچرخیدن فن کارت گرافیک و روش‌های رفع مشکل

ارمانگفت:

با درود با توضیهاتی که دادی احتمالاه زیاد باید تعویض شود -کارت گرافیکهای مثلا 2 فن موقع تعویض بهتره هر دو فن با هم تعویض شوند

ساخت فلش مولتی بوت لینوکس و ویندوز و ISOهای مختلف با Ventory

احدگفت:

باید در منوی تنظیمات سبک پارتیشن بندی رو به gpt یا mbr بگذاریم چون برخی سیتم های قدیمی از mbr پشتیبانی میکنند و یا هارد قبلا به صورت mbr هست و نمیتونیم ویندوزی که gpt هست رو روش نصب کنیم.