Cannot run script properly with my custom plugin

admin管理员组

文章数量:1291800

I'm pretty new with wordpress developing. What I'm trying to do is to add javascript to my plugin. It seems to be loaded, because when I'm console loging something like 'test' it works fine. But when I'm trying to query anything (for example document.querySelector('#only-for-test')) or even ('body'), it gives me back 'null'...

function addThemeStyles() {
  wp_enqueue_style('style_file' , plugin_dir_url(__FILE__).'plugin_styles.css');
}

function addThemeScript() {
  wp_enqueue_script('js-file', plugin_dir_url(__FILE__).'plugin_pj_script.js');
}

function todoPJ_enqueueBootstrapCSS()
{
    // CSS
    wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');
}

function testFunction() {
  // $test = plugin_dir_path('styles.css');

  return '
  <div class="another-test-file" id="only-for-test">
    <div class="container">
      <div class="row">
        <div class="col-6">
          <h1>Hello World!</h1>
        </div>
        <div class="col-6">
          <h1>Another Hello World!</h1>
        </div>
      </div>
    </div>
  </div>';
}


add_action('wp_enqueue_scripts', 'addThemeStyles');
add_action('wp_enqueue_scripts', 'addThemeScript');
add_action('wp_head', 'todoPJ_enqueueBootstrapCSS');

add_shortcode('example', 'testFunction');

I'm pretty new with wordpress developing. What I'm trying to do is to add javascript to my plugin. It seems to be loaded, because when I'm console loging something like 'test' it works fine. But when I'm trying to query anything (for example document.querySelector('#only-for-test')) or even ('body'), it gives me back 'null'...

function addThemeStyles() {
  wp_enqueue_style('style_file' , plugin_dir_url(__FILE__).'plugin_styles.css');
}

function addThemeScript() {
  wp_enqueue_script('js-file', plugin_dir_url(__FILE__).'plugin_pj_script.js');
}

function todoPJ_enqueueBootstrapCSS()
{
    // CSS
    wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');
}

function testFunction() {
  // $test = plugin_dir_path('styles.css');

  return '
  <div class="another-test-file" id="only-for-test">
    <div class="container">
      <div class="row">
        <div class="col-6">
          <h1>Hello World!</h1>
        </div>
        <div class="col-6">
          <h1>Another Hello World!</h1>
        </div>
      </div>
    </div>
  </div>';
}


add_action('wp_enqueue_scripts', 'addThemeStyles');
add_action('wp_enqueue_scripts', 'addThemeScript');
add_action('wp_head', 'todoPJ_enqueueBootstrapCSS');

add_shortcode('example', 'testFunction');

• plugins
• plugin-development
• javascript

Share Improve this question asked May 22, 2021 at 13:56 Paweł Paweł 10122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I figured this out, maybe it will help someone - probably, my script was loading on the header, so html was loading after script fired. What I did was adding those few parameters, where this last 'true' is the most important (moves script to footer). Hope this helps to anyone

  wp_enqueue_script('js-file', plugin_dir_url(__FILE__).'/js/plugin_pj_script.js', '', '1.0.0', true);

本文标签： Cannot run script properly with my custom plugin