لماذا قمنا ببناء موقع ويب جديد من الصفر: تطور ضروري
اجعل موقع الويب الخاص بك متعدد اللغات في 5 دقائق
1) لماذا قمنا بإنشاء موقع ويب جديد ولم نتمكن من "تبديل السمات"
عندما حددنا الحاجة إلى التغيير لأول مرة، بدت المهمة بسيطة: "تغيير الكتلة العلوية وجعل الدعوة إلى العمل أكثر فعالية". للوهلة الأولى، قد يبدو هذا بمثابة حل سريع، لكننا سرعان ما أدركنا أن هذه المهمة الصغيرة كشفت عن مشاكل أساسية أكبر بكثير تتعلق ببنية وتصميم الموقع. لم تكن المشكلة كتلة واحدة فقط؛ بل كانت البنية الكاملة للموقع بحاجة إلى إصلاح شامل.
لقد تم بناء موقعنا على الإنترنت بمرور الوقت، بإضافة صفحات مختلفة باستخدام تصميمات وتخطيطات مختلفة، دون أي سمة أو قالب موحد. كانت كل صفحة فريدة من نوعها في تصميمها، وهو ما قد يبدو إبداعيًا ولكنه أدى إلى مشكلة كبيرة: عدم الاتساق. إذا مضينا قدمًا وقمنا بعمل تصميم جديد للكتلة العلوية فقط مع الاحتفاظ ببقية الموقع كما هو، فهذا يعني تحديث تلك الكتلة يدويًا على أكثر من 700 صفحة ومنشور. والأسوأ من ذلك، أن هذه العملية اليدوية ستحتاج إلى التكرار في كل مرة نريد فيها إجراء تغييرات مستقبلية. تخيل عدم كفاءة الاضطرار إلى تمشيط مئات الصفحات، والتأكد من أن كل منها تحتوي على أحدث التحديثات. سرعان ما أصبح من الواضح أن الاستمرار في العمل بالموقع القديم لن يكون مستدامًا.
وبعيداً عن اللوجستيات الخاصة بتحديث كل صفحة، كان علينا أن نأخذ في الاعتبار تجربة المستخدم الإجمالية. فالمستخدمون اليوم يتوقعون تجارب سلسة ومتماسكة عندما يزورون موقعاً على شبكة الإنترنت. وإذا انتقلوا إلى أسفل الصفحة ورأوا أن التصميم غير متناسق ــ حيث تستخدم كل كتلة أنماطاً مختلفة ــ فإن هذا يخلق انطباعاً غير مترابط وغير احترافي. والأسوأ من ذلك، عندما ينتقل المستخدم من صفحة إلى أخرى ويلاحظ أن التخطيط والتصميم مختلفان تماماً، فإن هذا يعزز الشعور بالفوضى.
لقد امتد التناقض إلى ما هو أبعد من التصميم. فالعديد من الصور الموجودة على الموقع كانت قديمة، أو سيئة التصميم، أو حتى تم إنشاؤها بشكل غير مناسب بواسطة الشبكات العصبية. ولم تكن هذه الصور متوافقة مع معايير التصميم الحديثة، وكان استبدالها مهمة شاقة أخرى. كما أن استخدام الصور السيئة انعكس بشكل سيئ على الجودة العامة للموقع، مما ترك للمستخدمين انطباعًا سلبيًا عن المنتج أو الخدمة التي نقدمها.
لم تكن هناك طريقة بسيطة لتحديث الموقع بشكل شامل باستخدام أداة مثل Elementor. تحتوي كل صفحة وكتلة على أنماطها المضمنة الخاصة بها، مما يعني أنه لا يمكن إجراء التغييرات عالميًا. إذا أردنا تحديث نمط الموقع، فسيتعين علينا المرور على كل صفحة وتحديث كل كتلة يدويًا، وهو ما يستغرق وقتًا طويلاً وغير فعال. مع وضع هذا في الاعتبار، أصبح من الواضح أن الحل الوحيد لدينا هو بناء موقع ويب جديد من الصفر. سيسمح لنا هذا بنقل كل المحتوى مع الحفاظ على نفس عناوين URL ولكن بتصميم جديد ومتسق وسهل التحديث.
2) لماذا قررنا عدم استخدام Elementor
يعد Elementor أحد أشهر أدوات إنشاء الصفحات على WordPress. في الظاهر، يبدو وكأنه أداة رائعة تتيح إنشاء الصفحات بسرعة وسهولة. ومع ذلك، بعد العمل على نطاق واسع معه، واجهنا العديد من القيود التي دفعتنا إلى اتخاذ قرار بالابتعاد عن Elementor واختيار موقع ويب مخصص بدلاً من ذلك.
القيود والتحديات التي تواجه Elementor:
- الأخطاء والخلل : على الرغم من أن Elementor يوفر العديد من الميزات المفيدة، إلا أنه ليس خاليًا من المشكلات الفنية. على سبيل المثال، عندما قمنا بنسخ صفحة وحاولنا تحريرها، كانت الصفحة الجديدة تبدو مختلفة عن الصفحة الأصلية، حتى قبل إجراء أي تغييرات. كانت هناك أخطاء متكررة في طريقة عرض العناصر، مثل عدم عمل خاصية "أقصى عرض للصورة" بشكل صحيح. جعلت هذه الأخطاء من الصعب ضمان التصميم المتسق عبر الصفحات.
- الإفراط في الحرية الإبداعية، مما يؤدي إلى عدم الاتساق : إحدى نقاط البيع الرئيسية لـ Elementor هي القدرة على تخصيص كل شيء. ومع ذلك، يمكن أن تكون هذه المرونة سلاحًا ذا حدين، خاصةً عندما يعمل العديد من المحررين على الموقع. من السهل على غير المحترفين إنشاء صفحات بتصميمات غير متسقة عن غير قصد. على سبيل المثال، رأينا حالات استخدم فيها المحررون نصًا ورديًا على أزرار وردية أو أضافوا مثلثات برتقالية طائرة في الخلفية، مما أدى إلى تصميم مزدحم ومربك. بدون نظام تصميم صارم، أصبح من المستحيل الحفاظ على هوية بصرية متماسكة.
- التخصيص المحدود للوظائف المتقدمة : في حين يتفوق Elementor في بناء الصفحات الأساسية بالنصوص والصور، فإنه يصبح أكثر تحديًا عندما تحتاج إلى إضافة وظائف مخصصة. غالبًا ما وجدنا أنفسنا مقيدين بالكتل المضمنة، والتي كان من الصعب تخصيصها للميزات الأكثر تعقيدًا. ومع نمو احتياجاتنا إلى ما هو أبعد من التخطيطات الأساسية، أصبحت قيود Elementor واضحة بشكل متزايد.
-
مشكلات في الأداء والكود المتضخم : تؤدي طريقة Elementor في بناء الصفحات إلى إدخال تعشيش مفرط للعناصر. على سبيل المثال، يقوم 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 هو إنشاء أنواع منشورات وتصنيفات مخصصة، مما سمح لنا بتنظيم المحتوى بشكل أكثر فعالية. بدلاً من الاعتماد فقط على بنية WordPress الافتراضية (الصفحات والمنشورات)، قدمنا أنواعًا مخصصة لمحتوى معين، مثل دراسات الحالة أو الشهادات أو ميزات المنتج. لم يساعد هذا في الحفاظ على تنظيم المحتوى الخاص بنا فحسب، بل أدى أيضًا إلى تحسين تجربة المستخدم من خلال تسهيل التنقل والعثور على المعلومات ذات الصلة.
على سبيل المثال، لإنشاء نوع منشور مخصص لدراسات الحالة، أضفنا الكود التالي في 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 . سمحت هذه الرموز المختصرة للمستخدمين بإدراج وظائف معقدة أو عناصر مصممة بسهولة دون الحاجة إلى لمس الكود. على سبيل المثال، أنشأنا رمزًا مختصرًا لإضافة أزرار مخصصة في أي مكان على الموقع:
وظيفة custom_button_shortcode($atts) {
$atts = الرمز المختصر_atts(
المصفوفة(
'label' => 'انقر هنا',
'url' => '#',
),
دولارات،
'زر مخصص'
);
العودة ' ' . esc_html( $atts['label'] ) . ' ';
}
إضافة رمز قصير('زر مخصص', 'رمز قصير للزر المخصص');
يُسهّل هذا الرمز المختصر على المحررين إضافة أزرار بنص مخصص وعناوين 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"،
"الشعار": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
>
';
>
add_action( '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 مجانًا لمدة 7 أيام!
CONVEYTHIS