ساختار محصولات در ووکامرس

احتمالاً برای شما هم پیش آمده است؛ در حال بهینه‌سازی یک سایت فروشگاهی هستید و مدیر کسب‌وکار از شما می‌خواهد یک تغییر به‌ظاهر ساده در صفحه محصول ایجاد کنید. مثلاً می‌گوید: «می‌شود دکمه افزودن به سبد خرید را بیاوریم بالای قیمت؟» یا «می‌توانیم متن دکمه را به خرید نهایی تغییر دهیم و زیر آن یک متن اعتماد‌ساز اضافه کنیم؟»

در مواجهه با این درخواست‌ها، معمولاً دو اتفاق می‌افتد. یا با شنیدن کلمه «نمی‌شود» از سمت تیم فنی روبه‌رو می‌شویم، یا سعی می‌کنیم با استفاده از کدهای CSS و دست‌کاری‌های غیراصولی در فایل‌های HTML (به اصطلاح کثیف‌کاری کدها)، ظاهر صفحه را به شکلی که می‌خواهیم درآوریم.

اما به عنوان یک کارشناس سئو، باید بدانیم که دست‌کاری غیراصولی کدهای صفحه محصول، نه تنها ساختار سایت را شکننده می‌کند، بلکه مستقیماً روی استراکچر دیتا (Structured Data) و کدهای اسکیمای ارزشمند محصولات ما تأثیر منفی می‌گذارد.

خبر خوب این است که ووکامرس (WooCommerce) بسیار هوشمندتر و منعطف‌تر از چیزی است که به نظر می‌رسد. برای تغییر چیدمان صفحه محصول، اصلاً نیازی به درگیری با کدهای پیچیده HTML نیست. راز این انعطاف‌پذیری در سیستمی نهفته است که ووکامرس بر پایه آن بنا شده: سیستم هوک‌ها (Hooks)، اکشن‌ها و فیلترها.

صفحه محصول ووکامرس دقیقا چگونه کار می‌کند؟

وقتی یک محصول در ووکامرس ایجاد می‌کنید، اطلاعات پایه مثل نام، قیمت، موجودی انبار، شناسه محصول (SKU) و توضیحات، به صورت خودکار توسط خود سیستم مدیریت و ذخیره می‌شوند. شما نیازی به ساختن مجدد این فیلدها ندارید (مگر اینکه بخواهید با افزونه‌هایی مثل ACF فیلدهای کاملاً اختصاصی جدیدی اضافه کنید).

صفحه نمایش محصول (که در ساختار قالب با نام content-single-product شناخته می‌شود)، در واقع یک صفحه پر از کدهای ثابت HTML نیست. این صفحه بیشتر شبیه به یک اسکلت‌بندی هوشمند است که از چندین نقطه اتصال (Hook) تشکیل شده است.

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

جادوی اکشن‌ها (Actions) و فیلترها (Filters) در ووکامرس

برای اینکه بتوانید صفحه محصول را دقیقاً مطابق با استراتژی فروش و نیاز کاربر طراحی کنید، دو ابزار قدرتمند در اختیار دارید که درک تفاوت آن‌ها، دید شما را به کلی تغییر می‌دهد:

۱. فیلترها (Filters): تغییر قبل از نمایش تصور کنید می‌خواهید لیبل دکمه «افزودن به سبد خرید» را به «خرید محصول» تغییر دهید. به جای گشتن در فایل‌های ترجمه یا تغییر کدهای اصلی، از یک فیلتر (add_filter) استفاده می‌کنیم. فیلترها مانند یک ایست بازرسی عمل می‌کنند. قبل از اینکه المانی روی صفحه سایت برای کاربر لود شود، فیلتر آن را متوقف می‌کند، تغییر مدنظر شما (مثلاً تغییر نام لیبل) را روی آن اعمال می‌کند و سپس اجازه نمایش می‌دهد. همه این‌ها به صورت کاملاً خودکار و در کسری از ثانیه رخ می‌دهد.

۲. اکشن‌ها (Actions): افزودن اتفاقات جدید گاهی اوقات قصد تغییر چیزی را ندارید، بلکه می‌خواهید المان جدیدی به صفحه اضافه کنید. مثلاً می‌خواهید دقیقاً بعد از دکمه سبد خرید، یک متن راهنما یا یک بنر کوچک قرار دهید. اینجا اکشن‌ها (add_action) وارد عمل می‌شوند. شما به ووکامرس می‌گویید: «هر زمان که دکمه خرید را در صفحه لود کردی، بلافاصله بعد از آن، این قطعه متن من را هم به نمایش بگذار». به همین سادگی، بدون اینکه ساختار صفحه به هم بریزد، محتوای شما در دقیق‌ترین جای ممکن می‌نشیند.

بازی با اولویت‌ها: جابه‌جایی المان‌ها بدون دردسر

یکی از جذاب‌ترین قابلیت‌های این سیستم، امکان جابه‌جایی کامل ساختار صفحه محصول است. ووکامرس به شما دیکته نمی‌کند که سبد خرید حتماً باید کجای صفحه باشد!

هر المانی در صفحه محصول یک «شماره اولویت» برای اجرا دارد. اعدادی مثل ۵، ۱۰، ۲۰ و غیره. قانون این است: هرچه عدد کمتر باشد، اولویت اجرا بالاتر است و المان زودتر (یا بالاتر در صفحه) نمایش داده می‌شود.

اگر بخواهید جای عنوان محصول و قیمت را با هم عوض کنید، نیازی نیست کدهای آن‌ها را در فایل قالب کات (Cut) و پیست (Paste) کنید. تنها کاری که باید انجام دهید این است که:

• ابتدا با یک دستور ساده (remove_action)، نمایش آن المان را در جایگاه فعلی‌اش لغو کنید.
• سپس با اختصاص دادن یک عدد اولویت جدید در دستور add_action، آن را در هر کجای صفحه که دوست دارید بنشانید.

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

چرا درک این مفاهیم برای یک کارشناس سئو حیاتی است؟

شاید از خود بپرسید که تغییر چیدمان دکمه‌ها چه ارتباطی به سئو دارد؟ پاسخ در حفظ یکپارچگی استراکچر دیتاها (Structured Data) است.

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

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

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