یکی از اقدامات طراحی رابط کاربری که اخیرا توسط وبمستران انجام می شود، استفاده از رنگ های مرتبط و پرمصرف یا پرتکرار در یک عکس می باشد. بسیاری از قالب ها، از یک تصویر بعنوان بخش اصلی طراحی استفاده می کنند. مانند قالب های فروشگاهی که تصویر محصول یکی از اصلی ترین عنصر طراحی قالب و رابط کاربری ادامه مطلب محصولات به حساب می آید. می توانیم با شناسایی رنگ هایی که در تصویر محصول، به دفعات زیادی تکرار شده است، از آنها برای رنگ پس زمینه یا رنگ متن خاصی از طراحیمان استفاده کنیم. برای مثال تصویر زیر را مشاهده کنید:
همانطور که می بینید، رنگ پس زمینه صفحه از رنگ پرتکرار در تصویر اصلی محصول یعنی سبز تیره گرفته شده است. بنابراین شما هم می توانید با کمی خلاقیت چنین ایده ای را عملی کنید.
خوشبختانه در وردپرس افزونه های مختلفی برای انجام اینکار وجود دارد که در ادامه معرفی می کنیم:
افزونه وردپرس Dominant Color
- این افزونه رایگان است که می توانید از مخزن وردپرس دریافت کنید: Dominant Color
این افزونه وردپرسی، هر تصویری که در بخش رسانه ها آپلود می شود را آنالیز می کند و رنگی که بیشترین تکرار را در آن تصویر دارد به عنوان Post Meta در دیتابیس مربوط به آن تصویر ذخیره می کند و همچنین در ردیف دیتابیس مربوط به آن رسانه یا مطلب یا محصول نیز قابل دسترس خواهد بود. دقت داشته باشید که این افزونه فقط تصاویر جدیدی که پس از فعالسازی افزونه داخل سایت آپلود می شوند را بررسی می کند. برای دریافت و استفاده رنگ تصاویر، شما می توانید از کدهای زیر در قالبتان استفاده کنید.
برای دریافت و خرجی گرفتن پرتکرارترین رنگ (تنها 1 کد رنگ به شما داده می شود) در تصویر، می توانید از کد زیر استفاده کنید. (کد را در فایل های قالب موردنظر خودتان استفاده کنید)
برای دریافت کد رنگ به صورت Hex این کد را استفاده کنید:
<?php $imgcolor = get_post_meta( get_the_ID(), 'dominant_color_hex' ); ?>
برای دریافت کد به صورت RGB این کد را استفاده کنید:
<?php $imgcolor = get_post_meta( get_the_ID(), 'dominant_color_rgb' ); ?>
و اگر می خواهید لیستی از 8 رنگ که بیشترین تکرار در تصویر را دارند را نمایش دهید، از این کد استفاده کنید:
برای کد HEX :
<?php $imgcolor = get_post_meta( get_the_ID(), 'color_palette_hex' ); ?>
و برای کد RGB :
<?php $imgcolor = get_post_meta( get_the_ID(), 'color_palette_rgb' ); ?>
با توجه به اینکه این افزونه کد رنگ را داخل دیتابیس ذخیره می کند می توانیم با کمی کدنویسی اختصاصی، فرم جستجویی بسازیم و این قابلیت را به کاربران ارائه کنیم که محصولات را بر اساس رنگ جستجو کنند. و برای متای فیلتر، باید از متای color_palette_hex استفاده کرد تا بتوانیم رنگ کاربر را بین 8 رنگ جستجو کنیم. در این مورد می توانید از فریلنسرها استفاده کنید.
افزونه وردپرس Image Color Palette
افزونه قبلی، شما می توانید کد رنگ پرتکرار را دریافت و از آن در طراحی بخش های دلخواهی از قالب استفاده کنید. نمونه ساده تر آن، افزونه ای است که اینجا معرفی کردیم. این افزونه رنگ پرتکرار را دریافت می کند و زمانی که شما از ویرایشگر #گوتنبرگ برای نوشتن مطالب جدید استفاده می کنید، اجازه می دهد رنگ های پرتکرار را برای رنگ متن، رنگ پس زمینه بلوک ها و … استفاده کنید. مانند تصویر زیر:
مشاهده می کنید که این افزونه می تواند با هماهنگ شدن با گوتنبرگ، رنگ های پرتکرار در تصویر شاخص را به شما ارائه کند تا بتوانید از آن رنگ ها برای نوشتن مطلب جدیدتان استفاده کنید.
شما می توانید با جستجو در گوگل، افزونه های تجاری بیشتری و احتمالا با امکانات حرفه ای تر پیدا کنید.
