آموزش بلوک های HTML در قالب وودمارت | کاربردهای HTML blocks

بلوک های HTML یکی از قابلیت‌های قالب WoodMart برای ساخت بخش‌های محتوایی قابل استفاده مجدد است.

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

این محتوا می‌تواند شامل متن، تصویر، محصول، فرم، منو یا هر محتوای دیگری باشد که توسط صفحه سازهایی مانند Gutenberg، Elementor یا WPBakery پشتیبانی می‌شود.

مزیت مهم HTML Block این است که اگر یک بلوک منتشرشده را ویرایش کنید، تمام قسمت‌هایی که همان بلوک را نمایش می‌دهند نیز به‌صورت خودکار با محتوای جدید به‌روزرسانی می‌شوند.

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

این قابلیت برای بخش‌هایی مانند:

• فوتر
• مگامنو
• بنرهای تبلیغاتی
• اطلاعات محصول
• بخش‌های سایدبار
• محتوای مشترک

کاربرد دارد.

چگونه در قالب وودمارت یک بلوک HTML بسازیم؟

برای ساخت HTML Block ابتدا وارد پیشخوان وردپرس شوید.

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

پیشخوان ← بلوک‌های HTML ← افزودن بلوک

در این قسمت می‌توانید یک بلوک جدید ایجاد کنید.

مرحله اول: انتخاب عنوان

برای HTML Block یک عنوان مشخص و قابل تشخیص وارد کنید.

بهتر است عنوان را متناسب با کاربرد بلوک انتخاب کنید؛ برای مثال اگر بلوک برای فوتر ساخته شده، عنوان آن را به شکلی انتخاب کنید که در زمان انتخاب از فهرست HTML Block بتوانید به‌راحتی آن را پیدا کنید.

مرحله دوم: ساخت محتوا

محتوای HTML Block را می‌توانید با یکی از ابزارهای پشتیبانی‌شده ایجاد کنید:

• Gutenberg
• Elementor
• WPBakery

بنابراین ساخت HTML Block به یک ویرایشگر خاص محدود نیست.

مرحله سوم: دسته‌بندی

در صورت نیاز می‌توانید HTML Block را در یک HTML Block Category قرار دهید.

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

مرحله چهارم: انتشار

پس از ساخت محتوا، بلوک را منتشر کنید.

بعد از انتشار، HTML Block در فهرست بلوک‌های موجود قرار می‌گیرد.

شورت‌ کد بلوک های HTML وودمارت چیست؟

در فهرست HTML Blocks، برای هر بلوک منتشرشده یک شورت‌کد نمایش داده می‌شود.

فرمت شورت‌ کد به شکل زیر است: [[html_block id="123"]]

عدد 123 شناسه همان HTML Block است و برای هر بلوک می‌تواند متفاوت باشد.

بنابراین اگر شناسه بلوک شما مثلاً 456 باشد، شورت‌کد آن به این شکل خواهد بود:[[html_block id="456"]]

این شورت‌کد را می‌توان در قسمت‌هایی از سایت که شورت‌کد را پردازش می‌کنند قرار داد.

چگونه HTML Block را در سایت نمایش دهیم؟

قالب وودمارت چند روش مختلف برای قرار دادن HTML Block در سایت ارائه می‌کند.

بهترین روش به محل استفاده بستگی دارد.

روش اول: استفاده از HTML Block Selector

در بسیاری از تنظیمات WoodMart یک انتخاب‌ گر اختصاصی برای HTML Blocks وجود دارد.

در این حالت کافی است نوع محتوا را روی:

HTML Block

قرار دهید و سپس از قسمت جستجو، بلوک منتشرشده موردنظر را انتخاب کنید.

این روش زمانی که یک HTML Block selector در تنظیمات وجود دارد، روش پیشنهادی است.

روش دوم: استفاده از کدهای کوتاه

در قسمت‌هایی که انتخاب‌گر اختصاصی HTML Block وجود ندارد اما فیلد موردنظر از شورت‌کد پشتیبانی می‌کند، می‌توانید شورت‌کد بلوک را مستقیماً وارد کنید.

