![]() ![]() That enables us to include the $script either before or after the $handle, shapeSpace_script. Also note the third parameter, $position. That means we have full control over script content and its relative location. This may not look like much, but it’s actually super awesome. Wp_add_inline_script('shapeSpace_script', $script, 'before') Here is an example: // inline scripts via wp_add_inline_script() ![]() In practice, it looks quite similar to wp_localize_script(), but can do a LOT more. Now that we’ve seen the pros and cons of the two alternate inline-script techniques, let’s look at a better way using the new(er) WordPress function, wp_add_inline_script(). BEST: inline scripts via wp_add_inline_script() So if you need to add other types of inline scripts, like equations, conditionals, functions or whatever, it’s just not possible to do with wp_localize_script(). The only real downside to this otherwise robust technique is that you can only add JavaScript variables (i.e., var = 'value' ). So it provides a consistent way to manage the relative location of your custom script output. This technique is nice because it enables (read: requires) association with an existing/registered script. This enables us to use any of the added JS variables like shapeSpace.var1, etc. And lastly, the variables are passed to wp_localize_script() to be included inline along with the registered script, shapeSpace_script. Then an associative array that contains our variables is defined. This example function enqueues our JavaScript file and gives it a handle/ID of shapeSpace_script. Wp_localize_script('shapeSpace_script', 'shapeSpace', $array) Īdd_action('wp_enqueue_scripts', 'shapeSpace_enqueue_scripts') 'var3' => _('Value for Variable 3', 'shapeSpace'), 'var2' => _('Value for Variable 2', 'shapeSpace'), 'var1' => _('Value for Variable 1', 'shapeSpace'), Wp_enqueue_script('shapeSpace_script', get_template_directory_uri(). Here is an example: // inline scripts via wp_localize_script() But I think a lot of developers use it just to add inline scripts. This function is meant for localizing JavaScript variables for use with internationalization and language translation. Inline scripts via wp_localize_script()Īnother common way that developers include inline JavaScript is the function, wp_localize_script(). But mostly the output code depends on other factors, so not any real, consistent way to control output location. You can sort of control the relative location of the added code using the $priority parameter of the add_action() function. No way to associate the added code with any registered script. No restriction on the code that is added you can add JS variables, conditionals, methods, functions, or whatever you want. Here is an example function adapted from one of my plugins: // inline script via wp_print_scripts ![]() In the past, one way to add inline scripts to the frontend was to use the action hook wp_print_scripts (and/or admin_print_scripts for the Admin Area). Along the way, we’ll look at some example code that you can customize and use in your own WordPress projects. This DigWP article explains how wp_add_inline_script() works, why it’s better than either of the alternate inline methods, and how to support older (pre-4.5) versions of WordPress. One of the nice things about this newer function is that you can associate it with any registered script AND include more than just JavaScript variables. But did you know that not too long ago, WordPress added a new function for adding inline JavaScript? Yep, as of WordPress version 4.5 and better, we can use the superior function wp_add_inline_script() to do the job. Alternately, you may have used the function wp_localize_script() to add your inline scripts. If you are a WordPress developer, you may have used the WordPress hook wp_print_scripts to add any necessary inline JavaScript. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |