ארכיון: סניפטים וקטעי קוד | עמוד 5

הסרת פירורי לחם של ווקומרס בעמודים מסויימים

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

/**
 * Remove the breadcrumbs
 */
function savvy_remove_shop_breadcrumbs() {
    if (is_shop()) {

        remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
    }
}
add_action('init', 'savvy_remove_shop_breadcrumbs');

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

הגבלת העלאה של סוגי קבצים מסויימים בוורדפרס

הדוגמה הבאה תגביל את אפשרות העלאת הקבצים בספריית המדיה רק עבור קבצי JPG ו GIF. אם אתם מעוניינים לאפשר גם קבצי PNG לצורך העניין הוסיפו את השורה 'png' => 'image/png' לקוד זה:

function savvy_restrict_mime($mimes) {
    $mimes = array(
        'jpg|jpeg|jpe' => 'image/jpeg',
        'gif' => 'image/gif',
    );
    return $mimes;
}
add_filter('upload_mimes','savvy_restrict_mime');

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

הוספת קישור לפוסט המלא בתקציר הפוסט

אם אתם מעוניינים להוסיף קישור לפוסט המלא בסוף תקציר (excerpt) הפוסט, ניתן לעשות זאת בצורה הבאה. הוסיפו את הקוד הבא לקובץ functions.php:

function savvy_excerpt_link_post($text) {
    return str_replace( '[...]', '<a href="'. get_permalink( get_the_ID() ) . '" title="' . esc_attr( get_the_title( get_the_ID() ) ) . '">' . '[&hellip;]' . '</a>', $text );
}
add_filter('the_excerpt', 'savvy_excerpt_link_post');

כיצד לאפשר Inline SVG בעורך התוכן של וורדפרס

כברירת מחדל, וורפרס אינה מאפשרת את כול סוגי הקוד בעורך התוכן של וורדפרס. למשל, Inline SVG's מכילים המון תגיות כגון , וכדומה. אז בכדי לאפשר Inline SVG יש להשתמש בקוד הבא (functions.php):

