كيفية إضافة زر العودة إلى الأعلى في ووردبريس

لست متأكداً من كيفية إضافة زر العودة إلى الأعلى في ووردبريس؟ للأسف، لا تتضمن معظم قوالب ووردبريس هذا الزر بشكل افتراضي. ولكن هناك بضع طرق يمكنك استخدامها لإضافة الزر إلى موقعك الإلكتروني.

والأمر يستحق العناء أيضاً. إذا كان موقعك الإلكتروني يتضمن صفحات طويلة يتصفحها المستخدمون بعيداً عن قائمة التنقل أو زر الدعوة لاتخاذ إجراء (Call to action)، فيمكن لهذا الزر مساعدة المستخدمين على العودة إلى التركيز الأساسي للصفحة بأقل جهد ممكن. 

تشمل الطرق الأكثر شيوعاً لإضافة زر العودة إلى الأعلى في ووردبريس استخدام إضافة (Plug-in)، أو إضافة كود مخصص، أو تضمين أداة برمجية بدون كود (No-code widget). لا تتطلب الإضافات والأدوات البرمجية المضمنة أي خبرة برمجية، لذا فهي الطرق المفضلة إذا لم تكن على دراية بلغات HTML أو CSS أو JavaScript. يمنحك الكود المخصص تحكماً كاملاً في الزر الخاص بك، ولكنه ليس حلاً رائعاً للمبتدئين.

في هذا الدليل، نستكشف كيفية إضافة زر العودة إلى الأعلى في ووردبريس باستخدام هذه الطرق، بالإضافة إلى مزايا وعيوب كل منها. 

إضافة زر العودة إلى الأعلى باستخدام إضافة ووردبريس

يقدم ووردبريس مجموعة متنوعة من الإضافات لتعزيز وظائف موقعك الإلكتروني. ستجد داخل دليله إضافات زر العودة إلى الأعلى في ووردبريس من مطورين متعددين — وهي الطريقة الأكثر شيوعاً لإضافة الزر. 

الخيارات المتاحة في إضافة زر العودة إلى الأعلى في ووردبريس

توفر العديد من هذه الإضافات خيارات تخصيص تتيح لك اختيار موضع الزر وتصميمه. عند البحث عن إضافة زر العودة إلى الأعلى المناسبة لموقعك الإلكتروني، حدد الإعدادات الأكثر أهمية بالنسبة لك. ومن بين الأمور التي يجب وضعها في الاعتبار ما يلي:

• موضع الزر: يحدد هذا مكان ظهور الزر في صفحتك. قد تمنحك الإضافات خيارات لوضع الزر على اليمين أو اليسار أو في المنتصف. ويقدم بعضها تحكماً أكثر دقة.
• الأيقونة أو التسمية: قد تقدم الإضافات أيقونة واحدة أو تمنحك قائمة من الخيارات للاختيار من بينها. ويتيح لك بعضها تخصيص لون الأيقونة أيضاً.
• الرؤية على الهاتف المحمول أو سطح المكتب: قد تُعرض الأزرار بشكل مختلف على أجهزة الكمبيوتر والأجهزة المحمولة. تحقق من خيارات الرؤية الخاصة بالإضافة لفهم كيفية ظهورها.
• التمرير السلس: تقدم بعض الأزرار خيارات تمرير بدلاً من الانتقال فوراً إلى أعلى الصفحة. وهذا مفيد إذا كنت تريد أن يتمتع المستخدمون بمزيد من التحكم في التنقل داخل الصفحة.
• إزاحة التمرير أو حده: يحدد هذا الإعداد مقدار المساحة المتوفرة بين العناصر الموجودة في أعلى الصفحة وموضع التمرير. ومن الناحية المثالية، لن يؤدي النقر فوق زر العودة إلى الأعلى إلى إخفاء المحتوى من القوائم أو الترويسات.

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

كيفية إضافة زر العودة إلى الأعلى في ووردبريس

بمجرد اختيار إضافة تناسب احتياجاتك، قم بتثبيتها باتباع هذه الخطوات:

1. سجل الدخول إلى لوحة تحكم مسؤول موقعك الإلكتروني.
2. انقر فوق الإضافات (Plugins).
3. حدد موقع الإضافة في دليل إضافات ووردبريس. يمكنك استخدام مربع البحث لكتابة اسمها.
4. انقر فوق الإضافة.
5. انقر فوق تثبيت وتفعيل (Install and activate). (إذا كنت تقوم بتثبيت إضافة مدفوعة، فانقر فوق شراء وتفعيل (Purchase and activate).)

بعد تثبيت البرنامج، قم بزيارة قائمة الإعدادات (Settings) الخاصة به لضبط مظهر زر العودة إلى الأعلى وسلوك التمرير.

أشهر إضافات زر العودة إلى الأعلى في ووردبريس

هناك المئات من الإضافات التي تضيف زر التمرير إلى الأعلى في ووردبريس. وتشمل بعض الخيارات ما يلي:

• WPFront Scroll Top: تقدم هذه الإضافة العشرات من أزرار التمرير إلى الأعلى المصممة مسبقاً والتي يمكنك الاختيار من بينها. كما تتيح لك تحديد حجم الزر وموضعه وسلوك التمرير.

• Smooth Scroll Page Up/Down Buttons: إذا كانت صفحات موقعك تتضمن مستندات طويلة، فيمكن لهذه الإضافة أن تساعدك. فهي توفر ميزة التمرير السلس إلى الأعلى في ووردبريس، مما يتيح للمستخدمين التمرير بين المستندات النصية الفردية أو إلى بداية الصفحة.

• Nicescrollr: تتيح لك هذه الإضافة إضافة زر العودة إلى الأعلى وإدارة إعدادات متعددة، بما في ذلك حجم الزر وسرعة التمرير.

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

إضافة زر العودة إلى الأعلى في ووردبريس باستخدام كود مخصص

يمنحك زر العودة إلى الأعلى المخصص في ووردبريس تحكماً كاملاً في مظهره وسلوكه. فلن تكون مقيداً بخيارات الإعدادات التي توفرها الإضافة، ويمكنك تعديل الزر ليناسب متطلباتك تماماً. إنه بديل قوي لأولئك الذين يريدون تصميماً مخصصاً أو يفضلون تجنب بطء الصفحة الناتج عن تضخم الملفات الذي قد تسببه الإضافات.

ومع ذلك، يتطلب إنشاء الزر الخاص بك خبرة. ستحتاج إلى أن تكون متمكناً من تعديل قوالب ووردبريس وأن تكون لديك خبرة في أكواد HTML أو CSS أو JavaScript المخصصة. 

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

مزايا وعيوب الزر المخصص

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

تتمثل العيوب الرئيسية لإنشاء زر مخصص في الإعداد التقني والاختبار. إذ يستغرق كتابة كود يتوافق مع موقعك الإلكتروني ولا يتعارض مع قالب ووردبريس الخاص به وقتاً. 

يعد الاختبار أمراً أساسياً في تطوير الأزرار المخصصة أيضاً. خطط لاختبار أداء الزر عبر أجهزة متعددة، بما في ذلك أجهزة الكمبيوتر والأجهزة اللوحية والهواتف الذكية. ومن الجيد تجربة الزر على منصات متعددة أيضاً، مثل iOS وWindows وAndroid.

طريقة أسهل بدون كود: استخدم أداة زر العودة إلى الأعلى من Jotform

هناك بديل للإضافات والأزرار المخصصة: أداة زر العودة إلى الأعلى (Back to Top Widget) من Jotform. إنها حل لا يتطلب كتابة أي كود برمجي ويمكنك إضافته إلى موقعك الإلكتروني في غضون دقائق.

على عكس الإضافات، لن تتسبب أداة زر العودة إلى الأعلى الخاصة بنا في بطء الصفحة ولا تتطلب تحديثات منتظمة. لا توجد أي حاجة للبرمجة على الإطلاق، ولن تؤثر على وظائف قالب ووردبريس الخاص بك. 

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

كيفية تثبيت أداة زر العودة إلى الأعلى من Jotform

إن دمج الأداة في موقعك الإلكتروني أمر سهل. ابدأ بالانتقال إلى صفحة أداة زر العودة إلى الأعلى الخاصة بنا، ثم اتبع هذه الخطوات:

1. امنح أداتك اسماً عن طريق تعديل حقل “Untitled” في شريط الأدوات.
2. أدخل إعدادات الموضع والتمرير المفضلة لديك، ثم انقر فوق متابعة (Continue).

• موضع الزر (Button Position): اختر اليسار (Left) أو اليمين (Right).
• إظهار التسمية (Show Label): قم بالتبديل للتفعيل أو التعطيل. أدخل أي نص تريد أن يعرضه الزر.
• الإظهار بعد التمرير (Show after scrolling): استخدم شريط التمرير لتحديد عدد البكسلات التي يجب أن يمررها المستخدم قبل ظهور الزر.
• حركة التمرير (Scroll animation): اختر سلس (Smooth) أو فوري (Instant).

3. أدخل تفضيلات النمط الخاصة بالزر وانقر فوق متابعة (Continue).

• حجم الزر (Button size): استخدم شريط التمرير لضبط عرض الزر وارتفاعه.
• حجم الأيقونة (Icon size): استخدم شريط التمرير لضبط حجم أيقونة السهم.
• الأيقونة (Icon): اختر نمط أيقونة السهم للزر (سهم للأعلى Arrow up، أو شارة للأعلى Chevron up، أو سهم عريض للأعلى Bold arrow up).
• استدارة الزوايا (Corner radius): اختر زوايا مربعة (Square Corners)، أو زوايا مستديرة (Rounded Corners)، أو زوايا دائرية (Circular Corners).
• ألوان الزر (Button Colors): أدخل كود اللون السداسي العشري (hex) المفضل لديك للخلفية ولون النص.
• تأثير الظل (Drop shadow): قم بالتبديل لتعطيل أو تفعيل ظل ناعم أسفل الزر.

4. قم بإعداد قواعد العرض وانقر فوق جربه على موقعك الإلكتروني مجاناً (Try it on your website for free).

• المسافة من الأسفل (Distance from bottom): استخدم شريط التمرير لتحديد مدى بعد الزر عن الحافة السفلية.
• المسافة من الجانب (Distance from side): استخدم شريط التمرير للتحكم في مدى بعد الزر عن الحافة الجانبية.
• الإظهار على سطح المكتب (Show on desktop): تفعيل أو تعطيل.
• الإظهار على الهاتف المحمول (Show on mobile): تفعيل أو تعطيل.

5. انسخ كود التضمين والصقه في محرر HTML الخاص بووردبريس.

أثناء تخصيص الزر، يمكنك النقر فوق أيقونة الكمبيوتر أو الهاتف الذكي في الزاوية السفلية اليمنى لمعرفة كيف سيظهر.

فوائد استخدام أدوات Jotform في موقع ووردبريس الخاص بك

سواء كنت مصمم ويب خبيراً أو تتعلم للتو كيفية استخدام ووردبريس، فإن Jotform توفر الكثير من الأدوات العملية التي تدعم موقعك الإلكتروني.

نحن نقدم العديد من أدوات المواقع الإلكترونية (Website Widgets) المجانية التي يمكنك تخصيصها لعرض تقييمات مؤسستك من مواقع خارجية، بما في ذلك Google وFacebook وTripadvisor — وهي مثالية لأصحاب المواقع الإلكترونية الذين يرغبون في عرض آراء العملاء ولكنهم يترددون في الالتزام بأدوات الإضافات المدفوعة المتاحة عبر ووردبريس.

يمكنك أيضاً الاستفادة من إضافة تضمين النماذج في ووردبريس المخصصة من Jotform. فهي تتيح لك جمع إرسالات النماذج من المستخدمين الذين يزورون موقعك. نحن نقدم أكثر من 20,000 من قوالب نماذج ووردبريس المخصصة والمجانية التي تغطي حالات الاستخدام الشائعة، بما في ذلك معلومات الاتصال، ومعلومات الدفع، وتقديم الطلبات. يمكنك تضمين نموذجك في ووردبريس ببضع خطوات فقط.

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

أضف زر العودة إلى الأعلى دون إبطاء سير عملك في ووردبريس

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

لترى كيف تضيف أداة زر العودة إلى الأعلى من Jotform زر تمرير للأعلى أنيقاً إلى موقع ووردبريس الخاص بك، جربها اليوم.