如何将codpen JS和AJax添加到我的一个WordPress页面中

Question

I just found a nice slider on codepen and want to integrate into my wp homepage (single page).

I have tried to export the Codepen slider and inject the inline JS and CSS. to the header using custom header code plugin and HTML code in the body.but got a conflict with other codes I already have on the website.

My question is How Can I make that JS inline code affect only one DIV/ ID.

Thank you

Answer 1

Don't rely on inline scripts. Save them as separate files (hicham-slider.css/js) and store them somewhere on your site (probably /wp-content/themes/ACTIVETHEME/css/ and /wp-content/themes/ACTIVETHEME/js/ , create those directories if they don't exist.

Then you'll need to enqueue them with your functions.php file:

add_action( 'wp_enqueue_scripts', 'hicham_scripts' );
function hicham_scripts(){
    wp_enqueue_style( 'hicham-slider', get_stylesheet_directory_uri() .'/css/hicham-slider.css', [], '1.0' );
    wp_enqueue_script( 'hicham-slider', get_stylesheet_directory_uri() .'/js/hicham-slider.js', ['jquery'], '1.0', true );
}

Then put the HTML in a Custom HTML widget or in the html/text editor of a page or post.

If the slider doesn't rely on jQuery, turn the ['jquery'] into [] instead. Read more about properly enqueueing with wp_enqueue_style() and wp_enqueue_script()