كيفية لكي قائمة منسدلة للغات لكي Webflow لكي Webflow

إن إنشاء موقع إلكتروني متعدد اللغات يعني توفير مسار واضح للزوار الدوليين للوصول إلى المحتوى الذي جاءوا من أجله. وقائمة اللغات المنسدلة في شريط التنقل الخاص بـ Webflow تؤدي هذه المهمة بالضبط. سنرشدك إلى ثلاث طرق لإنشاء مثل هذه القائمة: عنصر قائمة «Locales» في Webflow، وزر تبديل مبرمج خصيصًا بلغة JavaScript، وإعداد آلي باستخدام Weglot. بالنسبة لكل طريقة، ستتعرف على مسار النقرات الدقيق، وكيفية المقارنة بينها، وأيها يناسب أسلوب عملك الحالي.

باختصار:

• يقوم عنصر قائمة "اللغات" الأصلي Webflowبإنشاء خيارات قائمة منسدلة تلقائيًا من اللغات التي قمت بتمكينها، لذا لن تضطر لكي رابط لكل لغة يدويًّا.
• في حالات إعدادات المشاريع المتعددة أو النطاقات الفرعية التي لا يتناسب معها أداة التبديل الأصلية، يمكن استخدام زر تبديل صغير مكتوب بلغة جافا سكريبت ضمن كود مخصص لتوجيه الزوار بين إصدارات اللغات المختلفة.
• أدوات الترجمة بالذكاء الاصطناعي مثل Weglot تقوم بإنشاء القائمة المنسدلة وعلامات hreflang وعناوين URL الملائمة لتحسين محركات البحث (SEO) في عملية إعداد واحدة، وتعمل مع منصة التجارة الإلكترونية Webflow (على عكس خدمة توطين Webflow التي لا تدعم ذلك).
• أهمية إمكانية الوصول عبر الأجهزة المحمولة: اضبط مساحة النقرات بحيث لا تقل عن 44×44 بكسل، واستخدم ميزة «فتح عند النقر» بدلاً من «التحريك» على الشاشات التي تعمل باللمس.

ثلاث طرق لكي قائمة منسدلة للغات في Webflow

قبل أن تختار طريقة ما، من المفيد لكي ما تقدمه ما منها.

تعد قائمة "Locales" Webflowالخيار الأمثل للفرق التي تستخدم بالفعل Webflow وتتمتع بإعدادات ملائمة. أما إذا لم تكن قد قمت بذلك بعد، فإن عملية الإعداد تتطلب جهدًا متوسطًا. وتتطلب هذه الميزة Webflow مدفوعًا Webflow مع تفعيل ميزة "Localization"، كما أنها غير متوافقة مع Webflow .

يُعد زر التبديل المكتوب بلغة جافا سكريبت خصيصًا مناسبًا لإعدادات المشاريع المتعددة أو النطاقات الفرعية. تتراوح صعوبة الإعداد لكي منخفضة لكي . وهو مرن، لكن سيتعين لكي الكود.

Weglot يُعد هذا الخيار الأمثل للفرق التي تبحث عن ترجمة عالية الجودة دون الحاجة إلى تدخل يدوي، بالإضافة إلى أداة التبديل وإعدادات تحسين محركات البحث (SEO) في حزمة واحدة. ولا يتطلب الأمر سوى جهد ضئيل في الإعداد. وهو متوافق مع أي خطة من خطط Webflow (بما في ذلك خطط التجارة الإلكترونية) ويقوم بإضافة علامات hreflang تلقائيًا.

الطريقة 1: إنشاء أداة تبديل الإعدادات المحلية الأصلية باستخدام قائمة الإعدادات المحلية Webflow

• استخدم هذه الطريقة إذا كنت قد قمت بالفعل بتمكين " Webflow " في مشروعك.

الخطوة 1: تمكين الترجمة وإضافة الإعدادات اللغوية الخاصة بك

في أداة تصميم « Webflow Designer»، انتقل إلى « الإعدادات » > «Localization» وانقر على «Enable Localization». اختر الإعدادات الإقليمية الأساسية، ثم انقر على «Add locale» لكل لغة ترغب في دعمها.

بالنسبة لكل لغة جديدة، قم بتعيين اسم العرض الخاص بها والدليل الفرعي الخاص بها، ثم قم بتفعيل خيار «تمكين النشر» لكي ليل لكي . لن تظهر اللغات التي لم يتم تمكين النشر لها في أداة التبديل لاحقًا، لذا لا تتخطى هذه الخطوة.

