ארכיונים: Snippets | עמוד 10

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

<?php if ( is_user_logged_in() ) { ?>
 	<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','woothemes'); ?>"><?php _e('My Account','woothemes'); ?></a>
 <?php } 
 else { ?>
 	<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','woothemes'); ?>"><?php _e('Login / Register','woothemes'); ?></a>
 <?php } ?>

עוד מידע על עמוד החשבון שלי בפוסט משחקים עם עמוד ״החשבון שלי״ בווקומרס.

זוהי דוגמה פשוטה ללולאה בסיסית של מוצרי ווקומרס (WooCommerce Products Loop). אם אתם מעוניינים לדעת עוד אז הנה פוסט על הדרך הנכונה לשלוף מוצרים של ווקומרס בתבנית שלכם.

<ul class="products">
	<?php
		$args = array(
			'post_type' => 'product',
			'posts_per_page' => 12
			);
		$loop = new WP_Query( $args );
		if ( $loop->have_posts() ) {
			while ( $loop->have_posts() ) : $loop->the_post();
				wc_get_template_part( 'content', 'product' );
			endwhile;
		} else {
			echo __( 'No products found' );
		}
		wp_reset_postdata();
	?>
</ul><!--/.products-->

את פירורי הלחם (breadcrumbs) של WooCommerce אפשר להתאים באמצעות שני פילטרים: woocommerce_breadcrumb_defaults שולט ב-markup שעוטף את פירורי הלחם, ו-woocommerce_get_breadcrumb שולט בפירורים עצמם. בסניפט הזה תמצאו הסבר על שניהם, שנבדק מול קוד המקור של WooCommerce.

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

כל הארגומנטים של woocommerce_breadcrumb_defaults

הפילטר מקבל מערך עם שישה מפתחות. אלו ערכי ברירת המחדל שלהם בפונקציה woocommerce_breadcrumb() שבקובץ includes/wc-template-functions.php:

ה-aria-label ב-wrap_before נוסף בגרסה 8.3 של WooCommerce. מדריכים ישנים מציגים את <nav class="woocommerce-breadcrumb"> בלעדיו.

שינוי מספר ערכי ברירת מחדל במקביל

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

/**
 * Output the WooCommerce breadcrumb as an ordered list.
 */
function savvy_wc_breadcrumb_defaults( $defaults ) {
    $defaults['wrap_before'] = '<nav class="woocommerce-breadcrumb" aria-label="Breadcrumb"><ol>';
    $defaults['wrap_after']  = '</ol></nav>';
    $defaults['before']      = '<li>';
    $defaults['after']       = '</li>';
    $defaults['delimiter']   = '';
    $defaults['home']        = __( 'Store', 'your-textdomain' );
    return $defaults;
}
add_filter( 'woocommerce_breadcrumb_defaults', 'savvy_wc_breadcrumb_defaults', 20 );

כשהמפריד ריק, תוכלו לצייר את המפרידים ב-CSS, למשל באמצעות .woocommerce-breadcrumb li + li::before.

איך זה עובד?

WooCommerce מחבר את woocommerce_breadcrumb() להוק woocommerce_before_main_content בעדיפות 20. הפונקציה רצה בסדר הבא:

1. מפעילה את woocommerce_breadcrumb_defaults על מערך ברירת המחדל.
2. ממזגת את ה-$args שהועברו ישירות ל-woocommerce_breadcrumb( $args ), והם גוברים על ערכי ברירת המחדל שעברו את הפילטר.
3. מוסיפה את פירור ה-Home (הכתובת מגיעה מ-woocommerce_breadcrumb_home_url) ובונה את פירורי הלחם באמצעות המחלקה WC_Breadcrumb.
4. מפעילה את האקשן woocommerce_breadcrumb, שמייצר את ה-Schema מסוג BreadcrumbList.
5. טוענת את global/breadcrumb.php.

התבנית מדפיסה את wrap_before, wrap_after, before, after ו-delimiter כ-HTML גולמי. שמות הפירורים עוברים escaping, והערך של home עובר דרך wp_strip_all_tags(), כך ש-HTML בטקסט של ״Home״ מוסר.

התאמות נוספות לפירורי הלחם