برای نمونه:[[html_block id="123"]]

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

• Text next to copyrights
• Empty cart text
• پیام Popup مربوط به Age Verification

استفاده از بلوک های HTML در گوتنبرگ

اگر از ویرایشگر Gutenberg استفاده می‌کنید، می‌توانید HTML Block را با شورت‌کد نمایش دهید.

مراحل:

1. وارد ویرایش صفحه شوید.
2. یک Shortcode Block اضافه کنید.
3. شورت‌کد بلوک های HTML را از فهرست HTML Blocks کپی کنید.
4. شورت‌کد را در بلوک قرار دهید.
5. صفحه را ذخیره یا منتشر کنید.

استفاده از HTML Block در المنتور

در المنتور نیز می‌توانید HTML Block را از طریق شورت‌کد نمایش دهید.

مراحل کار:

1. افزونه المنتور پرو را دانلود و نصب کنید.
2. صفحه را با ویرایشگر المنتور باز کنید.
3. ویجت کد کوتاه را اضافه کنید.
4. شورت‌ کد بلوک HTML مورد نظر را وارد کنید.
5. تغییرات را ذخیره کنید.

به این ترتیب محتوای ساخته‌ شده در HTML Block در محل مورد نظر نمایش داده می‌شود.

استفاده از بلوک های HTML در WPBakery

در WPBakery، وومارت یک عنصر اختصاصی با عنوان:

HTML Block

در اختیار شما قرار می‌دهد.

این عنصر را اضافه کنید و سپس HTML Block موردنظر را انتخاب کنید.

این روش به‌ خصوص زمانی کاربرد دارد که صفحه یا بخش موردنظر با WPBakery ساخته شده باشد.

استفاده از HTML Block در هدر ساز وودمارت

یکی از کاربردهای بلوک های HTML در قالب وودمارت، ساخت بخش‌های سفارشی برای هدر است.

برای استفاده از HTML Block در Header Builder، یک ردیف یا ستون از Header Builder را انتخاب کنید و عنصر:

بلوک های HTML

را به آن اضافه کنید.

سپس HTML Block موردنظر را انتخاب کنید.

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

این روش زمانی کاربرد دارد که عناصر استاندارد Header Builder ساختار موردنیاز شما را ارائه نمی‌کنند.

استفاده از HTML Block در مگامنو وودمارت

در وودمارت می‌توان محتوای کامل یک مگامنو را با استفاده از HTML Block ایجاد کرد.

برای این کار بلوک های HTML موردنظر را در تنظیمات آیتم مربوط به منوی وردپرس اختصاص دهید.

به این ترتیب محتوای HTML Block به‌عنوان محتوای مگامنو نمایش داده می‌شود.

این روش به شما اجازه می‌دهد محتوای مگامنو را در یک بلوک جداگانه ایجاد و مدیریت کنید.

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

استفاده از HTML Block در Footer

یکی از کاربردهای مهم HTML Block در WoodMart، ساخت فوتر قابل استفاده مجدد است.

روش پیشنهادی در مستندات WoodMart این است که از مسیر:

پیشخوان ← تنظیمات قالب ← فوتر

نوع محتوا را روی:

HTML Block

قرار دهید.

سپس HTML Block موردنظر را انتخاب کنید.

در این روش می‌توانید ساختار کامل فوتر را در یک HTML Block ایجاد کرده و همان بلوک را به‌عنوان محتوای فوتر انتخاب کنید.

استفاده از HTML Block در ویجت فوتر

اگر فوتر سایت شما بر اساس WordPress Widgets ساخته شده باشد، می‌توانید از ویجت:

WOODMART HTML Block

استفاده کنید.

مسیر:

پیشخوان ← نمایش ← ابزارک‌ها

در ناحیه ویجت موردنظر، ویجت بلوک های HTML وودمارت را اضافه کنید.

سپس HTML Block موردنظر را از تنظیمات ویجت انتخاب کنید.

استفاده از HTML Block در Prefooter

برای قرار دادن یک HTML Block در قسمت بالای فوتر، به مسیر زیر بروید:

