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

هل فكرت يوماً في إضافة مقتطفات  برمجية إلى قسم الهيدر ” header ” أو  الفوتر ” footer”  في مدونتك ووردبريس ؟

  • الهيدر  « header »   الرأس، وهو الجزء العلوي من صفحة الويب.
  • الفوتر « footer »    التذييل، وهو الجزء السفلي من صفحة الويب.

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

في هذه المقالة سأشرح الطريقة التي نضيف بها أكواد CSS أو HTML أو Javascript  إلى هيدر أو  فوتر  موقعك ووردبريس. بما أن  ووردبريس لا تُـوفر بشكل افتراضي إمكانية إدراج كود برمجي في الهيدر  أو الفوتر، فإن هناك من أَوْجَـدَ حـلاً سهلاً للمبتدئين.

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

أفضل طريقة لإضافة كود برمجي إلى هيدر  أو فوتر موقع ووردبريس

إذا كنت تريد إضافة مقتطف برمجي للجزء العلوي أو التذييل ( الهيدر أو الفوتر ) في أي قالب ووردبريس لموقعك أو مدونتك . فاعلم أن هناك ثلاث إمكانيات يمكن تطبيقها كالتالي:

  • إما يَـدوياً ، عن طريق تعديل ملفات header.php و footer.php للقالب الذي تستخدم في موقعك.
  • إنّ بعض قوالب ووردبريس تُـتيح لك التعديل على الهيدر والفوتر من خلال قسم تخصيص.
  • يمكنك استخدام مُكون إضافي مصمم لهذا الغرض.

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

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

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

    Insert Headers and Footers

صورة للمكون الاضافي Insert Headers and Footers

 

  • التنصيبات النشطة:  أكثر من 1 مليون تنصيب إلى حدود كتابة هذه المقالة
  • آخر تحديث:قبل شهرين ( إلى حدود كتابة هذه المقالة )
  • تم اختيار هذه الاضافة لآخر نسخة ووردبريس

لمـحة عامة حـول المُكَوِّن الإضافي  Insert Headers and Footers
وكيفية استخدامه

يُعَدُّ Insert Headers and Footers مُكَوِّنـاً إضافيـاً بسيطـاً، إذْ يُـتيحُ لك إدخال رمز مثل Google Analytics و CSS المخصص و Facebook Pixel والمزيد إلى هيدر وفوتر موقعك ووردبريس دون الحاجة لتحرير ملفات قوالب موقعك!

تمنحك الواجهة البسيطة للمكوِّن الإضافي Insert Headers and Footers مكاناً واحداً يمكنك من خلاله إدراج البرامج النّصية ، بدلاً من التعامل مع مجموعة من المكونات الإضافية المختلفة.

يعتبر البرنامج المساعد Insert Headers and Footers سهل وسريع ومُنظم: إذْ يسمح لك بإضافة الأكواد بسرعة وسهولة إلى رأس وتذييل الصفحة. بالإضافة إلى ذلك ، فهذه الإضافة تُـبقيك مُنظماً عن طريق السّماح لك بتخزين جميع رموز تذييل الصفحة ورأسها في مكان واحد.

ومن مزايــاه أيضاً أنه يُجَـنِّبُـكَ ارتكاب الأخطاء التي قد تحدث إذا قمت بتعديل ملفات قالب موقعك يدويـاً. وفي حالة ما إذا قمت بترقية أو تغيير قالبك الحالي فإنك لن تفقد التعليمات البرمجية التي أدخلتها في الهيدر أو الفوتر، بل ستبقى في مكانها محفوظة فلا تقلق بشأنها!

كيفية إدراج الأكواد والرموز إلى هيدر أو فوتر ووردبريس؟

الآن ، سنرى كيف يتم إضافة الرموز  بسهولة إلى الرأس أو التذييل في الووردبريس باستخدام المُكون الإضافي « Insert Headers and Footers ».

أول ما سنقوم به هو تثبيت وتفعيل البرنامج المساعد Insert Headers and Footers. 💡 

إقرأ ايضاً: كيفية تثبيت إضافات ووردبريس بدون أخطاء

بمجرد تنشيط المكون الإضافي ، انتقل إلى الإعدادات من الشريط الجانبي بلوحة تحكم موقعك ثم أنقر على Insert Headers and Footers  ، سترى ثلاث حقولاً كما في الصورة التالية

الواجهة البسيطة للمكون الاضافي Insert Headers and Footers

الواجهة البسيطة للمكون الاضافي Insert Headers and Footers

ما يَهمنا هنا هو الحقلين المخصصين للهيدر والفوتر header و footer ، قم بلصق الكود في أحدهما أو كلاهما. و لا تنس النّقر فوق الزر “حفظ” لحفظ التغييرات.

مثال لكود ب html و css برمجته على عجل للإختبار، جَـرِّبْـهُ لتتأكد من نجاح العمليه ويمكنك إدراج ما تشاء فيما بعد :

إذن، إلى هنا نكون قد تعلمنا كيف ندرج الأكواد في الهيدر والفوتر بواسطة إضافة ووردبريس Insert Headers and Footers .

يمكنك دائماً تعديل وحذف أي تعليمات برمجية لا تريد الاحتفاظ بها.

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

  بُشـرى:    إذا قمت بإلغاء تنشيط المُكون الإضافي عن طريق الخطأ ، فسيظل الرمز  مُخَزَّن بشكل آمن في قاعدة بيانات ووردبريس لموقعك. و يمكنك ببساطة إعادة تثبيت الإضافة أو إعادة تنشيطها إن كانت معطلة ، وسوف تظهر الشفرة مرة أخرى في مكانها السابق.

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

في أمان الله

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

شَـاركِ الْمَوْضُوع:
إذا أعجبك المقال، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا أعْجَبَتْكَ الْمَقَالَة، شَارِكْهَا مَعَ أصْدِقَائِكَ عَبْرَ مَوَاقِع التَّوَاصُل

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 447 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

294 عدد المشاهدات لهذا المحتوى
Scroll to Top