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

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

باختصار:

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

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

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

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

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

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

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

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

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

في Webflow ، انتقل لكي > الترجمة وانقر على «تمكين الترجمة». اختر الإعدادات الإقليمية الأساسية، ثم انقر على «إضافة إعدادات إقليمية» لكل لغة تريد لكي .

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

الخطوة 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 الخاص بك.

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

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

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

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

مقارنة مباشرة Webflow Weglot

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

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

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

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

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