پیشخوان ← تنظیمات قالب ← فوتر ← پیش‌ فوتر

در قسمت:

Prefooter content

نوع محتوا را روی:

HTML Block

قرار دهید.

سپس بلوک موردنظر را انتخاب کنید.

استفاده از HTML Block کنار کپی رایت

فیلد:

Text next to copyrights

در مسیر:

پیشخوان ← تنظیمات قالب ← فوتر ← کپی‌ رایت

از شورت‌کد پشتیبانی می‌کند.

بنابراین می‌توانید شورت‌کد HTML Block را در این قسمت قرار دهید تا محتوای بلوک در کنار متن Copyright نمایش داده شود.

برای مثال:[[html_block id="123"]]

استفاده از HTML Block در Header Banner

WoodMart امکان استفاده از HTML Block برای محتوای Header Banner را نیز فراهم می‌کند.

برای این کار به مسیر زیر بروید:

پیشخوان ← تنظیمات قالب ← عمومی ← بنر هدر

سپس:

1. گزینه Header banner را فعال کنید.
2. در قسمت Banner content نوع محتوا را روی HTML Block قرار دهید.
3. HTML Block موردنظر را انتخاب کنید.

محتوای انتخاب‌شده در بخش Header Banner نمایش داده می‌شود.

استفاده از HTML Block در Popup

در WoodMart برای Popupهای سفارشی جدید می‌توان از Popup Builder استفاده کرد.

در کنار آن، Popup تبلیغاتی قدیمی یا Legacy Promo Popup نیز در تنظیمات قالب باقی مانده است.

مسیر آن:

پیشخوان ← تنظیمات قالب ← عمومی ← پاپ‌ آپ تبلیغاتی

این بخش از نوع محتوای HTML Block پشتیبانی می‌کند.

بنابراین می‌توانید یک HTML Block را به محتوای Promo Popup اختصاص دهید.

استفاده از HTML Block در Age Verification Popup

Popup مربوط به تأیید سن، انتخاب‌گر جداگانه‌ای برای HTML Block ندارد.

اما فیلد:

Popup message

از شورت‌کد پشتیبانی می‌کند.

بنابراین می‌توانید شورت‌کد HTML Block را در مسیر زیر وارد کنید:

پیشخوان ← تنظیمات قالب ← عمومی ← پاپ‌ آپ تأیید سن

پس از قرار دادن HTML Block در پیام Popup، باید به هماهنگی رنگ‌ها نیز توجه کنید.

در مستندات WoodMart توصیه شده است که Text color scheme مربوط به Popup با رنگ‌های استفاده‌شده در HTML Block هماهنگ باشد.

استفاده از HTML Block در ووکامرس

یکی از کاربردهای مهم HTML Block در قالب WoodMart، استفاده از آن در قسمت‌های مختلف فروشگاه WooCommerce است.

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

HTML Block در صفحه سبد خرید خالی

در مسیر:

پیشخوان ← تنظیمات قالب ← فروشگاه ← سبد خرید

فیلد:

Empty cart text

از شورت‌کد HTML Block پشتیبانی می‌کند.

بنابراین می‌توانید یک HTML Block را در صفحه سبد خرید خالی نمایش دهید.

از این قابلیت می‌توان برای قرار دادن مواردی مانند:

• دکمه
• لینک
• بنر
• محتوای دیگر

استفاده کرد.

شورت‌کد بلوک را در این فیلد قرار دهید.

بلوک های HTML در صفحه تشکر ووکامرس

WoodMart امکان قرار دادن HTML Block در صفحه تشکر سفارش را نیز فراهم می‌کند.

به مسیر:

پیشخوان ← تنظیمات قالب ← فروشگاه ← صفحه تشکر

بروید.

در قسمت:

Extra content for “Thank you page”

نوع محتوا را روی:

HTML Block

قرار دهید.

سپس بلوک موردنظر را انتخاب کنید.

در همین بخش گزینه:

Default “Thank you page” content

نیز مشخص می‌کند که محتوای استاندارد صفحه تشکر WooCommerce و جزئیات سفارش همچنان نمایش داده شوند یا خیر.

