چرا و چه زمانی باید CSS را برای نقش‌های کاربری خاص در وردپرس اعمال کنیم؟
ما وب‌سایت‌های مختلفی را برای کسب‌وکارهای خود مدیریت می‌کنیم که نیاز به ورود کاربر دارند. اغلب متوجه می‌شویم که نیاز به سفارشی‌سازی ظاهر برای نقش‌های کاربری مختلف وجود دارد.
در حین انجام تست‌های A/B بر روی این سایت‌ها، متوجه شدیم که شخصی‌سازی به طور قابل توجهی تجربه کاربری را بهبود می‌بخشد. تجربه کاربری بهتر در نهایت منجر به رضایت بیشتر مشتری، افزایش تبدیل و فروش می‌شود.
چه صاحب سایت، توسعه‌دهنده یا طراح باشید، کنترل چگونگی نمایش سایت برای کاربران مختلف می‌تواند بسیار مفید باشد.
در اینجا برخی از موارد استفاده رایج آورده شده است:
- سایت‌های عضویت: می‌توانید از CSS سفارشی برای ارائه تجربیات مختلف به اعضای پریمیوم استفاده کنید.
- فروشگاه‌های اینترنتی: می‌توانید سبد خرید، تخفیف‌های مشتریان بازگشتی و سایر ویژگی‌ها را برای مشتریان لاگین شده برجسته کنید.
- وبلاگ‌های چند نویسنده‌ای: مدیریت یک وبلاگ با چندین نویسنده می‌تواند پیچیده شود. با استفاده از CSS سفارشی، می‌توانید یک رابط کاربری تمیز و کارآمد برای ویراستاران ایجاد کنید و در عین حال کار را برای نویسندگان و مشترکین ساده نگه دارید.
- سایت‌های مشتری: می‌توانید با پنهان کردن برخی عناصر با استفاده از CSS سفارشی، یک ناحیه مدیریت ساده برای مشتریان ایجاد کنید.
اکنون، مشکل این است که چگونه به وردپرس بگوییم کدام کد CSS را برای نقش‌های کاربری مختلف بارگذاری کند.
اعمال CSS سفارشی برای نقش‌های کاربری خاص در وردپرس
راحت‌ترین راه برای مدیریت کدهای سفارشی، از جمله CSS، در وردپرس استفاده از WPCode است. این بهترین افزونه اسنیپت کد برای وردپرس است و به شما امکان می‌دهد CSS سفارشی خود را با خیال راحت در یک مکان مدیریت کنید. توجه: نسخه رایگان WPCode نیز در دسترس است. با این حال، برای باز کردن قفل ویژگی‌های بیشتر، توصیه می‌کنیم به یک طرح پولی ارتقا دهید.
چرا WPCode را توصیه می‌کنیم:
- به شما امکان می‌دهد هر کد سفارشی، از جمله CSS، را بدون خراب کردن وب‌سایت خود اضافه کنید. اگر یک اسنیپت کد کار نکرد، می‌توانید به راحتی آن را غیرفعال کنید.
- دارای ابزارهای قدرتمند درج کد و منطق شرطی است که به شما امکان می‌دهد فقط در صورت نیاز یک اسنیپت را اجرا کنید.
- به یک کتابخانه عظیم از اسنیپت‌های مفید دسترسی دارید که شما را از نصب چندین افزونه جداگانه نجات می‌دهد.
با این حال، بیایید برخی از CSS سفارشی را اضافه کنیم و آن را برای نقش‌های کاربری خاص اعمال کنیم.
اضافه کردن CSS سفارشی در WPCode
ابتدا باید افزونه WPCode را نصب و فعال کنید. برای جزئیات بیشتر، به آموزش ما در مورد نحوه نصب یک افزونه وردپرس مراجعه کنید.
پس از فعال‌سازی، به صفحه Code Snippets » +Add Snippet بروید. در آنجا، اسنیپت‌های مفید زیادی برای کارهای مختلف مشاهده خواهید کرد.
با این حال، از آنجایی که شما در حال اضافه کردن یک کد CSS سفارشی هستید، باید با کلیک بر روی ‘+ Add Custom Snippet’ زیر جعبه ‘Add Your Custom Code (New Snippet)’ از ابتدا شروع کنید.
این کار شما را به ویرایشگر کد می‌برد. ابتدا باید یک عنوان برای اسنیپت کد خود وارد کنید و سپس ‘CSS Snippet’ را زیر نوع کد انتخاب کنید.
اکنون، می‌توانید کد CSS سفارشی خود را به کادر پیش‌نمایش کد اضافه کنید.
برای این آموزش، از این کد استفاده می‌کنیم که با تغییر رنگ پس‌زمینه، منوی ‘Posts’ را در ناحیه مدیریت برجسته می‌کند. شما می‌توانید کد CSS خود را در اینجا استفاده کنید:
li#menu-posts {
background-color: #bf0505;
}
انتخاب منطق شرطی نقش کاربر
سپس، به پایین بروید تا به کادر ‘Smart Conditional Logic’ برسید و کلید کنار گزینه ‘Enable Logic’ را روشن کنید.
پس از آن، ‘Condition’ (نمایش یا پنهان کردن) را انتخاب کنید و سپس روی ‘Add new group’ کلیک کنید.
با کلیک بر روی اولین جعبه در Rule، گزینه‌های بیشتری برای شما نمایش داده می‌شود. از این بخش می‌توانید قوانین مختلفی را انتخاب کنید. مثلاً می‌توانید تعیین کنید که این کد فقط برای کاربران عضو، یا فقط برای افرادی که از موبایل وارد سایت می‌شوند، نمایش داده شود.
User Role را انتخاب کنید تا این کد CSS سفارشی فقط برای گروه خاصی از کاربران نمایش داده شود. سپس، مشخص کنید که این کد برای کدام گروه از کاربران (مثلاً مدیران، نویسندگان یا مشترکین) فعال باشد.
نکته: می‌توانید با کلیک بر روی دکمه ‘+ Add new group’ چندین قانون منطق شرطی اضافه کنید.
پس از اتمام، روی ‘Save Snippet’ در گوشه سمت راست بالای صفحه کلیک کنید و سپس آن را به ‘Active’ تغییر دهید.
WPCode اکنون CSS سفارشی شما را به نقش‌های کاربری خاصی در وردپرس نشان می‌دهد.
اضافه کردن CSS سفارشی برای نقش‌های کاربری خاص در ناحیه مدیریت وردپرس
اگر می‌خواهید CSS سفارشی شما فقط در داخل ناحیه مدیریت وردپرس اضافه شود، WPCode این کار را حتی ساده‌تر می‌کند.
در صفحه ویرایش کد، به پایین بروید تا به گزینه ‘Location’ برسید. روی منوی کشویی کلیک کنید تا آن را گسترش دهید و مکان‌های مختلفی را مشاهده خواهید کرد که می‌توانید CSS را به طور خودکار در آن‌ها بارگذاری کنید.
اکنون، به سادگی گزینه ‘Admin header’ یا ‘Admin footer’ را انتخاب کنید تا کد CSS شما در ناحیه مدیریت وردپرس بارگذاری شود.
اضافه کردن CSS سفارشی برای نقش‌های کاربری خاص در سایر مناطق
طراحی شخصی‌سازی در وب‌سایت‌های تجارت الکترونیک منجر به بهبود تجربه کاربری می‌شود و ثابت شده است که فروش سبد خرید رها شده را کاهش می‌دهد.
اگر یک فروشگاه WooCommerce، دوره‌های آنلاین یا سایر محصولات دیجیتال می‌فروشید، افزودن CSS سفارشی برای مشتریان لاگین شده مفید خواهد بود.
WPCode به شما امکان می‌دهد انتخاب کنید که کد سفارشی را در کجا به یک سایت تجارت الکترونیک اضافه کنید. در تنظیمات Location، به تب ‘eCommerce’ بروید.
خواهید دید که چندین مکان وجود دارد که می‌توانید CSS سفارشی خود را اضافه کنید، مانند قبل از سبد خرید، قبل از فرم پرداخت، در صفحات محصول و موارد دیگر. WPCode از WooCommerce، Easy Digital Downloads و MemberPress پشتیبانی می‌کند.