מדריך שימוש בהוקים של ווקומרס (WooCommerce Hooks)

לפני שנתחיל בהסבר על כיצד להשתמש בהוקים של ווקומרס, בואו נאמר מספר מילים על הוקים. הוקים בווורדפרס מאפשרים לכם להוסיף או לשנות קוד ללא הצורך בעריכת קבצי המקור. מכאן, שאלו שימושיים מאד ומאפשרים למפתחים לבצע מניפולציות על קוד כזה או אחר.

ישנם שני סוגים של הוקים בוורדפרס: פעולות ופילטרים (actions & filters). פעולות מאפשרות לכם להוסיף קוד בנקודות מסוימות. פילטרים לעומתם מאפשרות לכם לבצע מניפולציה על קוד ולהחזיר ערך חדש בסופו של תהליך.

אם אתם מעוניינים להשתמש בהוק מסויים בכדי לשנות או להוסיף קוד, אתם יכולים להוסיפו לקובץ function.php. בכדי לעשות זאת, ולפני שאתם ממשיכים חשוב שתדעו כיצד ליצור תבנית בת.

כיצד להשתמש בהוקים ופילטרים?

בכדי להשתמש בהוקים מסוג פעולות, עליכם לחפש או לדעת את הנקודה בה ההוק מתבצע בקבצי התבנית או התוסף ולמצוא את שמו הייחודי. אותה נקודת בה מתבצעת הפעולה תראה בסגנון הבא:

do_action('action_name');

כעת כשאתם יודעים את שם ההוק אתם יכולים בקלות להוסיף קוד משלכם שיתבצע בנקודה זו (בהוק זה):

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name() {
    // Your custom code goes here
    }
    add_action( 'action_name', 'your_function_name' );
}

פילטרים נקראים לאורך הקוד באמצעות הקוד הבא:

apply_filters( 'filter_name', $variable );

באותו אופן שמצאתם את שם הפעולה, עליכם למצוא את שם הפילטר בכדי להשתמש בו. ברגע שמצאתם זה אתם יכולים לבצע מניפולציה על הקוד וליצור פונקציה כלשהי שתשנה את הערך שמחזירה הפונקציה המקורית כבדוגמה הבאה:

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name( $variable ) {
// Your custom code goes here
        return $variable;
    }
    add_filter( 'filter_name', 'your_function_name' );
}

שימו לב – במקרה של פילטרים מאד חשוב כי תחזירו ערך כלשהו!

הוקים מסוג פילטר יכולים לקבל מספר משתנים ולאו דווקא משתנה יחיד. בכדי לעשות זאת ולקבל גישה לאלו, עליכם להוסיף פרמטרים נוספים בפונקציה add_filter. הסיבה לכך היא ברירת המחדל של מספר המשתנים הוא 1.

אז אתם מעוניינים לגשת לערכים נוספים, עליכם להוסיף את הפרמטר הרביעי בקריאה ל add_filter. הנה דוגמה להוק מסוג פילטר עם מספר משתנים:

apply_filter( 'filter_name', $variable1, $variable2, $variable3 );

והנה הפונקציה איתה אנו מבצעים מניפולציה כל הקוד ומחזירים ערך חדש (במקרה שלנו הסכום של שלושת המשתנים):

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name( $variable1, $variable2, $variable3 ) {
    // Example custom code
        $new_value = $variable1 + $variable2 + $variable3;
        return $new_value;
    }
    add_filter( 'filter_name', 'your_function_name', 10, 3 );
}

שימו לב לפרמטר הרביעי (הספרה 3) בקריאה ל add_filter.

הפרמטר השלישי בפונקציה add_filter שאתם רואים בקוד זה הוא העדיפות (priority). עם פרמטר זה באפשרותכם לשלוט מתי הפונקציה תתבצע.

פרמטר זה רלוונטי יותר עבור הוקים מסוג פעולה מאשר פילטר וזאת מכיוון ובאמצעותו ניתן לשלוט בסדר בו הקוד יתבצע בהנחה וישנן מספר פונקצייות ה״מוצמדות״ לאותו הוק ספציפי.

