The implementation of WordPress theme sidebar switch function of PHP script detailed _php example

Source: Internet
Author: User
Tags php script

As the creator of the theme, in addition to the implementation of features, display interface, but also the responsibility to make the theme flexible to meet more people different needs.
Maybe some friends have bothered to choose a two-column theme (one-sided sidebar) or three-column theme (two-sided sidebar). Let's take the Classic topic for example and talk about how to easily switch between the sidebar and the double sidebar in a theme. Finally I will provide the revised theme.

Add Administrative options
Background processing
First of all, we want to modify the function.php, the main processing work in this file, if the theme does not have this file, create a bar. (No function.php the theme does not support widgets, is not a good habit oh, or quickly create a new bar)
My processing includes 3 chunks: Get options, Initialize, tab-page operator interface. Only one bulletin board is created here, including two options (whether to display bulletin boards and bulletin board content). If you want to add more options, you only need to append some code to the 3 TODO locations in your code. Of course, you also need to change the name of the option, the Classic and Classic all the change.

<?php/** * option group type/class Classicoptions {/*-get option Group-*/function GetOptions () {//Get option group in database $options =
 Get_option (' classic_options ');
  If the option group does not exist in the database, set the default values for these options and insert them into the database if (!is_array ($options)) {$options [' notice '] = false;
  $options [' notice_content '] = ';
 TODO: Append other options here update_option (' classic_options ', $options);
 //Return $options of option group; }/*--initialize--*/function init () {//If it is POST submission data, restrict the data and update to database if (isset ($_post[' Classic_save ')) {//Get option
 
  Group, because it is possible to modify only some of the options, so take it down first and then make the change $options = Classicoptions::getoptions ();
  Data restriction if ($_post[' notice ']) {$options [' notice '] = (bool) true;
  else {$options [' notice '] = (bool) false;
 
  $options [' notice_content '] = stripslashes ($_post[' notice_content ']);
 
 TODO: Append additional options to the limit processing//Update data update_option (' classic_options ', $options);
 Otherwise, the option group is retrieved, that is, initialization of the data} else {classicoptions::getoptions (); ///Add a tab to the background design page called current Theme Options Add_themE_page ("Theme options", "Current Theme options", ' Edit_themes ', basename (__file__), Array (' classicoptions ', '
 Display ')); }/*-label page-*/function display () {$options = Classicoptions::getoptions ();?> <form action= "#" method= "p OST "Enctype=" Multipart/form-data "name=" Classic_form "id=" Classic_form "> <div class=" wrap ">  

Front desk Handling

To the bulletin board on the home page, you need to modify the index.php, this is relatively simple, only through a number of judgments to determine whether things to show it. Of course, you can do other things, the key is to get the values of the options and handle them.
In fact, it can be divided into two steps:

Get options (for each PHP file, get one at a time and can be done at the top of the file)
Handle the options (the announcement will be displayed if the decision is set up here)

<!--get options-->
<?php $options = get_option (' classic_options ');?>
 
<!--If the user chooses to display the bulletin board and the bulletin board has content, is displayed-->
<?php if ($options [' notice '] && $options [' notice_content ']):?> <div
 "id= ">
 <div class=" content "><?php Echo ($options [' notice_content ']);?></div>
 </div >
<?php endif;?>

You can use administrative items to control the number of sidebar, to get the number of sidebar in a theme file, and to handle different numbers differently to achieve the goal of switching between different numbers of side bars.

Side bar number, default to single sidebar
$options [' sidebar '] = 1;
Obtain the latest submitted value
$options [' sidebar '] = $_post[' sidebar '];
<select name= "sidebar" size= "1" >
 <!--one-sided sidebar--> <option value=
 "1" <?php if ($options [' Sidebar ']!= 2) echo ' selected ';? >><?php _e (' single ', ' classic ');?></option>
 <!--double sidebar-->
 <option value= "2" <?php if ($options [' sidebar '] = = 2) echo ' selected ';? >><?php _e (' Double ', ' Classic ?></option>
</select>
 <?php _e (' sidebar (s) ', ' classic ');

Add Widget Support

Because we want to switch between the sidebar and the two-sided sidebar, we need to define the branches of the two Widget initialization for each of the two different patterns.
Here is a special, in order to get the Widget information correctly in the code, even the one-sided sidebar needs an alias. Just like the Sidebar_single in the code. When the side bar number is 1 o'clock, register Sidebar_single. When the sidebar number is 2 o'clock, register Sidebar_top and Sidebar_bottom.

/Widgets $options = get_option (' classic_options '); One-sided sidebar if (function_exists (' Register_sidebar ') && $options [' sidebar '] = = 1) {Register_sidebar Array (' name ' =&G T 
 ' Sidebar_single ', ' before_widget ' => ' <li id= '%1 $ S ' class= ' widget%2$s ' > ', ' after_widget ' => ' </li> ',
 
' Before_title ' => ' 

To modify the side bar structure

The first thing to be clear is that we now need a two-sided sidebar structure. How do you turn the double sidebar into one sidebar? As long as the end tag of the previous sidebar and the start tag of the next sidebar are removed, the two sidebar is merged into a sidebar. Simple text is difficult to express my ideas and implementation, you can continue to look at the following code and sample pictures.

<ul class= "sidebar_1" >
 <?php if (!function_exists (' Dynamic_sidebar ') | |!dynamic_sidebar (' sidebar_ Single ")://single?>
 
 <?php if (!function_exists (' Dynamic_sidebar ') | |!dynamic_sidebar (' sidebar_top ')): Top?>
<!--TODO: Content--> <?php endif on the upper side sidebar
 ;//tops?>
 
 <?php if ($options [' Sidebar '] >= 2):?>
</ul>
<ul class= "sidebar_2" >
 <?php endif;?> <?php
 
 if (!function_ Exists (' Dynamic_sidebar ') | | !dynamic_sidebar (' Sidebar_bottom '))://Bottom?>
<!--TODO: Bottom sidebar content--> <?php endif
 ;//Bottom? & gt;
 
 <?php endif; Single?>
</ul>

OK, this is the sidebar code structure. It can be perfect to achieve the single and double side bar between the switch. But how does it work? I'll use a picture to list the 6 possible states of its appearance later.
The function_exists (' dynamic_sidebar ') = = true in the code because the theme already supports the Widget, then!function_exists (' dynamic_sidebar ') = = False.
Remember to add code that was written when the Widget was supported? The sidebar is 1 o'clock sidebar_single valid, the sidebar is 2 o'clock, sidebar_top and Sidebar_bottom are valid. This is the key to running through the whole idea.

Note:

    • Red: Indicates that the value of the selected code is false and does not pass
    • Green: Indicates that the value of the selected code is true, by
    • Blue: Indicates that the selected part will be replaced by the chosen widgets
    • Gray: Indicates that the selected part of the code will be invalidated

State one: Single side sidebar, no widgets used

State two: Two-sided sidebar, no widgets used

State three: Single side sidebar, using Widget

State four: Two-sided sidebar with Widget on top side sidebar

State five: Two-sided sidebar, the bottom side bar using widgets

State six: Two-sided sidebar, both top and bottom sidebar use widgets

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.