لاضافة جافاسكربت و CSS في ثيم بنستعمل enqueue script and style

فبدل من الطريقة العادية

<link rel="stylesheet" href="#" />
<script src="#"></script>

وال هما نقدر كمان نستعملهم فى وردبريس

لكن باستعمال طريقة وردبريس نقدر نضيف Dependencies و كمان تحكم version عشان الكاش

بندخل على functions.php ونضيف

wp_enqueue_script(
    'script-name',
    get_template_directory_uri() . '/assets/js/script-name.js',
    array(),
    filemtime( get_template_directory() . '/assets/js/script-name.js' ),
    true
);

wp_enqueue_style(
    'style-name',
    get_template_directory_uri() . '/assets/css/style.css',
    array(),
    filemtime( get_template_directory() . '/assets/css/style.css' ),
    'all'
);

بس بنضيفهم جوا functions عشان نستعملهم اما فواجهة الموقع او فالداشبورد

//website pages
function Name() {

}
add_action('wp_enqueue_scripts', 'Name');

//admin
function Name() {

}
add_action('admin_enqueue_scripts', 'Name');

فبيكون الشكل كدا

function Name() {
    wp_enqueue_script(
        'script-name',
        get_template_directory_uri() . '/assets/js/script-name.js',
        array(),
        filemtime( get_template_directory() . '/assets/js/script-name.js' ),
        true
    );

    wp_enqueue_style(
        'style-name',
        get_template_directory_uri() . '/assets/css/style.css',
        array(),
        filemtime( get_template_directory() . '/assets/css/style.css' ),
        'all'
    );
}

add_action('wp_enqueue_scripts', 'Name'); 

//for dashboard
//add_action('admin_enqueue_scripts', 'Name'); 

جزء ال get_template_directory_uri() ده عشان نكون ف الملف الخاص بالثيم ونوصل للفولدر او الفايل المحدد

وجزء filemtime( get_template_directory() . '/assets/css/style.css' ),

عشان لما تحدث الفايل يبدل ال version والكاش

---

ونقدر نستعمل مثال ابسط من غير جزء ال version وال Dependencies