وارد کردن کدهای سفارشی در هدر و فوتر وردپرس با 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> قرار می گیرند. این یعنی در انتهای تمامی کدهای قالب.
  افزودن قابلیت بزرگنمایی تصاویر در وردپرس با WP Image Zoom

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

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

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

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

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

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

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

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

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

دانلود ویدئو دریافت افزونه

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

با کمک افزونه Insert Headers and Footers می توان این کار را کرد.
خیر! این سیستم کاملا جامع بوده و توسط توسعه دهندگان حرفه ای ساخته شده اما در صورتی که توسعه دهندگان تمایل به تغییراتی داشته باشند قطعا می توانند کدنویسی کنند.
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

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