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

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

<?php
////////////////////////////////////////////////////////////////////////////////////
// This auto populates post types and posts.
///////////////////////////////////////////////////////////////////////////////////


function my_editor_content( $content ) {

	global $post_type;

	switch( $post_type ) {
		case 'your_post_type_here': //auto populate
			$content = 'The content you want to pre-populate the post type with.';
			break;
	}

	return $content;
}
add_filter( 'default_content', 'my_editor_content' );

לעוד על סוגי תוכן מותאמים, תנו מבט בכיצד ליצור סוגי תוכן מותאמים.

הנה כיצד להוסיף CSS ל ACF בממשק הניהול. במקרה זה, גרמנו ל Repeater Fields להיות בעלי הפרדה ברורה יותר. בוצעו גם מספר שינויים נוספים בכדי שההבנה של הממשק תהיה נוחה יותר:

<?php
function my_acf_admin_head() {	?>
    <style type="text/css">

        .acf-flexible-content .layout .acf-fc-layout-handle {
            background-color: #202428;
            color: #eee;
        }

        .acf-repeater.-row > table > tbody > tr > td,
        .acf-repeater.-block > table > tbody > tr > td {
            border-top: 2px solid #202428;
        }

        .acf-repeater .acf-row-handle {
            vertical-align: top !important;
            padding-top: 16px;
        }

        .acf-repeater .acf-row-handle span {
            font-size: 20px;
            font-weight: bold;
            color: #202428;
        }

        .imageUpload img {
            width: 75px;
        }

        .acf-repeater .acf-row-handle .acf-icon.-minus {
            top: 30px;
        }

    </style>
	<?php
}

add_action( 'acf/input/admin_head', 'my_acf_admin_head' );

ובמקרה של ה Repeater זו התוצאה.. שמים לב לקו המפריד?

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

<?php
/**
 * WooCommerce
 * Add inline CSS to emails sent out
 */
function sv_add_css_to_woo_email() {
    echo '<style type="text/css">
             h1 {
                 text-align: center !important;
                 color: #DDD;
             }
         </style></pre>'; 
}
add_action( 'woocommerce_email_header', 'sv_add_css_to_woo_email' );

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

כדי לשנות את המפריד (delimiter) בפירורי הלחם של WooCommerce, השתמשו בפילטר woocommerce_breadcrumb_defaults ושנו את המפתח delimiter. כברירת מחדל, WooCommerce מציג לוכסן (סלאש) עם רווח קשיח (non-breaking space) מכל צד.

להסבר על שאר הארגומנטים (wrap_before, wrap_after, before, after ו-home), כולל דוגמאות מעשיות, הציצו בסניפט שינוי והתאמה של פירורי הלחם ב-WooCommerce.

החלפת המפריד בפירורי הלחם

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

/**
 * Replace the WooCommerce breadcrumb delimiter with a vertical bar.
 */
function savvy_wc_breadcrumb_delimiter( $defaults ) {
    $defaults['delimiter'] = ' | ';
    return $defaults;
}
add_filter( 'woocommerce_breadcrumb_defaults', 'savvy_wc_breadcrumb_delimiter', 20 );

פירורי הלחם בעמוד מוצר יוצגו כעת כ-Home | Clothing | T-Shirt במקום Home / Clothing / T-Shirt.

איך זה עובד?

הפונקציה woocommerce_breadcrumb() בונה מערך של ערכי ברירת מחדל ומעבירה אותו דרך הפילטר woocommerce_breadcrumb_defaults. לאחר מכן, התבנית global/breadcrumb.php מדפיסה את המפריד בין הפירורים, אבל לא אחרי הפירור האחרון.

אלו ערכי ברירת המחדל בקוד המקור הנוכחי של WooCommerce (includes/wc-template-functions.php):

array(
    'delimiter'   => ' / ',
    'wrap_before' => '<nav class="woocommerce-breadcrumb" aria-label="Breadcrumb">',
    'wrap_after'  => '</nav>',
    'before'      => '',
    'after'       => '',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
)

שנו רק את המפתח delimiter והחזירו את כל השאר כפי שהוא. החזרה של מערך חדש לגמרי תמחק ערכים שלא התכוונתם לשנות, כמו אותו aria-label ש-WooCommerce הוסיף ל-wrap_before בגרסה 8.3.

וריאציות למפריד

המפריד מודפס כ-HTML גולמי (ללא escaping), כך שתוכלו להשתמש ב-entities, באלמנט מעוצב או ב-SVG כ-inline. הנה כמה אפשרויות נפוצות:

