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

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

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

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

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

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

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

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

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

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

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

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

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

             
در صورتی که اقدامات لازم برای حل کردن مشکلات کامپیوتر و لپ‌تاپ را انجام دادید اما هنوز مشکل پابرجاست و یا فرصت انجام آنها را ندارید؛ می‌توانید در آچارباز سفارش اعزام کارشناس به محل ثبت کنید تا آنها مشکل را برطرف کنند

ثبت درخواست اعزام کارشناس به محل