آموزش اعمال CSS برای نقش‌های کاربری خاص در وردپرس
تغییر CSS برای نقش‌های کاربری خاص در وردپرس می‌تواند به شما در ایجاد تجربیات کاربری شخصی کمک کند. بسیاری از کاربران وب سایت‌هایی با رابط‌های شخصی را ترجیح می‌دهند. به عنوان مثال، ممکن است بخواهید عناصر خاصی را به نویسندگانی که از دید سایر کاربران پنهان هستند نمایش دهید یا به بخش‌های خاصی برای مشترکین یا مشتریان، استایل متفاوتی بدهید.
در این مطلب، ما شما را از طریق اعمال CSS برای نقش‌های کاربری خاص در وردپرس راهنمایی می‌کنیم که به شما کمک می‌کند مناطق مختلف را بر اساس نیازهای خاص کاربران خود سفارشی کنید.
چرا و چه زمانی باید از CSS برای نقش‌های کاربری خاص در وردپرس استفاده کرد
وب سایت‌های مختلفی را برای مشاغل خود مدیریت می‌کنیدکه نیاز به ورود کاربر دارند. اغلب نیاز به سفارشی سازی ظاهر برای نقش‌های مختلف کاربر پیدا می‌کنید.
در حین اجرای تست‌های تقسیم بر روی آن سایت‌ها، متوجه شده‌ایم که شخصی‌سازی تجربه کاربر را بسیار افزایش می‌دهد. تجربه کاربری بهتر در نهایت منجر به رضایت مشتری، تبدیل و فروش بیشتر می شود.
چه مالک سایت باشید، چه توسعه دهنده یا طراح، داشتن کنترل بر ظاهر سایت شما برای کاربران مختلف می‌تواند بسیار مفید باشد.
در ادامه چند مورد استفاده رایج آورده شده است:
- سایت‌های عضویت: می‌توانید از 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» را در قسمت Code Type انتخاب کنید.
اکنون می‌توانید کد CSS سفارشی خود را به کادر پیش نمایش کد اضافه کنید.
در این آموزش، ما از این کد استفاده می‌کنیم که منوی نوشته‌ها را در قسمت مدیریت با تغییر رنگ پس زمینه آن برجسته می‌کند. می توانید از کد CSS خود در اینجا استفاده کنید:
منطق شرطی نقش کاربر را انتخاب کنید
سپس به سمت پایین به کادر Smart Conditional Logic بروید و کلید کنار گزینه Enable Logic را تغییر دهید.
پس از آن، شرط (نمایش یا پنهان کردن) را انتخاب کنید و سپس روی افزودن گروه جدید کلیک کنید.
روی اولین کادر در Rule کلیک کنید تا آن را گسترش دهید. لیستی از قوانین را مشاهده خواهید کرد که می‌توانید از بین آنها انتخاب کنید.
به عنوان مثال، می‌توانید وضعیت ورود، نقش کاربر، نوع دستگاه و غیره را انتخاب کنید.
User Role را انتخاب کنید زیرا می‌خواهید این کد CSS سفارشی برای یک نقش کاربری خاص اضافه شود.
پس از آن، می توانید انتخاب کنید که در کدام نقش کاربری می‌خواهید آن را اعمال کنید.
توجه: می‌توانید چندین قانون منطقی شرطی را با کلیک کردن روی دکمه «+ افزودن گروه جدید» اضافه کنید.
پس از اتمام کار، روی «ذخیره قطعه» در گوشه سمت راست بالای صفحه کلیک کنید و سپس آن را به «فعال» تغییر دهید.
WPCode اکنون CSS سفارشی شما را به نقش های کاربری خاص در وردپرس نشان می دهد.
هاست وردپرس با وب سرور محبوب لایت اسپید و کش لایت اسپید باعث می‌شود تا سرعت لود فوق العاده‌ای را تجربه کنید.
با خرید هاست وردپرس کانفیگ حرفه‌ای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.
استایل سفارشی را برای نقش‌های کاربر خاص در ناحیه مدیریت وردپرس اضافه کنید
اگر فقط می‌خواهید CSS سفارشی شما در قسمت مدیریت وردپرس اضافه شود، WPCode این کار را آسان‌تر می‌کند.
در صفحه ویرایش کد، به سمت پایین به گزینه « Location» بروید. روی منوی کشویی کلیک کنید تا آن را گسترش دهید، و تعدادی مکان را مشاهده خواهید کرد که می توانید به طور خودکار CSS را بارگیری کنید.
اکنون، به سادگی گزینه Admin header یا Admin footer را انتخاب کنید تا کد CSS خود را در قسمت مدیریت وردپرس بارگیری کنید.
استایل سفارشی را برای نقش‌های کاربر خاص در مناطق دیگر اضافه کنید
شخصی سازی طراحی در وب سایت های تجارت الکترونیک منجر به بهبود تجربه کاربری می شود و ثابت شده است که فروش سبد خرید رها شده را کاهش می دهد.
اگر یک فروشگاه WooCommerce دارید، دوره های آنلاین می فروشید یا سایر محصولات دیجیتالی را می‌فروشید، اضافه کردن CSS سفارشی برای مشتریانی که وارد سیستم شده اند مفید خواهد بود.
WPCode به شما امکان می دهد انتخاب کنید کجا کد سفارشی را به یک سایت تجارت الکترونیک اضافه کنید. در تنظیمات مکان، به برگه eCommerce بروید.
چندین مکان را مشاهده خواهید کرد که می توانید CSS سفارشی خود را اضافه کنید، مانند قبل از سبد خرید، قبل از فرم پرداخت، در صفحات محصول و موارد دیگر.
WPCode از WooCommerce، Easy Digital Downloads و MemberPress پشتیبانی می کند.