<html> وتغيير اتجاه النص تلقائيًا بين RTL وLTR حسب اللغة المختارة، مما يعزز تجربة المستخدم.
|
| توليف اتجاه العرض التلقائي مع لغة المحتوى في صفحة الويب (RTL &apm; LTR + Translate) |
السلام عليكم ورحمة الله وبركات
في العصر الرقمي الحالي، تعد تجربة المستخدم أحد العوامل الأساسية التي تؤثر بشكل كبير على نجاح المواقع الإلكترونية. من بين أهم العوامل التي تؤثر على تجربة المستخدم هي إمكانية تغيير اتجاه النص في المواقع متعددة اللغات، وخاصة في المواقع التي تدعم اللغات التي تستخدم الاتجاه من اليمين لليسار (RTL) مثل اللغة العربية، واللغات التي تستخدم الاتجاه من اليسار لليمين (LTR) مثل الإنجليزية. تعد إضافة كود لتغيير اتجاه النص تلقائيًا خطوة مهمة لتحسين تجربة المستخدم بشكل كبير، خصوصًا عندما يتم التنقل بين اللغتين العربية والإنجليزية.
في هذا المقال، سنتعرف على كيفية إضافة كود لتغيير الاتجاه التلقائي بين RTL و LTR في قالب "بلس يو اي" في بلوجر، بالإضافة إلى شرح مفصل للكود وأهمية هذه الإضافة بالنسبة لموقعك الإلكتروني. سنوضح أيضًا كيفية إضافة هذا الكود في القالب بما يتوافق مع قواعد السيو، مع تضمين كلمات مفتاحية وأسئلة شائعة لتحفيز التفاعل مع المقال.
شرح الكود
قبل أن نتعرف على طريقة إضافة الكود في القالب، دعونا نتفهم كيف يعمل هذا الكود. الكود يعتمد على مراقبة تغييرات الكلاسات على العنصر <html>. عند إضافة أو إزالة كلاس معين، يقوم الكود بتغيير اتجاه النص بناءً على اللغة المستخدمة. يستخدم الكود MutationObserver لمراقبة هذه التغييرات، مما يضمن أن التغييرات تتم بشكل ديناميكي وفوري عند حدوث أي تغيير في الكلاسات.
إليك الكود الذي سيتم إضافته في القالب:
// Watch for classname changes in element and change the direction accordingly
;(() => {
const element = document.documentElement;
const initialDirection = document.dir;
const callback = () => {
// you can also modify logic here
if (element.classList.contains("translated-ltr")) {
document.dir = "ltr";
} else if (element.classList.contains("translated-rtl")) {
document.dir = "rtl";
} else {
document.dir = initialDirection;
}
}
// initially
callback();
// listen for changes
const observer = new MutationObserver(callback);
observer.observe(element, {
attributes: true,
attributeFilter: ["class"]
});
})();
تنبيه!
الترتيب مهم اذا كان قالبك بشكل افتراضي في وضع RTL لا تعدل على ترتيب المنطق و في حالة ما كان موقعك بشكل افتراضي في اتجاه LTR عدل ترتيب منطق الاستماع translated-ltr بشكل اوضح غير rtl الى ltr و العكس.
1. المراقبة التلقائية لتغيير اتجاه النص: يعتمد الكود على مراقبة التغييرات التي تحدث على خاصية class في العنصر <html> في الصفحة. عند إضافة أو إزالة فئة (class)، يقوم الكود بتغيير اتجاه النص وفقًا للغة المختارة. باستخدام هذا الكود، يمكنك التأكد من أن الموقع يتغير تلقائيًا ليتوافق مع اتجاه النص المناسب دون الحاجة إلى تدخل يدوي من المستخدم.
2. استخدام MutationObserver: يتم استخدام MutationObserver لمراقبة التغييرات في شجرة DOM (شجرة العناصر) والتفاعل معها. عندما يحدث تغيير في الكلاسات المضافة إلى العنصر <html>, يتم استدعاء دالة callback لتغيير اتجاه النص بناءً على الكلاس الذي تم إضافته أو إزالته.
3. الكود البسيط: يتم تحديد ما إذا كان النص سيظهر من اليمين لليسار أو من اليسار لليمين بناءً على الكلاسات الموجودة في العنصر <html>. إذا كانت الكلاس هي translated-ltr، يتم تعيين اتجاه النص إلى LTR (من اليسار لليمين)، وإذا كانت الكلاس هي translated-rtl، يتم تعيين اتجاه النص إلى RTL (من اليمين لليسار).
المتغيرات المستخدمة في الكود:
- element: هذا المتغير يمثل العنصر
<html>في الصفحة، ويتم الوصول إليه باستخدامdocument.documentElement. يتم استخدامه لمراقبة الكلاسات التي تُضاف أو تُزال من العنصر. - initialDirection: هذا المتغير يخزن الاتجاه الأولي للصفحة باستخدام
document.dir. يتم تحديده قبل مراقبة التغييرات حتى يمكن العودة إليه في حالة عدم وجود أي فئة محددة. - callback: هي دالة تُنفذ كلما حدث تغيير في الكلاسات داخل العنصر
<html>. تقوم هذه الدالة بتحديد الكلاس الحالي، ثم تغيير اتجاه النص بناءً على الكلاس:- إذا كان العنصر يحتوي على الكلاس
translated-ltr, يتم تعيينdocument.dir = "ltr". - إذا كان العنصر يحتوي على الكلاس
translated-rtl, يتم تعيينdocument.dir = "rtl". - إذا لم يكن أي من الكلاسات موجودًا، يعيد الكود اتجاه النص إلى القيمة الأصلية المخزنة في
initialDirection.
- إذا كان العنصر يحتوي على الكلاس
- observer: هذا المتغير يمثل
MutationObserverالذي يقوم بمراقبة التغييرات في خاصيةclassالخاصة بالعنصر<html>. يتم تفعيل المراقبة من خلال استدعاءobserver.observe(), ويتم تمرير بعض الخيارات مثلattributes: trueوattributeFilter: ["class"]لتحديد أنه سيتم مراقبة التغييرات في الكلاسات فقط.
شرح آلية العمل:
- الخطوة الأولى: عند تحميل الصفحة، يتم تخزين الاتجاه الأولي للصفحة في المتغير
initialDirection. - الخطوة الثانية: يتم استدعاء دالة
callbackلتحديد اتجاه النص بناءً على الكلاسات المضافة إلى العنصر<html>.- إذا كان الكلاس هو
translated-ltr, يتم تعيينdocument.dir = "ltr". - إذا كان الكلاس هو
translated-rtl, يتم تعيينdocument.dir = "rtl". - إذا لم يكن أي من الكلاسات موجودًا، يتم العودة إلى الاتجاه الأولي.
- إذا كان الكلاس هو
- الخطوة الثالثة: يتم تفعيل
MutationObserverلمراقبة التغييرات في الكلاسات، وبالتالي يتم تغيير اتجاه النص تلقائيًا عند تغيير اللغة.
الفائدة:
- توفير التفاعل التلقائي: يتيح الكود للموقع التكيف مع اللغة المختارة دون تدخل من المستخدم، مما يساهم في تحسين تجربة المستخدم.
- المرونة: يمكن تعديل الكود لتلبية احتياجات الموقع المختلفة، مثل إضافة منطق ديناميكي لتحسين التبديل بين اللغات أو إضافة تخصيصات خاصة.
الآن بعد أن أصبح لديك فهم كامل لكيفية عمل الكود، ننتقل إلى خطوات إضافته في قالب بلس يو اي في بلوجر. العملية بسيطة للغاية ولا تتطلب منك الكثير من التعديلات.
طريقة إضافة الكود في قالب بلس يو اي
- تحضير الكود: قبل أن تبدأ، عليك أولاً التأكد من أنك قد نسخت الكود الذي ترغب في إضافته إلى القالب. يتضمن هذا الكود عادةً تغيير اتجاه النص بناءً على اللغة المختارة (من اليمين لليسار RTL أو من اليسار لليمين LTR). يجب أن يتم نسخ الكود بشكل دقيق كما هو موضح في المثال السابق أو الذي لديك.
- إضافة الكود في القالب:
- افتح لوحة التحكم الخاصة بك في بلوجر: أولاً، قم بتسجيل الدخول إلى حسابك في بلوجر. بعد الدخول، سترى صفحة رئيسية تحتوي على قائمة المدونات الخاصة بك. اختر المدونة التي ترغب في تعديل القالب الخاص بها.
- اذهب إلى "القالب" ثم انقر على هذا السهم الموجود بجانب عبارة تخصيص اختر "تعديل HTML": في لوحة التحكم للمدونة التي اخترتها، يوجد خيار يسمى "القالب" في الشريط الجانبي. اضغط عليه، وستظهر لك خيارات تتعلق بالقالب الحالي. اختر الخيار "تعديل HTML" لفتح المحرر الذي يحتوي على الشيفرة المصدرية للقالب.
- ابحث عن النص التالي في القالب: في المحرر، ستحتاج إلى البحث عن جزء معين من الكود داخل القالب. يمكنك البحث عن اي جزء تريد فقط انقر على
Ctrl + F و ادخل اسم العنصر المقصود. عادةً ما يكون هناك تعليق خاص في القالب يعرف مكان إضافة الأكواد المخصصة، وهذا التعليق يكون مكتوبًا بالشكل التالي:/*--[ Custom JS (Global above closing head) ]--*/(ادا كنت تستخدم احد قوالب شبيهة بقالب Plus UI تدعم التبديل بين وضعي RTL و LTR اضف الكود فوق وسم</body>في حالة كنت تستخدم قالب Plus Ui الاصدار 3.0.0 بالفعل طبق التوضيح اعلاه.) - أضف الكود فوق هذا السطر: عندما تجد هذا السطر، ستقوم بإضافة الكود الذي نسخته مباشرة فوق هذا السطر. تأكد من أن الكود مضاف في المكان الصحيح دون أن يتسبب في أي تداخل مع الأكواد الأخرى. يجب أن يكون الكود مضافًا قبل التعليق المشار إليه.
- احفظ التغييرات: بعد إضافة الكود بشكل صحيح في المكان المناسب، تأكد من الضغط على هده الايقونة الخاصة بزر "حفظ" لتطبيق التغييرات. بمجرد الحفظ، سيتم تحديث القالب ليشمل الكود الذي أضفته.
- اختبار الكود: بعد أن تقوم بإضافة الكود، من المهم اختبار ما إذا كان يعمل بشكل صحيح:
- تغيير اللغة في موقعك: يمكن اختبار الكود عن طريق تغيير لغة موقعك. إذا كنت تستخدم أدوات الترجمة مثل Google Translate، يمكنك استخدام هذه الأدوات لترجمة محتوى الصفحة إلى لغات مختلفة. بمجرد التبديل بين اللغات، يجب أن ترى أن اتجاه النص يتغير تلقائيًا وفقًا للغة المختارة.
- تأكد من عمل التغيير التلقائي للاتجاه: عندما تختار اللغة العربية (أو أي لغة أخرى تستخدم الكتابة من اليمين لليسار)، يجب أن يتغير اتجاه النص تلقائيًا إلى "من اليمين لليسار" (RTL). وعند التبديل إلى اللغة الإنجليزية (أو أي لغة أخرى تستخدم الكتابة من اليسار لليمين)، يجب أن يتغير اتجاه النص إلى "من اليسار لليمين" (LTR). إذا تم التغيير بشكل صحيح، فهذا يعني أن الكود يعمل كما هو متوقع.
خلاصة:
الهدف من إضافة الكود: هو تغيير اتجاه النص تلقائيًا استنادًا إلى اللغة المختارة للموقع.
الخطوات الأساسية: نسخ الكود، البحث عن مكان مناسب في القالب لإضافته، ثم اختبار النتيجة.
أهمية الخطوات: هذه التعديلات تساعد في تحسين تجربة المستخدم، خاصة للمستخدمين الذين يزورون الموقع بلغات مختلفة ويتوقعون أن يعكس الموقع اتجاه الكتابة الصحيح وفقًا للغتهم.
لماذا يجب استخدام هذا الكود؟
يعتبر هذا الكود حلًا مثاليًا للمواقع متعددة اللغات. إذا كان موقعك يحتوي على محتوى باللغتين العربية والإنجليزية أو أي لغات أخرى تدعم الاتجاه من اليمين لليسار (مثل العبرية والفارسية)، فإن استخدام هذا الكود يعد ضروريًا لتحسين تجربة المستخدم. يساعد الكود في جعل الموقع يتكيف تلقائيًا مع اللغة المختارة، مما يعزز التفاعل ويجعل تصفح الموقع أكثر سلاسة.
تحسين تجربة المستخدم:
في المواقع متعددة اللغات، قد يواجه المستخدمون صعوبة في التفاعل مع الموقع إذا لم يكن المحتوى يتماشى مع اتجاه النص الخاص باللغة المختارة. بفضل هذا الكود، سيشعر المستخدمون براحة أكبر في تصفح الموقع، حيث أن الموقع سيتغير تلقائيًا ليتناسب مع اللغة، مما يحسن تجربة التصفح بشكل عام.
تحسين السيو:
تتوافق هذه التقنية مع قواعد السيو، حيث أن محركات البحث مثل جوجل تعطي اهتمامًا كبيرًا لتجربة المستخدم وسهولة التصفح. من خلال تكييف المحتوى وفقًا لاتجاه النص المطلوب، يتم تحسين تجربة المستخدم، مما ينعكس بشكل إيجابي على ترتيب الموقع في نتائج محركات البحث.
التفاعل هو أساس تحسين تجربة المستخدم على أي موقع. من خلال استخدام التقنيات التفاعلية، يمكن تحويل التصفح إلى تجربة ممتعة. - جمال الحزازي
الأسئلة الشائعة
ما هو اتجاه النص (RTL و LTR)؟
RTL: يشير إلى النصوص التي تكون من اليمين لليسار، مثل اللغة العربية والفارسية.
LTR: يشير إلى النصوص التي تكون من اليسار لليمين، مثل اللغة الإنجليزية والفرنسية.
هل هذا الكود متوافق مع جميع القوالب؟
هذا الكود متوافق بنسبة 100% مع قالب بلس يو اي و قوالب مشابهة له، وهو يعمل بشكل جيد في تغيير الاتجاه التلقائي للمحتوى بناءً على اللغة. قد يتطلب بعض القوالب الأخرى تعديلات إضافية.
هل يمكنني تعديل الكود؟
نعم، يمكن تعديل الكود حسب الحاجة. على سبيل المثال، يمكنك إضافة منطق إضافي لتحسين التبديل بين اللغات بشكل ديناميكي، مثل تعديل طريقة إضافة الكلاسات أو تخصيص الفترات الزمنية للتغيير.
هل هذا الكود يؤثر على سرعة الموقع؟
لا، هذا الكود لا يؤثر بشكل ملحوظ على سرعة الموقع. الكود يعمل فقط عند حدوث تغييرات في الكلاسات، مما يعني أنه لا يتم استهلاك موارد إضافية في الوضع العادي.
تنبيه مهم:
تأكد من أن الكود متوافق بشكل كامل مع قالب بلس يو اي، حيث قد يتطلب بعض القوالب الأخرى تعديلات إضافية لضمان عدم تعارض الكود مع العناصر الأخرى في الصفحة. في حال استخدامك لقالب آخر، تأكد من اختبار الكود جيدًا قبل نشر التعديلات على الموقع.
ختاما
إضافة كود تغيير الاتجاه التلقائي بين RTL و LTR في قالب بلس يو اي تعتبر خطوة مهمة لتحسين تجربة المستخدم على الموقع. من خلال هذا الكود، سيتمكن الموقع من التكيف مع اللغات المختلفة بشكل سلس وديناميكي، مما يساهم في تحسين سيو الموقع وزيادة التفاعل مع المحتوى. يجب أن يكون هذا التغيير جزءًا من استراتيجية تحسين تجربة المستخدم في المواقع متعددة اللغات.
مشاركات ذات صلة
شكرًا لمساعدة ChatGPT في إعداد هذا المقال
المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2025/01/rtl-ltr-translate.html
