لماذا قمنا بإعادة بناء موقعنا من الصفر
نظرة داخلية على تطورنا الضروري والدروس المستفادة خلال عملية إعادة التصميم.
لا حاجة لبيانات البطاقة
1) لماذا قمنا بإنشاء موقع ويب جديد ولم نتمكن من "تبديل السمات"
عندما حددنا الحاجة إلى التغيير لأول مرة، بدت المهمة بسيطة: "تغيير الكتلة العلوية وجعل الدعوة إلى العمل أكثر فعالية". للوهلة الأولى، قد يبدو هذا بمثابة حل سريع، لكننا سرعان ما أدركنا أن هذه المهمة الصغيرة كشفت عن مشاكل أساسية أكبر بكثير تتعلق ببنية وتصميم الموقع. لم تكن المشكلة كتلة واحدة فقط؛ بل كانت البنية الكاملة للموقع بحاجة إلى إصلاح شامل.
لقد تم بناء موقعنا على الإنترنت بمرور الوقت، بإضافة صفحات مختلفة باستخدام تصميمات وتخطيطات مختلفة، دون أي سمة أو قالب موحد. كانت كل صفحة فريدة من نوعها في تصميمها، وهو ما قد يبدو إبداعيًا ولكنه أدى إلى مشكلة كبيرة: عدم الاتساق. إذا مضينا قدمًا وقمنا بعمل تصميم جديد للكتلة العلوية فقط مع الاحتفاظ ببقية الموقع كما هو، فهذا يعني تحديث تلك الكتلة يدويًا على أكثر من 700 صفحة ومنشور. والأسوأ من ذلك، أن هذه العملية اليدوية ستحتاج إلى التكرار في كل مرة نريد فيها إجراء تغييرات مستقبلية. تخيل عدم كفاءة الاضطرار إلى تمشيط مئات الصفحات، والتأكد من أن كل منها تحتوي على أحدث التحديثات. سرعان ما أصبح من الواضح أن الاستمرار في العمل بالموقع القديم لن يكون مستدامًا.
وبعيداً عن اللوجستيات الخاصة بتحديث كل صفحة، كان علينا أن نأخذ في الاعتبار تجربة المستخدم الإجمالية. فالمستخدمون اليوم يتوقعون تجارب سلسة ومتماسكة عندما يزورون موقعاً على شبكة الإنترنت. وإذا انتقلوا إلى أسفل الصفحة ورأوا أن التصميم غير متناسق ــ حيث تستخدم كل كتلة أنماطاً مختلفة ــ فإن هذا يخلق انطباعاً غير مترابط وغير احترافي. والأسوأ من ذلك، عندما ينتقل المستخدم من صفحة إلى أخرى ويلاحظ أن التخطيط والتصميم مختلفان تماماً، فإن هذا يعزز الشعور بالفوضى.
لقد امتد التناقض إلى ما هو أبعد من التصميم. فالعديد من الصور الموجودة على الموقع كانت قديمة، أو سيئة التصميم، أو حتى تم إنشاؤها بشكل غير مناسب بواسطة الشبكات العصبية. ولم تكن هذه الصور متوافقة مع معايير التصميم الحديثة، وكان استبدالها مهمة شاقة أخرى. كما أن استخدام الصور السيئة انعكس بشكل سيئ على الجودة العامة للموقع، مما ترك للمستخدمين انطباعًا سلبيًا عن المنتج أو الخدمة التي نقدمها.
لم تكن هناك طريقة بسيطة لتحديث الموقع بشكل شامل باستخدام أداة مثل Elementor. تحتوي كل صفحة وكتلة على أنماط مضمنة خاصة بها، مما يعني أنه لا يمكن إجراء التغييرات عالميًا. إذا أردنا تحديث نمط الموقع، فسيتعين علينا مراجعة كل صفحة وتحديث كل كتلة يدويًا، الأمر الذي سيستغرق وقتًا طويلاً وغير فعال. ومع أخذ ذلك في الاعتبار، أصبح من الواضح أن الحل الوحيد لدينا هو إنشاء موقع ويب جديد من الصفر. سيسمح لنا هذا بنقل كل المحتوى مع الحفاظ على نفس عناوين URL ولكن بتصميم جديد ومتسق وسهل التحديث.
2) لماذا قررنا عدم استخدام Elementor
Elementor هو أحد منشئي الصفحات الأكثر شهرة ووردبريس. ظاهريًا، يبدو وكأنه أداة رائعة تسمح بإنشاء الصفحات بسرعة وسهولة. ومع ذلك، بعد العمل معه على نطاق واسع، واجهنا العديد من القيود التي جعلتنا نقرر الابتعاد عن Elementor واختيار موقع ويب مصمم خصيصًا بدلاً من ذلك.
Elementor’ القيود والتحديات:
- الأخطاء والخلل: على الرغم من أن Elementor يقدم العديد من الميزات المفيدة، إلا أنه لا يخلو من المشكلات الفنية. على سبيل المثال، عندما قمنا بنسخ صفحة وحاولنا تحريرها، غالبًا ما بدت الصفحة الجديدة مختلفة عن الصفحة الأصلية، حتى قبل إجراء أي تغييرات. كانت هناك أخطاء متكررة في كيفية عرض العناصر، مثل عدم عمل خاصية “الحد الأقصى لعرض الصورة” بشكل صحيح. جعلت هذه المشكلات من الصعب ضمان التصميم المتسق عبر الصفحات.
- الكثير من الحرية الإبداعية، مما يؤدي إلى عدم الاتساق: إحدى نقاط البيع الرئيسية لـ Elementor’ هي القدرة على تخصيص كل شيء. ومع ذلك، فإن هذه المرونة يمكن أن تكون سلاحا ذا حدين، خاصة عندما يعمل العديد من المحررين على الموقع. من السهل على غير المحترفين إنشاء صفحات ذات تصميمات غير متناسقة عن غير قصد. على سبيل المثال، رأينا حالات استخدم فيها المحررون نصًا ورديًا على أزرار وردية أو أضافوا مثلثات برتقالية طائرة في الخلفية، مما أدى إلى تصميم مزدحم ومربك. وبدون وجود نظام تصميم صارم، أصبح من المستحيل الحفاظ على هوية بصرية متماسكة.
- تخصيص محدود للوظائف المتقدمة:بينما يتفوق Elementor في بناء الصفحات الأساسية باستخدام النصوص والصور، يصبح الأمر أكثر تحديًا عندما تحتاج إلى إضافة وظائف مخصصة. غالبًا ما وجدنا أنفسنا مقيدين بالكتل المضمنة، والتي كان من الصعب تخصيصها لميزات أكثر تعقيدًا. مع نمو احتياجاتنا إلى ما هو أبعد من التخطيطات الأساسية، أصبحت قيود Elementor’ واضحة بشكل متزايد.
- الكود المتضخم ومشاكل الأداء:《طريقة 1》’s لبناء الصفحات تؤدي إلى تعشيش مفرط للعناصر. على سبيل المثال، Elementor يقوم تلقائيًا بإنشاء عدة
حاويات داخل أخرىالعناصر، ولكل منها مجموعة خاصة بها من الأنماط. ويؤدي هذا إلى إنشاء هيكل متضخم يؤثر سلبًا على سرعة التحميل وأداء الصفحة وفي النهاية ترتيب موقع الويب في محركات البحث. عندما أجرينا اختبارات السرعة، كانت النتائج سيئة باستمرار، وكان الكود الثقيل الناتج عن Elementor هو المسؤول إلى حد كبير عن ذلك. - لا توجد قدرات اختبار A/B: في المشهد الرقمي اليوم، يعد اختبار A/B ضروريًا لتحسين تجربة المستخدم. ومع ذلك، لا يوفر Elementor القدرة على عرض إصدارات مختلفة من الموقع لمستخدمين مختلفين. يرى الجميع نفس الموقع، مما يحد من قدرتنا على اختبار وضبط عناصر التصميم مثل الألوان وأشكال الأزرار وصور الخلفية. بدون هذه الوظيفة، لن نتمكن من تحسين الموقع بناءً على سلوك المستخدم الحقيقي.
- تضخم قاعدة البيانات:ربما يكون أحد أهم عيوب Elementor هو كيفية تعامله مع الأنماط والمحتوى. Elementor يخزن الأنماط والهياكل المتداخلة والعلامات غير الضرورية الأخرى المختلطة بالمحتوى في قاعدة البيانات. يؤدي هذا إلى قاعدة بيانات منتفخة لا يتم تنظيفها حتى عند تعطيل Elementor أو إلغاء تثبيتها. ونتيجة لذلك، فإن التبديل إلى سمة أو إطار عمل جديد لا يحل المشكلة – تظل هذه الأنماط مضمنة في الصفحات، وتستمر في التسبب في المشكلات.
ومع أخذ كل هذه التحديات في الاعتبار، أصبح من الواضح أننا بحاجة إلى حل أكثر قوة. لقد اتخذنا قرارًا ببناء موقع ويب جديد ومستقل بدون Elementor، واخترنا نهجًا أكثر استدامة ومرونة.
3) كيفية إنشاء صفحة على الموقع الجديد
لقد منحنا إنشاء الموقع الجديد من الصفر الفرصة لإنشاء عملية نظيفة ومبسطة لإنشاء الصفحات. في النظام الجديد، يكون إنشاء الصفحة أمرًا بسيطًا:
- قم بتسجيل الدخول إلى لوحة إدارة WordPress وانقر فوق الصفحات -> إضافة صفحة جديدة .
- سوف ترى محرر WordPress القياسي، حيث يمكنك كتابة أو لصق النص، وإضافة الروابط، وتحميل الصور.
هذه العملية بسيطة ولكنها مرنة. بدلاً من الاعتماد على نظام الكتل المعقد Elementor’، أصبح محرر المحتوى في WordPress أنظف بكثير، مما يسمح بالتحديثات السريعة والتخصيص السهل. أسفل المحرر، توجد إعدادات لـ الحقول المخصصة المتقدمة (ACF)، والتي تم تكوينها بالفعل للحفاظ على الاتساق عبر الموقع بأكمله.
يتيح لنا ACF إنشاء أقسام محتوى مرنة، مع كتل مثل Content 1…Content 15 ، حيث يمكنك بسهولة تعيين العنوان والنص والصورة وعلامات الأزرار لكل قسم من الصفحة. تعمل هذه الكتل تلقائيًا على تبديل وضع الصور والنص، مما يضمن بقاء التصميم جذابًا بصريًا دون الحاجة إلى تعديلات يدوية.
بالنسبة للصور، قمنا بتنفيذ نظام مطابقة الألوان الذي يطبق تلقائيًا تدرجًا لونيًا في الألوان الرئيسية للموقع. وهذا يضمن أن تتوافق جميع الصور مع الجمالية العامة. بالنسبة للشعارات أو لقطات الشاشة حيث يجب أن تظل الألوان سليمة، يوجد خيار "الحفاظ على الألوان" الذي يتغلب على التدرج اللوني.
يعمل هذا النظام على تبسيط إدارة المحتوى مع الحفاظ على اتساق التصميم في جميع الصفحات.
4) كيفية إنشاء منشور جديد
تتبع عملية إنشاء المنشورات على الموقع الجديد نفس العملية المبسطة لإنشاء الصفحات، مع بعض الاختلافات الرئيسية:
- تحتوي المشاركات على عناوين URL تتضمن ../blog/.. ، مما يميزها عن الصفحات.
- في الشريط الجانبي الأيمن، يعرض مربع تلقائيًا أحدث ثلاث مقالات، مما يساعد في الحفاظ على ديناميكية المدونة وجاذبيتها.
يوجد قالب جميع المنشورات في الملف template-parts/content/content-single.php ، الذي يتعامل مع هيكل وتخطيط كل منشور في المدونة. يتيح هذا القالب المتناسق إجراء تحديثات سهلة ويضمن التزام جميع المنشورات بنفس إرشادات التصميم.
5) الحقول المخصصة المتقدمة (ACF)
لقد كان ACF جزءًا أساسيًا من تطوير موقعنا الإلكتروني الجديد. فهو يسمح لنا بإنشاء حقول مخصصة يمكن إدارتها بسهولة من خلال لوحة إدارة WordPress. تتم الإشارة إلى حقول مثل content_1 في كود PHP، مما يسمح لنا بسحب المحتوى الصحيح بشكل ديناميكي لكل صفحة ومنشور.
تعتبر هذه المرونة ضرورية لضمان قدرتنا على إدارة الموقع وتحديثه بكفاءة مع توفير مساحة للتخصيص عند الحاجة.
6) اختبار A/B
كان أحد أهم التحسينات التي أجريناها على الموقع الجديد هو تنفيذ اختبار A/B. يتيح لنا اختبار A/B مقارنة نسختين من الموقع لمعرفة أيهما يحقق أداءً أفضل مع المستخدمين. يمكن أن يتضمن هذا اختبار ألوان مختلفة أو أشكال أزرار أو خلفيات أو حتى تخطيطات.
لقد قمنا بتنفيذ هذه الوظيفة باستخدام معلمات GET في عنوان URL. على سبيل المثال، يمكن إنشاء حملتين إعلانيتين متطابقتين، ولكن بعناوين URL مختلفة:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
عندما ينقر المستخدمون على هذه الروابط، يتم حفظ المعلمة في ملف تعريف الارتباط. واعتمادًا على قيمة المعلمة، سيعرض الموقع إصدارات مختلفة من الصفحة، مثل ألوان الأزرار المختلفة أو صور الخلفية. وهذا يسمح لنا بجمع بيانات قيمة حول تفضيلات المستخدم وسلوكياته.
يتم تسجيل جميع الأحداث في .csv الملف، وكذلك في قاعدة بيانات MySQL، مما يسمح لنا بتحليل البيانات واتخاذ قرارات مستنيرة حول تحسينات الموقع.
7) ملف functions.php
- أنواع المنشورات المخصصة والتصنيفات
كان أحد الاستخدامات الرئيسية لملف functions.php هو إنشاء أنواع منشورات وتصنيفات مخصصة، مما سمح لنا بتنظيم المحتوى بشكل أكثر فعالية. بدلا من الاعتماد فقط على هيكل ووردبريس الافتراضي (الصفحات والمنشورات)، قدمنا أنواعا مخصصة لمحتوى محدد، مثل دراسات الحالة، أو الشهادات، أو ميزات المنتج. لم يحافظ ذلك فقط على تنظيم محتوانا، بل حسن أيضا تجربة المستخدم من خلال تسهيل التنقل والعثور على المعلومات ذات الصلة.
على سبيل المثال، لإنشاء نوع منشور مخصص لدراسات الحالة، أضفنا الكود التالي في functions.php :
دالة إنشاء نوع دراسة الحالة () {
سجل_نوع_المنشور('دراسات الحالة',
المصفوفة(
'التسميات' =>المصفوفة(
'الاسم' => __( 'دراسات الحالة' ),
'singular_name' => __( 'دراسة الحالة' )
),'عام' => صحيح،
'has_archive' => صحيح،
'إعادة الكتابة' => مجموعة('slug' => 'دراسات الحالة'),
)
);
}
إضافة_إجراء('init', 'إنشاء_نوع_منشور_دراسة_الحالة' );
وقد أدى هذا إلى إنشاء نوع جديد من المنشورات يسمى "دراسات الحالة" والذي يتصرف بشكل مشابه للمنشورات العادية ولكن مع هيكل الأرشيف والتصنيف الخاص به.
- تحميل النصوص والأنماط الخارجية
كان استخدام آخر مهم لـ functions.php هو تحميل البرامج النصية والأنماط الخارجية، مما يضمن أن موقعنا الإلكتروني يحتوي على جميع المكتبات والأطر اللازمة. على سبيل المثال، قمنا بدمج مكتبات مثل Slick.js لأشرطة التمرير و AOS (Animate on Scroll) للحصول على رسوم متحركة سلسة. من خلال تحميل هذه الأصول بشكل انتقائي فقط عند الحاجة إليها (على سبيل المثال، في صفحات أو قوالب محددة)، قللنا من الانتفاخ غير الضروري وحسنا سرعات تحميل الصفحة.
فيما يلي كيفية تعاملنا مع تحميل الأنماط والبرامج النصية:
دالة load_custom_scripts() {
// تحميل شريط التمرير Slick لقوالب محددة
إذا (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 );
}
إضافة_إجراء('wp_enqueue_scripts', 'load_custom_scripts' );
من خلال استخدام الفحوصات الشرطية (على سبيل المثال، هو قالب الصفحة), لقد تأكدنا من عدم تحميل البرامج النصية غير الضرورية على مستوى الموقع، وبالتالي تحسين الأداء.
- اختصارات مخصصة
لتحسين المرونة للمستخدمين غير الفنيين الذين يديرون محتوى الموقع، أضفنا رموزًا مختصرة مخصصة عبر functions.php . سمحت هذه الرموز المختصرة للمستخدمين بإدراج وظائف معقدة أو عناصر مصممة بسهولة دون الحاجة إلى لمس الكود. على سبيل المثال، أنشأنا رمزًا مختصرًا لإضافة أزرار مخصصة في أي مكان على الموقع:
[محذوف]
يُسهّل هذا الرمز المختصر على المحررين إضافة أزرار بنص مخصص وعناوين URL، مما يسمح بإجراء تعديلات سريعة دون كسر التصميم.
8) التعامل مع تحسين محركات البحث وسرعة الموقع
كان التركيز الرئيسي أثناء إصلاح موقع الويب هو تحسين محركات البحث والأداء العام للموقع. كان الموقع الأصلي، الذي تم إنشاؤه باستخدام Elementor، يعاني من مشكلات تتعلق بأوقات التحميل البطيئة وممارسات تحسين محركات البحث غير المثالية بسبب الكود المتضخم والصور غير المحسنة.
تحسين محركات البحث
لضمان أن يكون موقعنا الجديد متوافقًا مع محركات البحث، قمنا بتنفيذ العديد من أفضل الممارسات منذ البداية:
-
HTML الدلالي : قمنا بتنظيم HTML الخاص بالموقع بعناية مع الاستخدام المناسب لعلامات الرأس (
,، إلخ)، مما يضمن أن تتمكن محركات البحث من تحليل وفهم التسلسل الهرمي للمحتوى بسهولة. وهذا مهم بشكل خاص لكل من تصنيفات محرك البحث وإمكانية الوصول. - العلامات الوصفية وبيانات Open Graph : استفدنا من مكون Yoast SEO للتعامل مع العناوين الوصفية والأوصاف وبيانات Open Graph للمشاركة الاجتماعية. باستخدام Yoast، تأكدنا من أن كل صفحة ومنشور يحتوي على بيانات وصفية مُحسَّنة، وهو أمر بالغ الأهمية لظهور محرك البحث ومعدلات النقر من منصات الوسائط الاجتماعية.
- ترميز المخطط : باستخدام ملف functions.php ، أضفنا ترميز مخطط مخصص للبيانات المنظمة، مما أدى إلى تحسين طريقة عرض محركات البحث لصفحاتنا في نتائج البحث. على سبيل المثال، قمنا بتضمين مخطط للمقالات ودراسات الحالة والمنتجات، مما ساعد محركات البحث على تصنيف المحتوى الخاص بنا بشكل أفضل.
دالة add_schema_markup() {
صدى '
{
"@context": "http://schema.org"،
"@type": "المنظمة"،
"الاسم": "ConveyThis"،
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"نفس الشيء": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
إضافة_إجراء('wp_head', 'add_schema_markup' );
تحسين سرعة الموقع
الأداء هو عامل حاسم ليس فقط لتجربة المستخدم ولكن أيضًا لترتيب محرك البحث. لقد اتخذنا عدة خطوات لتحسين سرعة الموقع:
- تحسين الصور : لقد استخدمنا تنسيقات الصور الحديثة مثل WebP ، والتي توفر معدلات ضغط أفضل من التنسيقات التقليدية مثل PNG وJPEG. تم تقديم جميع الصور بالحجم المناسب بناءً على دقة شاشة المستخدم، مما يضمن أوقات تحميل سريعة حتى على الأجهزة المحمولة.
- التحميل البطيء : من خلال تنفيذ التحميل البطيء للصور، تأكدنا من تحميل الصور المرئية على شاشة المستخدم فقط في البداية. سيتم تحميل الصور الإضافية أثناء تمرير المستخدم، مما يقلل من أوقات تحميل الصفحة الأولية.
- التخزين المؤقت والتصغير: استخدمنا WP Rocket للتخزين المؤقت، والتصغير، وضغط ملفات HTML وCSS وJavaScript . ساعدنا WP Rocket في تحقيق أوقات تحميل أسرع من خلال تقليل حجم الملف بشكل عام وتقديم نسخ ثابتة مخزنة مؤقتا للصفحات للزوار المتكررين.
9) تحسين قاعدة البيانات وتنظيفها
لقد تراكم على الموقع القديم كمية كبيرة من البيانات “غير المرغوب فيها” بسبب تضخم Elementor’ وبنية قاعدة البيانات غير الفعالة. ولضمان تشغيل الموقع الجديد بسلاسة، قمنا بإجراء عملية تنظيف شاملة لقاعدة البيانات وتحسينها.
- إزالة البيانات القديمة Elementor
كما ذكرنا سابقًا، حتى بعد إلغاء تنشيط Elementor، ظلت أنماطه وإعداداته مضمنة في قاعدة البيانات. لقد استخدمنا استعلامات مخصصة لحذف هذه البيانات الزائدة وتنظيف قاعدة البيانات. بالإضافة إلى ذلك، قمنا بإزالة أي ملفات وسائط غير مستخدمة، ومراجعات المنشورات، والوسائط العابرة منتهية الصلاحية التي تراكمت بمرور الوقت.
- فهرسة قاعدة البيانات
لقد قمنا أيضًا بتحسين قاعدة البيانات عن طريق إضافة فهرس إلى الأعمدة التي يتم الاستعلام عنها بشكل متكرر، مما يضمن أن تكون استعلامات قاعدة البيانات أسرع وأكثر كفاءة. على سبيل المثال، إضافة فهرس إلى أخر التاريخ أدى العمود إلى تسريع الاستعلامات المتعلقة بالمشاركات الأخيرة، مما أدى إلى تحسين أداء صفحات مدونتنا.
خاتمة
كان قرار إنشاء موقع ويب جديد من الصفر مدفوعًا بالقيود وأوجه القصور في الموقع القديم. لم يكن مجرد تبديل السمة خيارًا قابلاً للتطبيق بسبب عدم اتساق التصميم والأنماط المتضخمة ومشكلات الأداء الناجمة عن Elementor. من خلال إنشاء موقع جديد بتطوير مخصص وحقول مخصصة متقدمة، حققنا موقعًا إلكترونيًا أكثر كفاءة وتماسكًا واحترافية يعزز تجربة المستخدم مع تمكين التحديثات المبسطة ووظائف اختبار A/B. يوفر هذا الموقع الجديد أساسًا متينًا للنمو والتحسينات المستقبلية.
تلخيص هذه التدوينة بـ:
هل أنت مستعد للبدء؟
الترجمة هي أكثر بكثير من مجرد معرفة اللغات، فهي عملية معقدة.
من خلال اتباع نصائحنا واستخدامها ConveyThisسوف تلقى صفحاتك المترجمة صدى لدى جمهورك، وتشعر بأنها أصلية للغة الهدف.
رغم أن الأمر يتطلب جهدًا، إلا أن النتيجة مجزية. إذا كنت تترجم موقعًا إلكترونيًا، فيمكن لـ ConveyThis توفير ساعات لك باستخدام الترجمة الآلية.
جرب ConveyThis مجانًا لمدة 3 أيام!
CONVEYTHIS