آکادمی اسکیلدآپ
خودت رو ارتقا بده!

چگونه در قالب های وردپرسی خود حالت تیره داشته باشیم

0 43

در طی سالهای اخیر اکثر نرم افزار ها و حتی سیستم عامل خود را به استایل Dark یا تیره مجهز کرده اند این ویژگی باعث می شود تا چشم کاربر در محیط های تاریک روشنایی کمتری دریافت کند و کاربر هنگام استفاده از نرم افزار حس بهتری داشته باشد.

اما این موضوع در بین سایت ها به کندی در حال فراگیریست. برای مثال احتمالا ورود به یک سایت با پس زمینه روشن در حالی که در یک اتاق تاریک و استفاده از حالت دارک اندروید خود هستید به چشم شما یک شوک قوی وارد خواهد کرد. برای رفع این مشکل شما می توانید به راحتی و به کمک آموزش زیر به قالب وردپرسی خودتان ویژگی دارک اضافه کنید.

قبل از آغاز مقاله این نکته رو هم بدانید که برای اینکار افزونه آماده WP Dark Mode وجود دارد اما بشخصه آن را تست نکرده ام.

توابع PHP

در این مقاله سعی می کنیم قالب قابلیت سوئیچ خودکار بین حالت دارک و لایت داشته باشد بنابرین در تابع زیر ابتدا بررسی می کنیم آیا مرورگر در حالت دارک است یا خیر؟ اگر حالت دارک و یا لایت بودن مرورگر برایمان قابل احراز نبود در مرحله بعدی به کمک IP کاربر و با استفاده از سرویس رایگان Free IP API منطقه زمانی کاربر را تشخیص میدهیم و بر اساس زمان حدس میزنیم کاربر در محیطی روشن یا تاریک قرار دارد:

function FILTER_FLAG_NO_LOOPBACK_RANGE($value)
{
	return filter_var($value, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6) ? $value : (((ip2long($value) & 0xff000000) == 0x7f000000) ? FALSE : $value);
}

function isNight(string $ip = "", string $sysColor = ""): bool
{
    if ($sysColor == "")
    {
        if (filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE)  && filter_var($ip, FILTER_CALLBACK, array('options' => 'FILTER_FLAG_NO_LOOPBACK_RANGE')) && $ip != "::1") {
            // ip is valid
            $apiReq = file_get_contents("https://freeipapi.com/api/json/" . $ip);
            $ipInfo = json_decode($apiReq, true)["timeZone"];
            if (!empty($ipInfo) || $ipInfo != "-") {
                $usersTimezone = $ipInfo;
            } else {
                //WP time-zone
                $usersTimezone = wp_timezone();
            }
            $date = new DateTime('now', new DateTimeZone($usersTimezone));
            $currentTime =  $date->format('H:i:s');
            return (strtotime($currentTime) >= strtotime("18:00:00") || strtotime($currentTime) <= strtotime("5:00:00")); // outputs True for Night time and false for day
        } else {
            // ip is not valid, fallback
            return false;
        }
    } else if ($sysColor == "dark") //Browser dark mode state passed (night)
    {
        return true; // it's night
    } else {
        return false; // fallback (day)
    }
}

خروجی تابع فوق بول می باشد درصورتی که نتیجه True باشد کاربر در محیط تاریک یا شب قرار دارد و درصورتی که False باشد کاربر در محیط روشن!

این توابع را در functions.php قالب وردپرسی خود قرار دهید تا بتوانیم از آن در سایر فایل های قالب استفاده کنیم (آن را صدا بزنیم). برای مثال می توانید برای افزودن استایل دارک به فایل index.php و یا header.php موجود در قالب خود این تابع را در یک شرط صدا بزنید اگر جواب تابع True بود استایل افزوده شود اگر نه استایل دارک افزوده نشود (درقسمت نکته 2 توضیح دادم). اما یک راه بهتر و ساده تر برای افزودن استایل های CSS به قالب وجود دارد و آن استفاده از تابع wp_enqueue_style() می باشد که در ادامه آن را توضیح خواهم داد.

نکته 1: تابع اول برای فیلتر کردن IP های لوپ بک کاربردارد که همان آدرس های داخلی یا لوکال هستند مثل: 127.0.0.1