לאחר שהסברנו כיצד הוקים עובדים בוורדפרס, בואו נראה מספר טריקים שימושיים המאפשרים לנו לדרוס הגדרות או תבניות כלשהן של התוסף ווקומרס.

מניפולציה לווקומרס באמצעות הוקים

לצורך הדוגמאות נשתמש באחת מהתבניות הדיפולטיביות של וורדפרס ונבצע שינויים לעמוד החנות הראשי (Shop Page). התבנית ללא שום שינוי למעט ווקומרס המותקנת עליה. הגירסה של ווקומרס היא הגירסה האחרונה לזמן כתיבת המדריך (3.6.2). נתחיל!

מיותר לציין אני מניח כי הוקים קיימים לא רק לעמוד החנות אלא עבור כל עמוד הקיים לווקומרס.

1. הסרת פירורי לחם מעמוד החנות

עמוד החנות של ווקומרס מיוצר על ידי הקובץ woocommerce/templates/archive-product.php. אם תתנו בו מבט תמצאו את הקוד הבא:

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

ניתן לראות כי מפתחי ווקומרס מציינים לנו כי בהוק woocommerce_before_main_content ישנה קריאה למספר פונקציות שאחת מהן היא woocommerce_breadcrumb ועדיפות (priority) של פונקציה זו היא 20. על מנת להסיר את פירורי הלחם נוסיף את הקוד הבא לקובץ functions.php:

// Remove WooCommerce Breadcrumbs
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

2. הסרה של הכותרת בעמוד החנות

על מנת להסיר את הכותרת בעמוד החנות ניתן להשתמש בקוד הבא:

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
    /**
     * Hide WooCommerce Shop page title
     */
    function hide_woocommerce_page_title( $visibility ) {
        // Default $visibility value is true
        $visibility = false;
        return $visibility;
    }
    add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

באותה מידה ובצורה פשוטה יותר ניתן להשתמש בקוד הבא:

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
    /**
     * Hide WooCommerce page title
     */
    function hide_woocommerce_page_title() {
        return false;
    }
    add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

נדגיש כי שני קטעי הקוד האלו יעבדו מצויין, ההבדל היחידי הוא כיצד כתבנו אותם. הראשון דורס את ערך המשתנה בחדש ושולח זה כאשר השני פשוט מחזיר ערך חדש.

3. שינוי מספר המוצרים בעמוד החנות

על מנת לשנות את מספר המוצרים המופיעים בעמוד החנות ניתן להשתמש בקוד הבא. בדוגמה זו קבענו כי מספר המוצרים המקסימלי שיופיע יהיה 9. אם אתם מעוניינים במספר אחר פשוט שנו את הערך:

if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
    /**
     * Change number of products on main shop page
     */
    function change_woocommerce_products_per_page()
    {
        return 9;
    }

    add_filter('loop_shop_per_page', 'change_woocommerce_products_per_page', 8);

}

4. עטיפת המוצרים בחנות באלמנט HTML כלשהו

בכדי להוסיף Markup נוסף סביב רשימת המוצרים בעמוד החנות עלינו להשתמש בשתי פונקציות. הראשונה תוסיף div פותח לפני הרשימה והשנייה תוסיף את ה div הסוגר בסופה.

if ( ! function_exists( 'additional_markup_before_products' ) ) {
    /**
     * Adding additional markup before product list
     */
    function additional_markup_before_products() {
        echo '<div class="my-custom-class"><h1>' .esc_html__( 'Custom Title Before Products' ) . '</h1>';
    }
    add_action( 'woocommerce_before_shop_loop', 'additional_markup_before_products', 40 );
}

שימו לב כי קבענו שה priority של הפונקציה שהוספנו תהיה 40. מדוע? אם תתנו מבט בקובץ archive-product.php שהזכרנו קודם לכן, תראו כי מפתחי ווקומרס כבר הצמידו מספר פונקציות להוק זה.

אנו מעוניינים שהפונקציה שלנו תרוץ לאחר פונקציות אלו. הם הצמידו את הפונקציות הבאות להוק woocommerce_before_shop_loop עם עדיפויות 10, 20 ו 30:

if ( ! function_exists( 'additional_markup_after_products' ) ) {
    /**
     * Adding additional markup after product list
     */
    function additional_markup_after_products() {
        echo '</div>';
    }
    add_action( 'woocommerce_after_shop_loop', 'additional_markup_after_products', 5 );
}

