How to disable/display the WordPress sidebar

First, you need to load the JQuery library. Now JQuery is added to all topics, but if not, add reference code before header. php

One is to use php statements to call the built-in jquery library of wordpress. The code is as follows:

The code is as follows:	Copy code
<? Php wp_enqueue_script ('jquery ');?>

One is to add the jquery library at the corresponding location through html statements. You can call the jquery library downloaded by yourself and stored in a folder of the topic, or call the jquery library provided by google. The code is as follows:

The code is as follows:	Copy code
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>

Then, add the html display code and add text or buttons in the appropriate position. The style can be modified according to the topic. This topic is placed in the breadcrumb navigation of single. php on the article content page. The code is as follows:

The code is as follows:	Copy code
<Span id = "close-sidebar"> <a> close the sidebar </a> </span>

Finally, add the jquery control code in the header. add the following code to php, or add the following code to a new js file, such as global. js, then call, call the method parameter, set global. replace the js storage location with the src attribute. The download address of the js file is provided below. You can download the file by yourself. The code is as follows:

The code is as follows:

Copy code

/***** Close/display the sidebar ***/ JQuery (document). ready (function ($ ){ // Select the content of tag a in "id = close-sidebar", that is, "close sidebar" $ ('# Close-sidebar a'). toggle (function (){ // The text is displayed as "Show Sidebar" after the click ". $ (This). text ("Show Sidebar "); // Hide the content of "id = sidebar", that is, the sidebar. If you want to hide other parts, you can add a tag after the tag, such as hiding the scroll bar. $ ('# Sidebar, # roll'). hide (); // Extend the width of "class = main" to 990px, with a time of 1000 ms. If you need to widen other parts, add a comma after them and then add the label, the subject of the article is also widened. $ ('. Main'). animate ({width: "990px"}, 1000 ); }, Function (){ // The text displayed after the click is "close Sidebar ". $ (This). text ("close sidebar "); // Display the content of "id = sidebar", that is, the sidebar. The remaining precautions are the same as above. $ ('# Sidebar, # roll'). show (); // Reduce the width of "class = main" to 700px, with a time of 1000 ms. The remaining precautions are the same as above. $ ('. Main'). animate ({width: "700px"}, 1000 ); }); });

After reading the annotations, you should be able to change the corresponding attributes and attribute values to those corresponding to your own topic. After the modification is successful, you will be able to see the effect. You should also adjust the details yourself. Through these three steps, the function of disabling/displaying the sidebar is realized, as for the position and style of clicking and closing, the content of closing and displaying, and the dynamic effect of closing and displaying, you can scatter it on your own.

If you want to display the sidebar of different wordpress pages, refer to the following method:

 

 

In the figure above, we can see that the homepage is separated from the sidebar of the article page, so that we can well control what we want to display.

How can this effect be achieved? The method is as follows:

1. Add the following code to the topic's functions. Php file:

The code is as follows:

Copy code

If (function_exists ('register _ sidebar ')){ Register_sidebar (array ( 'Name' => 'homepage sidebar ', 'Id' => 'widget _ homesidebar ', 'Before _ components' => '<li id = "% 1 $ s"> ', 'After _ components' => '</li> ', 'Before _ title' => ' 'After _ title' => ' )); Register_sidebar (array ( 'Name' => 'Article page sidebar ', 'Id' => 'widget _ postsidebar ', 'Before _ components' => '<li id = "% 1 $ s"> ', 'After _ components' => '</li> ', 'Before _ title' => ' 'After _ title' => ' ));   }

The above code registers two sidebar: "homepage sidebar" and "article sidebar ".

2. Add the following code to the sidebar file siderbar. php of the topic:

The code is as follows:	Copy code
<? Php If (is_home () | is_front_page () {// The "homepage sidebar" is displayed on the homepage" If (function_exists ('dynamic _ sidebar') & dynamic_sidebar ('widget _ homesidebar ')){} } ?>   <? Php   If (is_single () {// The "article page" is displayed on the article page" If (function_exists ('dynamic _ sidebar') & dynamic_sidebar ('widget _ postsidebar ')){} } ?>

OK. Go to the background to check the effect!