function override_mce_options($initArray) {
    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

שימו לב כי קוד זה מאפשר שימוש בכל תגית, לא משנה איזה – בין אם הקשורה ל SVG ובין אם לא.

מקבלים HTTP Error כשאתם מעלים תמונות באתר וורדפרס?

ישנם מספר סיטואציות בהן תקבלו את השגיאה HTTP Error כשאתם מנסים להעלות תמונות לספריית המדיה באתר וורדפרס:

  • שם קובץ בעייתי (סימנים מיוחדים וכדומה).
  • משקל הקובץ הוא מעבר למה שהשרת מאפשר (upload_max_size).
  • זכרון PHP בשרת אינו מספיק.
  • אין מספיק שטח אחסון בשרת.
מקבלים HTTP Error כשאתם מעלים תמונות באתר וורדפרס?

שגיאת HTTP בספריית המדיה של וורדפרס.

אז בתור התחלה בדקו את שם הקובץ ונסו להקטין את משקל הקובץ. בכדי להגדיל את הזיכרון הוסיפו את הקוד הבא לקובץ wp-config.php הנמצא בתיקייה הראשית של האתר:

define( 'WP_MEMORY_LIMIT', '256M' );

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

php_value memory_limit 256M

אם יש לכם גישה לקובץ php.ini אז ניתן לעשות זאת על ידי הקוד הבא:

memory_limit = 256M

במצבים מסויימים גם ModSecurity בשרת יכול למנוע מכם להעלות קבצים. ניתן לבטל אותו דרך cPanel או לנסות את השורות הבאות בקובץ .htaccess (בטלו אם מופיעה שגיאה). נציין כי ישנה סיבה טובה ש ModSecurity קיים לטובת אבטחת אתר הוורדפרס שלכם:

SecFilterEngine Off 
SecFilterScanPOST Off 

קובץ gitignore המיועד לאתרי וורדפרס

הקובץ gitignore מסמן ל Git לא לעקוב (track) אחר קבצים מסויימים בפרוייקט. אם מדברים על וורדפרס, הנה קובץ gitignore מומלץ שניתן לשנות בהתאם לצורך הפרוייקט שלכם:

# -----------------------------------------------------------------
# .gitignore for WordPress
# -----------------------------------------------------------------

# ignore everything in the root except the "wp-content" directory.
/*
!wp-content/

# ignore all files starting with .
.*

# track this file .gitignore (i.e. do NOT ignore it)
!.gitignore

# track .editorconfig file (i.e. do NOT ignore it)
!.editorconfig

# track readme.md in the root (i.e. do NOT ignore it)
!readme.md

# ignore all files that start with ~
~*

# ignore OS generated files
ehthumbs.db
Thumbs.db

# ignore Editor files
*.sublime-project
*.sublime-workspace
*.komodoproject

# ignore log files and databases
*.log
*.sql
*.sqlite

# ignore compiled files
*.com
*.class
*.dll
*.exe
*.o
*.so

# ignore packaged files
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip

# ignore everything in the "wp-content" directory, except:
# "mu-plugins" directory
# "plugins" directory
# "themes" directory
wp-content/*
!wp-content/mu-plugins/
!wp-content/plugins/
!wp-content/themes/

# ignore these plugins from the core
wp-content/plugins/hello.php
wp-content/plugins/akismet/

# ignore specific themes
wp-content/themes/twenty*/

# ignore node/grunt dependency directories
node_modules/

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

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

ווקומרס בגירסה 3.0+

/**
 * Show product weight on archive pages
 */
add_action( 'woocommerce_after_shop_loop_item', 'savvy_show_weights', 9 );

function savvy_show_weights() {

    global $product;
    $weight = $product->get_weight();

    if ( $product->has_weight() ) {
        echo '<div class="product-meta"><span class="product-meta-label">Weight: </span>' . $weight . get_option('woocommerce_weight_unit') . '</div></br>';
    }
}

הצגה של מימדי מוצר ווקומרס בעמוד ארכיון

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

ווקומרס בגירסה 3.0+

/**
 * Show product dimensions on archive pages for WC 3+
 */
add_action( 'woocommerce_after_shop_loop_item', 'savvy_show_dimensions', 9 );

function savvy_show_dimensions() {
    global $product;
    $dimensions = wc_format_dimensions($product->get_dimensions(false));

        if ( $product->has_dimensions() ) {
                echo '<div class="product-meta"><span class="product-meta-label">Dimensions: </span>' . $dimensions . '</div>';
        }
}

ווקומרס בגירסה נמוכה מ 3.0


/**
 * Show product dimensions on archive pages WC 3 and below
 */
add_action( 'woocommerce_after_shop_loop_item_title', 'wc_show_dimensions', 9 );

function wc_show_dimensions() {
	global $product;
	$dimensions = $product->get_dimensions();

        if ( ! empty( $dimensions ) ) {
                echo '<span class="dimensions">' . $dimensions . '</span>';
        }
}

הוספה אוטומטית של מוצר לעגלת הקניות בעת הביקור - ווקומרס

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

/**
 * Automatically add product to cart on visit
 */
add_action( 'template_redirect', 'add_product_to_cart' );
function add_product_to_cart() {
	if ( ! is_admin() ) {
		$product_id = 64; //replace with your own product id
		$found = false;
		//check if product already in cart
		if ( sizeof( WC()->cart->get_cart() ) > 0 ) {
			foreach ( WC()->cart->get_cart() as $cart_item_key => $values ) {
				$_product = $values['data'];
				if ( $_product->get_id() == $product_id )
					$found = true;
			}
			// if product not found, add it
			if ( ! $found )
				WC()->cart->add_to_cart( $product_id );
		} else {
			// if no products in cart, add it
			WC()->cart->add_to_cart( $product_id );
		}
	}
}

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

/**
 * Add another product depending on the cart total
 */
add_action( 'template_redirect', 'add_product_to_cart' );
function add_product_to_cart() {
  if ( ! is_admin() ) {
		global $woocommerce;
		$product_id = 2831; //replace with your product id
		$found = false;
		$cart_total = 30; //replace with your cart total needed to add above item

		if( $woocommerce->cart->total >= $cart_total ) {
			//check if product already in cart
			if ( sizeof( $woocommerce->cart->get_cart() ) > 0 ) {
				foreach ( $woocommerce->cart->get_cart() as $cart_item_key => $values ) {
					$_product = $values['data'];
					if ( $_product->get_id() == $product_id )
						$found = true;
				}
				// if product not found, add it
				if ( ! $found )
					$woocommerce->cart->add_to_cart( $product_id );
			} else {
				// if no products in cart, add it
				$woocommerce->cart->add_to_cart( $product_id );
			}
		}
	}
}

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

שליחת אימייל לאחר הזמנה כאשר מתבצע שימוש בקופון - ווקומרס

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

/**
 * Send an email each time an order with coupon(s) is completed
 * The email contains coupon(s) used during checkout process
 *
 */ 
function woo_email_order_coupons( $order_id ) {
        $order = new WC_Order( $order_id );
        
        if( $order->get_used_coupons() ) {
        
          $to = 'youremail@yourcompany.com';
	        $subject = 'New Order Completed';
	        $headers = 'From: My Name <youremail@yourcompany.com>' . "\r\n";
	        
	        $message = 'A new order has been completed.\n';
	        $message .= 'Order ID: '.$order_id.'\n';
	        $message .= 'Coupons used:\n';
	        
	        foreach( $order->get_used_coupons() as $coupon) {
		        $message .= $coupon.'\n';
	        }
	        @wp_mail( $to, $subject, $message, $headers );
        }
}
add_action( 'woocommerce_thankyou', 'woo_email_order_coupons' );}

