افزودن کد به هدر و فوتر وردپرس با افزونه WPCode

گاهی ابزارهای مختلف، مثل ابزارهای آمارگیری، سرویس‌های تبلیغاتی یا پشتیبانی آنلاین، یک قطعه کد به شما می‌دن و می‌خوان اون رو به هدر، بدنه یا فوتر سایتتون اضافه کنید. برای انجام این کار لازم نیست فایل‌های قالب رو تغییر بدید. افزونه WPCode هر سه بخش رو در یک صفحه نشون می‌ده و کدهاتون رو حتی بعد از به‌روزرسانی قالب نگه می‌داره.

توی این آموزش با هم افزونه رو نصب می‌کنیم، وارد تنظیماتش می‌شیم و تفاوت بخش‌های Header، Body و Footer رو می‌بینیم. در آخر هم نتیجه رو بررسی می‌کنیم. در کنارش، درباره اهمیت وارد کردن کدهای قابل‌اعتماد و گرفتن نسخهٔ پشتیبان قبل از تغییرهای حساس حرف می‌زنیم.

سیستم مدیریت محتوای وردپرس به شما اجازه می‌ده با کمک افزونه‌ها یا کدنویسی، امکانات تازه‌ای به سایتتون اضافه کنید. اگه به‌تازگی کار با وردپرس رو شروع کردید، استفاده از افزونه برای افزودن کدهای سراسری معمولاً خیلی راحت‌تر از ویرایش مستقیم فایل‌های قالب هست.

پس با میهن وردپرس همراه باشید تا بدون دست زدن به فایل‌های قالب، کد موردنظرتون رو به سایت اضافه کنیم.

افزودن کد به هدر و فوتر وردپرس

برای افزودن کد به هدر و فوتر وردپرس می‌تونید از افزونهٔ رایگان WPCode کمک بگیرید. این افزونه قبلاً با نام Insert Headers and Footers شناخته می‌شد. پس اگه این اسم قدیمی رو توی یک آموزش یا پیشخوان سایت دیدید، بدونید که منظور همون WPCode هست.

نسخهٔ رایگان WPCode برای گذاشتن کدهای سراسری در هدر، ابتدای بدنه و فوتر سایت مناسبه. بعضی امکانات پیشرفته، مثل تعدادی از شرط‌ها و محل‌های درج اختصاصی، فقط در نسخهٔ Pro در دسترس هستن. اگه به چنین امکاناتی نیاز دارید، بهتره اول قابلیت‌های نسخه‌ای رو که نصب کردید بررسی کنید.

با این روش می‌تونید کدهای HTML، CSS یا JavaScript و کد سرویس‌هایی مثل Google Analytics و Meta Pixel رو بدون ویرایش فایل‌های قالب به سایت اضافه کنید. اگه این اسم‌ها براتون ناآشنا هستن، JavaScript برای اجرای قابلیت‌های تعاملی در مرورگر به کار می‌ره، HTML ساختار محتوا رو می‌سازه و CSS ظاهر صفحه رو تغییر می‌ده.

افزونه WPCode چیه

WPCode توی مخزن رسمی وردپرس ثبت شده و نسخهٔ رایگانش رو می‌تونید مستقیم از پیشخوان نصب کنید. بخش Header & Footer افزونه سه کادر جدا برای هدر، بدنه و فوتر داره. به‌این‌ترتیب، لازم نیست برای اضافه کردن هر کد بین فایل‌های قالب بگردید و اون‌ها رو ویرایش کنید.

این بخش بیشتر برای کارهای زیر به دردتون می‌خوره:

• اضافه کردن کدهای سراسری به هدر سایت
• گذاشتن کد بلافاصله بعد از شروع بدنهٔ صفحه
• اضافه کردن اسکریپت‌ها پیش از پایان بدنهٔ صفحه
• مدیریت کدهای سرویس‌های آمارگیری و تبلیغاتی در یک صفحه
• ویرایش یا پاک کردن کدها بدون دست زدن به فایل‌های قالب

نصب افزونه WPCode

اول وارد پیشخوان وردپرس بشید. از منوی «افزونه‌ها» روی «افزودن افزونهٔ تازه» کلیک کنید و عبارت WPCode رو در کادر جست‌وجو بنویسید. وقتی افزونهٔ WPCode رو پیدا کردید، اون رو نصب و بعد فعال کنید. اگه این مراحل براتون تازه هستن، راهنمای نصب افزونه در وردپرس رو ببینید.

