پایداری یا ثبات یکی از اصول طراحی رابط کاربری مناسب است . ایجاد یک افزونه برای وردپرس نیز از این قاعده مستثنی نیست و بهترین کار این است که افزونه شما تا حد امکان با رابط کاربری وردپرس تطبیق داشته باشد .

اینکار به داشتن یک رابط کاربری سازگار برای کاربران نهایی کمک می کند و افزونه شما با ارائه یک تجربه کاربری محکم ، حرفه ای تر خواهد شد .

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

در این بخش یاد می گیرید که چگونه از استایل های موجود در هسته وردپرس در افزونه خود استفاده کنید .

برای  نشان دادن این مطلب یک افزونه که دارای یک برگه تنظیمات است را ایجاد کنید .

در این بخش شما تابع kth_styling_settings را تغییر خواهید داد .

استفاده از رابط کاربری (UI) وردپرس

مهمترین نکته برای استفاده از استایل های توکار وردپرس این است که شما تمام بخش های مختلف افزونه خود را که می خواهید از رابط کاربری وردپرس برای آنها استفاده کنید را در یک div با کلاس wrap قرار دهید .

کلاس wrap یک بخش مادر ، برای همه استایل های بخش مدیریت وردپرس است .

عناوین یا Headings
وردپرس دارای استایل های سفارشی برای همه تگ های heading می باشد .
به مثال زیر دقت کنید .

هر تگ heading از تگ قبلی کوچکتر است . دقت کنید که تگ <h1> تعریف نشده است . علت عدم استفاده از تگ <h1> در این بخش این است که از این تگ برای نمایش نام وب سایت در بالای داشبورد وردپرس استفاده شده است . پس شما باید برای عنوان اصلی خود از تگ <h2> استفاده کنید .

 

پیغام ها

زمانی که یک رویداد مانند ذخیره سازی تنظیمات در افزونه شما رخ می دهد ، خیلی مهم است که یک پیغام را به کاربر نمایش دهید تا از نتیجه کار مطلع شود . به عنوان مثال بعد از ذخیره سازی تنظیمات باید پیغامی مبنی بر اینکه ” تنظیمات با موفقیت ذخیره شدند ” به کاربر نمایش داده شود .

وردپرس دارای چند استایل متفاوت برای نمایش پیغام ها می باشد که آنها را باهم بررسی می کنیم .

 

دکمه ها

در هنگام اضافه کردن دکمه ها به فرم های افزونه ، شما می توانید از مزایای چندین کلاس موجود در وردپرس برای استایل دهی به آنها استفاده کنید .

مهمترین کلاس های مربوط به دکمه ها در وردپرس عبارتند از کلاس button-primary و  کلاس button-secondary .

این کلاس ها دکمه های فرم های افزونه شما را با رابط کاربری وردپرس کاملاً هماهنگ می کنند .

 

همچنین شما می توانید از کلاس های مربوط به دکمه ها برای لینک ها یا همان تگ <a> نیز استفاده کنید .

 

لینک ها

لینک هایی که در داخل div با کلاس wrap قرار دارند به صورت خودکار استایل دهی می شوند . اما شما می توانید با کمی خلاقیت ، استایل های متفاوتی را به لینک ها اختصاص دهید . به مثال زیر توجه کنید .

با قرار دادن لینک ها در داخل تگ های عنوان می توانید اندازه آنها را بزرگتر کنید . نتیجه اجرای کد بالا را در تصویر زیر مشاهده می کنید .

 

فیلدهای فرم

وردپرس دارای یک کلاس خاص برای جداول بنام form-table است که فقط برای فرم ها در نظر گرفته شده است .

این کلاس در تمام فرم های داشبورد مدیریت وردپرس و صفحات تنظیمات استفاده شده است . از مزایای این کلاس در هنگام طراحی فرم های افزونه خود استفاده کنید . مثال زیر را مشاهده کنید .

با استفاده از کلاس form-table می توانید تنظیمات افزونه خود را در قالب فرم هایی با رابط کاربری بهتر ایجاد کنید .

 

جداول

جداول html یک روش بسیار مناسب برای نمایش سطرها و ستون هایی از داده ها هستند . این جداول به کاربر نهایی امکان می دهند که داده ها را به شکلی بسیار ساده مشاهده یا مطالعه کنند .

در وردپرس کلاسی بنام widefat وجود دارد که بوسیله آن می توانید به سادگی استایل مناسبی را به جداول اعمال کنید .

 

صفحه بندی یا Pagination

اگر افزونه شما دارای یک لیست از رکوردها باشد ، احتمالاً نیاز خواهید داشت که این رکوردها را به صورت صفحه بندی شده به کاربر نمایش دهید . صفحه بندی یک روش عمومی برای شکستن داده های بزرگ به چندین صفحه است که برای هر مجموعه بزرگی از داده باید استفاده شود .

اینکار به بارگذاری سریعتر و تجربه کاربری بهتر برای مرور داده ها منجر می شود . به عنوان مثال آیا بهتر نیست که یک مجموعه 500 رکوردی را به صورت صفحاتی با 50 رکورد مشاهده کنید ؟

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

ابتدا کل صفحه بندی در یک div با کلاس tablenav و سپس یک div دیگر با کلاس tablenav-pages قرار گرفته اند .

سپس از کلاس displaying-num برای نمایش اطلاعات رکوردهای در حال نمایش استفاده شده است .

در ادامه برای لینک های صفحه از کلاس page-numbers استفاده شده است تا استایل مناسبی به اعداد صفحه بندی اعمال شود . و در پایان نیز از کلاس های next و current نیز برای استایل دهی به صفحات بعدی و جاری استفاده شده است .

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

مزیت مهمی که با استفاده از استایل های توکار وردپرس در افزونه از آن بهره مند می شوید این است که افزونه شما در آینده نیازی به تغییرات ظاهری نخواهد داشت و همگام با بروزشدن استایل های پیش فرض وردپرس ، استایل های بخش های مختلف افزونه شما نیز بروزرسانی خواهند شد و همچنان با وردپرس سازگار خواهند ماند .

خلاصه فصل 4

در این فصل روش های متفاوتی برای ادغام افزونه خود در وردپرس را یاد گرفتید . قطعاً نیازی نیست که شما در هر افزونه از تمام موارد گفته شده در این فصل استفاده کنید ، اما نیاز بود که بدانید چگونه بخش های مورد نیاز افزونه خود را به وردپرس اضافه کنید .

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