بلوک های HTML قبل و بعد از دکمه افزودن به سبد خرید

WoodMart امکان قرار دادن محتوای قابل استفاده مجدد را در اطراف دکمه Add to cart نیز فراهم می‌کند.

مسیر:

پیشخوان ← تنظیمات قالب ← محصول تکی ← افزودن به سبد خرید

در این قسمت دو گزینه وجود دارد:

• Before “Add to cart button”
• After “Add to cart button”

هر دو گزینه از نوع محتوای HTML Block پشتیبانی می‌کنند.

بنابراین می‌توانید یک HTML Block را قبل یا بعد از دکمه افزودن به سبد خرید نمایش دهید.

HTML Block در تب‌های محصول

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

در WoodMart هم تب‌های عمومی قدیمی و هم تب‌های سفارشی اختصاصی محصول می‌توانند از HTML Block استفاده کنند.

برای تب‌های عمومی می‌توانید HTML Block موردنظر را انتخاب کنید.

همچنین برای یک محصول خاص، می‌توان HTML Block را به یک Custom Product Tab اختصاص داد.

این قابلیت باعث می‌شود محتوای موردنظر در تب مربوط به محصول نمایش داده شود.

HTML Block در محتوای اضافی محصول

یک محصول می‌تواند دارای یک Extra content block باشد.

این بلوک را می‌توان در موقعیت‌های مختلفی قرار داد، از جمله:

• قبل از محتوای محصول
• بعد از محتوای محصول
• در موقعیت Prefooter

برای تنظیمات دقیق محصول باید از فرایند تنظیمات صفحه محصول در WoodMart استفاده شود.

HTML Block در دسته‌بندی‌ ها و ویژگی‌ های محصول

در دسته‌بندی‌های محصولات و ویژگی‌ها، WoodMart گزینه‌ای با عنوان Extra description ارائه می‌کند.

در این قسمت می‌توان نوع محتوا را روی:

HTML Block

قرار داد و سپس بلوک موردنظر را انتخاب کرد.

این محتوا بعد از Product Loop نمایش داده می‌شود.

همچنین برخی فیلدهای توضیحات Taxonomy که از شورت‌کد پشتیبانی می‌کنند، امکان قرار دادن مستقیم شورت‌کد HTML Block را نیز دارند.

استفاده از HTML Block در Widgets و Sidebar

HTML Block را می‌توان در نواحی ویجت ثبت‌شده وردپرس نیز نمایش داد.

به مسیر:

پیشخوان ← نمایش ← ابزارک‌ ها

بروید.

سپس ویجت:

WOODMART HTML Block

را به ناحیه موردنظر اضافه کنید.

در تنظیمات ویجت، HTML Block موردنظر را انتخاب کنید.

برای مثال، می‌توان HTML Blockای که شامل یک Product Filters element است را در سایدبار فروشگاه نمایش داد.

بنابراین HTML Block می‌تواند برای ساخت محتوای قابل استفاده مجدد در Sidebar نیز مورد استفاده قرار گیرد.

استفاده از HTML Block برای نسخه موبایل

یکی دیگر از قابلیت‌های HTML Block در WoodMart، استفاده از آن برای محتوای مخصوص موبایل است.

اگر بخواهید محتوای معمول یک صفحه را در دستگاه‌های موبایل با محتوای دیگری جایگزین کنید، می‌توانید محتوای نسخه موبایل را به‌صورت یک HTML Block ایجاد کنید.

سپس در تنظیمات همان صفحه، HTML Block را به‌عنوان:

Mobile version

انتخاب کنید.

برای این کار ابتدا محتوای مخصوص موبایل را به‌عنوان یک HTML Block بسازید و سپس آن را در تنظیمات نسخه موبایل صفحه انتخاب کنید.

این قابلیت در تنظیمات صفحات استاندارد و همچنین روند طراحی صفحات با Elementor قابل استفاده است.

چه زمانی استفاده از HTML Block انتخاب مناسبی است؟