5. הוספת תגית ״אזל מהמלאי״ על מוצר [ שאזל מהמלאי כמובן 🙂 ]

בכדי להוסיף פיצ׳ר זה עליכם להבין את האובייקט global $product וכיצד להשתמש בו. כפי שתראו בקוד מטה אנו משתמשים במשתנה הגלובלי $product. משתנה זה הוא אובייקט ולאובייקט זה ישנן לא מעט מתודות (פונקציות).

אנו נשתמש באובייקט זה בכדי לבדוק האם המוצר קיים במלאי באמצעות המתודה is_in_stock. מתודה זו מחזירה לנו ערך בוליאני (true or false) המציין אם המוצר קיים במלאי או לא בהתאמה.

אם התנאי עובר והמוצר קיים במלאי נמשיך הלאה ואם לא נייצר את התגית ״אזל מהמלאי״. הנה הקוד שמבצע זאת:

/**
 * Adding sold badge for product item
 */
if (!function_exists('add_sold_badge_mark')) {

    function add_sold_badge_mark()
    {
        global $product;
        if (!$product->is_in_stock()) {
            echo '<span class="out-of-stock">' . esc_html__('Sold') . '</span>';
        }
    }
    add_action('woocommerce_before_shop_loop_item_title', 'add_sold_badge_mark');
}

תנו מבט בפוסט הבא אם מעניין אתכם כיצד להתייחס למוצרים שאזלו מהמלאי מבחינת SEO וחווית משתמש.

6. שינו ה Markup של כותרת המוצר

אם תתנו מבט בקובץ content-product.php תראו כי כותרת המוצר נוספת על ידיד ההוק woocommerce_shop_loop_item_title ובאמצעות הפונקציה woocommerce_template_loop_product_title:

/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );

אם תתנו מבט בפונקציה, תראו כי מפתחי ווקומרס מייצרים את התגית בצורה ישירה ואינם מספקים פילטר כלשהו לשנות אותה.

אז ישנן שתי דרכים לגשת לכך, הראשונה היא לדרוס את הפונקציה בשלמותה על ידי הקובץ. בכדי לעשות זאת העתיקו את הפונקציה הבאה מהתוסף ווקומרס לקובץ functions.php לתבנית הבת שלכם:

function woocommerce_template_loop_product_title() {
    echo '<h2 class="woocommerce-loop-product__title">' . get_the_title() . '</h2>';
}

ופשוט שנו את שם הקלאס כרצונכם בפונקציה זו, לדוגמה:

function woocommerce_template_loop_product_title() {
    echo '<h2 class="savvy-title">' . get_the_title() . '</h2>';
}

האפשרות השנייה היא פשוט להסיר את הפעולה המוצמדת להוק מהתוסף ולההצמיד לזה פונקציה משלכם. זוהי האופציה המועדפת אגב מכיוון והיא יכולה למנוע בעיות פוטנציאליות בעדכון עתידי של ווקומרס. הקוד נראה כך:

if ( ! function_exists( 'add_product_item_title' ) ) {
    /**
     * Adding product item title markup
     */
    function add_product_item_title() {
        echo '<h4 class="my-product-item-title">' . get_the_title() . '</h4>';
    }
    add_action( 'woocommerce_shop_loop_item_title', 'add_product_item_title' );
}
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title' );

לסיכום

אם שמתם לב או לא, כבר כתבתי מאמר על הוקים בוורדפרס. אך הוא יכול אולי מעט לבלבל והאמת אני חושב כי ממבט בדוגמאות אלו ניתן להבין מהר יותר את הכח של הוקים בוורדפרס. כל הרעיון של וורדפרס מתבסס על הוקים אלו והבנה שלהם תקח אתכם כמה צעדים קדימה ברמת יכולות הפיתוח.

כך או כך, אני מבטיח להוסיף פונקציות מעניינות איתן תוכלו לשנות את החנות הדיגיטלית שלכם באמצעותן. אם יש לכם פונקציות מעניינות שאתם חושבים שיתאימו למאמר שתפו אותנו בתגובות!

The following article is based on the following post.