گاهی اوقات نیاز دارید که کد های CSS اختصاصی خود را به سایت اضافه کنید. یا کد های جاوا اسکریپتی دارید که باید در سایت خود درج کنید. کد هایی مانند کد گوگل آنالیتیکس یا هر نوع کد جاوا اسکریپت یا CSS از این نوع کد ها هستند. برای این کار اگر با ساختار قالب خود آشنا نیستید، می توانید از افزونه Simple Custom CSS and JS استفاده کنید تا به راحتی کد های اختصاصی خود را به سایت اضافه کنید.
این افزونه به شما امکان درج کد را در هدر یا فوتر به شما می دهد. علاوه بر افزودن کد CSS یا جاوا اسکریپت به قالب، می توانید این کد ها را به بخش پنل ادمین وردپرس نیز اضافه کنید که این نکته از مزیت این افزونه است.
افزونه Simple Custom CSS and JS تا کنون بیش از 100 هزار نصب فعال داشته است و توانسته امتیاز 4.5 از 5 را از کاربران وردپرس دریافت کنید.
شما می توانید این افزونه را به صورت کاملا رایگان از پایین همین مطلب دانلود کنید.
فهرست عناوین مقاله
آموزش قرار دادن کد دلخواه در هدر و فوتر وردپرس با افزونه Simple Custom CSS and JS
پس از نصب و فعال سازی افزونه، گزینه Custom CSS and JS به منو پنل مدیریت وردپرس اضافه می شود.
افزودن کد CSS دلخواه به سایت
برای افزودن کد دلخواه CSS به سایت، باید روی گزینه Add Custom CSS کلیک کنید. در صفحه باز شده شما دو بخش کلی خواهید دید. در سمت راست محل قرارگیری کد های دلخواه شما است که می توانید در این بخش قرار دهید.
در سمت چپ نیز مشخص می کنید که این کد ها در هدر قرار بگیرند یا فوتر. برای قالب سایت استفاده شوند یا پنل ادمین. درج کد به صورت فایل جداگانه باشد یا به صورت Inline. این تنظیمات را بر اساس نیاز خود مشخص می کنید.
همچنین برای این کد ها یک نام از بخش عنوان مشخص می کنید تا بتوانید این کد ها را از هم تفکیک کنید.
به عنوان مثال یک کد CSS که رنگ عنوان های مطلب را تغییر می دهد را به این بخش اضافه می کنیم.
پس از ذخیره کردن و مشاهده دوباره سایت، خواهیم دید که تغییرات ما اعمال شده است.
افزودن کد جاوا اسکریپت دلخواه به سایت
برای درج کد JS دلخواه به سایت، از منوی Custom CSS and JS پنل مدیریت، روی گزینه Add Custom JS کلیک کنید.
صفحه ای مشابه بخش CSS به شما نمایش داده می شود. این صفحه نیز دو بخش دارد. سمت راست محل قرار گیری کد ها و سمت چپ تنظیمات این کد ها می باشد.
به عنوان نمونه در این آموزش ما یک کد جاوا اسکریپت نمایش وضعیت آب و هوا را از سایت 1abzar دریافت کرده ایم و می خواهیم آن را در سایت نمایش دهیم.
این کد را در محل قرارگیری کد در افزونه قرار می دهیم و سپس تنظیمات مورد نظر خود را از سمت چپ صفحه مشخص می کنیم. همچنین نامی را برای این کد های مشخص می کنیم و سپس گزینه انتشار را می زنیم.
حال اگر به سایت مراجعه کنیم، خواهیم دید که کد مورد نظر ما در بالای سایت درج شده است. البته این کد نمایش وضعیت آب و هوا نباید در چنین جایی از سایت قرار داده شود و ما صرفا برای این که به شما روال کار را نشان دهیم از این کد استفاده کردیم. شما می توانید کد هایی مانند کد های آمارگیر و … را در این مکان ها قرار دهید تا چیزی مستقیما به کاربر نمایش داده نشود.
همچنین در منوی All Custom Code نیز می توانید لیست تمام کد هایی که تا کنون به سایت اضافه کرده اید را مشاهده کنید.
پس اگر خواستید کد دلخواه CSS یا JS را به سایت خود اضافه کنید، می توانید از افزونه Simple Custom CSS and JS استفاده کنید.
امیدواریم که این آموزش نیز برای شما کاربردی بوده باشد. خوشحال خواهیم شد که نظرات و سوالات خود را درباره این آموزش، پایین همین مطلب با ما در میان بگذارید.
افزونه Simple Custom CSS and JS را می توانید به صورت رایگان از لینک زیر دانلود کنید.
