יצירת כפתור WhatsApp דינמי עם פרטי המוצר בווקומרס

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

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

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

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

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

קוד ה-PHP המלא:

היכן למקם את הקוד? אפשרויות והשלכות

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

אזהרה חשובה: לפני ביצוע כל שינוי בקוד האתר, מומלץ בחום לגבות את כל קבצי האתר ומסד הנתונים שלו. שינויים שגויים בקוד עלולים לגרום לשגיאות באתר (White Screen of Death – מסך לבן) או אף להשבתה מלאה. כמו כן, לעולם אל תערכו קבצים ישירות בתבנית הפעילה (Parent Theme), מכיוון שעדכוני תבנית ידרסו וימחקו את השינויים שלכם. השתמשו תמיד בתבנית בת (Child Theme) או בפלאגין ייעודי.

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

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

  • דוגמאות לפלאגינים: Code Snippets, WPCode ודומיו.

  • כיצד לבצע:

    1. התקינו והפעילו את אחד הפלאגינים הללו דרך לוח הבקרה של וורדפרס (תוספים > תוסף חדש).

    2. עברו להגדרות הפלאגין (לרוב תחת "קטעי קוד" / "Code Snippets" בתפריט הראשי).

    3. צרו "קטע קוד חדש" (Add New Snippet)

    4. הדביקו את קוד ה-PHP המלא שסידרתם והתאמתם מראש.

    5. וודאו שסוג הקוד מוגדר כ-PHP Snippet.

    6. הגדרה חשובה: לרוב הפלאגינים הללו יש אפשרות לקבוע היכן הקוד ירוץ. בחרו באפשרות "Run Snippet Everywhere" (או "Run on Site Front-end" / "Only run on site front-end"). חשוב שהקוד ירוץ בכל האתר (או לפחות בצד הלקוח) כדי שהשורטקודים וה-CSS יעבדו כראוי.
    7. שמרו והפעילו את קטע הקוד.

  • השלכות:

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

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

2. בקובץ functions.php של תבנית בת
(מומלץ למפתחים מנוסים)

זוהי שיטה נפוצה וטובה להוספת קוד מותאם אישית, אך היא דורשת שימוש ב"תבנית בת" (Child Theme) והיא מחייבת עריכה ישירה של קבצים בשרת.

  • כיצד לבצע:

    1. וודאו שיש לכם תבנית בת פעילה. אם אין לכם, צרו אחת (יש פלאגינים כמו Child Theme Configurator שיכולים לעזור, או ליצור ידנית).

    2. התחברו לשרת באמצעות FTP או מנהל קבצים.

    3. נווטו לתיקיית תבנית הבת שלכם (לרוב: wp-content/themes/your-child-theme-name/).

    4. פתחו את הקובץ functions.php (אם אינו קיים, צרו אותו).

    5. הדביקו את קוד ה-PHP המלא שסידרתם והתאמתם מראש בתחתית הקובץ (רצוי מעל תגית הסגירה ?> אם קיימת, אך לא חובה).

    6. שמרו את הקובץ.

  • השלכות:

    • יתרונות: קוד "נקי" שאינו דורש פלאגין נוסף, קל לניהול עבור פונקציונליות ספציפית לתבנית.

    • חסרונות: דורש יצירה ותחזוקה של תבנית בת. שינויים שגויים עלולים לגרום לשגיאות באתר (מסך לבן). אם אין תבנית בת ונוגעים בקובץ functions.php של התבנית הראשית – השינויים יימחקו בעדכוני תבנית!

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

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

  • כיצד לבצע:

    1. התחברו לשרת באמצעות FTP או מנהל קבצים.

    2. נווטו לתיקייה: wp-content/plugins/.

    3. צרו תיקייה חדשה, לדוגמה: my-custom-whatsapp-plugin.

    4. בתוך התיקייה החדשה, צרו קובץ PHP חדש, לדוגמה: my-whatsapp-code.php.

    5. הדביקו את קוד ה-PHP המלא שסידרתם והתאמתם מראש לתוך קובץ זה, ובראשו הוסיפו את כותרת הפלאגין הבא:

מה עלייך לשנות בשורות הקוד?

מקומות לשינוי טקסטים חשובים בקוד ה-WhatsApp

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

תיאור השינוי היכן למצוא בקוד? מה לשנות בפועל? דוגמה לשינוי
**מספר הטלפון הראשי (ברירת מחדל) לשורטקוד מוצר**
(המספר שאליו נשלחות הודעות דרך כפתור הוואטסאפ הכללי או כפתור מוצר, אם לא צוין אחרת).
חפשו את השורה שמכילה:
'phone' => '972541234567',
זוהי כנראה שורה מספר 7 או בסמוך לה, תלוי איך הקוד שלכם מתחיל.
שנו את מספר הטלפון המופיע בגרשיים ('972541234567') למספר הטלפון הרצוי שלכם. הקפידו על פורמט בינלאומי (ללא +, רווחים או מקפים). `'972501112233'`
**טקסט הכפתור הראשי (ברירת מחדל)**
(הטקסט שיופיע על כפתור הוואטסאפ הכללי או כפתור מוצר, אם לא צוין אחרת).
חפשו את השורה שמכילה:
'button_text' => 'דברו איתנו',
זוהי כנראה שורה מספר 11 או בסמוך לה.
שנו את הטקסט המופיע בגרשיים ('דברו איתנו') לטקסט הרצוי לכם בכפתור. `'שלחו הודעה'`
**הודעה אוטומטית ללקוח (בכפתור מוצר)**
(טקסט ההקדמה שמופיע אוטומטית בהודעת הווטסאפ כשלוחצים על כפתור מוצר ספציפי).
חפשו את השורה שמכילה:
$message = "שלום! אני מעוניין/ת במוצר: "
זוהי כנראה שורה מספר 18 או בסמוך לה.
שנו את הטקסט המופיע בגרשיים ("שלום! אני מעוניין/ת במוצר: ") לטקסט ההקדמה הרצוי לכם. `"היי, אני מתעניין ב:"`
**מספר הטלפון לכפתור הוואטסאפ הדינמי**
(המספר שאליו תישלח הודעה דרך השורטקוד הדינמי [whatsapp_dynamic]).
חפשו את השורה שמכילה:
$phone = '972541234561'; // המספר שלך
זוהי כנראה שורה מספר 95 או בסמוך לה.
שנו את מספר הטלפון המופיע בגרשיים ('972541234561') למספר הטלפון הרצוי עבור הכפתור הדינמי. הקפידו על פורמט בינלאומי. `'972529876543'`

קוד PHP להעתקה

				
					
// הוסף את הקוד הזה לקובץ functions.php של הערכה שלך

// 1. יצירת שורטקוד WhatsApp חדש
function create_whatsapp_button_shortcode($atts) {
    // הגדרות ברירת מחדל
    $atts = shortcode_atts(array(
        'phone' => '972545621061', // המספר שלך בפורמט בינלאומי
        'message' => '',
        'product_title' => '',
        'product_url' => '',
        'button_text' => 'דברו איתנו',
        'button_class' => 'whatsapp-button'
    ), $atts);
    
    // אם יש כותרת מוצר ולינק, בנה הודעה אוטומטית
    if (!empty($atts['product_title']) && !empty($atts['product_url'])) {
        $message = "שלום! אני מעוניין/ת במוצר: " . $atts['product_title'] . "\n";
        $message .= "לינק למוצר: " . $atts['product_url'];
    } else {
        $message = $atts['message'];
    }
    
    // קידוד ההודעה לכתובת URL
    $encoded_message = urlencode($message);
    
    // יצירת לינק WhatsApp
    $whatsapp_url = "https://wa.me/{$atts['phone']}?text={$encoded_message}";
    
    // HTML של הכפתור
    $button_html = '<a href="' . esc_url($whatsapp_url) . '" 
                      class="' . esc_attr($atts['button_class']) . '" 
                      target="_blank" 
                      rel="noopener">
                      <i class="fab fa-whatsapp"></i> ' . esc_html($atts['button_text']) . '
                   </a>';
    
    return $button_html;
}
add_shortcode('whatsapp_product_button', 'create_whatsapp_button_shortcode');

