Резултата от скрипта ще бъде следния:
Влезте в директорията на Вашата тема и поставете кода във файла functions.php:
require get_template_directory() . '/theme-options.php';
theme-options.php
<?php $themename = "Theme Option"; $shortname = "nt"; $categories = get_categories('hide_empty=0&orderby=name'); $wp_cats = array(); foreach ($categories as $category_list ) { $wp_cats[$category_list->cat_ID] = $category_list->cat_name; } array_unshift($wp_cats, "Choose a category"); $options = array ( array( "name" => $themename." Options", "type" => "title"), array( "name" => "General", "type" => "section"), array( "type" => "open"), array( "name" => "Logo URL", "desc" => "Enter the link to your logo image", "id" => $shortname."_logo", "type" => "text", "std" => ""), array( "name" => "Portfolio", "desc" => "Check this option to turn on Portfolio Type", "id" => $shortname."_portfolio", "type" => "checkbox", "std" => ""), array( "name" => "Clone post", "desc" => "Check this option to turn on/off Clone Post option", "id" => $shortname."_clonepost", "type" => "checkbox", "std" => ""), array( "name" => "Google Fonts", "desc" => "Activate Google fonts integration", "id" => $shortname."_googlefonts", "type" => "checkbox", "std" => ""), array( "type" => "close"), array( "name" => "Theme Styles", "type" => "section"), array( "type" => "open"), array( "name" => "Colour Scheme", "desc" => "Select the colour scheme for the theme", "id" => $shortname."_color_scheme", "type" => "select", "options" => array("blue", "red", "green"), "std" => "blue"), array( "name" => "Colour Scheme Panel", "desc" => "Select the colour scheme for Panel", "id" => $shortname."_color_scheme_admin", "type" => "select", "options" => array("white", "black"), "std" => "white"), array( "name" => "Background color", "desc" => "", "id" => $shortname."_backgroundcolor", "type" => "text", "std" => ""), array( "name" => "Menu color", "desc" => "", "id" => $shortname."_menucolor", "type" => "text", "std" => ""), array( "name" => "Menu color hover", "desc" => "", "id" => $shortname."_menucolorhover", "type" => "text", "std" => ""), array( "name" => "Custom CSS", "desc" => "Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}", "id" => $shortname."_custom_css", "type" => "textarea", "std" => ""), array( "type" => "close"), array( "name" => "Homepage", "type" => "section"), array( "type" => "open"), array( "name" => "Homepage header image", "desc" => "Enter the link to an image used for the homepage header.", "id" => $shortname."_header_img", "type" => "text", "std" => ""), array( "name" => "Homepage featured category", "desc" => "Choose a category from which featured posts are drawn", "id" => $shortname."_feat_cat", "type" => "select", "options" => $wp_cats, "std" => "Choose a category"), array( "type" => "close"), array( "name" => "Footer", "type" => "section"), array( "type" => "open"), array( "name" => "Position Fixed", "desc" => "Check this option to make footer position fixed", "id" => $shortname."_footerfixed", "type" => "checkbox", "std" => ""), array( "name" => "Footer copyright text", "desc" => "Enter text used in the right side of the footer. It can be HTML", "id" => $shortname."_footer_text", "type" => "textarea", "std" => ""), array( "name" => "Google Analytics Code", "desc" => "You can paste your Google Analytics or other tracking code in this box. This will be automatically added to the footer.", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "name" => "Custom Favicon", "desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL to a .ico image that you want to use as the image", "id" => $shortname."_favicon", "type" => "text", "std" => get_bloginfo('url') ."/favicon.ico"), array( "name" => "Feedburner URL", "desc" => "Feedburner is a Google service that takes care of your RSS feed. Paste your Feedburner URL here to let readers see it in your website", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo('rss2_url')), array( "type" => "close") ); function getmoonstyles(){ ?> <style > <? if (get_option( 'nt_footerfixed' )) { ?> .site-footer { position:fixed; z-index: 9999; } .site-content { margin-bottom: 60px; margin-top: 72px; } <? }else{ ?>.site-footer { position: inherit !important; } .site-content { margin-top: 72px; } <? } ?> </style> <? } 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: admin.php?page=theme-options.php&saved=true"); die; } else if( 'reset' == $_REQUEST['action'] ) { foreach ($options as $value) { delete_option( $value['id'] ); } header("Location: admin.php?page=theme-options.php&reset=true"); die; } } add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'mytheme_admin'); } function mytheme_add_init() { $file_dir=get_bloginfo('template_directory'); //if (get_option( 'nt_color_scheme_admin' ) == 'white') //{ wp_enqueue_style("functions", $file_dir."/functions/functions_wt.css", false, "1.0", "all"); $logostyle = 'logo_wt.png'; //}else{ // wp_enqueue_style("functions", $file_dir."/functions/functions_bk.css", false, "1.0", "all"); // $logostyle = 'logo_bk.png'; // } wp_enqueue_script("rm_script", $file_dir."/functions/rm_script.js", false, "1.0"); } function mytheme_admin() { global $themename, $shortname, $options; $i=0; 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>'; // if (get_option( 'nt_color_scheme_admin' ) == 'white') //{ $logostyle = 'logo_wt.png'; //}else{ // $logostyle = 'logo_bk.png'; // } ?> <div class="wrap rm_wrap"> <div class="themelogo"><img src="<?=get_template_directory_uri() . '/functions/images/'.$logostyle;?>"></div> <h2 class="zsd"><?php echo $themename; ?></h2> <div class="rm_opts"> <form method="post"> <?php foreach ($options as $value) { switch ( $value['type'] ) { case "open": ?> <?php break; case "close": ?> </div> </div> <br /> <?php break; case "title": ?> <div class="zsd2">To easily use the <?php echo $themename;?> theme, you can use the menu below.</div> <?php break; case 'text': ?> <div class="rm_input rm_text"> <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label> <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?>" /> <small><?php echo $value['desc']; ?></small><div class="clearfix"></div> </div> <?php break; case 'textarea': ?> <div class="rm_input rm_textarea"> <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label> <textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea> <small><?php echo $value['desc']; ?></small><div class="clearfix"></div> </div> <?php break; case 'select': ?> <div class="rm_input rm_select"> <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label> <select 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"'; } ?>><?php echo $option; ?></option><?php } ?> </select> <small><?php echo $value['desc']; ?></small><div class="clearfix"></div> </div> <?php break; case "checkbox": ?> <div class="rm_input rm_checkbox"> <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label> <?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; ?> /> <small><?php echo $value['desc']; ?></small><div class="clearfix"></div> </div> <?php break; case "section": $i++; ?> <div class="rm_section"> <div class="rm_title"><h3><img src="<?php bloginfo('template_directory')?>/functions/images/trans.png" class="inactive" alt="""><?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" /> </span><div class="clearfix"></div></div> <div class="rm_options" style=" display:none;"> <?php break; } } ?> <input type="hidden" name="action" value="save" /> </form> <form method="post"> <p class="submit"> <input name="reset" type="submit" value="Reset Theme Options" /> <input type="hidden" name="action" value="reset" /> </p> </form> <div class="fns">Panel & Theme creation by <a href="http://atanasfilipov.com/" target="_blank">Atanasfilipov.com</a></div> </div> <?php } ?> <?php add_action('admin_init', 'mytheme_add_init'); add_action('admin_menu', 'mytheme_add_admin'); ?>
Създайте папка functions, и в нея създайте следните файлове: functions_bk.css, functions_wt.css, rm_script.js:
functions_bk.css
.rm_wrap, .rm_wrap h2, .rm_wrap p, .rm_options { background: #000000; color: #ffffff; padding: 20px; } .rm_wrap h2 { font-size: 35px; } .rm_wrap { width: 80%; margin-left: auto; margin-right: auto; } .fns { font-size: 10px; text-align: center; } .fns a { color: #678fbf; text-decoration: none; } .fns a:hover { text-decoration: underline; } .zsd{ text-align:center; } .zsd2{ margin-bottom:10px; text-transform: lowercase; } .rm_opts{ text-align:left; } .rm_section{ border:1px solid #333; border-bottom:0; background:#f9f9f9; } .rm_opts label{ font-size:16px; width:200px; display:block; float:left; } .rm_input { padding:30px 10px; border-bottom:1px solid #333; } .rm_opts small{ display:block; float:right; width:40%; color:#ffffff; font-size:14px; text-align:left; } .rm_opts input[type="text"], .rm_opts select{ width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; } .rm_input input:focus, .rm_input textarea:focus{ background:#fff; } .rm_input textarea{ width:280px; height:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#f3f3f3; } .rm_title h3 { cursor:pointer; font-size:20px; text-transform: uppercase; margin:0; font-weight:bold; color:#ffffff; float:left; width:80%; padding:14px 4px; } .rm_title{ cursor:pointer; background:url('images/backtheme.png'); padding:0; } .rm_title h3 img.inactive{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url('images/pointer.png') no-repeat 0 0; float:left; -moz-border-radius:6px; } .rm_title h3 img.active{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url('images/pointer.png') no-repeat 0 -32px; float:left; } .rm_title{ border:1px solid #222222; } .rm_title:hover{ border:1px solid #678fc0; } .rm_title span.submit{ display: block; float: right; margin: 0; padding: 0; width: 15%; padding: 14px 0; text-align: center; } .submit input { background: #222222; color: #f25757; border: #2E2D2D 1px solid; font-size: 14px; padding-left: 10px; padding-right: 10px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } .submit input:hover { cursor: pointer; cursor: hand; background: #000000; } #message strong{ color:#e51865; } .rm_wrap #message p { margin: 0 !important; } .clearfix{ clear:both; } .rm_table th, .rm_table td{ border:1px solid #bbb; padding:10px; text-align:center; } .themelogo{ text-align:left; position:absolute; top:0; } .themelogo img{ height:150px; } .rm_table th, .rm_table td.feature{ border-color:#888; } .notice, div.error, div.updated { background: none; } .notice-success, div.updated { border-left-color: #fb2b79; background: #fb2b79; } .notice-success, div.updated p { padding-left:20px; }
functions_wt.css
.rm_wrap, .rm_wrap h2, .rm_wrap p, .rm_options { background: #ffffff; color: #000000; padding: 20px; } .rm_wrap h2 { font-size: 35px; } .rm_wrap { width: 80%; margin-left: auto; margin-right: auto; } .fns { font-size: 10px; text-align: center; } .fns a { color: #678fbf; text-decoration: none; } .fns a:hover { text-decoration: underline; } .zsd{ text-align:center; } .zsd2{ margin-bottom:10px; text-transform: lowercase; } .rm_opts{ text-align:left; } .rm_section{ border-bottom:0; background:#f9f9f9; } .rm_opts label{ font-size:16px; width:200px; display:block; float:left; } .rm_input { padding:30px 10px; border: #e9e9e9 1px solid; } .rm_opts small{ display:block; float:right; width:40%; color:#000000; font-size:14px; text-align:left; } .rm_opts input[type="text"], .rm_opts select{ width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; } .rm_input input:focus, .rm_input textarea:focus{ background:#fff; } .rm_input textarea{ width:280px; height:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#f3f3f3; } .rm_title h3 { cursor:pointer; font-size:20px; text-transform: uppercase; margin:0; font-weight:bold; color:#000000; float:left; width:80%; padding:14px 4px; } .rm_title{ cursor:pointer; background:url('images/backtheme_wt.png'); padding:0; } .rm_title h3 img.inactive{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url('images/pointer.png') no-repeat 0 0; float:left; -moz-border-radius:6px; } .rm_title h3 img.active{ margin:-8px 10px 0 2px; width:32px; height:32px; background:url('images/pointer.png') no-repeat 0 -32px; float:left; } .rm_title{ border:1px solid #e9e9e9; } .rm_title:hover{ border:1px solid #678fc0; } .rm_title span.submit{ display: block; float: right; margin: 0; padding: 0; width: 15%; padding: 14px 0; text-align: center; } .submit input { background: #fff; color: #f25757; border: #e9e9e9 1px solid; font-size: 14px; padding-left: 10px; padding-right: 10px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; font-weight:bold; } .submit input:hover { cursor: pointer; cursor: hand; background: #e9e9e9; } #message strong{ color:#e51865; } .rm_wrap #message p { margin: 0 !important; } .clearfix{ clear:both; } .rm_table th, .rm_table td{ border:1px solid #bbb; padding:10px; text-align:center; } .themelogo{ text-align:left; position:absolute; top:0; } .themelogo img{ height:150px; } .rm_table th, .rm_table td.feature{ border-color:#888; } .notice, div.error, div.updated { background: none; } .notice-success, div.updated { border-left-color: #fb2b79; background: #fb2b79; } .notice-success, div.updated p { padding-left:20px; }
rm_script.js
jQuery(document).ready(function(){ jQuery('.rm_options').slideUp(); jQuery('.rm_section h3').click(function(){ if(jQuery(this).parent().next('.rm_options').css('display')=='none') { jQuery(this).removeClass('inactive'); jQuery(this).addClass('active'); jQuery(this).children('img').removeClass('inactive'); jQuery(this).children('img').addClass('active'); } else { jQuery(this).removeClass('active'); jQuery(this).addClass('inactive'); jQuery(this).children('img').removeClass('active'); jQuery(this).children('img').addClass('inactive'); } jQuery(this).parent().next('.rm_options').slideToggle('slow'); }); });
И последно, свалете и картинките към скрипта и ги поставете в директорията на Вашата тема/functions/images/. Свали картинките от тук.