برای این کار راه های مختلفی وجود دارد:

1- استفاده از پلاگین

2- نوشتن در قسمت js پوسته (برخی از پوسته های وردپرس این امکان را می دهند)

3- قرار دادن فایل js خودتان روی هاست

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

در اینصورت می توانیم برای المان های html که کلاس داده ایم، هر کد جاوااسکریپتی را اجرا کنیم و دستمان برای خیلی از کارها باز می شود 🙂

قرار دادن فایل js خودتان روی هاست

1- اول بهتر است که از پوسته اصلی سایت یک پوسته child بگیرید و تغییرات را روی آن انجام دهید. در اینصورت با آپدیت پوسته اصلی، تغییرات شما پاک نمی شود. (لینک را ببینید)

2- حالا وارد پوسته child شوید و یک فولدر بنام js بسازید . بعد فایلی بنام custom-script.js بسازید و کد جاوااسکریپت خودتان را درون آن قرار دهید. یعنی سلسله مراتب بصورت زیر می شود:

wp-content
└── themes
    └── your-child-theme
        ├── style.css
        ├── functions.php
        └── js
            └── custom-script.js

3- بعد از این کار باید وارد فایل functions.php شوید و فایل custom-script.js که تازه ساختید را به وردپرس معرفی کنید: (این کد، فایل را درون فوتر تزریق می کند)

function enqueue_custom_script() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

حالا بعد از لود صفحه، کد شما هم اجرا می شود. مثلا کد زیر، برای این است که وقتی المان section1 هاور شد، المان section2  با یک انیمیشن fadein نمایش داده شود و وقتی موس از ان خارج شد، با یک انیمیشن fade out مخفی شود:

document.querySelector('.section1').addEventListener('mouseenter', function() {
  var section2 = document.querySelector('.section2');
  section2.style.opacity = 0; // Set initial opacity to 0
  section2.style.display = 'block'; // Display section2
  fadeIn(section2); // Apply fade-in animation
});

document.querySelector('.section2').addEventListener('mouseleave', function() {
  fadeOut(this); // Apply fade-out animation
});

function fadeIn(element) {
  var opacity = 0;
  var timer = setInterval(function() {
    if (opacity >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = opacity;
    opacity += 0.1; // Increment opacity gradually
  }, 50); // Adjust the interval for smoother animation
}

function fadeOut(element) {
  var opacity = 1;
  var timer = setInterval(function() {
    if (opacity <= 0) {
      clearInterval(timer);
      element.style.display = 'none'; // Hide section2 after fade-out
    }
    element.style.opacity = opacity;
    opacity -= 0.1; // Decrement opacity gradually
  }, 50); // Adjust the interval for smoother animation
}

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