הסעיפים הבאים מכסים בקשות נפוצות נוספות: הקישור של ״Home״, מערך הפירורים והסרת פירורי הלחם.

שינוי הקישור של ״עמוד הבית״ (Home Link)

כברירת מחדל, פירור ה-Home מפנה ל-home_url(). הקוד הבא מפנה אותו לעמוד החנות:

function savvy_wc_breadcrumb_home_url( $url ) {
    return wc_get_page_permalink( 'shop' );
}
add_filter( 'woocommerce_breadcrumb_home_url', 'savvy_wc_breadcrumb_home_url' );

שינוי הפירורים עם woocommerce_get_breadcrumb

המערך $crumbs מכיל רשומה אחת לכל פירור, וכל רשומה היא מערך ממוספר עם שם וכתובת: array( 'Home', 'https://example.com' ). הקוד הבא מסיר את שם המוצר מעמודי מוצר יחיד:

function savvy_wc_breadcrumb_crumbs( $crumbs, $breadcrumb ) {
    if ( is_product() && count( $crumbs ) > 1 ) {
        array_pop( $crumbs );
    }
    return $crumbs;
}
add_filter( 'woocommerce_get_breadcrumb', 'savvy_wc_breadcrumb_crumbs', 10, 2 );

אותו מערך משמש גם את ה-Schema, כך שהשינויים שלכם יופיעו גם שם. אם אתם מסירים פירור מהאמצע עם unset(), עטפו את התוצאה ב-array_values() כדי לשמור על אינדקסים רציפים.

הסרה מוחלטת של פירורי הלחם

נדרש אם אתם מוסיפים פירורי לחם באמצעות תוסף SEO:

function savvy_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
}
add_action( 'init', 'savvy_remove_wc_breadcrumbs' );

התבנית Storefront מעבירה את פירורי הלחם להוק storefront_before_content בעדיפות 10, כך שב-Storefront יש להסיר אותם מההוק הזה. כדי להסתיר אותם רק בעמודים מסוימים, היעזרו בסניפט הסרת פירורי הלחם של WooCommerce בעמודים מסוימים.

Storefront ותבניות בלוקים

Storefront משתמשת בפילטר woocommerce_breadcrumb_defaults בעדיפות 10 כדי להגדיר delimiter, wrap_before ו-wrap_after משלה. תבנית האב נטענת אחרי תבנית הבת שלכם, ולכן השתמשו בעדיפות 20 ומעלה כדי שהשינויים שלכם יגברו.

בתבניות בלוקים, הבלוק Store Breadcrumbs קורא ל-woocommerce_breadcrumb(), כך ששני הפילטרים שבעמוד זה עובדים גם שם.

שאלות נפוצות

שאלות נפוצות על התאמת פירורי הלחם של WooCommerce:

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

/**
 * Remove product content based on category
 */
function remove_product_content() {
	// If a product in the 'Cookware' category is being viewed...
	if ( is_product() && has_term( 'Cookware', 'product_cat' ) ) {
		//... Remove the images
		remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
		// For a full list of what can be removed please see woocommerce-hooks.php
	}
}
add_action( 'wp', 'remove_product_content' );

הפונקציה woocommerce_catalog_ordering() מציגה את התפריט הנפתח ״סידור ברירת מחדל״ (Default sorting) מעל לולאת המוצרים. כדי להוסיף לו אפשרות משלכם, למשל מיון (sorting) אקראי, תצטרכו שני פילטרים: woocommerce_catalog_orderby לטקסט של האפשרות ו-woocommerce_get_catalog_ordering_args לשאילתה.

הדוגמה הבאה מוסיפה אפשרות למיון אקראי. באותו אופן תוכלו להוסיף כל ערך orderby שנתמך ב-WP_Query.

הוספת אפשרות למיון אקראי

הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם או לתוסף משלכם:

/**
 * Add a "Random" option to the catalog sorting dropdown
 * and to the default sorting choices in the Customizer.
 */
function savvy_catalog_orderby_random( $options ) {
    $options['random_list'] = __( 'Random', 'your-textdomain' );
    return $options;
}
add_filter( 'woocommerce_catalog_orderby', 'savvy_catalog_orderby_random' );
add_filter( 'woocommerce_default_catalog_orderby_options', 'savvy_catalog_orderby_random' );

