يشهد ووردبريس تطورًا مستمرًا في كثير من الجوانب، وعلى الرغم من أن بعض التطويرات قد تبدو صغيرة إلى حد ما، لكنها تسهم بشكل فعال في تحسين تجربة المستخدم وتطوير أداء الموقع، ومؤخرًا قام أحد أعضاء فريق تحسين أداء ووردبريس الرسمي بتطوير إضافة تسمح بإضافة ميزة إلى View Transitions إلى مواقع الووردبريس من أجل تحسين عمليات التصفح والتنقل فيها.
في هذه المقالة سأشاركك بشكل عملي تجربتي الشخصية مع إضافة View Transitions وكيف استخدمتها من أجل جعل التصفح في موقعي أكثر سلاسة وجاذبية.
ما هي ميزة View Transitions في ووردبريس؟
ميزة View Transitions هي تقنية حديثة تهدف لتحسين التصفح والتنقل بين صفحات موقع الووردبريس، وذلك عن طريق استبدال الطريقة التقليدية في تحميل الصفحات بطريقة أكثر جاذبية، فبدلًا من الانتقال المفاجئ الذي يحدث عند النقر على رابط ما (اختفاء الصفحة الحالية وظهور الصفحة الثانية) تقوم هذه الميزة بخلق انتقال بصري سلس وجذاب بين الصفحتين.
تعمل إضافة View Transitions على تحريك العناصر بين الصفحتين بشكل ذكي، فعند الانتقال من صفحة إلى أخرى تقوم الإضافة بأخذ لقطة شاشة لكل من الصفحة الحالية والصفحة الجديدة ومن ثم تخلق تأثيرًا حركيًا جذابًا بينها، مما يجعل المستخدم يشعر بأنها يتصفح تطبيقًا سريعًا وليس مجرد موقع عادي، وهذا ما يسهم في تحسين تجربة المستخدم وتقليل معدل الارتداد.
كيف فعلت ميزة View Transitions في موقع ووردبريس الخاص بي؟
إن تفعيل ميزة View Transitions على موقع الووردبريس لا يتطلب أي خبرة برمجية أو تقنية كبيرة، فكل ما فعلته من أجل تفعيلها على موقعي هو التوجه إلى تبويب (إضافات) في لوحة تحكم ووردبريس ومن ثم النقر على (أضف جديد) وكتابة اسم الإضافة (View Transitions) في مربع البحث، ومن ثم تثبيت الإضافة وتفعيلها.
قبل تفعيل الإضافة كان يتم تحميل صفحات موقعي بالطريقة التقليدية (الانتقال المفاجئ)، كما هو موضح في الصورة.
بمجرد انتهاء تفعيل الإضافة فعلت ميزة View Transitions تلقائيًا على الموقع، ولذلك ذهبت لزيارة موقعي لأتأكد من ذلك، وهذه طريقة التنقل الجديدة التي وجدتها.
شرح إعدادات إضافة View Transitions
توفر إضافة View Transitions مجموعة من الإعدادات والخيارات التي يمكن من خلالها تخصيص التصفح بما يتناسب مع احتياجات صاحب الموقع، ويمكن الوصول إليها عن طريق التوجه إلى تبويب (إعدادات) والنقر على (قراءة) ثم النزول إلى أسفل الصفحة، حيث توجد مجموعة إعدادات بعنوان (View Transitions).
تحت هذه العنوان ستجد جميع الإعدادات التي توفرها الإضافة وفيما يلي سأشرحها لك من أجل أن تتمكن من ضبط الميزة وفقًا لاحتياجك:
- Default Transition Animation: هذا الإعداد هو الإعداد الرئيسي المسؤول عن تحديد شكل الحركة عند الانتقال من صفحة إلى أخرى، ويتضمن قائمة منسدلة تحتوي على عدد من الحركات مثل انزلاق من اليمين أو من اليسار. يكون هذا الإعداد مضبوط بشكل افتراضي على Fade (تلاشي) والذي تم توضيحه في الصورة المتحركة السابقة. غيرت هذا الإعداد وضبطته على (Slide from left) وهذه هي النتيجة التي حصلت عليها.
- Transition Animation Duration: هذا الإعداد هو المسؤول عن سرعة الانتقال من صفحة إلى أخرى وزيادته سيؤدي إلى زيادة زمن الانتقال وتقليله سيؤدي إلى العكس. جربت زيادة قيمة هذا الإعداد إلى 1.5 ثانية (أي 1500) وهذه هي النتيجة.
- Header Selector: يستخدم هذا الإعداد لتحديد العنصر الذي سيبقى ثابتًا عند التنقل بين الصفحات (أي أن لن يشارك في عملية الحركة). يتم تحديد هذا العنصر عن طريق وضع محدد العنصر المطلوب (CSS Selector) ضمن حقل هذا الإعداد.
- Main Selector: يحدد هذا الإعداد المحتوى الأساسي في الصفحة والذي سيتم تطبيق حركة الانتقال عليه. يتم تحديده عن طريق وضع محدد العنصر المطلوب ضمن حقل هذا الإعداد، مثل وسم main أو كلاس المحتوى site-content أو أي عنصر آخر يمثل القسم الأساسي للموقع.
- Post Title Selector: يستخدم هذا الإعداد لتحديد العنصر الذي يحتوي على عنوان الصفحة أو المقال، بحيث يتم تحديثه ومشاركته في الانتقال بين الصفحات بشكل متناسق. يتم تحديد هذا العنصر عن طريق وضع محدد العنصر (CSS Selector) الذي يمثل عنوان المحتوى ضمن حقل الإعداد.
- Post Thumbnail Selector: يستخدم هذا الإعداد لتحديد العنصر الذي يحتوي على الصورة البارزة للمقال أو الصفحة ليتم تضمينها ضمن حركة الانتقال بين الصفحات، ويتم تحديده بنفس الطرق السابقة.
- Post Content Selector: يحدد هذا الإعداد العنصر الذي يحتوي على المحتوى النصي الرئيسي للمقال أو الصفحة من أجل أن يتم تحديثه أثناء الانتقال بين الصفحات.
- WP Admin: عند تفعيل هذا الخيار سيتم تطبيق طريقة الانتقال الجديدة على لوحة تحكم موقع ووردبريس الرئيسية، أي عندما يقوم صاحب الموقع بالتنقل ضمن لوحة التحكم سيتم تحميل الصفحات باستخدام ميزة View Transitions.
خلاصة تجربتي مع إضافة View Transitions
بعد استخدام إضافة View Transitions لفترة جيدة يمكنني القول بأنها حققت فارقًا كبيرًا في تحسين بتجربة التصفح في موقعي، حيث أصبح التنقل فيه سلسًا وجذابًا ويعطي انطباعًا احترافيًا، ومن أكثر الأمور التي أعجبتني في الإضافة هو أن تفعيل ميزة View Transitions بواسطتها لا يتطلب أي خبرة برمجية، وفي حال كان الشخص الذي يستخدم الموقع يمتلك بعض الخبرة التقنية، فإنه سيتمكن من استخدام المحددات لضبط عمل الإضافة وفق أي شكل يريده لعملية التنقل.
وعلى الرغم من كل هذه الميزات إلا أنني لاحظت بعض السلبيات خلال تجربتي للإضافة، ومن أبرزها هو أن View Transitions هي ميزة حديثة وبالتالي قد لا تعمل على جميع المتصفحات، بالإضافة إلى ذلك فإن تأثيرها قد يكون غير ملحوظ في الصفحات التي تتضمن محتوى قليلًا، وأيضًا عند اختيار حركة معقدة مع وجود عدد كبير من العناصر ضمن الصفحة فإن ذلك يتسبب أحيانًا بعبء طفيف جدًا على الأداء.
لكن على الرغم من ذلك تتفوق إيجابيات الإضافة بشكل كبير على سلبياتها، فالقيمة التي تضيفها للموقع تعطي انطباعًا احترافية عنه وتحسن من تجربة المستخدم فيه وتجعله يشعر وكأنه يتصفح برنامجًا سريعًا وليس موقعًا عاديًا.
من تناسب هذه الميزة وهل يجب أن تفعلها في موقعك؟
تعتبر هذه الإضافة مثالية للمواقع التي تعتمد على المحتوى وترغب بتقديم ميزة تصفح سلسة وجذابة لزوارها مثل المدونات والمواقع التعريفية ومواقع المصورين والشركات التي تريد تقديم انطباع احترافي عن نفسها. إذا كان الهدف هو إبهار الزائر عند التنقل بين صفحات موقعك وتحسين تجربة تصفحه فيه، فإن إضافة هذه الميزة يعتبر تطويرًا ممتازًا للموقع.
أما إذا كان جمهورك المستهدف يستخدم متصفحات قديمة أو يتصفح من خلال اتصال انترنت بطيء، فمن الأفضل الانتظار حتى يتم تطوير الإضافة وجعلها أكثر استقرارًا وتوافقًا، بشكل عام يعتمد احتياج هذه الميزة من عدمه على طبيعة الموقع والجمهور المستهدف وأولويات صاحب الموقع في تحسين تجربة المستخدم.
وبهذا عزيزي القارئ أكون قد عرفتك على ميزة View Transitions في ووردبريس وشاركت معك تجربتي العملية لتفعيلها في موقعي، وفي الختام أنصحك بشدة بتجربة هذه الإضافة على موقعك وأخذ آراء الزوار فيها، وفي حال شعرت بأنها أضافت لمسة احترافية على الموقع وجعلت التصفح فيه أكثر جاذبية، فبالتأكيد يجب عليك الاحتفاظ بها.