الخطوة 2: أضف قائمة منسدلة إلى شريط التنقل

افتح لوحة "إضافة" (Add) وانتقل لكي . اسحب عنصر "قائمة منسدلة" (Dropdown) إلى شريط التنقل الخاص بك. افتح "المستكشف" (Navigator)، لكي وسيع عنصر "القائمة المنسدلة" (Dropdown) لكي العناصر التابعة له، ثم احذف الروابط الثلاثة المؤقتة (Link 1، Link 2، Link 3). ستظهر إعدادات اللغة الخاصة بك هنا بعد أن نقوم بتكوينها في الخطوة التالية.

الخطوة 3: إضافة قائمة الإعدادات الإقليمية

من "إضافة لوحة" > "خيارات متقدمة"، اسحب عنصر "قائمة الإعدادات المحلية" إلى عنصر "التنقل" في القائمة المنسدلة. تعمل "قائمة الإعدادات المحلية" مثل "قائمة المجموعات": فهي تُنشئ تلقائيًا عنصرًا واحدًا لكل إعداد محلي منشور، وبالتالي لن تضطر إلى إنشاء رابط منفصل لكل لغة.

الخطوة 4: اختر ما يظهر ما المنسدلة

انقر على عنصر «الرابط» داخل أحد عناصر الإعدادات الإقليمية، ثم افتح لوحة « الإعدادات » الخاصة بالعنصر وانقر على أيقونة النقطة الأرجوانية الموجودة بجوار حقل «النص». ضمن «عنصر قائمة الإعدادات الإقليمية»، حدد الطريقة التي يجب أن يُسمى بها كل خيار: «الإعداد الإقليمي (en-US)»، أو «اللغة (en)»، أو «البلد (US)»، أو «الاسم المعروض (الإنجليزية (الولايات المتحدة))».

لكي زر التبديل المنسدل يعرض الإعدادات اللغوية النشطة، حدد «كتلة النص» داخل زر التبديل المنسدل، وانقر على النقطة الأرجوانية لكي ثم اختر نفس تنسيق التسمية ضمن «الإعدادات اللغوية الحالية».

الخطوة 5: إضافة العلامات والتحسينات الخاصة بالهواتف المحمولة

إذا كنت قد قمت بتحميل صور للعرض لكل لغة، فأضف عنصر «صورة» داخل عنصر «اللغة»، وانقر على النقطة الأرجوانية لكي ثم تحت «عنصر قائمة اللغات»، اختر «صورة اللغة». كرر ذلك داخل زر التبديل المنسدل باستخدام «اللغة الحالية» > «صورة اللغة لكي علم اللغة النشطة.

بالنسبة للأجهزة المحمولة، حدد القائمة المنسدلة واضبط الخيار «القائمة > فتح عند النقر» (وليس «عند التمرير»، لأن ميزة التمرير لا تعمل على الشاشات التي تعمل باللمس). تأكد من أن حجم عناصر اللمس لا يقل عن 44×44 بكسل حتى يمكن النقر على زر التبديل بسهولة.

الطريقة 2: زر تبديل مكتوب بلغة جافا سكريبت مخصص

استخدم هذه عندما تكون إصدارات عندما موجودة في Webflow منفصلة أو على نطاقات فرعية مختلفة (على مثل مثل.com و es.مثل.com)، حيث لا تفي قائمة الإعدادات المحلية الأصلية بالغرض. ستحتاج بالتأكيد إلى بعض الخبرة في البرمجة، أو إلى مطور في الفريق يمكنه القيام بذلك نيابة عنك.

Add a button or link to your navbar and give it a class like language-toggle. Then paste a short script into Page Settings > Custom Code > Before </body> tag that redirects the visitor to the equivalent page on your alternate domain, preserving the path so they don’t land on the homepage of the other language.

في حالة وجود ثلاث أكثر أو أكثر قم بتوسيع نطاق هذا النهج بإضافة سمة بيانات إلى كل زر (على مثل data-language=”fr”) وكائن بحث يربط كل رمز لكي .

الطريقة الثالثة: جهاز التبديل الآلي مع Weglot

استخدم هذه الطريقة إذا كنت لا ترغب لكي مع الكود وتريد لكي تتم معالجة أداة تبديل اللغة والترجمات وعلامات hreflang وعناوين URL الملائمة لمحركات البحث من خلال إعداد واحد. وهي مفيدة بشكل خاص لمتاجر Webflow التي لا يدعمها Webflow .

