ساخت بنر محصول در وردپرس با استفاده از گوتنبرگ

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

ویرایشگر گوتنبرگ (Gutenberg) و افزونه ووکامرس (WooCommerce) این کار رو بدون کدنویسی انجام می‌دن. در این آموزش با هم بنر محصول ووکامرس رو به نوشته یا برگه اضافه می‌کنیم، تنظیماتش رو می‌بینیم و سراغ چند نکته کاربردی و مشکل رایج هم می‌ریم.

چرا از بنر محصول در نوشته‌ها و برگه‌ها استفاده کنیم؟

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

افزایش نرخ تبدیل (Conversion Rate): نرخ تبدیل یعنی درصدی از بازدیدکننده‌ها که کار موردنظر شما، مثل خرید، رو انجام می‌دن. کسی که مقاله «بهترین گوشی‌های اقتصادی» رو می‌خونه در حال بررسی گزینه‌هاست. اگه همون‌جا بنر «گوشی شیائومی نوت ۱۳» رو همراه قیمت و دکمه خرید ببینه، مسیر رسیدن به محصول براش کوتاه‌تر می‌شه. ادعای افزایش نرخ تبدیل تا ۳۰ درصد به منبع معتبر نیاز داره و بهتره پیش از انتشار بررسی بشه.

بهبود تجربه کاربری (UX): تجربه کاربری یعنی حسی که کاربر هنگام کار با سایتتون داره. با نمایش اطلاعات اصلی محصول داخل مقاله، کاربر مجبور نیست مدام بین مقاله و صفحه محصول رفت‌وبرگشت کنه.

معرفی محصولات جدید و ویژه: می‌تونید محصولات جدید، تخفیف‌خورده یا پرفروشتون رو داخل نوشته‌های پربازدید معرفی کنید؛ البته بنر باید با موضوع همون بخش ارتباط داشته باشه تا مزاحم مطالعه نشه.

سئو و لینک‌سازی داخلی: هر بنر محصول می‌تونه یک لینک داخلی به صفحه محصول بسازه. این لینک به کاربر و موتور جست‌وجو کمک می‌کنه ارتباط بین مقاله و محصول رو بهتر بفهمن.

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

پس بنر محصول فقط برای زیباتر کردن مقاله نیست. این بنر مسیر دیدن و خریدن محصول رو هم ساده‌تر می‌کنه و یک لینک داخلی مرتبط در اختیارتون می‌ذاره.

آشنایی با بلاک «محصول ویژه» در ویرایشگر گوتنبرگ

افزونه ووکامرس چند بلاک اختصاصی به ویرایشگر گوتنبرگ اضافه می‌کنه. یکی از این گزینه‌ها بلاک «محصول ویژه» (Featured Product) هست. با این بلاک می‌تونید یک محصول مشخص رو انتخاب کنید تا تصویر، عنوان، قیمت، توضیح کوتاه و دکمه «افزودن به سبد خرید» یا «مشاهده محصول» داخل نوشته یا برگه نمایش داده بشه.

اگه هنوز ووکامرس رو راه‌اندازی نکردید، اول افزونه رو نصب و فعال کنید و دست‌کم یک محصول بسازید. برای شروع می‌تونید صفحه «آموزش ووکامرس» در میهن وردپرس رو ببینید.

مراحل ساخت بنر محصول با گوتنبرگ

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

مرحله ۱: وارد ویرایشگر یک نوشته یا برگه بشید

در پیشخوان وردپرس به نوشته‌ها > افزودن نوشته تازه (Posts > Add New) یا برگه‌ها > افزودن برگه تازه (Pages > Add New) برید. اگه از قبل نوشته یا برگه‌ای دارید، می‌تونید همون مورد رو برای ویرایش باز کنید.

مرحله ۲: یک بلاک تازه به گوتنبرگ اضافه کنید

در ویرایشگر گوتنبرگ روی علامت (+) یا افزودن بلاک کلیک کنید. این علامت رو در نوار بالای ویرایشگر یا داخل خود صفحه می‌بینید. بعد از کلیک، پنل انتخاب و جست‌وجوی بلاک‌ها باز می‌شه.

مرحله ۳: بلاک «محصول ویژه» رو پیدا کنید

داخل کادر جست‌وجو عبارت «محصول ویژه» یا «Featured Product» رو بنویسید. راه دیگه اینه که روی «مرور کردن همه» (Browse all) کلیک کنید و بلاک موردنظر رو در بخش «ووکامرس» (WooCommerce) پیدا کنید.

نکته: اگه بلاک «محصول ویژه» رو پیدا نکردید، اول مطمئن بشید ووکامرس نصب و فعال هست. ممکنه قالب یا یکی از افزونه‌ها هم روی نمایش بلاک‌های ووکامرس اثر گذاشته باشه. برای بررسی سازگاری می‌تونید موقتاً از یک قالب استاندارد سازگار با ووکامرس، مثل قالب اهورا، استفاده کنید.

مرحله ۴: محصول موردنظرتون رو انتخاب کنید

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

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

مرحله ۵: بنر رو سفارشی کنید

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

• اندازه تصویر: اندازه مناسب تصویر محصول رو از بین گزینه‌هایی مثل Thumbnail، Medium، Large یا Full انتخاب کنید.
• چیدمان (Layout): جای تصویر و اطلاعات محصول رو بررسی کنید تا بنر با فضای مقاله هماهنگ باشه.
• نمایش در موبایل: پیش‌نمایش موبایل رو ببینید تا مطمئن بشید متن، تصویر و دکمه بدون به‌هم‌ریختگی نمایش داده می‌شن.
• لینک صفحه محصول: بررسی کنید کلیک روی عنوان یا تصویر، کاربر رو به صفحه درست محصول می‌بره.
• قیمت و دکمه خرید: با توجه به گزینه‌های بلاک می‌تونید نمایش اطلاعات محصول و دکمه رو تنظیم کنید.