نکته 2: در تابع بعدی (isNight) دو پارامتر ورودی تعیین شده که اولی IP کاربر است که به کمک آرایه سوپر گوبال SERVER قابل یافتن است و پارامتر دوم حالت دارک مرورگر می باشد که به کمک JavaScript و آرایه سوپر گلوبال COOKIE قابل یافتن است.

  • گرفتن IP کاربر:
$user_ip = $_SERVER['REMOTE_ADDR'];
  • یافتن حالت دراک یا لایت مرورگر کاربر

برای بدست آوردن این پارامتر از API رایگان و اوپن سورس JavaScript Cookie استفاده می کنیم کد توابع زیر را در انتهای فایل header.php قالب یا درصورت وجود نداشتن آن در انتهای فایل index.php قالب و قبل از پایان تگ </body> قرار دهید:

    <script src="https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js"></script>
    <script>
        // code to set the `color_scheme` cookie
        var $color_scheme = Cookies.get("color_scheme");
        function get_color_scheme() {
            return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
        }
        function update_color_scheme() {
            Cookies.set("color_scheme", get_color_scheme());
        }
        // read & compare cookie `color-scheme`
        if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
            update_color_scheme();
        // detect changes and change the cookie
        if (window.matchMedia)
            window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
    </script>

اکنون حالت رنگ بندی مرورگر در کوکی قرار گرفته (دو حالت دارد dark یا light) و می توان از آن به کمک آرایه سوپرگلوبال COOKIE در PHP استفاده کرد:

$color_scheme = $_COOKIE["color_scheme"] ?? false;
    if ($color_scheme === false) $color_scheme = 'light';  // fallback
	if (isNight($_SERVER['REMOTE_ADDR'],$color_scheme)) {
		echo '<link rel="stylesheet" type="text/css" href="' . get_template_directory_uri() . '/dark.css">';
	}

به کمک کد بالا چک کردیم مقداری در آرایه COOKIE برای کلید color_scheme وجود دارد یا خیر اگر وجود نداشت و false شد آن را light در نظر میگیریم سپس به کمک یک شرط اگر خروجی تابع isNight که بول می باشد True بود (شب است) استایل دارک را که بعداً در مورد آن خواهیم گفت را به قالب اضافه می کنیم. کد بالا را می توانید مستقیماً و بدون تغییر داخل تگ <head> در فایل header.php یا index.php موجود در قالب قرار دهید.

افزون استایل تیره در فایل Functions.php

برای افزودن استایل های جدید به قالب (در این مقاله dark.css) می توانید از تابع wp_enqueue_style() در فایل functions.php استفاده کنید مثال:

function add_theme_style() {
    $color_scheme = $_COOKIE["color_scheme"] ?? false;
    if ($color_scheme === false) $color_scheme = 'light';  // fallback
	if (isNight($_SERVER['REMOTE_ADDR'],$color_scheme)) {
          wp_enqueue_style( 'dark', get_template_directory_uri() . '/dark.css', array(), '1.0', 'all');
	}
}
add_action( 'wp_enqueue_scripts', 'add_theme_style' );

در تابع بالا مانند قبل عمل می کنیم با این تفاوت که این بار بجای echo کردن تگ link برای استایل که یک المان HTML است به کمک توابع وردپرس استایل را بعد از کنترل شروط شب یا روز اضافه می کنیم. توجه! بهتر است شرط داخل تابع را به تابع موجود قالب خود اضافه کنید نه اینکه مانند بالا یک تابع جدید تعریف کنید.

بیشتر بدانید

ایجاد استایل دارک یا تیره

نکته 3: باید بصورت خیلی ابتدایی با CSS آشنا باشید.

برای اعمال حالت تیره لازم است یک استایل با نام مثلاً dark.css در قالب قرار دهیم و بر اساس استایل اصلی قالب style.css در آن کد بزنیم به این صورت که برای مثال کلاس ها و استایل های مرتبط با پس زمینه قالب را در فایل style.css پیدا کنید و برای آن یک Override در dark.css بنویسید. مثال:

//style.css
body {
    background-color: withe;
}

محتوای فایل دارک برای استایل بالا می تواند چیزی شبیه به این باشد:

//dark.css
body {
    background-color: gray !important;
}

موفق باشید 🙂 اگر سوالی داشتید حتما بپرسید!

ارسال یک پاسخ