موارد زیادی باعث بهبود تجربه کاربر و رابط کاربری وب سایت می شود. در این مطلب قصد پیاده سازی تغییر رنگ تصادفی در وردپرس را داریم.
به صورت کلی زیبایی رابط کاربری و UI سایت بر روی تجربه کاربر تاثیر دارد. موارد زیاد باعث بهبود و زیبایی طراحی یک وب سایت می شود. قبلا درباره موارد مختلفی مانند استفاده از آیکون ها و تاثیر زیبایی بر روی تجربه کاربر صحبت کردیم. اما یکی از مهم ترین بخش ها در هر طراحی، بحث رنگ ها است. استفاده از رنگ در طراحی علاوه بر UI، بر روی تجربه کاربر یا همان UX نیز تاثیر می گذارد. اما در این مطلب قصد اجرای تغییر رنگ تصادفی برای هر عنصر در صفحه را داریم. به زبان ساده تر با هر بار بروزرسانی صفحه، رنگ بخش مورد نظر به صورت تصادفی تغییر می کند.
تغییر رنگ تصادفی در وب
برای اجرای این ترفند نیاز به کمی دانش PHP و CSS داریم. ابتدا با بخش CSS آن شروع می کنیم. رنگ ها در دنیای HTML و CSS به صورت hex نوشته می شوند. برای مثال ۰۰۰۰۰۰ بیانگر رنگ سیاه و ffffff بیانگر رنگ سفید است. در واقع هر کد رنگی متشکل از ۶ عدد در مبنای ۱۶ است. پس در ابتدا باید یک آرایه با این مقادیر مجاز ایجاد کنیم:
$chars = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');این ها تمام مقادیری است که به عنوان هر کدام از این ۶ عدد قابل انتخاب هستند. حال باید با استفاده از آن ها تغییر رنگ تصادفی را پیاده سازی کنیم. برای این کار وارد بخش PHP و تابع rand می شویم. در واقع تابع rand در بازه مشخص شده یک عدد را به صورت تصادفی بر می گرداند. برای مثال کد زیر از بین ۱ تا ۱۰ یک عدد را چاپ می کند:
rand(1,10);حال با انتخاب تصادفی ۶ عدد از آرایه chars میتوان یک کد رنگ ایجاد کرد. برای این کار باید از کد زیر استفاده کنیم:
$color = '#' . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)];کد بالا به صورت تصادفی یک فرزند از آرایه chars را انتخاب می کند. این عملیات ۶ بار تکرار می شود. در نهایت یک کد رنگ ۶ عددی از مجموعه کاراکتر های مجاز انتخاب شده است. حال برای استفاده از این کد یک تابع در فایل function قالب خود به شکل زیر اضافه می کنیم:
function tcRandColor()
{
$chars = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
$color = '#' . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)] . $chars[rand(0, 15)];
echo $color;
}این تابع در واقع با هر بار فراخوانی یک رنگ تصادفی ایجاد و آن را چاپ می کند.
نمایش رنگ تصادفی در قالب
برای نمایش و استفاده از تابع تنها نیاز به فراخوانی آن در جای مورد نظر داریم. برای مثال قصد استفاده به عنوان زمینه کلی سایت های همان body را داریم. در این صورت کد مورد نظر را در بخش استایل این تگ قرار می دهیم:
<body style="background-color:<?php tcRandColor(); ?>">کد بالا تغییر رنگ تصادفی را در رنگ زمینه body چاپ می کند. از این کد برای تمام رنگ های زمینه، متن، حاشیه و موارد مشابه میتوان استفاده کرد. تنها مشکل در این ترفند، ایجاد رنگ های کاملا تصادفی است. زیرا گاهی برخی رنگ ها با عناصر دیگر صفحه همخوانی نخواهد داشت. برای حل این مشکل می توانیم از قبل رنگ های مختلفی را تعریف کنیم. سپس با استفاده از تابع rand از بین این رنگ ها، به صورت تصادفی یکی را انتخاب و چاپ کنیم
انتخاب از رنگ های تعریف شده
برای این کار یک آرایه از رنگ های مورد نظر خود ایجاد می کنیم. برای مثال در کد زیر یک آرایه متشکل از ۴ رنگ ایجاد کردیم:
$colors = array('#f7f7f7', '#cccccc', '#eaeaea', '#ffffff');حال با استفاده از تابع rand و ورودی های ۰,۳ امکان انتخاب تصادفی از بین آنها وجود دارد. در نهایت کد ما چیزی مشابه کد زیر می شود:
function tcRandColor()
{
$colors = array('#f7f7f7', '#cccccc', '#eaeaea', '#ffffff');
$color = $colors[rand(0, 3)];
echo $color;
}به همین سادگی امکان استفاده از رنگ های پیش فرض به صورت تصادفی ایجاد می شود. این تکنیک ساده تاثیر بسیار زیادی در تجربه کاربر خواهد داشت.