Lamp development essentials (5): Use style sheets in WordPress plug-ins

To make the plug-in function extraordinary, JavaScript and CSS are required. This section describes how to insert CSS code in the WP plug-in. The next section will try to add a JS script.

1. Plug-In folder structure

The main file of the plug-in can be directly placed under the plugin folder, or a folder can be created and placed under the folder. As many plug-ins may have related files, we recommend that you deploy the plug-in files in your own folder for clear management of plug-ins. In addition, JS, CSS, and image files are also placed by folders. Common folders can be named JS, CSS, and images.

The folder structure of an example is as follows:

~ /Plugins
CSS (style sheet file)
Images (image files)
JS (script file)
PHP (related PHP scripts)
Myplugin. php (main plug-in file)

2. functions implemented by the example plug-in

Add a text at the end of the article: <span id = "myalert"> the pop-up warning dialog box </span>. Use the style code in the style sheet to change the style. The text added at the end of the article can be customized and modified in the plug-in settings panel, which is more flexible.

3. complete code and Explanation

To add CSS code to the article, you can directly open the themes template file of WP and add it directly, but only apply to this template page. In this way, the system runs more efficiently, but is not flexible enough. The implementation result is effective for all themes.

The style sheet is used in the WP plug-in. The add_head API event is mainly used.

Edit the css.css file as follows:

# Myalert
{
Background-color: #006;
Color: # FFF;
Cursor: hand;
}

Save it in the CSS folder. The style sheet can be customized as needed, but you must ensure that it cannot conflict with other styles; otherwise, the expected results will not be obtained. This section of the style sheet code modifies the id = "myalert" label.

Define the membership function why100000_addheadercode () of the plug-in class and output the label that references the style sheet. Pay attention to the path of the CSS file. The complete function code is as follows:

Function why100000_addheadercode ()
{
Echo '<link type = "text/CSS" rel = "stylesheet" href = "'
. Get_bloginfo ('wpurl'). '/WP-content/plugins/test-CSS-JS/CSS/css.css "> ';
}

Then, call the following code:

Add_action ('wp _ head', array (& $ myplugin_testcssjs, 'why100000 _ addheadercode '));

Add <link...> to the style sheet call when generating the head part of the article page.

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 </a> ");
}

// Add head information
Function why100000_addheadercode ()
{
Echo '<link type = "text/CSS" rel = "stylesheet" href = "'
. Get_bloginfo ('wpurl'). '/WP-content/plugins/test-CSS-JS/CSS/css.css "> ';
}

// 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 _ addheadercode'), 1 );
Add_filter ('the _ content', array (& $ myplugin_testcssjs, 'why100000 _ appendstring '));
}
?>

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