למה בנינו מחדש את אתר האינטרנט שלנו מאפס
מבט מבפנים על האבולוציה הנדרשת שלנו והלקחים שנלמדו במהלך תהליך העיצוב מחדש.
אין פרטי כרטיס
1) מדוע יצרנו אתר חדש ולא יכולנו פשוט "להחליף נושאים"
כשזיהינו לראשונה את הצורך בשינוי, המשימה נראתה פשוטה: "שנה את הבלוק העליון והפוך את הקריאה לפעולה ליעילה יותר." בערך הנקוב, זה אולי נראה כמו פתרון מהיר, אבל עד מהרה הבנו שהמשימה הקטנה הזו חשפה בעיות בסיסיות הרבה יותר גדולות עם המבנה והעיצוב של האתר. הבעיה לא הייתה רק בלוק אחד; כל הארכיטקטורה של האתר הייתה צריכה שיפוץ.
האתר שלנו נבנה עם הזמן, עם דפים שונים שנוספו תוך שימוש בעיצובים ופריסות שונות, ללא כל נושא או תבנית מאחדים. כל עמוד היה ייחודי בעיצוב שלו, מה שאולי נשמע יצירתי אבל הוביל לבעיה משמעותית: חוסר עקביות. אם נמשיך ונעשה עיצוב חדש עבור הבלוק העליון בלבד תוך שמירה על שאר האתר כפי שהיה, המשמעות היא עדכון ידני של הבלוק הזה בלמעלה מ-700 דפים ופוסטים. גרוע מכך, התהליך הידני הזה צריך לחזור על עצמו בכל פעם שנרצה לבצע שינויים עתידיים. תארו לעצמכם את חוסר היעילות של הצורך לסרוק מאות דפים, ולהבטיח שלכל אחד יש את העדכונים האחרונים. מהר מאוד התברר שהמשך העבודה עם האתר הישן לא יהיה בר קיימא.
מעבר רק ללוגיסטיקה של עדכון כל עמוד, היינו צריכים לקחת בחשבון את חווית המשתמש הכוללת. משתמשים היום מצפים לחוויות חלקות ומלוכדות כשהם מבקרים באתר. אם הם גוללים עמוד מטה ורואים שהעיצוב אינו עקבי - כאשר כל בלוק משתמש בסגנונות שונים - זה יוצר רושם מפורק ולא מקצועי. גרוע מכך, כאשר משתמש עובר מעמוד אחד לאחר ושם לב שהפריסה והעיצוב שונים לחלוטין, הדבר מחזק את תחושת האי-סדר.
חוסר העקביות התרחב מעבר לפריסה. רבות מהתמונות באתר היו מיושנות, מעוצבות בצורה גרועה, או אפילו נוצרו באופן לא הולם על ידי רשתות עצביות. תמונות אלו לא תאמו את תקני העיצוב המודרניים, והחלפתן הייתה משימה מרתיעה נוספת. השימוש בתמונות גרועות השתקף בצורה גרועה את האיכות הכללית של האתר, והותיר את המשתמשים עם רושם שלילי מהמוצר או השירות שהצענו.
לא הייתה דרך פשוטה לעדכן את האתר באופן מקיף באמצעות כלי כמו Elementor. כל עמוד ובלוק הכילו סגנונות מוטבעים משלהם, כלומר לא ניתן היה לבצע שינויים באופן גלובלי. אם נרצה לעדכן את סגנון האתר, נצטרך לעבור על כל עמוד ועמוד ולעדכן ידנית כל בלוק, דבר שיגזול זמן ולא יעיל. עם זאת בחשבון, התברר שהפתרון היחיד שלנו הוא לבנות אתר אינטרנט חדש מאפס. זה יאפשר לנו להעביר את כל התוכן תוך שמירה על אותן כתובות URL אך עם עיצוב חדש, עקבי וניתן לעדכון בקלות.
2) למה החלטנו לא להשתמש Elementor
Elementor הוא אחד מבוני הדפים הפופולריים ביותר עבור וורדפרס. על פני השטח, זה נראה כמו כלי נהדר המאפשר יצירת דפים מהירה וקלה. עם זאת, לאחר עבודה נרחבת איתו, נתקלנו במספר מגבלות שגרמו לנו להחליט להתרחק מ-Elementor ולבחור באתר אינטרנט בהתאמה אישית במקום זאת.
《מגבלות ואתגרים של 1》’s:
- באגים ותקלותבעוד ש-Elementor מציע תכונות שימושיות רבות, הוא אינו חף מבעיות טכניות. לדוגמה, כאשר העתקנו דף וניסינו לערוך אותו, הדף החדש נראה לעתים קרובות שונה מהמקור, עוד לפני ביצוע שינויים כלשהם. היו באגים תכופים באופן שבו אלמנטים הוצגו, כגון המאפיין “רוחב תמונה מקסימלי” שלא פעל כראוי. תקלות אלו הקשו על הבטחת עיצוב עקבי בין דפים.
- יותר מדי חופש יצירתי, מה שמוביל לחוסר עקביותאחת מנקודות המכירה המרכזיות של Elementor’ היא היכולת להתאים אישית הכל. עם זאת, גמישות זו יכולה להיות חרב פיפיות, במיוחד כאשר עורכים מרובים עובדים באתר. קל לאנשים שאינם אנשי מקצוע ליצור בטעות דפים עם עיצובים לא עקביים. לדוגמה, ראינו מקרים של עורכים שהשתמשו בטקסט ורוד על כפתורים ורודים או הוסיפו משולשים כתומים מעופפים ברקע, מה שהביא לעיצוב עמוס ומבלבל. ללא מערכת עיצוב קפדנית, היה בלתי אפשרי לשמור על זהות חזותית מגובשת.
- התאמה אישית מוגבלת לפונקציונליות מתקדמתבעוד ש-Elementor מצטיין בבניית דפים בסיסית עם טקסט ותמונות, הוא הופך למאתגר יותר כשצריך להוסיף פונקציונליות מותאמת אישית. לעתים קרובות מצאנו את עצמנו מוגבלים לבלוקים המובנים, שהיו קשים להתאמה אישית עבור תכונות מורכבות יותר. ככל שהצרכים שלנו גדלו מעבר לפריסות הבסיסיות, המגבלות של Elementor’ הפכו בולטות יותר ויותר.
- בעיות קוד וביצועים נפוחותשיטת בניית דפים של Elementor’ מציגה קינון מוגזם של אלמנטים. לדוגמה, Elementor מייצר אוטומטית מספר רב של
מכולות בתוך אחרותאלמנטים, לכל אחד סט סגנונות משלו. התוצאה היא מבנה נפוח שמשפיע לרעה על מהירות הטעינה, ביצועי הדף ובסופו של דבר על דירוג ה-SEO של האתר. כאשר ביצענו בדיקות מהירות, התוצאות היו גרועות באופן עקבי, והקוד הכבד שנוצר על ידי Elementor היה האשם העיקרי. - אין יכולות בדיקות A/Bבנוף הדיגיטלי של ימינו, בדיקות A/B חיוניות לאופטימיזציה של חוויית המשתמש. עם זאת, Elementor אינו מציע את היכולת להציג גרסאות שונות של האתר למשתמשים שונים. כולם רואים את אותו אתר, מה שמגביל את היכולת שלנו לבדוק ולכוונן אלמנטים עיצוביים כמו צבעים, צורות כפתורים ותמונות רקע. ללא פונקציונליות זו, לא היינו יכולים לייעל את האתר על סמך התנהגות המשתמש האמיתית.
- נפיחות מסד נתוניםאולי אחד החסרונות המשמעותיים ביותר של Elementor הוא האופן שבו הוא מטפל בסגנונות ובתוכן. Elementor מאחסן סגנונות, מבנים מקוננים ותגיות מיותרות אחרות מעורבבות עם התוכן במסד הנתונים. זה מוביל למסד נתונים נפוח שלא מנוקה גם כאשר Elementor מושבת או מוסר. כתוצאה מכך, מעבר לערכת נושא או מסגרת חדשה אינו פותר את הבעיה – סגנונות אלה נשארים מוטמעים בדפים, וממשיכים לגרום לבעיות.
עם כל האתגרים הללו בחשבון, התברר שאנחנו צריכים פתרון חזק יותר. קיבלנו את ההחלטה לבנות אתר אינטרנט חדש ועצמאי מבלי Elementor לבחור בגישה בת קיימא וגמישה יותר.
3) כיצד ליצור עמוד באתר החדש
בניית האתר החדש מאפס נתנה לנו את ההזדמנות לבסס תהליך נקי ויעיל ליצירת דפים. במערכת החדשה, יצירת דף היא פשוטה:
- היכנס לפאנל הניהול של וורדפרס ולחץ על דפים -> הוסף עמוד חדש .
- תראה את עורך וורדפרס הסטנדרטי, שבו תוכל לכתוב או להדביק טקסט, להוסיף קישורים ולהעלות תמונות.
תהליך זה פשוט אך גמיש. במקום להסתמך על מערכת הבלוקים המורכבת של Elementor’, עורך התוכן בוורדפרס נקי הרבה יותר, ומאפשר עדכונים מהירים והתאמה אישית קלה. מתחת לעורך, ישנן הגדרות עבור שדות מותאמים אישית מתקדמים (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 היה יצירת סוגי פוסטים וטקסונומיות מותאמים אישית, שאפשרו לנו לארגן תוכן בצורה יעילה יותר. במקום להסתמך אך ורק על מבנה ברירת המחדל WordPress (דפים ופוסטים), הצגנו סוגים מותאמים אישית עבור תוכן ספציפי, כגון מקרי בוחן, המלצות או תכונות מוצר. זה לא רק שמר על התוכן שלנו מאורגן טוב יותר, אלא גם שיפר את חוויית המשתמש בכך שהקל על הניווט ומציאת מידע רלוונטי.
לדוגמה, כדי ליצור סוג פוסט מותאם אישית עבור מקרי מקרה, הוספנו את הקוד הבא ב- 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 . קודים קצרים אלה אפשרו למשתמשים להכניס בקלות פונקציונליות מורכבת או אלמנטים מעוצבים ללא צורך לגעת בקוד. לדוגמה, יצרנו קוד קצר להוספת כפתורים מותאמים אישית בכל מקום באתר:
[צומצם]
קוד קצר זה הקל על עורכים להוסיף לחצנים עם טקסט וכתובות URL מותאמות אישית, מה שמאפשר התאמות מהירות מבלי לשבור את העיצוב.
8) טיפול בקידום אתרים ומהירות האתר
מוקד עיקרי במהלך שיפוץ האתר היה שיפור קידום האתרים וביצועי האתר הכוללים. האתר המקורי, שנבנה באמצעות Elementor, נתקל בבעיות עם זמני טעינה איטיים ושיטות SEO לא אופטימליות עקב קוד נפוח ותמונות לא אופטימליות.
שיפור 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",
"זהה כמו": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
הוסף_פעולה('wp_head', 'הוסף_schema_markup');
אופטימיזציה של מהירות האתר
ביצועים הם גורם קריטי לא רק עבור חווית משתמש אלא גם עבור דירוג SEO. נקטנו במספר צעדים כדי לשפר את מהירות האתר:
- אופטימיזציה של תמונה : השתמשנו בפורמטים מודרניים של תמונה כמו WebP , המציעים שיעורי דחיסה טובים יותר מפורמטים מסורתיים כמו PNG ו-JPEG. כל התמונות הוגשו בגודל המתאים בהתאם לרזולוציית המסך של המשתמש, מה שמבטיח זמני טעינה מהירים גם במכשירים ניידים.
- טעינה עצלה : על ידי הטמעת טעינה עצלה עבור תמונות, הבטחנו שרק התמונות הנראות על המסך של המשתמש נטענו בתחילה. תמונות נוספות ייטענו עם הגלילה של המשתמש, מה שמפחית את זמני הטעינה הראשוניים של הדפים.
- מטמון ומיניפיקציה: השתמשנו ב-WP Rocket למטמון, מזעור ודחיסה של קבצי HTML, CSS ו-JavaScript . WP Rocket עזר לנו להשיג זמני טעינה מהירים יותר על ידי הקטנת גודל הקובץ הכולל והגשת גרסאות סטטיות במטמון של דפים למבקרים חוזרים.
9) אופטימיזציה וניקוי מסדי נתונים
האתר הישן צבר כמות משמעותית של נתונים “זבל” עקב נפיחות של Elementor’ ומבנה מסד נתונים לא יעיל. כדי להבטיח שהאתר החדש יפעל בצורה חלקה, ביצענו ניקוי ואופטימיזציה יסודיים של מסד הנתונים.
- הסרת נתונים ישנים Elementor
כפי שצוין קודם לכן, גם לאחר ביטול Elementor, הסגנונות וההגדרות שלו עדיין היו מוטמעים במסד הנתונים. השתמשנו בשאילתות מותאמות אישית כדי למחוק את הנתונים העודפים הללו ולנקות את מסד הנתונים. בנוסף, הסרנו את כל קבצי המדיה שאינם בשימוש, גרסאות לאחר מכן ושינויים חולפים שפג תוקפם שהצטברו לאורך זמן.
- אינדקס מסדי נתונים
כמו כן, ביצענו אופטימיזציה של מסד הנתונים על ידי הוספת אינדקסים לעמודות שנשאלות לעתים קרובות, והבטחנו ששאילתות מסד הנתונים היו מהירות ויעילות יותר. לדוגמה, הוספת אינדקס ל- post_date העמודה האצה שאילתות הקשורות לפוסטים האחרונים, ושיפרה את הביצועים של דפי הבלוג שלנו.
מַסְקָנָה
ההחלטה לבנות אתר אינטרנט חדש מאפס נבעה מהמגבלות וחוסר היעילות של האתר הישן. החלפת ערכת הנושא לא הייתה אופציה בת קיימא עקב חוסר עקביות בעיצוב, סגנונות נפוחים ובעיות ביצועים שנגרמו על ידי Elementor. על ידי יצירת אתר חדש עם פיתוח מותאם אישית ושדות מותאמים אישית מתקדמים, השגנו אתר אינטרנט יעיל, מגובש ומקצועי יותר, המשפר את חוויית המשתמש תוך מתן אפשרות לעדכונים יעילים ופונקציונליות בדיקות A/B. אתר חדש זה מספק בסיס איתן לצמיחה ושיפורים עתידיים.
סכמו את הפוסט הזה עם:
מוכן להתחיל?
תרגום, הרבה יותר מסתם ידיעת שפות, הוא תהליך מורכב.
על ידי ביצוע הטיפים שלנו ושימוש בהם ConveyThis, הדפים המתורגמים שלך יהדהדו עם הקהל שלך, וירגישו מקומיים בשפת היעד.
למרות שזה דורש מאמץ, התוצאה מתגמלת. אם אתם מתרגמים אתר אינטרנט, ConveyThis יכול לחסוך לכם שעות בעזרת תרגום מכונה אוטומטי.
נסה את ConveyThis בחינם למשך 3 ימים!
CONVEYTHIS