如何將codpen JS和AJax添加到我的一個WordPress頁面中

Question

我剛剛在Codepen上找到了一個不錯的滑塊，並希望集成到我的wp主頁（單頁）中。

我試圖導出Codepen滑塊並注入內聯JS和CSS。 使用自定義標題代碼插件和正文中的HTML代碼將標題添加到標題。但是與我網站上已有的其他代碼發生沖突。

我的問題是如何使JS內聯代碼僅影響一個DIV / ID。

謝謝

Answer 1

不要依賴內聯腳本。 將它們另存為單獨的文件（hicham-slider.css / js）並將它們存儲在您網站上的某個位置（可能是/wp-content/themes/ACTIVETHEME/css/和/wp-content/themes/ACTIVETHEME/js/ ，創建這些目錄如果它們不存在。

然后，您需要使用functions.php文件將它們加入隊列 ：

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 );
}

然后將HTML放在“自定義HTML”小部件中或頁面或帖子的html /文本編輯器中。

如果滑塊不依賴jQuery，則將['jquery']變為[] 。 閱讀有關使用wp_enqueue_style()和wp_enqueue_script()正確入隊的更多信息。