// Right-pointing angle: Home › Shop › Product
$defaults['delimiter'] = ' › ';

// Arrow: Home → Shop → Product
$defaults['delimiter'] = ' → ';

// A span you can style with CSS
$defaults['delimiter'] = '<span class="breadcrumb-sep" aria-hidden="true">/</span>';

גרסת ה-span היא הגמישה ביותר. הוסיפו aria-hidden="true" כדי שקוראי מסך ידלגו על התו הדקורטיבי, ולאחר מכן עצבו את .breadcrumb-sep ב-CSS של התבנית.

למה המפריד לא משתנה?

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

• התבנית Storefront (או תבנית אחרת) מגדירה מפריד משלה. Storefront מתחברת ל-woocommerce_breadcrumb_defaults בעדיפות 10, שהיא ברירת המחדל, מתוך תבנית האב, שנטענת אחרי תבנית הבת שלכם. זו הסיבה שהסניפט למעלה משתמש בעדיפות 20.
• פירורי הלחם אינם של WooCommerce. Yoast SEO, Rank Math ותבניות רבות מדפיסים פירורי לחם משלהם, והפילטר הזה לא משפיע עליהם.
• ה-cache של העמוד מגיש HTML ישן. נקו את ה-cache וטענו את העמוד מחדש.

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

שאלות נפוצות

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

וורדפרס מספקת את האפשרות ליצור תקציר (excerpt) לפוסטים על ידי הכנסת טקסט בתיבת בתקציר בעמוד עריכת הפוסט. אך תקצירים אלו אינם מופיעים עבור עמודים (pages post type) ואין אפשרות להוסיף או להפעיל אפשרות זו דרך ממשק הניהול של וורדפרס.

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

<?php

// START COPY FROM HERE
function add_excerpt_pages() {
    add_post_type_support('page', 'excerpt');
}
add_action('init', 'add_excerpt_pages');

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

כיצד לאפשר תקציר (excerpt) לעמודים בוורדפרס

סמנו את תיבת התקציר ובזה סיימתם. כעת תגלו כי נוספה תיבת תקציר עבור כל העמודים באתר…

להתאמות בטוחות לתבנית, תנו מבט במה זה תבנית בת וכיצד להשתמש בה.

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

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

/**
 * Change number of products that are displayed per page (shop page)
 */
add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  // $cols contains the current number of products per page based on the value stored on Options –> Reading
  // Return the number of products you wanna show per page.
  $cols = 9;
  return $cols;
}

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

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

<?php function sv_filter_query($query, $error = true) {
    if (is_search()) {
        $query->is_search = false;
        $query->query_vars[s] = false;
        $query->query[s] = false;
        if ($error == true)
            $query->is_404 = true;
    }
}

add_action('parse_query', 'sv_filter_query');
add_filter('get_search_form', create_function('$a', "return null;"));
    
function remove_search_widget() {
    unregister_widget('WP_Widget_Search');
}

add_action('widgets_init', 'remove_search_widget');

האם תהיתם כיצד ניתן להגביל את תוצאות החיפוש לסוג תוכן ספציפי (Specific Custom Post Type)? זה מאד פשוט. כבר ראינו כיצד לבטל לגמרי את אפשרות החיפוש בוורדפרס על ידי מודיפיקציה לקובץ functions.php. כעת נעשה פעולה דומה בכדי לפלטר את תוצאות החיפוש שלנו.

גוש לקובץ functions.php והוסיפו את הקוד הבא:

function sv_search_filter($query) {
 
    if ($query->is_search && !is_admin() ) {
        $query->set('post_type',array('post','page'));
    }
 
return $query;
}
 
add_filter('pre_get_posts','sv_search_filter');

שימו לב לשורה הבאה:

$query->set('post_type',array('post','page'));

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

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

/**
 * Hide shipping rates when free shipping is available.
 * Updated to support WooCommerce 2.6 Shipping Zones.
 *
 * @param array $rates Array of rates found for the package.
 * @return array
 * @link https://docs.woocommerce.com/document/hide-other-shipping-methods-when-free-shipping-is-available/
 */
function prefix_hide_shipping_when_free_is_available( $rates ) {
	$free = array();
	foreach ( $rates as $rate_id => $rate ) {
		if ( 'free_shipping' === $rate->method_id ) {
			$free[ $rate_id ] = $rate;
			break;
		}
	}
	return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'prefix_hide_shipping_when_free_is_available', 100 );