הסרת תוכן של מוצר לפי קטגוריה - ווקומרס

הסניפט הבא יסיר את תמונות המוצר בעמודי המוצר עצמו (Single Product Pages) רק עבור מוצרים הנמצאים בקטגוריה ״Music״.

/**
 * Remove product content based on category
 */
add_action( 'wp', 'remove_product_content' );
function remove_product_content() {
    // If a product in the 'Cookware' category is being viewed...
    if ( is_product() && has_term( 'Music', '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
    }
}

הוספת קוד מעקב בעמוד תודה של ווקומרס

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

/**
 * Add custom tracking code to the thank-you page
 */
add_action( 'woocommerce_thankyou', 'my_custom_tracking' );

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 );
	}
}

גלילה חלקה (Smooth Scroll) ל ID בעזרת jQuery

סניפט קצר בו אני משתמש רבות כשאני נדרש לבצע גלילה לאלמנט מסויים (by ID). פשוט שנו את ׳600׳ למהירות בה אתם רוצים שהגלילה תתבצע (ms) וזהו. אתם יכולים גם לשנות את הסלקטור a[href*="#"] כמובן לאיזה סלקטור שתבחרו.

$('a[href*="#"]').on('click', function (e) {
	e.preventDefault();

	$('html, body').animate({
		scrollTop: $($(this).attr('href')).offset().top
	}, 600, 'linear');
});

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

אכלתי את הראש, אבל הנה גם פוסט המתאר כיצד ליצור אנימציות גלילה (On-Scroll Animations) ממש נחמדות באמצעות הספרייה AOS.

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

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

אך אם אתם מעוניינים להפנות את הגולשים ישירות לעמוד התשלום (Checkout Page) הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת הפעילה (או של התבנית).

function custom_add_to_cart_redirect( $url ) {
    $url = WC()->cart->get_checkout_url();
    return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'custom_add_to_cart_redirect' );

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

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

הגבלת החיפוש בוורדפרס לסוג תוכן ספציפי (Custom Post Type)

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

function SearchFilter($query) {
  if ($query->is_search) {
    // Insert the specific post type you want to search
    $query->set('post_type', 'feeds');
  }
  return $query;
}

// This filter will jump into the loop and arrange our results before they're returned
add_filter('pre_get_posts','SearchFilter');