اضافه کردن کد به هدر، بدنه یا فوتر

بعد از فعال کردن افزونه، در منوی پیشخوان به مسیر «Code Snippets > Header & Footer» برید. اگه حالت سادهٔ افزونه فعال باشه، ممکنه لینک این صفحه زیر منوی «تنظیمات» دیده بشه. اسم و جای منو با توجه به نسخه و حالت رابط افزونه می‌تونه کمی متفاوت باشه.

توی صفحهٔ Header & Footer سه کادر می‌بینید. کدی رو که سرویس موردنظرتون به شما داده، در کادر درست بذارید و بخش‌های ضروری اون، مثل تگ‌های <script> و </script>، رو پاک نکنید. حتماً راهنمای همون سرویس رو برای انتخاب محل کد بخونید؛ چون قرار نیست همهٔ کدها داخل هدر گذاشته بشن.

کاربرد هر بخش در WPCode

Header: کدی که توی این بخش می‌ذارید، داخل تگ <head> صفحه قرار می‌گیره. خیلی از کدهای تأیید مالکیت، فونت‌ها و بعضی ابزارهای آمارگیری باید اینجا باشن. بااین‌حال، همیشه محل گفته‌شده در راهنمای سرویس رو ملاک قرار بدید.

Body: کد این کادر درست بعد از تگ آغازین <body> قرار می‌گیره. بعضی سرویس‌ها از شما می‌خوان بخش مشخصی از کد رهگیری رو ابتدای بدنهٔ سایت بذارید.

Footer: کد این بخش پیش از تگ پایانی </body> قرار می‌گیره. اسکریپت‌هایی که لازم نیست قبل از نمایش محتوای صفحه اجرا بشن، گاهی در این قسمت قرار می‌گیرن.

بعد از وارد کردن کد، روی دکمهٔ ذخیرهٔ تغییرات کلیک کنید. اگه از افزونهٔ کش استفاده می‌کنید، کش سایت رو هم پاک کنید تا نسخهٔ تازهٔ صفحه به شما نمایش داده بشه.

نکته‌های مهم قبل و بعد از افزودن کد

• فقط کدی رو وارد کنید که از یک سرویس یا منبع قابل‌اعتماد گرفتید.
• قبل از اضافه کردن کدهای JavaScript یا PHP ناشناس، از فایل‌ها و پایگاه دادهٔ سایتتون نسخهٔ پشتیبان بگیرید.
• کد رو دقیقاً در محلی بذارید که راهنمای سرویس مشخص کرده.
• یک کد رهگیری رو چند بار در سایت نذارید؛ چون ممکنه آمار تکراری ثبت بشه.
• بعد از ذخیره، صفحهٔ سایت رو در حالت ناشناس مرورگر باز کنید و ظاهر و عملکردش رو ببینید.
• برای مطمئن شدن از درج کد، سورس صفحه رو باز کنید و بخشی از کد یا شناسهٔ سرویس رو جست‌وجو کنید.

اگه بعد از ذخیره کردن تغییرات، سایت درست نمایش داده نشد، آخرین کدی رو که اضافه کردید پاک کنید و دوباره سایت رو ببینید. برای اضافه کردن فایل‌های CSS و JavaScript با تنظیمات جداگانه هم می‌تونید راهنمای افزودن CSS و JS سفارشی به وردپرس رو بخونید.

سوالات متداول

جمع‌بندی

برای افزودن کد به هدر و فوتر وردپرس نیازی نیست فایل‌هایی مثل header.php یا footer.php رو ویرایش کنید. افزونه WPCode کدهای Header، Body و Footer رو در یک صفحه نگه می‌داره و کار مدیریت اون‌ها رو راحت‌تر می‌کنه.

فقط یادتون نره هر کد رو طبق راهنمای سرویس ارائه‌دهنده در جای درست بذارید. بعد از ذخیره، کش سایت رو پاک کنید و نتیجه رو هم در ظاهر صفحه و هم در سورس اون ببینید. اگه دیگه به کدی نیاز ندارید، بهتره پاکش کنید تا مدیریت سایتتون ساده‌تر بمونه. شاد و سربلند باشید. 🙂

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.