// 2. הוספת CSS לכפתור WhatsApp
function add_whatsapp_button_styles() {
    echo '<style>
        .whatsapp-button {
            display: inline-flex;
            align-items: center;
            background-color: #31cf00;
            color: white !important;
            padding: 10px 15px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s ease;
            margin-top: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .whatsapp-button:hover {
            background-color: #01324e;
            color: white !important;
            text-decoration: none;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        
        .whatsapp-button i {
            margin-left: 8px;
            font-size: 16px;
        }
        
        /* עבור GetEngine Listing Grid */
        .jet-listing-grid__item .whatsapp-button {
            width: 100%;
            justify-content: center;
            text-align: center;
        }
    </style>';
}
add_action('wp_head', 'add_whatsapp_button_styles');

// 3. פונקציה ליצירת כפתור WhatsApp עם נתוני מוצר דינמיים
function get_dynamic_whatsapp_button() {
    global $post;
    
    if (!$post) return '';
    
    $product_title = get_the_title($post->ID);
    $product_url = get_permalink($post->ID);
    $phone = '972545621061'; // המספר שלך
    
    $shortcode = '[whatsapp_product_button phone="' . $phone . '" product_title="' . $product_title . '" product_url="' . $product_url . '"]';
    
    return do_shortcode($shortcode);
}

// 4. שורטקוד לכפתור דינמי
function dynamic_whatsapp_shortcode($atts) {
    return get_dynamic_whatsapp_button();
}
add_shortcode('whatsapp_dynamic', 'dynamic_whatsapp_shortcode');

// 5. הוספת Font Awesome אם לא קיים
function add_font_awesome() {
    if (!wp_style_is('font-awesome', 'enqueued')) {
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
    }
}
add_action('wp_enqueue_scripts', 'add_font_awesome');

				
			

שורטקודים להטמעה (בחירה אחת מתוך השניים)

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

1. כפתור WhatsApp קבוע למוצרים/פוסטים: [whatsapp_product_button]

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

שימושים נפוצים:

  • בעמודי מוצרים בחנות וירטואלית (לדוגמה, מתחת לתיאור המוצר).

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

אפשרויות התאמה אישית (לא חובה): אף על פי שהכפתור עובד "מחוץ לקופסה", אתם יכולים להתאים אותו אישית ישירות בתוך השורטקוד:

  • שינוי מספר הטלפון לאותו כפתור בלבד:

    • ברירת המחדל מוגדרת בקוד ה-PHP שלכם (בשורה 7). אם תרצו שהודעה מכפתור ספציפי זה תגיע למספר אחר, הוסיפו את הפרמטר phone:

    • [whatsapp_product_button phone="972501234567"]

  • שינוי טקסט הכפתור:

    • ברירת המחדל היא "דברו איתנו" (מוגדר בשורה 11). כדי לשנות טקסט לכפתור ספציפי זה, הוסיפו את הפרמטר button_text:

    • [whatsapp_product_button button_text="שאלה על המוצר"]

  • הגדרת הודעה מותאמת אישית (במקום שם המוצר/קישור):

    • אם במקרה מסוים אתם לא רוצים שההודעה תכלול את שם המוצר והקישור, אלא טקסט אחר לחלוטין, השתמשו בפרמטר message:

    • [whatsapp_product_button message="אני מעוניין בייעוץ כללי!"]

    • שימו לב: שימוש בפרמטר message יבטל את ההוספה האוטומטית של שם המוצר והקישור.

2. כפתור WhatsApp דינמי: [whatsapp_dynamic]

שורטקוד זה הוא למעשה קיצור דרך לכפתור ה-[whatsapp_product_button], והוא נועד בעיקר להטמעה נוחה במקומות כמו תבניות (Templates) של אלמנטור או JetEngine (כמו "Listing Grid"). הוא מבצע את אותה פעולה של זיהוי מוצר/פוסט באופן אוטומטי ושליחת הודעה עם פרטיו.

שימושים נפוצים:

  • בתבניות של רשימת מוצרים או פוסטים (Listing Grids) באלמנטור/JetEngine.

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

התאמה אישית של מספר הטלפון לכפתור הדינמי:

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

איך להטמיע את כפתורי ה-WhatsApp באתר שלכם

א. הטמעת השורטקוד [whatsapp_dynamic] ברשימת מוצרים/פוסטים (JetEngine Listing Grid)

שלבי הטמעה:

  1. פתחו את תבנית ה-Listing (Listing Template) באלמנטור:

    • לכו ללוח הבקרה של וורדפרס > JetEngine > Listings.

    • רחפו מעל ה-Listing Template הרצויה (לדוגמה, תבנית עבור מוצרים או פוסטים שלכם) ולחצו על "Edit with Elementor" (עריכה עם אלמנטור).

  2. גררו "ווידג'ט קוד קצר" (Shortcode Widget) לתוך התבנית:

    • בסרגל הצד של אלמנטור, חפשו את הווידג'ט שנקרא "Shortcode" (קוד קצר) או "טקסט" (Text Editor).

    • גררו את הווידג'ט למקום הרצוי בתוך פריט ה-Listing (לדוגמה, מתחת לכותרת המוצר או לתיאורו).

  3. הכניסו את השורטקוד:

    • בתוך הווידג'ט שגררתם, פשוט הקלידו את השורטקוד:

				
					[whatsapp_dynamic]
				
			

הווידג'ט יציג לכם תצוגה מקדימה של הכפתור, וכשתצפו ב-Listing Grid האמיתי (בעמוד כלשהו), הכפתור יופיע עם פרטי המוצר/פוסט הנכונים לכל פריט.

4. שמרו את השינויים בתבנית ה-Listing.

ב. הטמעת השורטקוד [whatsapp_product_button] בפוסט או עמוד בודד

השורטקוד [whatsapp_product_button] הוא גמיש וניתן להטמיע אותו בכל עורך תוכן של וורדפרס (עורך הגוטנברג, אלמנטור, או כל עורך קלאסי אחר). הוא יעבוד אוטומטית אם הוא נמצא בתוך עמוד/פוסט של מוצר, וימשוך את הפרטים הרלוונטיים. אם תטמיעו אותו בעמוד רגיל שאינו מוצר/פוסט, הוא יציג את הכפתור עם הטקסט שהגדרתם לו כברירת מחדל בקוד ה-PHP.

שלבי הטמעה (באמצעות עורך גוטנברג / אלמנטור):

  1. פתחו את הפוסט/עמוד לעריכה:

    • לכו ללוח הבקרה של וורדפרס > פוסטים / עמודים.

    • בחרו את הפוסט או העמוד בו תרצו להטמיע את הכפתור ולחצו "עריכה".

  2. הוספת השורטקוד:

    • בעורך גוטנברג: לחצו על כפתור ה-+ כדי להוסיף בלוק חדש. חפשו את הבלוק "Shortcode" או "קוד קצר" והכניסו בתוכו את השורטקוד.

    • באמצעות אלמנטור: גררו "Shortcode" ווידג'ט או "Text Editor" (עורך טקסט) למיקום הרצוי בעמוד, והכניסו את השורטקוד.

    • בעורך קלאסי: פשוט הדביקו את השורטקוד ישירות בתוכן העמוד/פוסט.

  3. הכניסו את השורטקוד הרצוי:

    • לאלמנטור / עמוד מוצר (ברירת מחדל):

				
					[whatsapp_product_button]
				
			

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

4. שמרו/עדכנו את הפוסט/עמוד.

בהצלחה!