وارد کردن کدهای سفارشی در هدر و فوتر وردپرس با Insert Headers and Footers

وارد کردن کدهای سفارشی در وردپرس

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

وارد کردن کدهای سفارشی در وردپرس با Insert Headers and Footers

وارد کردن کدهای سفارشی در وردپرس

Insert Headers and Footers یکی از بهترین‌ها برای افزودن قطعه کد در وردپرس است که تا به امروز بیش از ۱ میلیون استفاده داشته است. اگر بخواهیم کدها را بصورت دستی در وردپرس وارد کنیم، قطعا نیازمند تغییراتی در function.php هستیم و چنانچه فردی حرفه‌ای نباشیم ممکن است این بخش را دچار اختلال کنیم. از این رو افزونه مذکور روی کار آمد تا چنین مشکلاتی را رفع کند.

پیش نیاز: برای استفاده از چنین افزونه‌هایی می بایست با کدهای HTML, Css, JavaScrip آشنایی داشته باشید. اگر هم آشنایی ندارید می‌توانید با مطالعه کوتاهی در این باره اطلاعات مفیدی را بدست آورید.

مراحل نصب و راه اندازی افزونه

برای شروع کار ابتدا افزونه را دریافت نموده و سپس آن را نصب کنید. بعد از نصب در بخش تنظیمات پیشخوان سایت وردپرسی بخشی با عنوانInsert Header And Footer  جهت وارد کردن کدهای سفارشی در وردپرس ساخته شده است.

insert header and footer-کدهای دلخواه در هدر و فوتر وردپرس

روی آن کلیک کنید تا به تنظیمات افزونه بروید. حال با صفحه تنظیمات مشابه تصویر زیر مواجه خواهید شد. settings-کدهای دلخواه در هدر و فوتر وردپرس

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

  • Script in Header: در این فیلد کدها و اسکریپت هایی را که می‌خواهید در هدر قالب بارگذاری شوند را وارد کنید. تمامی کدهایی را که در این قسمت وارد می کنید در تگ <head> قرار می‌گیرند.
  • Script in Footer: در این فیلد نیز کدها و اسکریپت‌هایی را که می‌خواهید در فوتر قالب لود شوند را وارد کنید. تمامی کدهایی را که در این قسمت وارد می‌کنید قبل از تگ بسته ی </body> قرار می گیرند. این یعنی در انتهای تمامی کدهای قالب.

نمونه انجام شده

برای تست عملکرد صحیح وارد کردن کدهای سفارشی در وردپرس، مثال بسیار ساده‌ای را آماده کردیم. همان طور که در تصویر بالا مشاهده می‌کنید در فیلد Footer چند خط کد قرار دادیم.
خروجی این کد نمایش لوگوی سایت همیار وردپرس است که می‌خواهیم آن را در فوتر قالب به کمک این افزونه نمایش دهیم.
ابتدا از قسمت رسانه تصویر همیار وردپرس را آپلود کردیم و لینک آن را در ویژگی src تگ <img> قرار دادیم.
در نهایت برای ذخیره تمامی تغییرات روی گزینه ی Save کلیک می‌کنیم.

مشاهده ی خروجی

result-کدهای دلخواه در هدر و فوتر وردپرس

همان طور که انتظار داشتیم لوگوی همیار وردپرس در بخش فوتر سایت مشاهده می‌شود.

توضیحات بیشتر…

این یک مثال کاربردی تنها برای این که بدانید چگونه از این افزونه و در چه مواقعی استفاده می کنیم.
اگر با پلاگین های حرفه ای مختلف جی کوئری آشنایی داشته باشید می توانید استفاده ی بهتری از این افزونه داشته باشد، اگر هم آشنایی ندارید با جستجو در گوگل به نتایج خوبی خواهید رسید.

ویدئوی آموزشی

دانلود ویدئوی آموزشی

دانلود ویدئو دریافت افزونه
راه حل نهایی برای کسب و کار های آنلاین
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 4 سال عضو همیار وردپرس

    سلام…
    میشه اسکریپت قرار دادن خبرنامه (میلیستر) رو بذارید؟؟؟
    من قالبم در فوتر از باکس خبرنامه پشتیبانی نمیکنه میخوام با این کد این قابلیت رو اضافه کنم…
    اگه میشه راهنمایی کنید…
    ممنون…

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

    • 9 سال عضو همیار وردپرس

      سلام
      متای توضیحات با کمک افزونه Yoast seo نمایش داده میشه.

  3. سلام
    بنده این افزونه رو روی سایتم نصب کردم اما هر کدی که داخل قسمت هدر وارد میکنم عینا همون کد رو نمایش میده و به دستورات عمل نمیکنه
    مشکل کجاست؟

    • 6 سال عضو همیار وردپرس

      سلام
      منظورتون از ” عینا همون کد رو نمایش میده ” چیه؟
      چه چیزی در هدر وارد کردید؟

    • سلام من این افزونه رو نصب کردم ولی الان ابزارک ها مشکل ساز شدن اصلا ویرایش نمی شن

    • 2 سال عضو همیار وردپرس

      یعنی خروجی js کار نمیکنه. راه حلی دارید؟

  4. 6 سال عضو همیار وردپرس

    با سلام.من میخوام فرم سرچ رو از کنار منو به قسمت هدر در راستای لوگو قرار بدم درست مثل سایت دیجی کالا و سایر سایت های فروشگاهی میشه من رو راهنمایی بفرمائید؟

    • 6 سال عضو همیار وردپرس

      سلام
      دیدگاه شما مرتبط با این نوشته نیست.

  5. سلام
    از این رووش برای نماد اعتماد هم میشه استفاده کرد آیا؟
    ممنونم