امنیت وردپرس
گرویتی فرم

افزودن کد CSS یا JS دلخواه به سایت وردپرسی
امتیاز 5 از 1 رای

افزودن کد CSS یا JS دلخواه به سایت وردپرسی

Simple Custom CSS and JS

گاهی اوقات نیاز دارید که کد های CSS اختصاصی خود را به سایت اضافه کنید. یا کد های جاوا اسکریپتی دارید که باید در سایت خود درج کنید. کد هایی مانند کد گوگل آنالیتیکس یا هر نوع کد جاوا اسکریپت یا CSS از این نوع کد ها هستند. برای این کار اگر با ساختار قالب خود آشنا نیستید، می توانید از افزونه Simple Custom CSS and JS استفاده کنید تا به راحتی کد های اختصاصی خود را به سایت اضافه کنید.

این افزونه به شما امکان درج کد را در هدر یا فوتر به شما می دهد. علاوه بر افزودن کد CSS یا جاوا اسکریپت به قالب، می توانید این کد ها را به بخش پنل ادمین وردپرس نیز اضافه کنید که این نکته از مزیت این افزونه است.

افزونه Simple Custom CSS and JS تا کنون بیش از 100 هزار نصب فعال داشته است و توانسته امتیاز 4.5 از 5 را از کاربران وردپرس دریافت کنید.

شما می توانید این افزونه را به صورت کاملا رایگان از پایین همین مطلب دانلود کنید.

Simple Custom CSS and JS banner

آموزش قرار دادن کد دلخواه در هدر و فوتر وردپرس با افزونه Simple Custom CSS and JS

پس از نصب و فعال سازی افزونه، گزینه Custom CSS and JS به منو پنل مدیریت وردپرس اضافه می شود.

Simple Custom CSS and JS menu

افزودن کد CSS دلخواه به سایت

برای افزودن کد دلخواه CSS به سایت، باید روی گزینه Add Custom CSS کلیک کنید. در صفحه باز شده شما دو بخش کلی خواهید دید. در سمت راست محل قرارگیری کد های دلخواه شما است که می توانید در این بخش قرار دهید.

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

همچنین برای این کد ها یک نام از بخش عنوان مشخص می کنید تا بتوانید این کد ها را از هم تفکیک کنید.

Simple Custom CSS and JS css code

به عنوان مثال یک کد CSS که رنگ عنوان های مطلب را تغییر می دهد را به این بخش اضافه می کنیم.

Simple Custom CSS and JS css example

پس از ذخیره کردن و مشاهده دوباره سایت، خواهیم دید که تغییرات ما اعمال شده است.

Simple Custom CSS and JS css result

افزودن کد جاوا اسکریپت دلخواه به سایت

برای درج کد JS دلخواه به سایت، از منوی Custom CSS and JS پنل مدیریت، روی گزینه Add Custom JS کلیک کنید.

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

Simple Custom CSS and JS js code

به عنوان نمونه در این آموزش ما یک کد جاوا اسکریپت نمایش وضعیت آب و هوا را از سایت 1abzar دریافت کرده ایم و می خواهیم آن را در سایت نمایش دهیم.

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

Simple Custom CSS and JS js code

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

Simple Custom CSS and JS js result

همچنین در منوی All Custom Code نیز می توانید لیست تمام کد هایی که تا کنون به سایت اضافه کرده اید را مشاهده کنید.

پس اگر خواستید کد دلخواه CSS یا JS را به سایت خود اضافه کنید، می توانید از افزونه Simple Custom CSS and JS استفاده کنید.

امیدواریم که این آموزش نیز برای شما کاربردی بوده باشد. خوشحال خواهیم شد که نظرات و سوالات خود را درباره این آموزش، پایین همین مطلب با ما در میان بگذارید.

افزونه Simple Custom CSS and JS را می توانید به صورت رایگان از لینک زیر دانلود کنید.

ایمیل خود را وارد کنید تا لینک های دانلود به شما نمایش داده شود. اگر عضو سایت هستید، لطفا وارد حساب کاربری شوید تا دیگر این فرم ایمیل را نبینید.
افزودن کد CSS یا JS دلخواه به سایت وردپرسی
امتیاز 5 از 1 رای

لیسانس نرم افزار و دیپلم زبان انگلیسی دارم و بیش از 8 سال است که در زمینه طراحی سایت فعالیت می کنم. هم اکنون مدیریت تیم طراحی سایت ورتکس را بر عهده دارم و همچنین در زمینه آموزش طراحی سایت، سایت فصل وردپرس را راه اندازی کردم. در زمینه بازاریابی اینترنتی نیز مشغول مطالعه هستم.

نظرتان را با ما در میان بگذارید