جذابیت یک سایت زیبا

آن افزونه‌ها برای طراحی Front-End یاری‌رسان شما بودند. این هفته سراغ امکانات کاربردی دیگری برای طراحی صفحات وب رفته‌ایم. همچون بخش‌های قبلی این سلسله مطالب، تمام افزونه‌های معرفی ‌شده، رایگان در مخزن اصلی وردپرس آدرس WordPress.org قابل دریافت است.

طراحی ظاهر صفحات وب

Front-End (ترجمه دقیق و مناسبی برای این عبارت پیشنهاد نشده) به آن بخشی از وبسایت یا اپلیکیشن اطلاق می‌شود که برای عموم کاربران به نمایش در می‌آید. طراحی رابط کاربری برای ظاهر سایت، خود یک تخصص پیشرفته محسوب می‌شود. تقسیم کار به این صورت است که برنامه‌نویسان Back-End کار کدنویسی پشت ‌صحنه، توابع اصلی سایت و مدیریت محتوا و پیشخوان ادمین را به عهده دارند و توسعه‌دهندگان Front-End خروجی محتوای تولید شده را با استفاده از HTML ، CSS و جاوااسکریپت برای کاربران به نمایش درمی‌آورند.

هرچند کارکرد و توسعه Back-End و Front-End یک سایت اینترنتی با هم متفاوت است، ولی ارتباطی ارگانیک بین آنها برقرار است. برای مثال وقتی شما وارد پنل مدیریت وردپرس می‌شوید و از قسمت ارسال نوشته، مطلبی می‌نویسید و منتشر می‌کنید یا تنظیماتی را برای یک افزونه خاص تغییر می‌دهید، این تغییرات می‌تواند به‌طور مستقیم روی نمای سایت شما یا همان Front-End تاثیر بگذارد.

افزونه‌هایی که این شماره معرفی می‌کنیم، برای ساده‌سازی طراحی صفحات و کنترل شما در Front-End پروژه‌های وردپرسی خواهد بود.

WP Canvas - Shortcodes

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

کدهای میانبر یا شورت‌کدهای افزونه WP Canvas یکی از انتخاب‌های خوب در این زمینه است. با نصب این افزونه بخشی به ویرایشگر وردپرس در نوشته‌ها و برگه‌ها اضافه می‌شود که با استفاده از آن می‌توانیم به صفحات خود رنگ و لعاب تازه‌ای بدهیم و ستون‌ها و بخش‌ها، دکمه‌ها، جداول قیمت، شمارشگرها، نوارهای پیشرفت، آیکون‌های فونت Awesome و بسیاری امکانات دیگر را بیفزاییم. همچنین براساس نیازهای قالب خود می‌توانید از نمایش پست‌های دسته خاص، تصاویر و عنوان‌های شکیل و حتی یک RSVP ساده برای دعوت از مهمانان یک رویداد خاص استفاده کنید. نه اشتباه نکردید همه این امکانات در یک افزونه فراهم است!

Shortcodes Ultimate

افزونه مشابه بعدی Shortcodes Ultimate است که بیش از 50 مولفه مدرن CSS3 به صفحات شما می‌افزاید. این افزونه از زبان‌های راست به چپ (مثل زبان فارسی) پشتیبانی می‌کند و برخی امکانات مبتنی بر جی‌کوئری مانند اسلایدرها و پاپ‌آپ هم در آن وجود دارد. در حال حاضر بیش از 500 هزار وبسایت از این افزونه استفاده می‌کنند.

Page Builder by SiteOrigin

صفحه‌سازها دسته‌ای از ابزارهای پرطرفدار هستند که با ایجاد محیطی شبیه نرم‌افزارهای گرافیکی به مدیر وبسایت این امکان را می‌دهند که با کشیدن و رها کردن (drag and drop) موارد و ابزارک‌های مختلف به میان صفحه، طرح‌بندی موردنظر خود را بسازد.

Page Builder by SiteOrigin یکی از محبوب‌ترین‌های افزونه‌های رایگانی است که این امکان را فراهم می‌کند. این صفحه‌ساز با قالب‌های گوناگون سازگار است و برای قالب خاصی انحصاری نیست. برای کار با آن نیاز به دانش کدنویسی ندارید و تاریخچه تغییراتی که ایجاد می‌کنید نیز ذخیره می‌شود تا نگران امتحان کردن طرح‌های مختلف و بازگرداندن آنها نباشید.

Page Builder: Live Composer

لایو کامپوزر، یک افزونه صد درصد رایگان و منبع باز است که حتی مجوز استفاده در قالب‌های حرفه‌ای فروشی را نیز داده است. از ویژگی‌های آن می‌توان به این موارد اشاره کرد: ایجاد صفحات به‌صورت بصری، سفارشی‌سازی مولفه‌های گوناگون هر صفحه، استفاده سریع و آسان بدون نیاز به مطالعه مستندات افزونه، ساخت طرح‌بندی سفارشی صفحه در چند دقیقه، سازگاری بالا با قالب‌های وردپرسی و واکنشگرا بودن در تمام دستگاه‌های همراه و موبایلی.

به گفته سازندگان این افزونه، حتی درصورت غیرفعال کردن و مهاجرت به یک صفحه‌ساز دیگر، شورت‌کدهای اضافی در صفحات شما باقی نمی‌ماند.

Easy Logo Slider

Easy Logo Slider پلاگینی است که این امکان را به کاربر می‌دهد تا لوگوی مشتریان یا همکاران را، همراه عنوان و لینک سایتشان بارگذاری کند. در قسمت تنظیمات افزونه، گزینه‌هایی برای انتخاب شیوه نمایش یا مخفی کردن عنوان، شرح و لینک لوگوی مشتریان وجود دارد. این افزونه سبک و راحت و کاملا ریسپانسیو (واکنش‌گرا) است.

Portfolio Post Type

در برخی وبسایت‌ها لازم است بخشی را به پورتفولیو یا نمونه‌ کارهای شرکت یا مشتری خود اختصاص بدهیم. شیوه‌ای که برای نمایش یک یا چند عکس مربوط به یک پروژه و اطلاعات و توضیحات آن به کار می‌آید و هم در وبسایت‌های شرکتی و هم در وبسایت‌های خلاقانه (مثلا وبسایت رزومه یک گرافیست یا معمار) به‌کار می‌رود.

Portfolio Post Type یک نوع نوشته اختصاصی برای ارسال و دسته‌بندی نمونه‌ کارهای شما ایجاد می‌کند. امکان اختصاص دسته و برچسب مجزا به هر پست وجود دارد و همچنین تصویر شاخص به آنها اختصاص می‌یابد. این افزونه که بیش از 60 هزار نصب فعال از آن وجود دارد، روش نمایش هر آیتم پورتفولیو را در قالب شما تغییر نمی‌دهد. برای طراحی ظاهری اختصاصی برای نمونه‌کارها باید فایل‌های archive-portfolio.php و single-portfolio.php را در قالب ایجاد و شخصی‌سازی کنید.

Hero - Creative Portfolio

Hero افزونه جذاب دیگری برای پیاده‌سازی پورتفولیو است که به‌صورت تعاملی در روش‌های یک، دو و سه‌ ستونه نمونه‌کارها را نشان می‌دهد و ظاهر بسیار شیک و متفاوتی دارد. امکان نمایش دسته‌بندی‌های مختلف پورتفولیو و پشتیبانی از تصاویر متعدد و ویدئو، از دیگر امکانات آن است. در بخش تنظیمات نیز می‌توانید طول خلاصه مطلب را برای هر روش ستون‌بندی متناسب با سایت انتخاب کنید.

Team Members

شاید در بعضی سایت‌ها دیده باشید که همکاران و اعضای تیم خود (مثلا مدرسان یک آموزشگاه یا مدیران یک شرکت) را به روشی جذاب معرفی می‌کنند. افزونه موردنظر ما یک نمونه خوب برای معرفی تیم است که ظاهری ساده، مناسب و واکنشگرا برای معرفی نام، تصویر، بیوگرافی و شبکه‌های اجتماعی همکاران فراهم می‌کند. Team Members بخش Teams را به پنل مدیریت اضافه می‌کند. فیلدهای نام، نام خانوادگی، شرح بیوگرافی کوتاه، عکس و شبکه‌های اجتماعی در آن وجود دارد و رنگ و تعداد نمایش اعضا در هر ردیف قابل تنظیم است.

Menu Icons

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

این افزونه به شما این امکان را می‌دهد کنار متن منوها و فهرست‌ها، آیکون گویایی را نیز استفاده کنید. استفاده از آیکون‌فونت‌های مشهوری همچون Font Awesome و Fontello و حتی استفاده از تصاویر آیکونی که توسط خودتان بارگذاری شوند در این افزونه وجود دارد.

Mega Menu by WooRockets.com

آخرین افزونه‌ای که این هفته معرفی می‌کنیم باز هم به فهرست منوها مربوط است. مگا منو یا منوهای بزرگ و گسترش‌یافته در وبسایت‌هایی که دسته‌بندی‌های موضوعی زیادی دارند - مانند فروشگاه‌های اینترنتی، سایت‌های دانلود یا دوره‌های آموزشی یک آموزشگاه - به کار می‌روند. مگا منو می‌تواند شامل تصاویر، آیکون، ستون‌بندی دسته‌های زیر منو و لینک‌های دیگر باشد. WR Mega Menu افزونه وردپرسی قدرتمندی است که منوهای اختصاصی و واکنشگرایی را با کنترل کاملی روی طراحی و سفارشی‌سازی آن ایجاد می‌کند. پیش‌نمایش زنده، تنظیمات مختلف آیکون‌ها، منوهای افقی یا عمودی، بی‌نهایت رنگ‌بندی و بخش CSS اختصاصی، این قابلیت را به طراح می‌دهد تا آنچه را در ذهن دارد، دقیق و سریع اجرا کند.

***

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