/**
 * Turn the "random_list" value into WP_Query arguments.
 */
function savvy_catalog_ordering_args_random( $args, $orderby, $order ) {
    if ( 'random_list' === $orderby ) {
        $args['orderby'] = 'rand';
    }
    return $args;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'savvy_catalog_ordering_args_random', 10, 3 );

היכנסו לעמוד החנות ובחרו ״Random״ מהתפריט הנפתח. לכתובת יתווסף ?orderby=random_list, והמוצרים יוצגו בסדר אקראי.

איך זה עובד?

woocommerce_catalog_orderby מסנן את מערך האפשרויות ש-woocommerce_catalog_ordering() מציגה. המפתח משמש כערך orderby בכתובת, והערך הוא הטקסט שמוצג.

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

כאשר שאילתת החנות רצה, WC_Query::get_catalog_ordering_args() קוראת את הערך מהכתובת או מהגדרת ברירת המחדל. היא מפצלת את הערך לפי מקף (price-desc הופך ל-price ול-DESC), ולאחר מכן מעבירה את התוצאה ל-woocommerce_get_catalog_ordering_args כ-$args, $orderby ו-$order.

שני פרטים חשובים:

• השתמשו בקו תחתון במפתחות מותאמים. מפתח כמו random-list יפוצל ל-random ול-LIST.
• השוו מול $orderby, לא מול $_GET. הפונקציה נקראת גם על ידי השורטקוד [products] ועל ידי בלוקים עם ערכים משלהם, והפרמטר משקף את המיון בפועל.

הפונקציה woocommerce_catalog_ordering()

WooCommerce מחבר את woocommerce_catalog_ordering() להוק woocommerce_before_shop_loop בעדיפות 30, מיד אחרי מונה התוצאות בעדיפות 20. הפונקציה טוענת את התבנית loop/orderby.php, ומציגה פלט רק כאשר הלולאה מחולקת לעמודים (paginated) ויש מוצרים להציג.

אלו אפשרויות ברירת המחדל, לפני הפילטרים:

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

אין שורטקוד ייעודי למיון. התפריט הנפתח מופיע ב-[products paginate="true"], ובתבניות בלוקים הוא מוצג באמצעות הבלוק Catalog Sorting, שקורא לאותה פונקציה.

לשליפת מוצרים בתבניות שלכם, ראו את הפוסט הדרך הנכונה לשלוף מוצרים של WooCommerce בתבנית שלכם.

מיון אקראי ועימוד

ORDER BY RAND() מערבב את המוצרים מחדש בכל בקשה. בעמוד 2 חלק מהמוצרים מעמוד 1 עלולים להופיע שוב, ואחרים לא יופיעו כלל.

WP_Query מקבל RAND(x) עם seed מאז וורדפרס 4.5. ערך seed שמשתנה פעם ביום שומר על סדר קבוע בין העמודים וגם ב-cache של העמודים:

if ( 'random_list' === $orderby ) {
    $args['orderby'] = 'RAND(' . absint( gmdate( 'Ymd' ) ) . ')';
}

מיון אקראי גם מאלץ את MySQL למיין את כל התוצאות, מה שהופך לאיטי בקטלוגים עם אלפים רבים של מוצרים.

שאלות נפוצות

שאלות נפוצות על מיון מוצרים בקטלוג של WooCommerce:

כברירת מחדל, וורדפרס מסירה את רוב ה-HTML מתיאור (description) של קטגוריות ותגיות בזמן השמירה. רק רשימה קצרה של תגיות inline נשארת, כך שכותרות, רשימות, תמונות ופסקאות עם class נעלמות ברגע שאתם לוחצים על ״עדכון״.

זה בעייתי כשאתם משתמשים בעמודי קטגוריה כעמודי נחיתה עם תוכן פתיחה אמיתי (אגב, זו אחת הדרכים הפשוטות יותר לשפר את ה-SEO של עמודי קטגוריה). הסניפט הבא מאפשר HTML בתיאור של קטגוריות, תגיות וטקסונומיות מותאמות.

הקוד

הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם או לתוסף מותאם:

/**
 * Allow HTML in term (category, tag) descriptions
 */
