wordpress后台添加多套style文件切换 style switcher
程序员文章站
2022-04-30 08:45:16
...
项目需求:
1.添加多套style文件不定期 切换风格
2.后台方便切换管理
插件实现
步骤1.
在当前的主题文件下找到functions.php文件 没有的话自己写一个
copy如下代码到文件
$themename = "My theme"; $shortname = "MT"; $options = array ( array( "name" => "Style Sheet", "desc" => "Enter the Style Sheet you would like to use for Sweet Ass Theme", "id" => $shortname."_style_sheet", "type" => "select", "options" => array("default", "green", "blue", "yellow"), "std" => "default"), ); //presentation// function mytheme_add_admin() { global $themename, $shortname, $options; if ( $_GET['page'] == basename(__FILE__) ) { if ( 'save' == $_REQUEST['action'] ) { foreach ($options as $value) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } foreach ($options as $value) { if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } } header("Location: themes.php?page=functions.php&saved=true"); die; } else if( 'reset' == $_REQUEST['action'] ) { foreach ($options as $value) { delete_option( $value['id'] ); } header("Location: themes.php?page=functions.php&reset=true"); die; } } add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin'); } function mytheme_admin() { global $themename, $shortname, $options; if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>'; if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>'; ?> <div class="wrap"> <h2><?php echo $themename; ?> Settings</h2> <form method="post"> <?php foreach ($options as $value) { switch ( $value['type'] ) { case "open": ?> <table width="100%" border="0" style="background-color:#eef5fb; padding:10px;"> <?php break; case "close": ?> </table><br /> <?php break; case "title": ?> <table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr> <td valign="top" colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td> </tr> <!--custom--> <?php break; case "sub-title": ?> <h3 style="font-family:Georgia,'Times New Roman',Times,serif; padding-left:8px;"><?php echo $value['name']; ?></h3> <!--end-of-custom--> <?php break; case 'text': ?> <tr> <td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; case 'textarea': ?> <tr> <td valign="top" width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; case 'select': ?> <tr> <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; case "checkbox": ?> <tr> <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?> <input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> /> </td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; } } ?> <p class="submit"> <input name="save" type="submit" value="Save changes" /> <input type="hidden" name="action" value="save" /> </p> </form> <form method="post"> <p class="submit"> <input name="reset" type="submit" value="Reset" /> <input type="hidden" name="action" value="reset" /> </p> </form> <?php } add_action('admin_menu', 'mytheme_add_admin');
步骤2
添加如下代码到header.php文件 替换掉原来的style.css加载文件 实现与前台的衔接
<?php global $options; foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } } ?> <?php switch ($mst_style_sheet) { case "default":?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php break; ?> <?php case "green":?> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/green.css" type="text/css" media="screen" /> <?php break; ?> <?php case "blue":?> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blue.css" type="text/css" media="screen" /> <?php break; ?> <?php case "yellow":?> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/yellow.css" type="text/css" media="screen" /> <?php break; ?> <?php }?> ?>
步骤3.
部署文件
将不同套的green.css blue.css yellow.css 文件加到与style.css相同的路径下
步骤4.
在后台切换 保存后 查看效果
扩展:
前台切换 可以参考
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm