WooCommerce همراه با صفحات آرشیو و حلقه هایی است که کار بسیار خوبی را انجام می دهند، اما گاهی اوقات ممکن است لازم باشد اطلاعات بیشتری را در فروشگاه اصلی خود و سایر صفحات آرشیو نمایش دهید.
در این آموزش، به شما نشان خواهم داد که چگونه می توانید توضیحات کوتاه محصول را به صفحات آرشیو خود اضافه کنید و آن را در زیر عنوان محصول نمایش دهید.
اگر می خواهید یاد بگیرید نحوه استفاده از ووکامرس از ابتدا تا انتها، دوره رایگان مبتدی من را بررسی کنید.
آنچه شما نیاز دارید
برای پیگیری، شما نیاز دارید:
- نصب توسعه وردپرس.
- یک ویرایشگر کد
- WooCommerce نصب و فعال شد.
- محصولات اضافه شده—من داده های ساختگی محصول را که با WooCommerce ارائه می شود وارد کرده ام. برای جزئیات نحوه انجام این کار، نگاه کنید این راهنما.
- یک تم سازگار با WooCommerce فعال شد — من از آن استفاده می کنم ویترین.
قبل از شروع، مطمئن شوید که WooCommerce را راه اندازی کرده اید. برای افزودن توضیحات کوتاه محصول، سه مرحله را دنبال کنید:
- یک افزونه برای عملکرد ایجاد کنید و افزونه را فعال کنید.
- تابعی اضافه کنید که توضیحات کوتاه محصول را خروجی می دهد.
- قلابی را در ووکامرس که باید تابع را به آن قلاب کنیم، شناسایی کرده و تابع را به آن قلاب متصل کنیم.
پس بیایید شروع کنیم!
ایجاد پلاگین
در شما wp-content/plugins دایرکتوری، یک فایل PHP جدید ایجاد کنید. من به مال خودم زنگ میزنم tutsplus-product-archive-short-descriptions.php.
فایل را در ویرایشگر کد خود باز کنید. در بالای فایل، این را اضافه کنید:
<?php /** * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages * Plugin URI: * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated) * Version: 1.0 * Author: Rachel McCollin * Author URI: * */
این افزونه را راه‌اندازی می‌کند و هر آنچه را که برای فعال کردن آن نیاز دارد به وردپرس می‌دهد.
حالا برو به پلاگین ها در ادمین وردپرس خود صفحه نمایش داده و افزونه را پیدا کنید:
حالا آن را فعال کنید.
در ابتدا، چون آن را پر نکرده اید، فرقی نمی کند. در اینجا صفحه اصلی فروشگاه در حال حاضر به نظر می رسد:
نوشتن یک تابع برای خروجی توضیحات کوتاه
توضیحات کوتاه برای محصولات در ووکامرس از گزیده‌ای استفاده می‌کند که در پست‌های معمولی پیدا می‌کنید، بنابراین برای نمایش آن، تنها کاری که باید انجام دهید نمایش گزیده پست است.
در فایل افزونه خود کد زیر را اضافه کنید:
function tutsplus_excerpt_in_product_archives() {
the_excerpt();
}
به همین سادگی! اما اکنون باید تابع خود را به عمل مناسب متصل کنید تا در جای درست در صفحات آرشیو شما خروجی داشته باشد.
اتصال تابع به عمل صحیح
بیایید نگاهی به فایلی در ووکامرس بیندازیم که محتوای حلقه را در صفحات آرشیو خروجی می دهد. این فایل است content-product.phpو آن را در پوشه templates در افزونه WooCommerce پیدا خواهید کرد.
این فایل شامل تعدادی اکشن هوک است که همه آنها توسط ووکامرس برای خروجی محتوای مختلف استفاده می شود.
همانطور که می خواهیم گزیده خود را در زیر عنوان محصول نمایش دهیم، قلابی که باید استفاده کنیم این است woocommerce_after_shop_loop_item_title. همانطور که می بینید از content-product.php فایل، قبلاً دو تابع به آن متصل شده است، woocommerce_template_loop_rating() و woocommerce_template_loop_price()، که دارای اولویت هستند 5 و 10 به ترتیب. بنابراین ما باید تابع خود را با یک عدد اولویت بالاتر قلاب کنیم تا مطمئن شویم که بعد از آن فعال می شود. من مقداری آزادی عمل می گذارم و استفاده می کنم 40 به عنوان اولویت
زیر تابع خود، این را اضافه کنید:
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );
اکنون فایل پلاگین خود را ذخیره کرده و صفحه فروشگاه را در مرورگر خود رفرش کنید. اکنون توضیحات کوتاه محصول را در زیر نام محصول مشاهده خواهید کرد:
محدود کردن طول توضیحات محصول
اگر توضیحات کوتاه محصول شما طولانی باشد، ممکن است طرح صفحه فروشگاه شما را به هم بریزد. در اینجا چگونه به نظر می رسد با توضیحات طولانی تر:
من شخصاً از توضیحات کوتاه تری در یک سایت زنده استفاده می کنم و اطلاعات دقیق تر را برای توضیحات طولانی نگه می دارم. اما اگر بخواهید از توضیحات کوتاه طولانی تری در صفحات محصول خود استفاده کنید اما طول آنها را در صفحه اصلی فروشگاه محدود کنید، چه؟
شما می توانید این کار را با استفاده از wp_trim_words() برای نمایش گزیده در تابع خود عمل کنید. تابع را ویرایش کنید تا به شکل زیر در بیاید:
function tutsplus_excerpt_in_product_archives() {
echo wp_trim_words( get_the_excerpt(), 10 );
}
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );
توضیحات کوتاه محصولی که نمایش داده می شود به تعداد کلماتی که در عملکرد خود مشخص کرده اید محدود می شود:
مخفی کردن توضیحات کوتاه در صفحه محصول
کار دیگری که ممکن است بخواهید انجام دهید این است که از توضیحات کوتاه برای صفحات فروشگاه و آرشیو استفاده کنید و فقط از توضیحات طولانی در صفحات جداگانه محصول استفاده کنید.
به طور پیش فرض، WooCommerce توضیحات کوتاه را در بالای صفحه محصول و توضیحات طولانی را در پایین نمایش می دهد:
برای حذف توضیحات کوتاه از صفحه محصول و افزودن توضیحات طولانی به جای آن، باید تابعی را که خروجی توضیحات کوتاه است جدا کنید و آن را با یکی از خروجی محتوا، که توضیحات طولانی است، جایگزین کنید.
این را به فایل افزونه خود اضافه کنید:
function tutsplus_remove_short_desc_product() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
}
add_action( 'init', 'tutsplus_remove_short_desc_product' );
با این کار توضیحات کوتاه از بالای صفحه محصول حذف شده و توضیحات طولانی جایگزین آن می شود. اما توضیحات طولانی اکنون در پایین صفحه تکرار شده است، بنابراین باید آن را از برگه های محصول حذف کنید. این کار را با عملکرد دیگری انجام دهید که به آن متصل است woocommerce_product_tabs قلاب:
function tutsplus_remove_product_long_desc( $tabs ) {
unset( $tabs['description'] );
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_long_desc', 98 );
اکنون، متوجه می‌شوید که صفحات تک تک محصول شما به جای توضیح کوتاه، توضیحات طولانی را در بالای صفحه دارند:
خلاصه
از آنجایی که ووکامرس تقریباً تمام محتوای خود را با استفاده از قلاب‌های اکشن خروجی می‌دهد، اضافه کردن محتوای بیشتر با نوشتن توابع و پیوست کردن آنها به آن هوک‌ها ساده است. در این آموزش، یاد گرفتید که چگونه توضیحات کوتاه محصول را به آرشیو محصولات خود اضافه کنید. اگر می‌خواهید این کار را بیشتر انجام دهید، می‌توانید یک یا چند تگ شرطی را در تابع خود قرار دهید تا این کار را در صفحات آرشیو خاصی انجام دهید.
