كيفية إضافة كود الرأس والتذييل في ووردبريس

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

حالة الاستخدام الأكثر شيوعًا لذلك هي دمج Google Analytics في موقعك. ومع ذلك ، هناك الكثير من الأسباب الأخرى التي سترغب في القيام بذلك - قد تعرف بالفعل سبب رغبتك في تنفيذ هذه المهمة.

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

ما يمكنك تحقيقه باستخدام رمز إضافي في رأس وتذييل موقعك

سيتم تقسيم موقع الويب القياسي إلى عدة مكونات مختلفة ، مثل مستند نصي إلى حد كبير:

• رأس. يحتوي عنوان موقعك على عدد من عناصر "التحميل المسبق" وتفاصيل حول شهادة طبقة مآخذ التوصيل الآمنة (SSL) والتشفير وأي JavaScript وغير ذلك.
• تذييل. يعمل هذا بطريقة مشابهة لعنوانك ، ولكن ينتهي به الأمر في أسفل الصفحة بدلاً من ذلك.
• الجسم. ستكون معظم الوظائف التي تنفذها على موقعك ضمن "جسم" المحتوى الخاص بك. هذا هو التركيز الأساسي لكل شيء تقريبًا داخل لوحة معلومات WordPress ، ويمثل النص الأساسي ما تراه على الصفحة.

ستقوم الخوادم بتحميل الصفحات بطريقة خطية - الرأس والجسم ثم التذييل. هذا يعني أن الكود الموجود في الرأس سيتم تحميله أولاً ، ولكن سيتم تحميل رمز التذييل بعد كل شيء آخر.

حالات استخدام مقتطفات الرموز اليومية

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

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

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

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

كيفية إضافة كود الرأس والتذييل في ووردبريس (طريقتان)

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

1. يمكنك استخدام مكون إضافي لمساعدتك في إضافة الشفرة إلى المناطق الصحيحة من موقعك.
2. يمكنك إضافة رمز إلى ملف functions.php الخاص بك ، وستحتاج إلى معرفة إضافية حول كيفية الوصول إلى ملفات موقعك.

سننظر في خيار المكون الإضافي أولاً ، لأسباب سنشرحها قريبًا.

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

إذا كنت ترغب في تنفيذ شيء ما في WordPress ، فيجب أن يقوم المكون الإضافي بالمهمة نيابة عنك. سنعتبر أن المكون الإضافي هو الافتراضي في معظم الحالات لمواقع WordPress. على هذا النحو ، إذا كنت ترغب في إضافة رمز رأس وتذييل في WordPress ، فسيكون المكون الإضافي Embed Code مثاليًا:

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

لاستخدامه ، ستقوم بتثبيت البرنامج المساعد وتنشيطه بطريقة WordPress النموذجية. عند انتهاء هذه العملية ، سترى إعدادات جديدة> خيار تضمين كود على لوحة القيادة:

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

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

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

2. إضافة قصاصات التعليمات البرمجية إلى ملف functions.php الخاص بك

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

• يمكنك الوصول إلى ملفات WordPress الأساسية - وبالتبعية ، ملف functions.php - باستخدام بروتوكول نقل الملفات الآمن (SFTP.) على هذا النحو ، ستحتاج إلى معرفة كيفية عمل ذلك من أجل العثور على ملفات مواقعك والعمل معها.
• نوصيك أيضًا باستخدام سمة فرعية ، من أجل الحفاظ على تغييراتك إذا تلقى السمة المعنية تحديثًا.
• ستحتاج على الأقل إلى معرفة عملية بخطافات وإجراءات وفلاتر WordPress. علاوة على ذلك ، سترغب في فهم كيفية وصول WordPress إلى رأس الصفحة وتذييلها من خلال هذه الخطافات.

عندما يتعلق الأمر باستخدام SFTP ، فإن WPKube لديه مجموعة مختارة من المقالات التي يمكنك قراءتها بشكل أساسي:

• دليل المبتدئين لتأمين بروتوكول نقل الملفات (SFTP)
• كيفية استخدام FileZilla: دليل خطوة بخطوة
• دليل المبتدئين إلى أذونات ملف WordPress

قد ترغب أيضًا في إلقاء نظرة على مكتبة WordPress Developer hook ، خاصةً تلك الإدخالات الخاصة بـ wp_head و wp_footer ، على الرغم من أن هذا اختياري لأنك لن تستخدمها بطريقة ثقيلة.

من هنا ، تأخذ العملية بضع خطوات. أولاً ، افتح خادم موقعك داخل عميل SFTP ، ثم انتقل إلى wp-content / theme . هنا ، افتح دليل القالب الحالي الخاص بك ، وابحث عن ملف functions.php ذي الصلة:

سترغب في فتح هذا الملف في محرر النص أو الرمز المفضل لديك. في الداخل ، يمكنك وضع قالب المقتطف التالي:

 add_action( 'wp_head', '<SNIPPET_NAME>' ); function <SNIPPET_NAME>() { ?> <!-- Place your HTML code or other script here. --> <?php }

باختصار ، يضيف هذا خطاف إجراء إلى WordPress باستخدام ما تسميه <SNIPPET_NAME> . داخل الوظيفة نفسها ، ستستبدل أو تكتب أسفل سطر التعليق (أي السطر الذي يبدأ بـ <!-- .) إذا كنت تريد إضافة رمز إلى التذييل ، 'wp_head' بـ 'wp_footer' وتستمر كالمعتاد.

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

تغليف

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

لقد تناول هذا المنشور طريقتين مختلفتين لإضافة رمز إلى رأس الصفحة وتذييلها:

• سيتيح لك مكون إضافي مثل Embed Code إضافة رمز رأس وتذييل إلى WordPress باستخدام لوحة القيادة. على هذا النحو ، ستحتاج ببساطة إلى النسخ واللصق ، دون القلق من الوصول إلى الخادم الخاص بك.
• ومع ذلك ، إذا كانت لديك المعرفة الفنية ، فيمكنك البحث عن إضافة مقتطف إلى ملف functions.php الخاص بك. ستحتاج إلى معرفة SFTP وخبرة قليلة في ملفات WordPress الخاصة بك ، ولكن هذا الأسلوب جيد مثل خيار البرنامج المساعد.

ما الطريقة التي ستتبعها لإضافة كود الرأس والتذييل في WordPress؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!