*** How to connect the script only if there is a certain shortcode on the page?

Question

css

To use jquery-ui-accordion you need to add a javascript like this to the page:

jQuery(function($){
  $(document).ready(function(){
    $( ".office-accordion" ).accordion({heightStyle: "content"});
  });
});

I don’t want to connect a separate file through wp_enqueue_script () for the sake of 5 lines.
How to display this code at the bottom of the page if the page:
1. used a shortcode ( maybe has_shortcode )
or
2. called a jquery-ui-accordion script ( maybe wp_script_is )?
Thank you!

Answer 1

Do it this way.

Answer 2

It is most convenient to make svg, but here, of course, everything depends on what is in these elements.

Answer 3

That's right

function custom_shortcode_scripts() {
  global $post;
  if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) {
    wp_enqueue_script( 'custom-script');
  }
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');

maybe so

jQuery(function($){
  $(document).ready(function(){
function test(){
if( ! $( ".office-accordion" ).length ) return false;
    $( ".office-accordion" ).accordion({heightStyle: "content"});
}
test();
  });
});

Answer 4

And you can in functions.php:

function has_shortcode_func($atts){
    $xhtml = '<script type="text/javascript"> jQuery(function($){ 
             jQuery(document).ready(function(){ 
             jQuery( ".office-accordion" ).accordion({heightStyle: "content"}); 
             }); });</script>';
    return $xhtml;
}
add_shortcode('has_shortcode', 'has_shortcode_func');

And on the page:
[has_shortcode]