Use JavaScript (jquery) scripts in WordPress plug-ins

With the previous article "using style sheets in WordPress plug-ins", this section "using JavaScript in WP plug-ins" is easy to describe and understand.

1. the folder structure of the plug-in is the same as that in the previous article. The functions completed by the plug-in are described in the previous article. This section adds a function. When you click on the text, a window is displayed. This example is also developed based on the previous example.

The JS script in this section is placed in the JS folder. The file name is script. js. The content is as follows:

Jquery (document). Ready (function (){
//---------------
Jquery ("# myalert"). Click (function ()
{
Alert ("Hello, WordPress and jquery! ");
});
//---------------
});

2. complete code and Explanation

This section also introduces another method to add CSS code to the article. The wp_print_styles API event is used. It is more standard to work with the wp_register_style and wp_enqueue_style functions.

The code for adding JavaScript scripts is similar to CSS. This section uses adding a jquery script as an example. If you are not familiar with jquery, You can first learn the following jquery to use its powerful functions in the code.

There are also two methods for adding JS scripts to the WP plug-in. Of course, it is best to use the wp_print_scripts API with wp_register_script and wp_enqueue_script as the recommended methods.

Except for a few functions and some code, the plug-in structure is the same as that in the previous section. For more information, see.

The result of code execution is that the following JS Code is added to the head part of the page:

<SCRIPT type = 'text/JavaScript 'src = 'HTTP ://...... /WP-nodes des/JS/jquery. js? Ver = 1.3.2 '> </SCRIPT>
<SCRIPT type = 'text/JavaScript 'src = 'HTTP ://...... /WP-content/plugins/test-CSS-JS/script. js? Ver = 20100405 '> </SCRIPT>

The complete code in this example is as follows. The key code is annotated:

<? PHP
/*
Plugin name: test_css_js
Plugin URI: http://www.why100000.com
Version: 0.1
Author: mesh (Zhang Qing-Xi'an, Shaanxi-kaikai studio-http://www.myopenit.cn)
Author URI: http://blog.why100000.com
Description: test the style sheet and JS Script: Add a text at the end of the article, change the style, and click the pop-up dialog box.
*/

If (! Class_exists ("why100000_test_css_js "))
{
Class why100000_test_css_js
{
// Constructor
Function why100000_test_css_js ()
{
}

// Add it to the "Settings" Main Menu
Function why100000_add_options_page ()
{
Add_options_page ('test _ css_js ', 'test _ CSS_JS-CFG', 8, basename (_ file _), array (& $ this, 'why100000 _ test_css_js_mainpage '));
}

Function why100000_test_css_js_mainpage ()
{
?>
<Form name = "formamt" method = "Post" Action = "options. php">
<? PHP wp_nonce_field ('Update-options')?>
<Div class = "Wrap">
Test_css_js is active. <br>
<H2> test_css_js config (plug-in configuration) </H2>

<Div id = "msgall">
<Fieldset class = "options">
<Legend> word (string): </legend>
<P>
<Textarea style = "width: 80%;" rows = "5" Cols = "40" name = "why100000_word"> <? PHP echo get_option ("why100000_word");?> </Textarea>
</P>
</Fieldset>
</Div>

<P class = "Submit">
<Input type = "Submit" value = "<? PHP _ E ('Update options & raquo; ')?> "Name =" update_message "/>
</P>
<Input type = "hidden" name = "action" value = "Update">
<Input type = "hidden" name = "page_options" value = "why100000_word">
</Div>
</Form>
<? PHP
}

// Execute when the plug-in is "enabled" for the first time and save it to the table wp_options as the initial value
Function why100000_install ()
{
Add_option ("why100000_word", "<span id =/" myalert/"> the warning dialog box </span> ");
}

Function why100000_addheadcode ()
{
Echo '<link type = "text/CSS" rel = "stylesheet" href = "'. get_bloginfo ('wpurl '). '/WP-content/plugins/test-CSS-JS/CSS/css.css "> ';
Echo '<SCRIPT type = "text/JavaScript" src = "'. get_bloginfo ('wpurl '). '/WP-content/plugins/test-CSS-JS/script. JS "> </SCRIPT> ';
}

// Add CSS
Function why100000_addcss ()
{
Wp_register_style ('My _ css_handle ', get_bloginfo ('wpurl').'/WP-content/plugins/test-CSS-JS/CSS/css.css ');
Wp_enqueue_style ('My _ css_handle ');
// It is equivalent to the following statement:
// Wp_enqueue_style ('My _ css_handle ', get_bloginfo ('wpurl').'/WP-content/plugins/test-CSS-JS/CSS/css.css ');
}

// Add JS Information
Function why100000_addjs ()
{
// Select the jquery Script Type to automatically load the jquery. JS File
Wp_register_script ('My _ js_handle ', get_bloginfo ('wpurl '). '/WP-content/plugins/test-CSS-JS/script. js', array ('jquery '), '123 ');
Wp_enqueue_script ('My _ js_handle ');
// It is equivalent to the following statement:
// Wp_enqueue_script ('My _ js_handle ', get_bloginfo ('wpurl '). '/WP-content/plugins/test-CSS-JS/script. js', array ('jquery '), '123 ');
}

// WP calls the the_content function to filter the content of the article.
Function why100000_appendstring ($ content)
{
$ Content. = get_option ("why100000_word ");
Return $ content;
}

}
}

If (class_exists ("why100000_test_css_js "))
{
// $ Myplugin_testcssjs variables cannot conflict with other plug-ins!
$ Myplugin_testcssjs = new why100000_test_css_js ();
}

If (isset ($ myplugin_testcssjs ))
{
Add_action ('activate _ test-CSS-JS/test-css-js.php ', array (& $ myplugin_testcssjs, 'why100000 _ install '));
Add_action ('admin _ menu ', array (& $ myplugin_testcssjs, 'why100000 _ add_options_page '));
// Add_action ('wp _ head', array (& $ myplugin_testcssjs, 'why100000 _ addheadcode '));
Add_action ('wp _ print_styles ', array (& $ myplugin_testcssjs, 'why100000 _ addcss '));
Add_action ('wp _ print_scripts ', array (& $ myplugin_testcssjs, 'why100000 _ addjs '));
// Add_action ('template _ redirect ', array (& $ myplugin_testcssjs, 'why100000 _ addjs'); this statement can also be used
Add_filter ('the _ content', array (& $ myplugin_testcssjs, 'why100000 _ appendstring '));
}
?>

Author: Zhang Qing (mesh) 2010-4-7
From mesh horizon: http://blog.why100000.com
Why 100,000 computer learning networks: http://www.why100000.com