My WordPress Theme Options

我正常用的主题设置的拓展页面,看效果图:

代码:https://gist.github.com/yao3060/5028434

mythemeoption

<?php
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
add_action('admin_menu', 'my_theme_options_menu');

function my_theme_options_menu() {
    add_action('admin_print_scripts', 'my_options_admin_scripts');
    add_action('admin_print_styles', 'my_options__admin_styles');
    add_theme_page('My Plugin Theme', 'My Theme Options', 'administrator', 'my-theme-options', 'my_theme_options_function');
    add_action('admin_init', 'register_mysettings');
    add_action('admin_init', 'my_theme_icl_register_string');
}

function register_mysettings() {
    //register our settings
    register_setting('my_theme_options', 'myoption');
}

function my_options_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_enqueue_script('my-upload');
}

function my_options__admin_styles() {
    wp_enqueue_style('thickbox');
}

function my_theme_options_function() {
    if (!current_user_can('manage_options')) {
        wp_die(__('You do not have sufficient permissions to access this page.'));
    }
    $my_theme_options = get_option('myoption'); 
    ?>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  
    <div class="wrap"> 
        <?php screen_icon(); ?>
        <h2>My Theme Options</h2>
        <form method="post" id="my_theme_options" action="options.php"> 
            <?php
            settings_fields('my_theme_options');
            ?>

            <table class="form-table" id="my_theme_options">
                <tr>
                    <th scope="row">Logo</th>
                    <td><input type="text" id="my_logo" class="image_upload"  name="myoption[logo][url]" value="<?php echo $my_theme_options[logo][url]; ?>" ></td>
                    <td>
					<?php 
					if($my_theme_options[logo][id]){
						echo wp_get_attachment_image( $my_theme_options[logo][id], array(100,100));
					}else{
						echo '<img src="'.admin_url().'/images/wordpress-logo.png"><br>';
					}
					?>
					<input type="text" name="myoption[logo][id]" value="<?php echo $my_theme_options[logo][id]; ?>"></td>
                </tr>
                <tr>
                    <th scope="row">Favicon</th>
                    <td><input type="text" id="my_favicon"  class="image_upload"  name="myoption[favicon][url]" value="<?php echo $my_theme_options[favicon][url]; ?>" ></td>
                    <td>
					<?php 
					if($my_theme_options[favicon][id]){
						echo wp_get_attachment_image( $my_theme_options[favicon][id], array(100,100));
					}else{
						echo '<img src="'.admin_url().'/images/wordpress-logo.png"><br>';
					}
					?>
					<input type="text" name="myoption[favicon][id]" value="<?php echo $my_theme_options[favicon][id]; ?>">
					</td>
                </tr>
                <tr>
                    <th scope="row">Home Background</th>
                    <td>
						<input type="text" id="my_homebg"  class="image_upload"  name="myoption[homebg][url]" value="<?php echo $my_theme_options[homebg][url]; ?>" ><br>
						<input type="text" id="my_homebg_pos" name="myoption[homebg][pos]" value="<?php echo $my_theme_options[homebg][pos]; ?>" placeholder="Background Position( 0px 0px)" ><br>
						<input type="text" id="my_homebg_repeat" name="myoption[homebg][repeat]" value="<?php echo $my_theme_options[homebg][repeat]; ?>" placeholder="Background Repeat" ><br>
						<input type="text" id="my_homebg_height" name="myoption[homebg][h]" value="<?php echo $my_theme_options[homebg][h]; ?>" placeholder="Height" >
					</td>
                    <td>
					<?php 
					if($my_theme_options[homebg][id]){
						echo wp_get_attachment_image( $my_theme_options[homebg][id], array(100,100));
					}else{
						echo '<img src="'.admin_url().'/images/wordpress-logo.png"><br>';
					}
					?>
					<input type="text" name="myoption[homebg][id]" value="<?php echo $my_theme_options[homebg][id]; ?>">
					</td>
                </tr>
                <tr>
                    <th scope="row">Contact page</th>
                    <td>
<select name="myoption[contact_id]"> 
 <option value=""><?php echo esc_attr( __( 'Select page' ) ); ?></option> 
 <?php 
  $pages = get_pages(); 
  foreach ( $pages as $page ) {
	if($my_theme_options[contact_id] == $page->ID ){ $select = 'selected="selected"'; }else{ $select = ""; }
  	echo '<option value="'. $page->ID .'" '. $select .'>'.$page->post_title.'</option>';
  }
 ?>
</select>			</td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">
					<h2>Categroies</h2>
					<p>Press Ctrl, Mutil select the categories</p>
					</th>
                    <td>
<ol id="selectable">
<?php
$categoryIDs = explode('&', $my_theme_options[categroies][id]);

$categories=get_categories();
foreach($categories as $category) { 
	if(in_array($category->term_id, $categoryIDs)) {
		$term_class = "ui-state-default ui-selected";
	}else{
		$term_class = "ui-state-default";
	}
	echo '<li  class="'.$term_class.'" rel="'.( $category->term_id ).'">'.$category->name.'</li>';
}
?> 
</ol>
					</td>
                    <td><input type="text" id="select_result" name="myoption[categroies][id]" value="<?php echo $my_theme_options[categroies][id]; ?>"></td>
                </tr>
				<tr>
                    <th scope="row">
					 Custom Post Type 

					</th>
                    <td>
<select name="myoption[post_type]"> 	 
<?php 
$post_types=get_post_types(array(  'public'   => true,  '_builtin' => false)); 
foreach ($post_types as $post_type ) {
	if('attachment' != $post_type){
		if($my_theme_options[post_type] == $post_type ){ $thisselect = 'selected="selected"'; }else{ $thisselect = ""; }
		$post_type_object = get_post_type_object($post_type);
		echo '<option value="'. $post_type .'" '. $thisselect .'>'.$post_type_object->labels->singular_name.'</option>';
	}
}
?>
</select>

					</td>
				</tr>

				<tr>
                    <th scope="row">
					 Custom Post Type 2

					</th>
                    <td>
<select name="myoption[post_type2]"> 	 
<?php 

foreach ($post_types as $post_type2 ) {
	if('attachment' != $post_type2){
		if($my_theme_options[post_type2] == $post_type2 ){ $thisselect2 = 'selected="selected"'; }else{ $thisselect2 = ""; }
		$post_type_object = get_post_type_object($post_type2);
		echo '<option value="'. $post_type .'" '. $thisselect2 .'>'.$post_type_object->labels->singular_name.'</option>';
	}
}
?>
</select>

					</td>
				</tr>

                <tr>
                    <th scope="row">Share Lable</th>
                    <td><input type="text" id="my_share_lable"  class="my_text_field"  name="myoption[_share][str]" value="<?php echo $my_theme_options[_share][str]; ?>" ></td>
                    <td><input type="checkbox" name="myoption[_share][t]" <?php if ($my_theme_options[_share][t] == 1) echo "checked"; ?> value="1"> register to WPML? </td>
                </tr>

                <tr>
                    <th scope="row">Share Code</th>
                    <td><textarea rows="3" cols="20" class="my_share_code"  name="myoption[share_code]"><?php echo $my_theme_options[share_code]; ?></textarea></td>
                    <td></td>
                </tr>

                <tr>
                    <th scope="row">Analysis Code</th>
                    <td><textarea rows="3" cols="20" class="my_analysis_code"  name="myoption[analysis]"><?php echo $my_theme_options[analysis]; ?></textarea></td>
                    <td></td>
                </tr>

                <tr>
                    <th scope="row" colspan="3"> <?php submit_button(); ?> </th>
                </tr> 
                <tr>
                    <th scope="row" colspan="3"><pre> <?php print_r($my_theme_options); ?> </pre></th>
                </tr> 

            </table>
        </form>
    </div>
  <style> 
 #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em;  height: 18px; }
 textarea { width: 100%; height: 200px;}
.form-table td, .form-table th{vertical-align: top;border: 1px solid #e2e2e2; } #my_theme_options input.image_upload { width: 100% } #my_theme_options img { max-width: 100px;}</style>	  
    <script>
        var $ =jQuery.noConflict();

        jQuery(document).ready(function($) {
			$( "#selectable" ).selectable({
			  stop: function() {
				var list_tag_selected = [];
				var result = $( "#select-result" ).empty();
				$( ".ui-selected", this ).each(function() { 
				  list_tag_selected.push($(this).attr("rel"));
				  $('#select_result').val(list_tag_selected.join("&"));
				});
			  }
			});

            $('#my_theme_options input.image_upload').live("click",function(){
                formfield = $(this).attr('name');
                field_id = $(this).attr('id');
                preview_img = $(this).parent().next().find('img');
				preview_id  = $(this).parent().next().find('input');
                //alert(field_id);
                tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
                return false;
            });
            window.send_to_editor = function(html) {

				imgelement = $('img',html);
				//alert(imgelement);
				$classes = imgelement.attr('class');
				imgurl = imgelement.attr('src');
				$image_id = $classes.replace(/(.*?)wp-image-/, '');
                $("#"+field_id).val(imgurl);
                preview_img.attr("src",imgurl); 
              	preview_id.val($image_id);
                tb_remove();
            }
        });
    </script>
    <?php
}

function my_theme_icl_register_string() {
    if (function_exists('icl_register_string')) {
        $my_theme_options = get_option('myoption');
        foreach ($my_theme_options as $key => $mt_option) {
            if (is_array($mt_option) && $mt_option[t] == 1) {
                icl_register_string('My theme options', $key, $mt_option[str]);
            }
        }
    }
}
?>