在短码后运行jQuery脚本

时间:2017-03-17 作者:Dekazer

我对wordpress真的很陌生,现在我必须做一个插件,从文件创建一个HTML表并将其打印到页面,然后使用DataTables jquery插件向表中添加更多功能。当我在页面中调用shortcode时,这一切都必须发生。我已经成功地将html表添加到页面中,但我不知道如何运行jquery脚本来修改它。简而言之,如何在短代码之后运行jquery脚本。欢迎您的任何意见!

2 个回复
SO网友:Nathan Johnson

你的问题有点不清楚。我将其解释为,您希望将jQuery脚本排队,以便用户浏览器仅在包含短代码的公共页面上运行。

只有在具有特定短代码的页面上运行jQuery脚本(至少)有三种方法。第一种方法是使用add_shortcode() 要向其添加挂钩的函数get_footer 然后将jQuery脚本放入页脚中。

//* Enqueue script in the footer
function wpse_260465_enqueue_script() {
  wp_enqueue_script( \'your-style-id\', PATH_TO . \'script.js\', [ \'jquery\' ], false, true );
}

//* Add action to enqueue script in the footer and return shortcode value
function wpse_260465_shortcode( $atts ) {
  add_action( \'get_footer\', \'wpse_260465_enqueue_script\' );
  return \'your shortcode content\';
}

add_shortcode( \'wpse_260465\', \'wpse_260465_shortcode\' );
第二种方法是在每个页面上注册脚本,但只在页面上调用特定的短代码时将其排队。

//* Enqueue previously registered script and return shortcode value
function wpse_260465_shortcode( $atts ) {
  wp_enqueue_script( \'your-style-id\' );
  return \'your shortcode content\';
}
add_shortcode( \'wpse_260465\', \'wpse_260465_shortcode\' );

//* Register our script to maybe enqueue later
add_action( \'wp_enqueue_scripts\', \'wpse_260465_enqueue_scripts\' );
function wpse_260465_enqueue_scripts() {
  wp_register_script( \'your-style-id\', PATH_TO . \'script.js\', [ \'jquery\' ], false, true );
}
第三种方法是简单地使用add_shortcode() 函数以内联方式编写jQuery。

//* Return inline jQuery script with shortcode value
function wpse_260465_shortcode( $atts ) {
  $your_shortcode_content = \'your shortcode content\';
  $your_shortcode_content .= $your_inline_jquery;
  return $your_shortcode_content;
}
add_shortcode( \'wpse_260465\', \'wpse_260465_shortcode\' );
第一种和第二种方法更像是“WordPress方式”,第三种方法最容易理解,但这三种方法都应该有效。

SO网友:rudtek
function your_css_and_js() {
    wp_register_style(\'your_css_and_js\', plugins_url(\'style.css\',__FILE__ ));
    wp_enqueue_style(\'your_css_and_js\');
    wp_register_script( \'your_css_and_js\', plugins_url(\'your_script.js\',__FILE__ ));
    wp_enqueue_script(\'your_css_and_js\');
}

//adds to the admin dasboard if needed
add_action( \'admin_init\',\'your_css_and_js\');

//adds to frontend
add_action(\'wp_enqueue_scripts\', \'your_css_and_js\');