اضافه کردن کد به هدر و فوتر + آموزش بهترین روش

برای اضافه کردن کد به هدر و یا فوتر سایت چندین راه مختلف داریم:

۱: استفاده از افزونه

۲: به صورت دستی از خود وردرپس

۳: وارد شدن به پنل مدیریت هاست از طریق فایل قالب

۴: استفاده از تگ منیجر برای هدر

که در ادامه همه‌ی این روش‌ها را به صورت عملی توضیح می‌دهیم پیشنهاد می‌شود برای یادگیری بهتر و عمیق‌تر ویدیو زیر را ببینید تا به صورت عملی و بدون اشتباه این موارد را یاد بگیرید.

استفاده از افزونه

با استفاده از افزونه insert headers and footers یا همون WPCode که داخل مخزن وردپرس به صورت رایگان موجود هست که وقتی اون رو نصب کردید خیلی راحت هر کدی که بخواید را می‌توانید به هدر یا فوتر سایت خودتون اضافه کنید. این افزونه روی مدل‌های مختلف سایت‌ها تست شده و هیچ گونه باگی تا به حال نداشه و با تمام نسخه‌های وردپرس هم سازگار بوده است.

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

نصب افزونه و تنظیمات آن

ابتدا داخل مخزن وردپرس عبارت WPCode – Insert Headers and Footers را سرچ کنید و افزونه مورد نظر را نصب و فعال کنید:‌

بعد از نصب افزونه منویی تحت عنوان code snippets به وردپرس شما اضافه شده است که با کلیک روی آن بخش‌های مختلف آن به شما نمایش داده می‌شود:

با کلیک روی قسمت header & footer وارد بخشی می‌شود که می‌توانید هر کد دلخواه خود را به سایت اضافه کنید. حتی دسترسی شما به body سایت نیز باز است و کدهای مختلف را می‌توانید اضافه کنید.

روش دوم به صورت دستی از خود وردپرس

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

زمانی که روی ویرایشگر پرونده پوسته کلیک کردید فایل‌های مختلف قالب از جمله function.php، header وغیره که دیگر فایل‌های قالب هستند دسترسی دارد و هر کدی داخل وب سایت بخواهید قرار دهید از این طریق میتوانید این کار را انجام دهید. پیشنهاد میشود به جای استفاده از افزونه از این روش استفاده کنید زیرا افزونه کمتر باعث بیشتر بودن سرعت سایت شما میشود.

روش سوم از طریق هاست cPanel یا دایرکت ادمین

در این روش با ورود به پنل مدیریت هاست خود فرقی ندارد که سی پنل باشد یا دایرکت ادمین مسیری که می‌روید یکی است می‌توانید به راحتی به فایل‌های قالب سایت خود دسترسی داشته باشید و هر کدی که بخواهید را در head یا بادی یا فوتر سایت خود قرار دهید.

1. ورود به cPanel یا هاست(یا دایرکت ادمین) که معمولا از طریق وب سایت شرکتی که از آن هاست خریده‌اید میتوانید دسترسی داشته باشید.
   • وارد کنترل پنل هاست خود شوید
   • با نام کاربری و رمز عبور وارد شوید.
2. به قسمت File Manager (مدیریت فایل‌ها) بروید

در داشبورد سی‌پنل، گزینه‌ی “File Manager” را پیدا کرده و باز کنید. در داشبورد دایرکت ادمین هم به دنبال همین پوشه باید بگردید.

بعد از وارد پوشه public_html شوید (یا پوشه‌ای که وردپرس در آن نصب شده است) و به ترتیب مسیر زیر را طی کنید. ابتدا وارد پوشه wp-content شوید و بعد از وارد پوشه themes شوید در آنجا پوشه فالبی که روی سایت خود نصب کرده‌اید را باز کنید برای مثال ما در اینجا قالب hello elementor را نصب کرده‌ایم.

بعد از وارد شدن به پوشه قالب خود باید فایل header.php را باز کنید و کد را قبل از </head> قرار دهید هرکدی که در این فایل قرار دهید در هدر تمامی صفحات سایت شما قرار خواهد گرفت. حواستان باشد که کد خود رو بین دو تگ باز و بسته قرار دهید.

در این بین باید کد خود را قرار دهید. ترجیحا قبل از </head> قرار دهید تا آخرین کد در تگ هد کد خودتان باشد.

</head>

این فایل معمولاً در پوشه‌ی اصلی قالب قرار دارد. روی آن راست‌کلیک کرده و گزینه‌ی “Edit” را بزنید. بعد از تغییرات گزینه save change را بزنید و سایت خود را تست کنید که آیا کد در آن قرار گرفته است یا نه(در آخر مقاله نحوه تست کردن را آموزش می‌دهیم.)

قرار دادن از طریق کدسفارشی در المنتور

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

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

شماره یک: در اینجا کد مدنظر خود را قرار دهید

شماره دو: در اینجا اسم کد خود را مشخص کنید تا بعدا که به آن مراجعه کردید بدانید برای چیست

شماره سه: می‌توانید مشخص کنید کد شما در کجا قرار بگیرد آیا در هد سایت باشد؟ یا در فوتر

شماره چهار: کلید انتشار را بزنید تا کد مورد نظر در وب سایت شما قرار بگیرد.

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

چگونه تست کنیم که کد ما به درستی قرار گرفته است؟

بعد از اینکه کد خود را در سایت قرار دادید وارد وب سایت خود شوید ترجیحا کش وب سایت خود را پاک کنید و بعد از راست کلیک کرده و گزینه view page suorce را بزنید وارد کدهای سورس صفحه می‌شود گزینه کنترل + f  را روی کیبرد خود بزنید و کد خود را جستجو کنید در صورتی که پیدا کردید تمام مراحل را به درستی انجام داده‌اید.

در ویدیو بالا این مقاله به صورت عملی تمامی این موارد توضیح داده شده است.

قرار دادن کد در سایت با استفاده از تگ منیجر

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

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

ابتدا باید تگ منیجر را نصب کنید روی وب سایت خود که نصب کردن آن از طریق یکی از روش‌های بالا است :)) عملا شما باید از روش‌های بالا استفاده کنید تا این ابزار را نصب کنید اما بعد از آن هر کدی که بخواهید داخل وب سایت خود قرار بدهید با استفاده از تگ منیجر قابل انجام است. تگ منیجر کدی را در اختیار شما قرار می‌دهد که از یکی از روش‌های بالا بر روی وب سایت خود قرار می‌دهید.

پیشنهاد می‌شود برای این روش ویدیو بالای این مقاله را مشاهده کنید زیرا باید به صورت قدم به قدم این مسیر را پیش بروید.

کاربرد این کار برای چه مواردی است؟

خیلی از اوقات ما می‌خواهیم کدهایی برای تبلیغات ریتارگتینگ برای اینکه کوکی کاربران خود را ذخیره کنیم داخل وب سایت خود قرار دهیم. این پراستفاده‌ترین روش است که معمولا ما برای قرار دادن این کدها از این روش‌های بالا استفاده می‌کنیم. البته این کدها میتوانند برای ابزارهایی مثل چت‌های آنلاین نیز باشد و یا هرابزار و یا امکانی که بخواهیم به سایت خود اضافه کنیم.

در صورتی که سوالی دارید توی کامنت‌ها بپرسید.