התקנת WPBakery: ביצועים, אלמנטים מותאמים אישית, העברה

לקוח מגיע עם תמה פרימיום שכבר נרכשה, הכוללת את WPBakery Page Builder. הדרישה היא להגדיר את הבונה כך שמנהלי תוכן יוכלו לערוך דפים באופן עצמאי מבלי לשבור את העיצוב. ללא הגדרה נכונה, התוסף טוען מאות קילובייטים של CSS ו-JS בכל דף, ויש לכתוב אלמנטים מותאמים אישית מאפס. אנו פותרים בעיות אלה באופן מקיף. בקשו ביקורת WPBakery — זה לוקח יום אחד.

בעיות שאנו פותרים

ביצועים. כברירת מחדל, WPBakery טוען כ-130 KB של CSS ו-200 KB של JS בכל הדפים, גם אם הבונה אינו בשימוש. עבור אתר עם 10,000+ ביקורים ביום, זה מוסיף 0.5 שניות ל-TTFB. אופטימיזציית נכסים היא הצעד הראשון לקראת Core Web Vitals.

אלמנטים מותאמים אישית. ערכת הווידג'טים הסטנדרטית אינה מכסה את הלוגיקה העסקית. לדוגמה, יש צורך בקרוסלת המלצות עם סינון או בטופס הזמנה. עלינו לכתוב אלמנטים מותאמים אישית באמצעות function vc_map_custom_product_of_day() { vc_map(array( 'name' => 'Товар дня', 'base' => 'product_of_day', 'category' => 'Кастомные', 'params' => array( array( 'type' => 'textfield', 'heading' => 'ID товара', 'param_name' => 'product_id', ), ), )); } add_action('vc_before_init', 'vc_map_custom_product_of_day'); ו-shortcodes.

בקרת גישה. כאשר 5+ מנהלי תוכן עובדים על האתר, חשוב להגביל מי יכול להשתמש ב-HTML גולמי או לשנות סגנונות גלובליים. Role Manager מטפל בכך, אך כוונון עדין דורש קוד.

מלכודת העברה. WPBakery מאחסן תוכן כ-shortcodes ב-post_content. כאשר התוסף מושבת, הדפים הופכים לטקסט בלתי קריא. העברה ל-Gutenberg או ל-Elementor היא עבודה ידנית שאנו מבצעים ללא אובדן נתונים.

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

בפרקטיקה שלנו, היה לנו מקרה: להגדיר את WPBakery לחנות WordPress + WooCommerce בשלושה ימים. נדרשו כרטיסי מוצר מותאמים אישית, frontend מהיר, ועריכה על ידי שלושה מנהלים.

סט טכנולוגיות: WordPress יציב עדכני, PHP 8.x, WPBakery, Redis עבור מטמון אובייקטים. שלבים:

1. הסרת נכסים מיותרים באמצעות wp_dequeue_style רק בדפים עם shortcodes.
2. יצרנו שלושה אלמנטים מותאמים אישית: "מוצר היום" (בלוק מורחב), "מסנן קטגוריות" ו-"בלוק המלצות עם כוכבים". כל אלמנט תואר באמצעות vc_map, עם אייקונים ושדות.
3. הגדרנו את Role Manager: מנהלים יכולים להשתמש רק באלמנטים ספציפיים, למנהלים יש גישה מלאה.
4. כתבנו CSS מותאם אישית לפריסת רשת, הוחל ב-Custom CSS בהגדרות התוסף.
5. ביצענו בדיקת עומס: זמן טעינת הדף ירד מ-3.2 שניות ל-1.1 שניות, וחוסך ללקוח כ-$270–390 בשנה על אירוח. LCP השתפר מ-4.2 שניות ל-1.8 שניות, ו-CLS ירד ב-60%.

מדוע העברה מ-WPBakery ל-Gutenberg בעייתית?

WPBakery מקודד תוכן ב-shortcodes, בעוד ש-Gutenberg משתמש בבלוקים עם הערות JSON. אין ממיר אוטומטי שמשמר את כל הסגנונות. אנו מיישמים גישה היברידית: תחילה ייצוא תוכן דרך do_shortcode ל-HTML נקי, ולאחר מכן פיצול ידני לבלוקים של Gutenberg. עבור פרויקטים גדולים (100+ דפים), זה לוקח לפחות שבועיים, אך התוצאה צפויה.

כיצד לבצע אופטימיזציה לנכסי WPBakery?

הבעיה העיקרית היא ש-WPBakery טוען את הסגנונות והסקריפטים שלו בכל הדפים, גם אם הבונה אינו בשימוש. פתרון: השתמשו ב-wp_dequeue_style וב-wp_dequeue_script כדי להשבית נכסים בדפים ללא shortcodes. בנוסף, אפשרו מטמון באמצעות Redis או CDN. זה מפחית את TTFB ב-30–50%.

תהליך העבודה

1. ניתוח. סקירת תצורת WPBakery הנוכחית, תוספים מותקנים, סוגי דפים. מיפוי שימוש ב-shortcodes.
2. עיצוב. עיצוב אלמנטים מותאמים אישית, תכנון רשתות וסגנונות. אישור פריסות עם הלקוח.
3. יישום. כתיבת קוד אלמנטים, הגדרת Role Manager, אופטימיזציית נכסים. אינטגרציה עם תמות ותוספים.
4. בדיקות. בדיקה במכשירים שונים, מדידת Core Web Vitals, בדיקת זכויות גישה.
5. פריסה ומסירה. פריסה לסביבת הייצור, הדרכת עורכים, מסירת תיעוד.

מה כלול

• ביקורת מלאה של תצורת WPBakery הנוכחית
• אופטימיזציית נכסי frontend (CSS/JS)
• פיתוח של עד 5 אלמנטים מותאמים אישית
• הגדרת Role Manager
• המרת תוכן במהלך העברה (עד 50 דפים)
• תיעוד על שימוש בעורך
• ייעוץ של שעה לעורכים

לוח זמנים משוער

בין 2 ל-10 ימי עבודה, תלוי במספר הדפים ובמורכבות האלמנטים המותאמים אישית. העלות מחושבת בנפרד לאחר הביקורת.

טבלת השוואה: מצבי עריכה

עורך ה-backend נטען פי 5–10 מהר יותר מעורך ה-frontend, מה שחשוב לעריכה תכופה.

טבלת השוואה: גישות העברה

טעויות נפוצות ורשימת בדיקה

• [ ] נכסים לא הוסרו בדפים ללא shortcodes
• [ ] Role Manager לא הוגדר — לכולם יש גישה ל-HTML גולמי
• [ ] נעשה שימוש בתוספים מיושנים שמאטים את האתר
• [ ] התוכן לא גובה לפני העברה

function vc_map_custom_product_of_day() {
    vc_map(array(
        'name' => 'Товар дня',
        'base' => 'product_of_day',
        'category' => 'Кастомные',
        'params' => array(
            array(
                'type' => 'textfield',
                'heading' => 'ID товара',
                'param_name' => 'product_id',
            ),
        ),
    ));
}
add_action('vc_before_init', 'vc_map_custom_product_of_day');