ابدأ بإنشاء حساب علىWeglot وأضف نطاق موقعك Webflow .

حدد اللغة المصدر واللغة الهدف، ثم انسخ Weglot snippet الصيغة والصقها في موقع Webflow ، في قسم « الإعدادات » > «Custom Code» > «Head Code». انشر موقعك، وسيظهر مفتاح تبديل اللغة تلقائيًا، وهذا كل شيء! يتم ترجمة المحتوى الخاص بك وعرضه ضمن دلائل فرعية أو نطاقات فرعية متوافقة مع تحسين محركات البحث (SEO)، مع معالجة علامات hreflang والبيانات الوصفية المترجمة نيابة عنك.

يمكنك تعديل أداة التبديل بصريًّا من Weglot لوحة التحكم: اسحبه إلى أي مكان على الصفحة، وقم بتشغيل أو إيقاف تشغيل الأعلام، واختر ما إذا كنت تريد عرض أسماء اللغات أو رموز اللغات أو رموز البلدان.

بالنسبة للتصميمات الخاصة بـ « Webflow »، تتضمن مجموعة أدوات واجهة المستخدم «Weglot » أكثر من 20 أداة لتبديل اللغة قابلة للنسخ وجاهزة للاستخدام مباشرةً في «Designer».

عادةً ما تختار الفرق على Webflow Weglot لعدة أسباب. يعني الكشف التلقائي عن المحتوى أن الصفحات الجديدة تُترجم دون الحاجة إلى أي تدخل يدوي. تظهر الترجمات في لوحة تحكم منفصلة، لذا لا يحتاج المترجمون إلى تراخيص في مساحة عمل « Webflow ». كما أنه يعمل مع « Webflow Ecommerce»، على عكس « Webflow Localization». بالإضافة إلى ذلك، فإن تحسين محركات البحث متعدد اللغات مدمج في جميع الباقات.

Webflow الأصلي مقابل Weglot، مقارنة جنبًا إلى جنب

إذا كنت تقيّم بين المسارين الأكثر شيوعًا، فإليك الفروق بينهما في النقاط التي عادةً لكي الأكثر لكي :

• إعداد أداة التبديل: يتم إعداد أداة التبديل الأصلية ( Webflow ) يدويًّا (سحب القائمة المنسدلة، وسحب قائمة اللغات، وربط النص، وتعيين النمط). Weglot يُنشئ أداة التبديل تلقائيًا عند التثبيت.
• مزامنة المحتوى عبر اللغات: يتطلب نظام " Webflow " الأصلي تشغيلًا يدويًّا لكل صفحة عند تحديث المحتوى. Weglot يكتشف المحتوى الجديد ويترجمه تلقائيًا.
• Webflow التجارة الإلكترونية: لا يتوافق الترجمة الأصلية لـ Webflow مع متاجر التجارة الإلكترونية على Webflow . Weglot هو كذلك.
• Hreflang وعناوين URL الملائمة لمحركات البحث (SEO): يتولى موقع Webflow الأصلي معالجة هذه الأمور نيابة عنك إذا كنت تستخدم إعداد الدلائل الفرعية في «Localization»، لكنك ستظل تقوم بتكوين أسماء العرض والنشر لكل لغة. Weglot يقوم بإدراج علامات hreflang وعناوين URL الملائمة لتحسين محركات البحث (SEO) تلقائيًا.
• وصول الفريق: Webflow يتطلب الترجمة توفير تراخيص مدفوعة لـ Workspace لأي شخص يقوم بتحرير الترجمات في أداة Designer. Weglot يدير الترجمات من خلال لوحة تحكم منفصلة مضمنة في جميع الباقات.

جعل Webflow الخاص بك متاحًا على مستوى العالم

تعد القائمة المنسدلة للغة جزءًا صغيرًا من شريط التنقل الخاص بك، لكنها أكثر العلامات وضوحًا على أن موقعك مصمم لجمهور متعدد. وسواء قمت بإنشائها باستخدام قائمة «Locales» في Webflow، أو برمجتها بنفسك، أو أتمتتها باستخدام Weglot، فإن الهدف واحد: توجيه الزوار إلى اللغة الصحيحة بسرعة وبدون عوائق.

إذا كنت ترغب في إدارة أداة التبديل بين اللغات، والترجمات، وتحسين محركات البحث متعدد اللغات من خلال إعداد واحد (بما في ذلك التجارة الإلكترونية باستخدام Webflow )، فجرّب Weglot مجانًا لمدة 14 يومًا على موقعك Webflow .