آموزش برنامهنویسی وب ۳ – آموزشگاه هوش مصنوعی- tirotir.ir- • شخصیسازی ظاهر و رفتار سایت
صفحه ۱ از ۲
WORDPRESS CUSTOMIZATION — CSS و JavaScript سفارشی
استفاده از CSS و JavaScript سفارشی در وردپرس
بدون تغییر یا خرابکردن فایلهای اصلی قالب، میتوانیم با CSS اضافی ظاهر سایت و با JavaScript رفتار عناصر را تغییر دهیم. در این درس هر دو روش را گامبهگام و با مثال واقعی میبینیم.
نمایش←سفارشیسازی←CSS اضافی
۱
در بعضی قالبها همین مسیر انگلیسی است: Appearance → Customize → Additional CSS
۲
مثال ۱: گرد و رنگیکردن همهٔ دکمههای سایت
CSS اضافی
button,
.wp-block-button__link,
.elementor-button {
background-color: #2563eb;
color: white;
border-radius: 20px;
padding: 12px 25px;
transition: 0.3s;
}
button:hover {
transform: scale(1.1);
background-color: #1e40af;
}
هر کدی اینجا بنویسید، بلافاصله روی کل سایت اعمال میشود؛ بدون نیاز به ویرایش فایل قالب.
سه سلکتور با هم انتخاب شدهاند تا دکمهٔ معمولی، دکمهٔ گوتنبرگ و دکمهٔ المنتور یکسان شوند.
باعث میشود تغییر اندازه هنگام hover نرم و تدریجی باشد، نه ناگهانی.
۳
ساخت کلاس اختصاصی (بهجای تغییر همه چیز)
HTML + CSS
<div class=“card”>
آموزش وردپرس
</div>
.card {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px #ccc;
}
Animation
.box {
animation: showBox 1s;
}
@keyframes showBox {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
▲ کادر آرام از پایین ظاهر میشود
آموزش برنامهنویسی وب ۳ – آموزشگاه هوش مصنوعی- tirotir.ir- • شخصیسازی ظاهر و رفتار سایت
صفحه ۲ از ۲
۵
افزودن JavaScript با افزونهٔ Insert Headers and Footers
Settings←Insert Headers and Footers←Scripts in Footer
۱
سادهترین روش برای آموزش: افزونهٔ رایگان Insert Headers and Footers را نصب و فعال کنید، سپس کد جاوااسکریپت را در بخش «Scripts in Footer» بچسبانید.
۶
مثال ۱: تغییر متن دکمه با JavaScript
script.js
<button id=“myButton”>خرید</button>
document
.getElementById(“myButton”)
.innerHTML = “شروع یادگیری”;
۷
مثال ۲ و ۳: تغییر همهٔ دکمهها + انیمیشن با کلیک
تغییر همهٔ دکمهها
let buttons = document.querySelectorAll(“button”);
buttons.forEach(function(btn) {
btn.style.background = “green”;
btn.style.color = “white”;
});
انیمیشن با کلیک
let box = document.getElementById(“box”);
box.onclick = function() {
box.style.transform = “rotate(360deg)”;
box.style.transition = “1s”;
}
۸
روش حرفهایتر: اتصال فایل با functions.php
📁 my-theme
- style.css
- js/
- script.js ۱
- functions.php ۲
functions.php
function my_scripts() {
wp_enqueue_script(
‘my-js’,
get_template_directory_uri() . ‘/js/script.js’
);
}
add_action(‘wp_enqueue_scripts’, ‘my_scripts’);۳
بهجای چسباندن کد داخل صفحه، در یک فایل مستقل js/script.js نگهداری میشود.
روش استاندارد وردپرس برای بارگذاری فایلهای JS، که از تداخل با افزونههای دیگر جلوگیری میکند.
مطمئن میشود فایل دقیقاً در زمان درست بارگذاری صفحه اضافه میشود.
۹
پروژهٔ کوچک کلاسی: کارت متحرک
course-card
.course-card {
width: 250px; padding: 30px;
background: #eee; border-radius: 20px;
text-align: center; transition: .5s;
}
.course-card:hover { transform: translateY(-20px); }
Python AI
↑ با موس بالا میرود
| ابزار | کاربرد |
|---|
| CSS اضافی | تغییر ظاهر سایت بدون دستزدن به فایل قالب |
| Animation CSS | ایجاد حرکت و افکت بصری |
| JavaScript | ایجاد رفتار و تعامل با کاربر |
| functions.php | روش حرفهای برای اتصال فایلهای CSS/JS |
| wp_enqueue_script | استاندارد رسمی وردپرس برای بارگذاری اسکریپت |
📝 تمرین بعدی
یک افزونهٔ کوچک وردپرس بسازید که خودش، بدون نیاز به Insert Headers and Footers، فایلهای CSS و JavaScript را با wp_enqueue_style و wp_enqueue_script به سایت اضافه کند.
