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

چگونه کدهای CSS سایت بر اساس تنظیمات مدیریت تغییر کنند

0 250

یکی از دوستان در انجمن سوالی مطرح کردن که در این پست به شرح کامل جوابش می پردازیم. برای انجام این امر می تونیم مقادیر تنظیمات رو بصورت متغیر های PHP ذخیره کنیم سپس به یک فایل PHP وظیفه ایجاد یک خروجی CSS را محول کنیم. در اینجام این کار من برای سهولت بیشتر و مرتب تر بودن کار از تابع var() در CSS هم کمک خواهم گرفت.

ویژگی های سفارشی CSS یا متغیر های CSS چی هستند؟

به کمک تعریف متغیر در فایل CSS می توانید یک ویژگی تعریف کنید و آن را در سایر کلاس ها، آی دی ها و… موجود در استایل های قالبتون استفاده کیند کاملا مانند PHP 🙂 به کد مثالی زیر توجه کنید:

:root {
    --bg-color-default: blue;
}
#id1 {
    background-color: var(--bg-color-default);
}
.class1 {
    background-color: var(--bg-color-default);
}

همان طور که متوجه شدید هنگام نوشتن اسم متغییر باید آن را با — شروع کنید و اسم آن به حروف بزرگ و کوچک نیز حساس است. برای فراخوانی هم از سینتکس var() استفاده می شود. بیشتر بخوانید

کد نویسی فایل PHP برای ایجاد یک فایل CSS

اکنون می خواهم متغییر های CSS رو بر اساس انتخاب های مدیر سیستم بصورت یک خروجی CSS دریافت کنم و در کد های Head قالب سایت لینک کنم. فرض کنید اسم این فایل PHP را style.php بذارم پس کد لینک بصورت زیر خواهد بود:

<link rel="stylesheet" href="/path/to/style.php" media="screen">

خوب تا اینجا که ساده بود 🙂 حالا کد های فایل PHP رو می نویسیم:

<?php
header("Content-type: text/css");
$backgroundColor = mysqli_query($dbc, "SELECT `background_color` FROM user_settings WHERE user_id = 1");
$pColor = '#0000ff';
$headingSize = '2em';
$headingColor = '#c0c0c0';
?>
:root {
    --main-p-color: <?php echo $pColor; ?>; 
    --background-color: <?php echo $backgroundColor; ?>;
    --heading-color: <?php echo $headingColor; ?>;
    --font-size-heading = <?php echo $heading_size; ?>;
}

در کد بالا ابتدا یکسری متغیر PHP تعریف کردم که اولی هم برای مثالی فرضی از یک دیتابیس فراخوانده شده سپس این متغییر ها رو برابر قرار دادم با متغیر سفارسی CSS. خروجی کد بالا بصورت زیر است:

:root {
    --main-p-color: #0000ff; 
    --background-color: #some_color_from_database;
    --heading-color: #c0c0c0;
    --font-size-heading = 2em;
}

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

موفق باشید 🙂

ارسال یک پاسخ