All geek questions in one place

Insert a Gridster into a WordPress Template

I have a problem with my WordPress plugin, I want to insert a Gridster into the plugin, but it does not work.

Here I upload files that are located correctly in the folder.

function add_my_stylesheet() { wp_enqueue_style( 'myCSS', plugins_url( '/css/bootstrap.css', __FILE__ ), false ); wp_enqueue_style("gridster-style", plugins_url( '/css/jquery.gridster.min.css', __FILE__ ), false ); } add_action('admin_print_styles', 'add_my_stylesheet'); function add_my_scripts() { //I tried wp_register_script as well as wp_enqueue_script wp_register_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) ); wp_register_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ) ); wp_register_script( "gridster-script-extra", plugins_url( '/js/jquery. gridster.with-extras.min.js', __FILE__ ) ); } add_action( 'wp_register_scripts', 'add_my_scripts' );

And this is an example of expected output code, which, of course, doesn't work either.

 echo' <section class="demo"> <div class="gridster"> <ul> <li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li> <li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li> <li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li> </ul> </div> </section> <script type="text/javascript"> var gridster; $(function() { gridtster = $(".gridster > ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140], min_cols: 6 }).data("gridster"); }); </script>';

I tried to include it in the header file of the templates, as well as in the plugin, but it shows me only the text, and I can not drag them.

+5
source share
1 answer
Michael is a good question!

WordPress is great, but there are some tricks / nuances to how it works.

First of all, it is useful to register a script (if you want to localize it or in cases where you can (or cannot) want to output it in the footer (with separate print_scripts ), BUT, it does not output scripts to the markup.

Also, depending on where you registered them (in wp_register_script ), you can also change this.

If you want your scripts to be displayed on the page layout, change your code as follows:

 function add_my_scripts() { // proper way to include jQuery that is packaged with WordPress wp_enqueue_script('jquery'); // Do not EVER include your own jquery. This will cause all sorts of problems for the users of your plugin! // wp_enqueue_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) ); // you need enqueue here. ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency! wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__ ), array('jquery') ); wp_enqueue_script( "gridster-script-extra", plugins_url( '/js/jquery. gridster.with-extras.min.js', __FILE__ ), array('gridster-script') ); } // and you need to hook the enqueue action here... add_action( 'wp_enqueue_scripts', 'add_my_scripts' );

note that if this does not work for you , the next step is to look at the provided source and see what happens. If you find that this does not work, report:

  • Are you trying to do this on the front panel, admin control panel, or both?
  • What is the exact html that appears inside the <head> ?
  • IF the URL is displayed, but this is not correct, then we have a different problem - so advise if it is correct. Note that when you “view the source”, usually the script link (s) can be clicked in the “view source” view, and you can immediately see if the script file is loading (because when you click the link, you will see the script code ) or not (because you will see the markup for the 404 error page).
  • Finally, you can try to remove the dependencies. Sometimes I had interesting problems using them, and that would be something I could play with.
+1
source

Source: https://habr.com/ru/post/1239792/

More articles:


All Articles