如何在Avada主题中插入jQuery代码？
我想在我的Wordpress主题（Avada）中插入一个简单的jQuery代码， 如下所示 ：
$(function() { $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }}); $( "#accordion" ).accordion(); var btn = $('#accordion li a'); var wrapper = $('#accordion li'); $(btn).on('click', function() { $(btn).removeClass('active'); $(btn).parent().find('.addon').removeClass('fadein'); $(this).addClass('active'); $(this).parent().find('.addon').addClass('fadein'); }); }); 在页面中，但它不起作用。
我尝试对所有HTML元素使用不同的类，并使用名为“CSS＆Javascript Tool box”的插件插入我的代码，但它没有帮助。
首先不要使用任何CSS / JS插件，这是一个可怕的想法，因为这样的插件通常是重大安全问题的原因，并没有提供任何良好的可维护性。
以下是在Wordpress中添加Javascript的正确方法：
在您的子主题中（因为您为Avada创建了一个子主题以便能够随时更新它，对吗？:)），在functions.php文件中添加以下函数：
function my_theme_scripts() { wp_register_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', array('jquery'), '1.11.2', true); wp_enqueue_script('jquery-ui'); wp_register_script('tabs-scripts', get_stylesheet_directory_uri() . '/js/tabs-script.js', array('jquery', 'jquery-ui'), '1.0', true); wp_enqueue_script('tabs-scripts'); wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'); } add_action('wp_enqueue_scripts', 'my_theme_scripts');
这将告诉Wordpress添加适当的脚本标记以链接到位于每个页面页脚的主题js目录中的tabs-scripts.js ，并加载jQuery UI依赖项。 有关参考，请参阅wp_register_script文档 。
然后，在js目录中创建tabs-scripts.js文件并添加以下脚本：
jQuery(document).ready(function($) { if($('#tabs').length && $('#accordion').length) { $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }}); $( "#accordion" ).accordion(); var btn = $('#accordion li a'); var wrapper = $('#accordion li'); $(btn).on('click', function() { $(btn).removeClass('active'); $(btn).parent().find('.addon').removeClass('fadein'); $(this).addClass('active'); $(this).parent().find('.addon').addClass('fadein'); }); } }
这将确保两件事：
- 那个
$是可用的并且引用了jQuery - 在运行脚本之前，相应的DOM元素
#tabs和#accordion位于页面中。
如果它不起作用，请检查脚本是否已添加到页面中，并且($('#tabs').length && $('#accordion').length))已满足。
您正在使用Avada主题，转到主题选项 – >高级 – >代码字段（跟踪等），您将看到需要在第二个框中添加代码的三个文本框（之前的空格）。 将代码放在标签内。 我附上截图。 
只需将脚本代码添加到functions.php文件中即可。 这样做是集中你的脚本代码而不需要太多工作。 您唯一的必备条件是在使用脚本之前定义了JQuery。
有很多方法可以解决您的问题，但我倾向于从源头获取信息。 以下链接有望提供帮助。