گاهی برای اضافه کردن یک امکان دلخواه، افزونهای وجود ندارد و باید از کدها استفاده کنیم. همانطور که میدانید وردپرس یک سیستم متن باز بوده و خوراک توسعه دهندگان است. یعنی هر گونه امکانی را که بخواهند میتوانند با کمک کدنویسی در آن وارد کنند. اما امروز افزونهای را برایتان آوردیم که شما نیز با کمک آن بتوانید به بخش هدر و فوتر سایت امکانات و تغییرات دلخواه خود را اضافه کنید. وارد کردن کدهای سفارشی در وردپرس با این افزونه کاری آسان و جذاب خواهد بود.
وارد کردن کدهای سفارشی در وردپرس با Insert Headers and Footers
Insert Headers and Footers یکی از بهترینها برای افزودن قطعه کد در وردپرس است که تا به امروز بیش از ۱ میلیون استفاده داشته است. اگر بخواهیم کدها را بصورت دستی در وردپرس وارد کنیم، قطعا نیازمند تغییراتی در function.php هستیم و چنانچه فردی حرفهای نباشیم ممکن است این بخش را دچار اختلال کنیم. از این رو افزونه مذکور روی کار آمد تا چنین مشکلاتی را رفع کند.
پیش نیاز: برای استفاده از چنین افزونههایی می بایست با کدهای HTML, Css, JavaScrip آشنایی داشته باشید. اگر هم آشنایی ندارید میتوانید با مطالعه کوتاهی در این باره اطلاعات مفیدی را بدست آورید.
مراحل نصب و راه اندازی افزونه
برای شروع کار ابتدا افزونه را دریافت نموده و سپس آن را نصب کنید. بعد از نصب در بخش تنظیمات پیشخوان سایت وردپرسی بخشی با عنوانInsert Header And Footer جهت وارد کردن کدهای سفارشی در وردپرس ساخته شده است.
روی آن کلیک کنید تا به تنظیمات افزونه بروید. حال با صفحه تنظیمات مشابه تصویر زیر مواجه خواهید شد.
تمامی تنظیمات این افزونه تنها محدود به همین صفحه میشود. پس با هم بخشهای آن را بررسی میکنیم.
- Script in Header: در این فیلد کدها و اسکریپت هایی را که میخواهید در هدر قالب بارگذاری شوند را وارد کنید. تمامی کدهایی را که در این قسمت وارد می کنید در تگ <head> قرار میگیرند.
- Script in Footer: در این فیلد نیز کدها و اسکریپتهایی را که میخواهید در فوتر قالب لود شوند را وارد کنید. تمامی کدهایی را که در این قسمت وارد میکنید قبل از تگ بسته ی </body> قرار می گیرند. این یعنی در انتهای تمامی کدهای قالب.
نمونه انجام شده
برای تست عملکرد صحیح وارد کردن کدهای سفارشی در وردپرس، مثال بسیار سادهای را آماده کردیم. همان طور که در تصویر بالا مشاهده میکنید در فیلد Footer چند خط کد قرار دادیم.
خروجی این کد نمایش لوگوی سایت همیار وردپرس است که میخواهیم آن را در فوتر قالب به کمک این افزونه نمایش دهیم.
ابتدا از قسمت رسانه تصویر همیار وردپرس را آپلود کردیم و لینک آن را در ویژگی src تگ <img> قرار دادیم.
در نهایت برای ذخیره تمامی تغییرات روی گزینه ی Save کلیک میکنیم.
مشاهده ی خروجی
همان طور که انتظار داشتیم لوگوی همیار وردپرس در بخش فوتر سایت مشاهده میشود.
توضیحات بیشتر…
این یک مثال کاربردی تنها برای این که بدانید چگونه از این افزونه و در چه مواقعی استفاده می کنیم.
اگر با پلاگین های حرفه ای مختلف جی کوئری آشنایی داشته باشید می توانید استفاده ی بهتری از این افزونه داشته باشد، اگر هم آشنایی ندارید با جستجو در گوگل به نتایج خوبی خواهید رسید.
ن. ط 1 سال عضو همیار وردپرس
سلام چطوری میتونم توسط این افزونه فوتر را همیشه پایین صفحه نگه دارم ؟ زیر فوتر یه فاصله تا انتهای صفحه هست. قالب سایت botiga
ممنون
احمد فریدونی 9 سال عضو همیار وردپرس
با سلام من قبلا و با راهنمایی های شما در این مقاله کد هایی در هدر و فوتر سایت وردپرسی خودم قرار دادم – الان نیاز به ویرایش کد های هدر دارم ولی به تازگی نمیدونم چرا این افزونه رو در قسمت تنظیمات مشاهده نمیکنم و دسترسی به تنظیماتش ندارم – مطمئنم در افزونه ها هست و فعاله ولی نمیدونم چرا دسترسی بهش ندارم .
چون وقتی در لیست افزونه ها پیداش میکنم و روی Code Snippets کلیک میکنم پیغام
” با عرض پوزش، شما اجازهٔ دسترسی به این برگه را ندارید. ” دریافت میکنم
لازم بذکر قالبم انفولده ممنون میشم راهنمایی کنید
bahareh koohestani 11 سال عضو همیار وردپرس
سلام دوست عزیز
از هاست بخش افزونهها بررسی کنید ببینید افزونه موجوده یا خیر
KING_HOSSEIN 6 سال عضو همیار وردپرس
سلام…
میشه اسکریپت قرار دادن خبرنامه (میلیستر) رو بذارید؟؟؟
من قالبم در فوتر از باکس خبرنامه پشتیبانی نمیکنه میخوام با این کد این قابلیت رو اضافه کنم…
اگه میشه راهنمایی کنید…
ممنون…
سلماز
سلام
وقت بخیر
من این افزونه رو نصب کردم برای اینکه بتونم متا تگ دیسکریپشن رو وارد کنم
ولی باز هم متن مورد نظر در سرچ گوگل برای سایتمون نمیاد
مشکل کجاست؟ آیا افزونه این کد رو نمی خونه؟
بهاره کوهستانی 11 سال عضو همیار وردپرس
سلام
متای توضیحات با کمک افزونه Yoast seo نمایش داده میشه.
عینعلی
سلام
بنده این افزونه رو روی سایتم نصب کردم اما هر کدی که داخل قسمت هدر وارد میکنم عینا همون کد رو نمایش میده و به دستورات عمل نمیکنه
مشکل کجاست؟
محمدرضا خدری 8 سال عضو همیار وردپرس
سلام
منظورتون از ” عینا همون کد رو نمایش میده ” چیه؟
چه چیزی در هدر وارد کردید؟
محمد رستمی
سلام من این افزونه رو نصب کردم ولی الان ابزارک ها مشکل ساز شدن اصلا ویرایش نمی شن
abdolrahmanwordpress 4 سال عضو همیار وردپرس
یعنی خروجی js کار نمیکنه. راه حلی دارید؟
hasan mehdizade 8 سال عضو همیار وردپرس
با سلام.من میخوام فرم سرچ رو از کنار منو به قسمت هدر در راستای لوگو قرار بدم درست مثل سایت دیجی کالا و سایر سایت های فروشگاهی میشه من رو راهنمایی بفرمائید؟
محمدرضا خدری 8 سال عضو همیار وردپرس
سلام
دیدگاه شما مرتبط با این نوشته نیست.
سوشا
سلام
از این رووش برای نماد اعتماد هم میشه استفاده کرد آیا؟
ممنونم
بهاره کوهستانی 11 سال عضو همیار وردپرس
سلام
بله