מדוע בנינו אתר חדש מאפס: אבולוציה הכרחית
הפוך את האתר שלך לרב לשוני תוך 5 דקות
אין פרטי כרטיס
1) מדוע יצרנו אתר חדש ולא יכולנו פשוט "להחליף נושאים"
כשזיהינו לראשונה את הצורך בשינוי, המשימה נראתה פשוטה: "שנה את הבלוק העליון והפוך את הקריאה לפעולה ליעילה יותר." בערך הנקוב, זה אולי נראה כמו פתרון מהיר, אבל עד מהרה הבנו שהמשימה הקטנה הזו חשפה בעיות בסיסיות הרבה יותר גדולות עם המבנה והעיצוב של האתר. הבעיה לא הייתה רק בלוק אחד; כל הארכיטקטורה של האתר הייתה צריכה שיפוץ.
האתר שלנו נבנה עם הזמן, עם דפים שונים שנוספו תוך שימוש בעיצובים ופריסות שונות, ללא כל נושא או תבנית מאחדים. כל עמוד היה ייחודי בעיצוב שלו, מה שאולי נשמע יצירתי אבל הוביל לבעיה משמעותית: חוסר עקביות. אם נמשיך ונעשה עיצוב חדש עבור הבלוק העליון בלבד תוך שמירה על שאר האתר כפי שהיה, המשמעות היא עדכון ידני של הבלוק הזה בלמעלה מ-700 דפים ופוסטים. גרוע מכך, התהליך הידני הזה צריך לחזור על עצמו בכל פעם שנרצה לבצע שינויים עתידיים. תארו לעצמכם את חוסר היעילות של הצורך לסרוק מאות דפים, ולהבטיח שלכל אחד יש את העדכונים האחרונים. מהר מאוד התברר שהמשך העבודה עם האתר הישן לא יהיה בר קיימא.
מעבר רק ללוגיסטיקה של עדכון כל עמוד, היינו צריכים לקחת בחשבון את חווית המשתמש הכוללת. משתמשים היום מצפים לחוויות חלקות ומלוכדות כשהם מבקרים באתר. אם הם גוללים עמוד מטה ורואים שהעיצוב אינו עקבי - כאשר כל בלוק משתמש בסגנונות שונים - זה יוצר רושם מפורק ולא מקצועי. גרוע מכך, כאשר משתמש עובר מעמוד אחד לאחר ושם לב שהפריסה והעיצוב שונים לחלוטין, הדבר מחזק את תחושת האי-סדר.
חוסר העקביות התרחב מעבר לפריסה. רבות מהתמונות באתר היו מיושנות, מעוצבות בצורה גרועה, או אפילו נוצרו באופן לא הולם על ידי רשתות עצביות. תמונות אלו לא תאמו את תקני העיצוב המודרניים, והחלפתן הייתה משימה מרתיעה נוספת. השימוש בתמונות גרועות השתקף בצורה גרועה את האיכות הכללית של האתר, והותיר את המשתמשים עם רושם שלילי מהמוצר או השירות שהצענו.
לא הייתה דרך פשוטה לעדכן את האתר באופן מקיף באמצעות כלי כמו אלמנטור. כל עמוד ובלוק הכילו סגנונות מוטבעים משלהם, כלומר לא ניתן לבצע שינויים ברחבי העולם. אם נרצה לעדכן את סגנון האתר, היינו צריכים לעבור על כל עמוד בודד ולעדכן ידנית כל בלוק, מה שהיה גוזל זמן ולא יעיל. עם זאת בחשבון, התברר שהפתרון היחיד שלנו הוא לבנות אתר חדש מאפס. זה יאפשר לנו להעביר את כל התוכן תוך שמירה על אותן כתובות URL אך עם עיצוב חדש, עקבי וניתן לעדכון בקלות.
2) מדוע החלטנו לא להשתמש באלמנטור
אלמנטור הוא אחד מבוני הדפים הפופולריים ביותר עבור וורדפרס. על פני השטח, זה נראה כמו כלי נהדר המאפשר יצירת דפים מהירה וקלה. עם זאת, לאחר שעבדנו איתו רבות, נתקלנו במספר מגבלות שגרמו לנו להחליט להתרחק מאלמנטור ולבחור באתר בנוי בהתאמה אישית במקום זאת.
המגבלות והאתגרים של אלמנטור:
- באגים ותקלות : בעוד ש-Elementor מציעה תכונות שימושיות רבות, היא לא חפה מבעיות טכניות. לדוגמה, כאשר העתקנו דף וניסינו לערוך אותו, העמוד החדש נראה לעתים קרובות שונה מהמקור, אפילו לפני ביצוע שינויים כלשהם. היו באגים תכופים עם אופן הצגת האלמנטים, כגון המאפיין "רוחב תמונה מקסימלי" אינו פועל כהלכה. תקלות אלו הקשו על הבטחת עיצוב עקבי על פני הדפים.
- יותר מדי חופש יצירתי, המוביל לחוסר עקביות : אחת מנקודות המכירה המרכזיות של אלמנטור היא היכולת להתאים הכל. עם זאת, גמישות זו יכולה להיות חרב פיפיות, במיוחד כאשר מספר עורכים עובדים על האתר. קל לאנשים שאינם מקצוענים ליצור באופן לא מכוון דפים עם עיצובים לא עקביים. לדוגמה, ראינו מקרים של עורכים המשתמשים בטקסט ורוד על כפתורים ורודים או הוסיפו משולשים כתומים מעופפים ברקע, וכתוצאה מכך עיצוב עמוס ומבלבל. ללא מערכת עיצוב קפדנית, אי אפשר היה לשמור על זהות ויזואלית מגובשת.
- התאמה אישית מוגבלת לפונקציונליות מתקדמת : בעוד ש-Elementor מצטיינת בבניית עמודים בסיסית עם טקסט ותמונות, היא הופכת למאתגרת יותר כאשר אתה צריך להוסיף פונקציונליות מותאמת אישית. לעתים קרובות מצאנו את עצמנו מוגבלים לבלוקים המובנים, שקשה היה להתאים אותם לתכונות מורכבות יותר. ככל שהצרכים שלנו גדלו מעבר לפריסות הבסיסיות, המגבלות של אלמנטור התבררו יותר ויותר.
- בעיות קוד וביצועים נפוחות : השיטה של אלמנטור לבניית דפים מציגה קינון מוגזם של אלמנטים. לדוגמה, Elementor מייצר אוטומטית מרוביםמיכלים בתוך אחריםאלמנטים, כל אחד עם סט סגנונות משלו. כתוצאה מכך נוצר מבנה מנופח שמשפיע לרעה על מהירות הטעינה, ביצועי הדף ובסופו של דבר על דירוג ה-SEO של האתר. כאשר הרצנו מבחני מהירות, התוצאות היו גרועות באופן עקבי, והקוד הכבד שנוצר על ידי אלמנטור היה אשם במידה רבה.
- ללא יכולות בדיקת A/B : בנוף הדיגיטלי של היום, בדיקות A/B חיוניות למיטוב חווית המשתמש. עם זאת, אלמנטור לא מציעה את היכולת להציג גרסאות שונות של האתר למשתמשים שונים. כולם רואים את אותו אתר, מה שמגביל את היכולת שלנו לבדוק ולכוונן אלמנטים עיצוביים כמו צבעים, צורות כפתורים ותמונת רקע. ללא פונקציונליות זו, לא נוכל לבצע אופטימיזציה של האתר על סמך התנהגות משתמש אמיתית.
- נפיחת מסד נתונים : אולי אחד החסרונות המשמעותיים ביותר של אלמנטור הוא האופן שבו היא מטפלת בסגנונות ובתוכן. אלמנטור מאחסן סגנונות, מבנים מקוננים ותגים מיותרים אחרים המעורבים בתוכן במסד הנתונים. זה מוביל למסד נתונים מנופח שלא מתנקה גם כאשר Elementor מושבת או מוסר. כתוצאה מכך, מעבר לנושא חדש או מסגרת חדשה לא פותר את הבעיה - הסגנונות האלה נשארים משובצים בדפים, ממשיכים לגרום לבעיות.
עם כל האתגרים האלה בחשבון, התברר שאנחנו צריכים פתרון חזק יותר. קיבלנו את ההחלטה לבנות אתר חדש ועצמאי ללא אלמנטור, ובחרנו בגישה ברת קיימא וגמישה יותר.
3) כיצד ליצור עמוד באתר החדש
בניית האתר החדש מאפס נתנה לנו את ההזדמנות לבסס תהליך נקי ויעיל ליצירת דפים. במערכת החדשה, יצירת דף היא פשוטה:
- היכנס לפאנל הניהול של וורדפרס ולחץ על דפים -> הוסף עמוד חדש .
- תראה את עורך וורדפרס הסטנדרטי, שבו תוכל לכתוב או להדביק טקסט, להוסיף קישורים ולהעלות תמונות.
תהליך זה פשוט אך גמיש. במקום להסתמך על מערכת הבלוקים המסובכת של אלמנטור, עורך התוכן בוורדפרס הרבה יותר נקי, ומאפשר עדכונים מהירים והתאמה אישית קלה. מתחת לעורך, יש הגדרות עבור שדות מותאמים אישית מתקדמים (ACF), שכבר מוגדרות לשמור על עקביות בכל האתר.
ACF מאפשרת לנו ליצור קטעי תוכן גמישים, עם בלוקים כמו תוכן 1...תוכן 15 , שבהם אתה יכול להגדיר בקלות את הכותרת, הטקסט, התמונה ותוויות הלחצנים עבור כל קטע בעמוד. בלוקים אלה מחליפים באופן אוטומטי את מיקום התמונות והטקסט, ומבטיחים שהפריסה תישאר מושכת ויזואלית מבלי לדרוש התאמות ידניות.
עבור תמונות, הטמענו מערכת התאמת צבעים המחילה אוטומטית שיפוע בצבעים הראשיים של האתר. זה מבטיח שכל התמונות יתיישרו עם האסתטיקה הכללית. עבור לוגואים או צילומי מסך שבהם הצבעים צריכים להישאר שלמים, יש אפשרות "שמור על צבעים" שעוקפת את השיפוע.
מערכת זו מפשטת את ניהול התוכן תוך שמירה על עקביות עיצובית בכל הדפים.
4) כיצד ליצור פוסט חדש
יצירת פוסטים באתר החדש מתבצעת באותו תהליך יעיל כמו יצירת דפים, עם כמה הבדלים עיקריים:
- לפוסטים יש כתובות URL הכוללות ../blog/.. , המבדילות בינם לבין דפים.
- בסרגל הצד הימני, בלוק מציג אוטומטית את שלושת המאמרים האחרונים, ועוזר לשמור על הבלוג דינמי ומרתק.
התבנית לכל הפוסטים נמצאת בקובץ template-parts/content/content-single.php , המטפל במבנה ובפריסה של כל פוסט בבלוג. תבנית עקבית זו מאפשרת עדכונים קלים ומבטיחה שכל הפוסטים עומדים באותן הנחיות עיצוב.
5) שדות מותאמים אישית מתקדמים (ACF)
ACF היה חלק מהותי בפיתוח האתר החדש שלנו. זה מאפשר לנו ליצור שדות מותאמים אישית שניתן לנהל בקלות דרך פאנל הניהול של וורדפרס. שדות כמו content_1 מוזכרים בקוד PHP, מה שמאפשר לנו למשוך באופן דינמי את התוכן הנכון עבור כל עמוד ופוסט.
גמישות זו היא קריטית כדי להבטיח שנוכל לנהל ולעדכן את האתר ביעילות תוך מתן מקום להתאמה אישית בעת הצורך.
6) בדיקת A/B
אחד השיפורים המשמעותיים ביותר שעשינו עם האתר החדש היה הטמעת בדיקות A/B. בדיקת A/B מאפשרת לנו להשוות בין שתי גרסאות של האתר כדי לראות איזו ביצועים טובים יותר עם המשתמשים. זה יכול לכלול בדיקת צבעים שונים, צורות לחצנים, רקעים או אפילו פריסות.
הטמענו את הפונקציונליות הזו באמצעות פרמטרי GET בכתובת האתר. לדוגמה, ניתן ליצור שני מסעות פרסום זהים, אך עם כתובות אתרים שונות:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
כאשר משתמשים לוחצים על קישורים אלה, הפרמטר נשמר בעוגייה. בהתאם לערך הפרמטר, האתר יציג גרסאות שונות של העמוד, כמו צבעי כפתורים שונים או תמונות רקע. זה מאפשר לנו לאסוף נתונים חשובים על העדפות המשתמש והתנהגויותיו.
כל האירועים נרשמים ב-a .csv קובץ, כמו גם במסד נתונים של MySQL, המאפשר לנו לנתח את הנתונים ולקבל החלטות מושכלות לגבי שיפורי האתר.
7) קובץ functions.php
- סוגי פוסטים וטקסונומיות מותאמים אישית
אחד השימושים המרכזיים בקובץ functions.php היה ליצור סוגי פוסטים וטקסונומיות מותאמים אישית, מה שאפשרו לנו לארגן תוכן בצורה יעילה יותר. במקום להסתמך רק על מבנה ברירת המחדל של וורדפרס (דפים ופוסטים), הצגנו סוגים מותאמים אישית עבור תוכן ספציפי, כגון מקרי מקרה, המלצות או תכונות מוצר. זה לא רק שמר על התוכן שלנו מאורגן טוב יותר אלא גם שיפר את חווית המשתמש על ידי הקלה על הניווט ומציאת מידע רלוונטי.
לדוגמה, כדי ליצור סוג פוסט מותאם אישית עבור מקרי מקרה, הוספנו את הקוד הבא ב- functions.php :
function create_case_study_post_type() {
register_post_type( 'case_studies',
מַעֲרָך(
'תוויות' =>מַעֲרָך(
'name' => __( 'מקרים מקרים' ),
'singular_name' => __( 'מקרה מקרה' )
'ציבורי' => נכון,
'has_archive' => נכון,
'rewrite' => array('slug' => 'מקרי מקרה'),
}
add_action( 'init', 'create_case_study_post_type');
זה יצר סוג פוסט חדש בשם "מקרים מקרים" שהתנהג בדומה לפוסטים רגילים אך עם מבנה ארכיון וטקסונומיה משלו.
- טעינת סקריפטים וסגנונות חיצוניים
שימוש קריטי נוסף ב- functions.php היה לטעון סקריפטים וסגנונות חיצוניים, להבטיח שלאתר שלנו יש את כל הספריות והמסגרות הדרושות. לדוגמה, שילבנו ספריות כמו Slick.js עבור המחוונים ו- AOS (Animate on Scroll) להנפשות חלקות. על ידי טעינה סלקטיבית של נכסים אלה רק כאשר היה צורך בהם (למשל, בדפים או תבניות ספציפיות), הפחתנו נפיחות מיותרת ושיפרנו את מהירויות טעינת הדפים.
כך טיפלנו בטעינת סגנונות ותסריטים:
function load_custom_scripts() {
// טען את המחוון Slick עבור תבניות ספציפיות
if( is_page_template('template-slider.php') ) {
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
// טען אנימציות AOS בכל האתר
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'load_custom_scripts');
על ידי שימוש בבדיקות מותנות (למשל, is_page_template()), וידאנו שסקריפטים מיותרים לא ייטענו בכל האתר, ובכך מייעלים את הביצועים.
- קודים קצרים מותאמים אישית
כדי לשפר את הגמישות למשתמשים שאינם טכניים המנהלים את תוכן האתר, הוספנו קודי קצר מותאמים אישית דרך functions.php . קודים קצרים אלה אפשרו למשתמשים להכניס בקלות פונקציונליות מורכבת או אלמנטים מעוצבים ללא צורך לגעת בקוד. לדוגמה, יצרנו קוד קצר להוספת כפתורים מותאמים אישית בכל מקום באתר:
function custom_button_shortcode($atts) {
$atts = shortcode_atts(
מַעֲרָך(
'label' => 'לחץ כאן',
'url' => '#',
$atts,
'כפתור_מותאם אישית'
להחזיר ' '. esc_html( $atts['תווית'] ) . ' ';
}
add_shortcode('custom_button', 'custom_button_shortcode');
קוד קצר זה הקל על עורכים להוסיף לחצנים עם טקסט וכתובות URL מותאמות אישית, מה שמאפשר התאמות מהירות מבלי לשבור את העיצוב.8) טיפול בקידום אתרים ומהירות האתר
מוקד עיקרי במהלך שיפוץ האתר היה שיפור SEO וביצועי האתר הכוללים. לאתר המקורי, שנבנה באמצעות Elementor, היו בעיות עם זמני טעינה איטיים ושיטות קידום אתרים לא אופטימליות עקב קוד מנופח ותמונות לא אופטימליות.
שיפור SEO
כדי להבטיח שהאתר החדש שלנו יהיה ידידותי ל-SEO, יישמנו מספר שיטות עבודה מומלצות כבר מההתחלה:
-
HTML סמנטי : בנינו בקפידה את ה-HTML של האתר תוך שימוש נכון בתגי כותרת (
,וכו'), מה שמבטיח שמנועי חיפוש יוכלו לנתח ולהבין בקלות את היררכיית התוכן. זה חשוב במיוחד הן עבור דירוג SEO והן עבור נגישות. - מטא תגים ונתוני גרף פתוח : מינפנו את התוסף Yoast SEO לטיפול בכותרות מטא, תיאורים ונתוני Open Graph לשיתוף חברתי. על ידי שימוש ב-Yoast, הבטחנו שלכל עמוד ופוסט יש מטא נתונים אופטימליים, שהוא חיוני לנראות במנועי החיפוש ושיעורי הקליקים מפלטפורמות מדיה חברתית.
- סימון סכימה : באמצעות קובץ functions.php , הוספנו סימון סכימה מותאם אישית עבור נתונים מובנים, תוך שיפור האופן שבו מנועי החיפוש מציגים את הדפים שלנו בתוצאות החיפוש. לדוגמה, כללנו סכימה למאמרים, מקרי מקרים ומוצרים, שעוזר למנועי החיפוש לסווג טוב יותר את התוכן שלנו.
function add_schema_markup() {
הד'
"@context": "http://schema.org",
"@type": "ארגון",
"name": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/#{1} #",
"https://twitter.com/conveythis"
]
';
add_action( 'wp_head' , 'add_schema_markup' );
אופטימיזציה של מהירות האתר
ביצועים הם גורם קריטי לא רק עבור חווית משתמש אלא גם עבור דירוג SEO. נקטנו במספר צעדים כדי לשפר את מהירות האתר:
- אופטימיזציה של תמונה : השתמשנו בפורמטים מודרניים של תמונה כמו WebP , המציעים שיעורי דחיסה טובים יותר מפורמטים מסורתיים כמו PNG ו-JPEG. כל התמונות הוגשו בגודל המתאים בהתאם לרזולוציית המסך של המשתמש, מה שמבטיח זמני טעינה מהירים גם במכשירים ניידים.
- טעינה עצלה : על ידי הטמעת טעינה עצלה עבור תמונות, הבטחנו שרק התמונות הנראות על המסך של המשתמש נטענו בתחילה. תמונות נוספות ייטענו עם הגלילה של המשתמש, מה שמפחית את זמני הטעינה הראשוניים של הדפים.
- שמירת מטמון וצמצום : השתמשנו ב-WP Rocket לאחסון במטמון, צמצום ודחיסה של קובצי HTML, CSS ו-JavaScript. WP Rocket עזר לנו להשיג זמני טעינה מהירים יותר על ידי הקטנת גודל הקובץ הכולל והגשת גרסאות מטמון סטטיות של דפים למבקרים חוזרים.
9) אופטימיזציה וניקוי מסדי נתונים
האתר הישן צבר כמות משמעותית של נתוני "זבל" בשל הנפיחות ומבנה מסד הנתונים הלא יעיל של אלמנטור. כדי להבטיח שהאתר החדש יפעל בצורה חלקה, ביצענו ניקוי ואופטימיזציה יסודי של מסד הנתונים.
- הסרת נתוני אלמנטור ישנים
כפי שהוזכר קודם לכן, גם לאחר ביטול ההפעלה של Elementor, הסגנונות וההגדרות שלו עדיין היו מוטמעים במסד הנתונים. השתמשנו בשאילתות מותאמות אישית כדי למחוק את הנתונים העודפים ולנקות את מסד הנתונים. בנוסף, הסרנו כל קבצי מדיה שאינם בשימוש, פרסמנו תיקונים ותקופות חולפות שהצטברו עם הזמן.
- אינדקס מסדי נתונים
כמו כן, ביצענו אופטימיזציה של מסד הנתונים על ידי הוספת אינדקסים לעמודות שנשאלות לעתים קרובות, והבטחנו ששאילתות מסד הנתונים היו מהירות ויעילות יותר. לדוגמה, הוספת אינדקס ל- post_date העמודה האצה שאילתות הקשורות לפוסטים האחרונים, ושיפרה את הביצועים של דפי הבלוג שלנו.
מַסְקָנָה
ההחלטה לבנות אתר חדש מאפס נבעה מהמגבלות וחוסר היעילות של האתר הישן. פשוט החלפת ערכת הנושא לא הייתה אפשרות מעשית בגלל חוסר עקביות בעיצוב, סגנונות מנופחים ובעיות ביצועים שנגרמו על ידי Elementor. על ידי יצירת אתר חדש עם פיתוח מותאם אישית ושדות מותאמים אישית מתקדמים, השגנו אתר יעיל, מגובש ומקצועי יותר המשפר את חווית המשתמש תוך מתן אפשרות לעדכונים יעילים ופונקציונליות של בדיקות A/B. אתר חדש זה מספק בסיס איתן לצמיחה ושיפורים עתידיים.
מוכן להתחיל?
תרגום, הרבה יותר מסתם ידיעת שפות, הוא תהליך מורכב.
על ידי ביצוע הטיפים שלנו ושימוש ב-ConveyThis, הדפים המתורגמים שלך יהדהדו עם הקהל שלך, וירגישו ילידיים לשפת היעד.
אמנם זה דורש מאמץ, אבל התוצאה מתגמלת. אם אתה מתרגם אתר, ConveyThis יכול לחסוך לך שעות עם תרגום מכונה אוטומטי.
נסה את ConveyThis בחינם למשך 3 ימים!
CONVEYTHIS