HTML Block در WoodMart زمانی کاربرد ویژه‌ای دارد که بخواهید یک محتوای مشخص را یک بار ایجاد کنید و آن را در چند قسمت مختلف سایت استفاده کنید.

برای مثال، اگر یک بخش مشترک در چند قسمت سایت دارید، به‌جای ساخت دوباره همان محتوا، می‌توانید آن را در یک HTML Block ایجاد کنید.

مهم‌ترین ویژگی این روش، مدیریت متمرکز محتوا است.

اگر HTML Block منتشرشده را ویرایش کنید، مکان‌هایی که همان بلوک را نمایش می‌دهند نیز محتوای به‌روزشده را دریافت می‌کنند.

به همین دلیل HTML Block برای محتوای مشترکی مانند فوتر، مگامنو، بنر، اطلاعات محصول و بخش‌های سایدبار کاربرد دارد.

نکات مهم هنگام استفاده از بلوک های HTML در وودمارت

1. عنوان مناسبی برای بلوک انتخاب کنید

اگر تعداد HTML Blockهای سایت زیاد شود، پیدا کردن یک بلوک با عنوان نامناسب دشوار خواهد بود.

عنوانی انتخاب کنید که کاربرد بلوک را مشخص کند.

2. برای مدیریت بهتر از Category استفاده کنید

اگر HTML Blockهای زیادی ایجاد می‌کنید، می‌توانید آن‌ها را در دسته‌بندی‌های HTML Block سازمان‌دهی کنید.

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

3. ابتدا بررسی کنید آیا HTML Block Selector وجود دارد

اگر بخشی از تنظیمات WoodMart دارای انتخاب‌گر HTML Block است، استفاده از همان انتخاب‌گر روش پیشنهادی است.

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

4. شورت‌کد هر بلوک را بشناسید

هر HTML Block منتشرشده یک شناسه دارد و شورت‌کد آن بر اساس همان شناسه ساخته می‌شود:[[html_block id="123"]]

عدد 123 را باید با شناسه واقعی بلوک خود جایگزین کنید.

5. ویرایش یک بلوک روی تمام محل‌های استفاده از آن اثر می‌گذارد

این یکی از نکات مهم HTML Block است.

اگر یک بلوک را در چند قسمت سایت استفاده کرده باشید، ویرایش همان بلوک باعث به‌روزرسانی محتوای نمایش‌داده‌شده در تمام محل‌هایی می‌شود که آن HTML Block را استفاده می‌کنند.

بنابراین هنگام ویرایش یک بلوک مشترک، باید در نظر داشته باشید که تغییر محتوا ممکن است در چند قسمت سایت نمایش داده شود.

جمع‌بندی

HTML Block در WoodMart ابزاری برای ایجاد محتوای قابل استفاده مجدد است.

با ایجاد یک HTML Block می‌توانید محتوایی شامل متن، تصویر، محصول، فرم، منو یا سایر محتوای پشتیبانی‌شده توسط Gutenberg، Elementor و WPBakery بسازید و سپس آن را در قسمت‌های مختلف سایت نمایش دهید.

این قابلیت در بخش‌های مختلف WoodMart کاربرد دارد؛ از جمله:

• Header Builder
• Mega Menu
• Footer
• Prefooter
• Header Banner
• Popup
• Age Verification Popup
• سبد خرید خالی
• صفحه Thank You
• اطراف دکمه Add to cart
• Product Tabs
• Extra Content محصول
• توضیحات اضافی دسته‌بندی و ویژگی‌ها
• Sidebar و Widgets
• نسخه موبایل صفحات

برای نمایش HTML Block نیز بسته به محل استفاده می‌توانید از HTML Block Selector یا شورت‌کد آن استفاده کنید.

شورت‌کد هر بلوک در فهرست HTML Blocks نمایش داده می‌شود و ساختار آن به شکل زیر است:[[html_block id="123"]]

نکته مهم این است که HTML Block را می‌توان یک بار ایجاد کرد و در چند محل استفاده کرد؛ سپس با ویرایش همان بلوک، محتوای نمایش‌داده‌شده در محل‌های استفاده نیز به‌روزرسانی می‌شود.

سوالات متداول