foreach ( array( 'pre_term_description' ) as $filter ) {
	remove_filter( $filter, 'wp_filter_kses' );
	if ( ! current_user_can( 'unfiltered_html' ) ) {
		add_filter( $filter, 'wp_filter_post_kses' );
	}
}

foreach ( array( 'term_description' ) as $filter ) {
	remove_filter( $filter, 'wp_kses_data' );
}

כיצד זה עובד

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

• pre_term_description רץ לפני שהתיאור נשמר. וורדפרס מחברת אליו את wp_filter_kses, שמסיר הכול חוץ מכמה תגיות בסיסיות.
• term_description רץ כשהתיאור מוצג. בממשק הניהול בלבד, וורדפרס מוסיפה אליו את wp_kses_data, שהיה מסיר שוב את ה-HTML בטבלת רשימת המונחים.

ההתניה current_user_can( 'unfiltered_html' ) שומרת על הבטיחות. משתמשים בעלי היכולת (capability) הזו יכולים לשמור כל HTML, בדיוק כמו בעורך הפוסטים.

כל שאר המשתמשים שיכולים לערוך מונחים מקבלים את wp_filter_post_kses, רשימת התגיות המותרות (allowlist) שבה וורדפרס משתמשת עבור תוכן פוסטים. תגיות כמו <h2>, <ul> ו-<img> יעבדו, אבל <script> לא.

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

מה משתנה לאחר הוספת הקוד

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

קחו בחשבון שלושה דברים:

• תיאורים ישנים לא ישוחזרו. ה-HTML הוסר עוד לפני שהגיע למסד הנתונים, לכן הזינו אותו מחדש לאחר הוספת הקוד.
• ב-Multisite, רק ל-Super Admin יש unfiltered_html. מנהלי האתרים מקבלים את רשימת התגיות המותרות של פוסטים. אותו הדבר חל על כל המשתמשים אם DISALLOW_UNFILTERED_HTML מוגדר בקובץ wp-config.php.
• התבנית שלכם צריכה להדפיס את התיאור. term_description(), the_archive_description() ובלוק Term Description מדפיסים כולם את ה-HTML השמור. תבנית שמבצעת escaping לתיאור תציג את התגיות כטקסט.

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

שאלות נפוצות

הנה כמה שאלות נפוצות על HTML בתיאורי קטגוריות ותגיות:

הקוד שלפניכם מאפשר להוסיף קוד מעקב כלשהו בעמוד התודה (Thank You Page) של ווקומרס לאחר רכישה. המשתנה $order יכיל את כל המידע הרלוונטי של אותה הזמנה שבוצעה כך שתוכלו לשלוח את הפרטים לאותו שירות בו אתם משתמש למעקב.

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

/**
 * Add custom tracking code to the thank-you page
 */

function my_custom_tracking( $order_id ) {

	// Lets grab the order
	$order = wc_get_order( $order_id );

	/**
	 * Put your tracking code here
	 * You can get the order total etc e.g. $order->get_total();
	 */
	 
	// This is the order total
	$order->get_total();
 
	// This is how to grab line items from the order 
	$line_items = $order->get_items();

	// This loops over line items
	foreach ( $line_items as $item ) {
  		// This will be a product
  		$product = $order->get_product_from_item( $item );
  
  		// This is the products SKU
		$sku = $product->get_sku();
		
		// This is the qty purchased
		$qty = $item['qty'];
		
		// Line item total cost including taxes and rounded
		$total = $order->get_line_total( $item, true, true );
		
		// Line item subtotal (before discounts)
		$subtotal = $order->get_line_subtotal( $item, true, true );
	}
}
add_action( 'woocommerce_thankyou', 'my_custom_tracking' );

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

/**
 * Auto Complete all WooCommerce orders.
 */
function custom_woocommerce_auto_complete_order( $order_id ) {
    if ( ! $order_id ) {
        return;
    }

    $order = wc_get_order( $order_id );
    $order->update_status( 'completed' );
}
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );

לעוד הוקים של ווקומרס, תנו מבט במדריך שימוש בהוקים של ווקומרס.

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

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

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

add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
add_filter( 'woocommerce_checkout_update_order_review_expired', '__return_false' );