اگه ظاهر پیش‌فرض بنر با مقاله هماهنگه، لازم نیست همه تنظیمات رو تغییر بدید. فقط پیش‌نمایش دسکتاپ و موبایل رو بررسی کنید.

مرحله ۶: تغییرات رو ذخیره و منتشر کنید

بعد از اضافه کردن بنر روی «انتشار» (Publish) یا «به‌روزرسانی» (Update) کلیک کنید. بعد نوشته یا برگه رو در مرورگر باز کنید و لینک، قیمت، تصویر و دکمه محصول رو یک‌بار امتحان کنید.

یک مثال واقعی از بنر محصول در مقاله آموزشی

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

چند نکته برای بهتر شدن بنر محصول

فقط اضافه کردن بلاک کافی نیست. برای اینکه بنر واضح و کاربردی باشه، این نکته‌ها رو هم در نظر بگیرید:

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

۲. از تصویر واضح و باکیفیت استفاده کنید: تصویر محصول بهتره نور مناسب و پس‌زمینه ساده‌ای داشته باشه. عکس تار یا خیلی کوچک باعث می‌شه جزئیات محصول درست دیده نشن.

۳. نام محصول رو کوتاه و روشن بنویسید: بهتره عنوان همون نام رسمی محصول باشه؛ مثل «گوشی آیفون ۱۵ پرو مکس». اطلاعات فرعی و توضیحات طولانی رو داخل نام محصول نذارید.

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

۵. دکمه خرید رو واضح نگه دارید: رنگ دکمه باید با پس‌زمینه بنر تضاد کافی داشته باشه. متن‌هایی مثل «افزودن به سبد خرید» یا «مشاهده محصول» هم دقیق و قابل‌فهم هستن.

۶. تعداد بنرها رو با طول مقاله هماهنگ کنید: در مقاله‌های طولانی می‌تونید چند محصول مرتبط رو در بخش‌های مختلف معرفی کنید. ولی بنرهای زیاد تمرکز خواننده رو به هم می‌زنن. برای یک مقاله حدود ۱۰۰۰ کلمه‌ای معمولاً یک یا دو بنر مرتبط کافیه و برای مقاله‌ای بیشتر از ۲۰۰۰ کلمه می‌تونید دو یا سه بنر رو در فاصله‌های مناسب قرار بدید.

حل مشکلات رایج بنر محصول

مشکل: بلاک «محصول ویژه» رو در گوتنبرگ پیدا نمی‌کنم.

• راه‌حل: اول فعال بودن ووکامرس رو بررسی کنید. بعد برای پیدا کردن تداخل احتمالی، سایت رو با یک قالب پیش‌فرض مثل Twenty Twenty-Four آزمایش کنید. اگه بلاک با قالب پیش‌فرض دیده شد، احتمالاً قالب فعلی روی نمایش اون اثر گذاشته. در این شرایط از پشتیبانی قالب کمک بگیرید یا به قالب استانداردی مثل قالب اهورا مهاجرت کنید.

مشکل: بنر نمایش داده می‌شه، ولی دکمه خرید کار نمی‌کنه.

• راه‌حل: اول مطمئن بشید خود محصول منتشر شده، موجوده و امکان خرید داره. بعد تنظیمات افزودن به سبد خرید ووکامرس رو بررسی کنید. اگه گزینه مربوط به AJAX در نسخه ووکامرس شما در دسترسه، تنظیم اون رو هم ببینید. AJAX روشی هست که بعضی کارها، مثل افزودن محصول به سبد خرید، رو بدون بارگذاری کامل صفحه انجام می‌ده. در پایان کش سایت رو از افزونه‌ای مثل رخش یا LiteSpeed Cache پاک کنید و دوباره دکمه رو آزمایش کنید.

مشکل: بنر در موبایل به هم ریخته‌ست.

• راه‌حل: پیش‌نمایش موبایل و تنظیمات چیدمان بلاک رو بررسی کنید. واکنش‌گرا یا Responsive یعنی طرح صفحه خودش رو با عرض نمایشگر هماهنگ کنه. بهتره تصویر محصول هم اندازه مناسبی داشته باشه؛ فرمت WebP می‌تونه حجم تصویر رو کمتر کنه، ولی به‌تنهایی مشکل چیدمان رو حل نمی‌کنه.

جمع‌بندی

با بلاک «محصول ویژه» ووکامرس می‌تونید یک محصول رو بدون کدنویسی داخل نوشته یا برگه نمایش بدید. کافیه بلاک رو اضافه کنید، محصول موردنظرتون رو انتخاب کنید و ظاهرش رو در دسکتاپ و موبایل بررسی کنید. بنر رو جایی بذارید که واقعاً به ادامه مطلب کمک کنه و قبل از انتشار هم تصویر، قیمت، لینک و دکمه خرید رو آزمایش کنید. به این شکل خواننده بدون سردرگمی از محتوای آموزشی به صفحه محصول می‌رسه.

حالا روی دکمه «مرور کردن همه» کلیک کنید تا همه بلاک‌های گوتنبرگ رو ببینید. ووکامرس بلاکی با نام «محصول ویژه» به این فهرست اضافه می‌کنه.

جمع‌بندی نهایی

لینک: https://mihanwp.com/create-product-banner-by-gutenberg/

سوالات متداول درباره ساخت بنر محصول با گوتنبرگ

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.