Upload images - Theme options

时间：2013-01-20 作者：Valeka

我正在使用这个很棒的[图坦卡门+教程][1]创建主题选项页面。这对我来说很好，因为我需要通过css更改div的背景图像。它可以很好地与一个图像，但我不知道如何使它与2个图像？

如果你能告诉我我做错了什么，那将是一个巨大的帮助？谢谢

  <?php
function wptuts_get_default_options() {
    $options = array();
        $options[] = array(\'logo\' => \'\');
        $options[] = array(\'fav\' => \'\');
    return $options;
}


function wptuts_options_init() {
     $wptuts_options = get_option( \'theme_wptuts_options\' );

     // Are our options saved in the DB?
     if ( false === $wptuts_options ) {
          // If not, we\'ll save our default options
          $wptuts_options = wptuts_get_default_options();
          add_option( \'theme_wptuts_options\', $wptuts_options );
     }

     // In other case we don\'t need to update the DB
}
// Initialize Theme options
add_action( \'after_setup_theme\', \'wptuts_options_init\' );

function wptuts_options_setup() {
    global $pagenow;
    if (\'media-upload.php\' == $pagenow || \'async-upload.php\' == $pagenow) {
        // Now we\'ll replace the \'Insert into Post Button inside Thickbox\' 
        add_filter( \'gettext\', \'replace_thickbox_text\' , 1, 2 );
    }
}
add_action( \'admin_init\', \'wptuts_options_setup\' );

function replace_thickbox_text($translated_text, $text ) {  
    if ( \'Insert into Post\' == $text ) {
        $referer = strpos( wp_get_referer(), \'wptuts-settings\' );
        if ( $referer != \'\' ) {
            return __(\'I want this to be my Image!\', \'wptuts\' );
        }
    }

    return $translated_text;
}

// Add "WPTuts Options" link to the "Appearance" menu
function wptuts_menu_options() {
    //add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);
     add_theme_page(\'WPTuts Options\', \'WPTuts Options\', \'edit_theme_options\', \'wptuts-settings\', \'wptuts_admin_options_page\');
}
// Load the Admin Options page
add_action(\'admin_menu\', \'wptuts_menu_options\');

function wptuts_admin_options_page() {
    ?>
        <!-- \'wrap\',\'submit\',\'icon32\',\'button-primary\' and \'button-secondary\' are classes 
        for a good WP Admin Panel viewing and are predefined by WP CSS -->



        <div class="wrap">

            <div id="icon-themes" class="icon32"><br /></div>

            <h2><?php _e( \'WPTuts Options\', \'wptuts\' ); ?></h2>

            <!-- If we have any error by submiting the form, they will appear here -->
            <?php settings_errors( \'wptuts-settings-errors\' ); ?>

            <form id="form-wptuts-options" action="options.php" method="post" enctype="multipart/form-data">

                <?php
                    settings_fields(\'theme_wptuts_options\');
                    do_settings_sections(\'wptuts\');
                ?>

                <p class="submit">
                    <input name="theme_wptuts_options[submit]" id="submit_options_form" type="submit" class="button-primary" value="<?php esc_attr_e(\'Save Settings\', \'wptuts\'); ?>" />
                    <input name="theme_wptuts_options[reset]" type="submit" class="button-secondary" value="<?php esc_attr_e(\'Reset Defaults\', \'wptuts\'); ?>" />        
                </p>

            </form>

        </div>
    <?php
}

function wptuts_options_validate( $input ) {
    $default_options = wptuts_get_default_options();
    $valid_input = $default_options;

    $wptuts_options = get_option(\'theme_wptuts_options\');

    $submit = ! empty($input[\'submit\']) ? true : false;
    $reset = ! empty($input[\'reset\']) ? true : false;
    $delete_logo = ! empty($input[\'delete_logo\']) ? true : false;
    $delete_fav = ! empty($input[\'delete_fav\']) ? true : false;

    foreach ( $wptuts_options   as $wptuts_options ) {  
        if ( $submit ) {
            if ( $wptuts_options[\'logo\'] != $input[\'logo\']  && $wptuts_options[\'logo\'] != \'\' )
                delete_image( $wptuts_options[\'logo\'] );

            $valid_input[\'logo\'] = $input[\'logo\'];
        }
        elseif ( $reset ) {
            delete_image( $wptuts_options[\'logo\'] );
            $valid_input[\'logo\'] = $default_options[\'logo\'];
        }
        elseif ( $delete_logo ) {
            delete_image( $wptuts_options[\'logo\'] );
            $valid_input[\'logo\'] = \'\';
        }
        if ( $submit ) {
            if ( $wptuts_options[\'fav\'] != $input[\'fav\']  && $wptuts_options[\'fav\'] != \'\' )
                delete_image( $wptuts_options[\'fav\'] );

            $valid_input[\'fav\'] = $input[\'fav\'];
        }
        elseif ( $reset ) {
            delete_image( $wptuts_options[\'fav\'] );
            $valid_input[\'fav\'] = $default_options[\'fav\'];
        }
        elseif ( $delete_fav ) {
            delete_image( $wptuts_options[\'fav\'] );
            $valid_input[\'fav\'] = \'\';
        }

    return $valid_input;
}

function delete_image( $image_url ) {
    global $wpdb;

    // We need to get the image\'s meta ID..
    $query = "SELECT ID FROM wp_posts where guid = \'" . esc_url($image_url) . "\' AND post_type = \'attachment\'";  
    $results = $wpdb -> get_results($query);

    // And delete them (if more than one attachment is in the Library
    foreach ( $results as $row ) {
        wp_delete_attachment( $row -> ID );
    }   
}

/********************* JAVASCRIPT ******************************/
function wptuts_options_enqueue_scripts() {
    wp_register_script( \'wptuts-upload\', get_template_directory_uri() .\'/wptuts-options/js/wptuts-upload.js\', array(\'jquery\',\'media-upload\',\'thickbox\') );  

    if ( \'appearance_page_wptuts-settings\' == get_current_screen() -> id ) {
        wp_enqueue_script(\'jquery\');

        wp_enqueue_script(\'thickbox\');
        wp_enqueue_style(\'thickbox\');

        wp_enqueue_script(\'media-upload\');
        wp_enqueue_script(\'wptuts-upload\');

    }

}
add_action(\'admin_enqueue_scripts\', \'wptuts_options_enqueue_scripts\');


function wptuts_options_settings_init() {
    register_setting( \'theme_wptuts_options\', \'theme_wptuts_options\', \'wptuts_options_validate\' );

    // Add a form section for the Logo
    add_settings_section(\'wptuts_settings_header\', __( \'Logo Options\', \'wptuts\' ), \'wptuts_settings_header_text\', \'wptuts\');
    // Add Logo uploader
    add_settings_field(\'wptuts_setting_logo\',  __( \'Logo\', \'wptuts\' ), \'wptuts_setting_logo\', \'wptuts\', \'wptuts_settings_header\');
    // Add Current Image Preview 
    add_settings_field(\'wptuts_setting_logo_preview\',  __( \'Logo Preview\', \'wptuts\' ), \'wptuts_setting_logo_preview\', \'wptuts\', \'wptuts_settings_header\');

    // Add a form section for the fav
    add_settings_section(\'wptuts_settings_header\', __( \'fav Options\', \'wptuts\' ), \'wptuts_settings_header_text\', \'wptuts\');
    // Add fav uploader
    add_settings_field(\'wptuts_setting_fav\',  __( \'fav\', \'wptuts\' ), \'wptuts_setting_fav\', \'wptuts\', \'wptuts_settings_header\');
    // Add Current Image Preview 
    add_settings_field(\'wptuts_setting_fav_preview\',  __( \'fav Preview\', \'wptuts\' ), \'wptuts_setting_fav_preview\', \'wptuts\', \'wptuts_settings_header\'); 

}
add_action( \'admin_init\', \'wptuts_options_settings_init\' );

function wptuts_setting_logo_preview() {
    $wptuts_options = get_option( \'theme_wptuts_options\' );  ?>
    <div id="upload_logo_preview" style="min-height: 100px;">
        <img style="max-width:100%;" src="<?php echo esc_url( $wptuts_options[\'logo\'] ); ?>" />
    </div>
    <?php
}

function wptuts_setting_fav_preview() {
    $wptuts_options = get_option( \'theme_wptuts_options\' );  ?>
    <div id="upload_fav_preview" style="min-height: 100px;">
        <img style="max-width:100%;" src="<?php echo esc_url( $wptuts_options[\'logo\'] ); ?>" />
    </div>
    <?php
}

function wptuts_settings_header_text() {
    ?>
        <p><?php _e( \'Manage Options for WpTuts Theme.\', \'wptuts\' ); ?></p>
    <?php
}

function wptuts_setting_logo() {
    $wptuts_options = get_option( \'theme_wptuts_options\' );
    ?>
        <input type="hidden" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options[\'logo\'] ); ?>" />
        <input id="upload_logo_button" type="button" class="button" value="<?php _e( \'Upload Logo\', \'wptuts\' ); ?>" />
        <?php if ( \'\' != $wptuts_options[\'logo\'] ): ?>
            <input id="delete_logo_button" name="theme_wptuts_options[delete_logo]" type="submit" class="button" value="<?php _e( \'Delete Logo\', \'wptuts\' ); ?>" />
        <?php endif; ?>
        <span class="description"><?php _e(\'Upload an image for the banner.\', \'wptuts\' ); ?></span>
    <?php
}

function wptuts_setting_fav() {
    $wptuts_options = get_option( \'theme_wptuts_options\' );
    ?>
        <input type="hidden" id="fav_url" name="theme_wptuts_options[fav]" value="<?php echo esc_url( $wptuts_options[\'fav\'] ); ?>" />
        <input id="upload_fav_button" type="button" class="button" value="<?php _e( \'Upload fav\', \'wptuts\' ); ?>" />
        <?php if ( \'\' != $wptuts_options[\'fav\'] ): ?>
            <input id="delete_fav_button" name="theme_wptuts_options[delete_fav]" type="submit" class="button" value="<?php _e( \'Delete fav\', \'wptuts\' ); ?>" />
        <?php endif; ?>
        <span class="description"><?php _e(\'Upload an image for the banner.\', \'wptuts\' ); ?></span>
    <?php
}


?>

2 个回复

最合适的回答,由SO网友:Jennifer Michelle 整理而成

我无法对您的代码发表评论，但您可能会发现此链接很有用：

选项框架主题：http://wptheming.com/options-framework-theme/

这是你必须仔细编辑的东西，但它几乎有你能想到的所有类型的控件。它还有我能找到的唯一一个可以工作的MCE编辑器。我希望这样可以将文本保存在主题中，比如编辑页脚中的地址，或者版权。

SO网友:Chip Bennett

您需要将新选项添加到验证回调，wptuts_options_validate().

如果没有看到所有的代码，就不可能确定需要添加哪些确切的代码。但一般来说，验证回调的工作方式如下：使用Settings API，所有用户输入都被列入白名单：也就是说，只有在显式声明为有效选项的情况下，输入才会保存到数据库中，然后在保存之前进行消除。

假设您有3个选项：“A”、“B”和“C”。下面是验证回调的作用：

function validation_callback( $input ) {

}

首先$input 参数是$_POST 通过设置表单从用户传递的数据。这是不可信的数据。其思想是操作用户数据，然后将其保存在数据库中。

回调的白名单意味着函数将只显式操作已知的选项，然后将被操作的已知列表传递给数据库。大概是这样的：

function validation_callback( $input ) {
    // Get current option values
    // and use them as the current "valid" values
    $valid_input = get_option( \'some_options_group\' );
    // A is a checkbox
    // If it is set, then return true; else return false
    $valid_input[\'A\'] = ( isset( $input[\'A\'] ? \'true\' : \'false\' );
    // B is a select
    // If the value passed in $input is contained
    // in the array of known-good values, then return
    // $input value; else return the current value
    $valid_options_b = array( \'X\', \'Y\', \'Z\' );
    $valid_input[\'B\'] = ( in_array( $input[\'B\'], $valid_options_b ) ? $input[\'B\'] : $valid_input[\'B\'] );
    // C is plain text, for which no HTML is expected
    // Simply return filtered $input value if set;
    // else return an empty string
    $valid_input[\'C\'] = ( isset( $input[\'C\'] ) ? wp_filter_nohtml_kses( $input[\'C\'] ) : \'\' );

    // All known values have been sanitized,
    // so return those values
    return $valid_input;
}

现在，您需要添加另一个有效选项“D”。

如果您已经添加了选项本身，并且它出现在您的设置页面上，那就太好了。这是第一步。您的选项“D”现在将包含在$input 传递给验证回调的数组。

但是，由于您的回调没有选项“D”列入白名单，因此它基本上被过滤掉了$input, 从未保存到数据库。因此，您需要添加它。也许是这样：

// D is a file
// So let WordPress handle the file upload
$valid_input[\'D\'] = ( isset( $input[\'D\'] ) ? wp_handle_upload( $input[\'D\'] ) : $valid_input[\'D\'] );

您可以将其添加到验证回调中：

function validation_callback( $input ) {
    // Get current option values
    // and use them as the current "valid" values
    $valid_input = get_option( \'some_options_group\' );
    // A is a checkbox
    // If it is set, then return true; else return false
    $valid_input[\'A\'] = ( isset( $input[\'A\'] ? \'true\' : \'false\' );
    // B is a select
    // If the value passed in $input is contained
    // in the array of known-good values, then return
    // $input value; else return the current value
    $valid_options_b = array( \'X\', \'Y\', \'Z\' );
    $valid_input[\'B\'] = ( in_array( $input[\'B\'], $valid_options_b ) ? $input[\'B\'] : $valid_input[\'B\'] );
    // C is plain text, for which no HTML is expected
    // Simply return filtered $input value if set;
    // else return an empty string
    $valid_input[\'C\'] = ( isset( $input[\'C\'] ) ? wp_filter_nohtml_kses( $input[\'C\'] ) : \'\' );

    // ADD INPUT D HERE
    // D is a file
    // So let WordPress handle the file upload
    $valid_input[\'D\'] = ( isset( $input[\'D\'] ) ? wp_handle_upload( $input[\'D\'] ) : $valid_input[\'D\'] );

    // All known values have been sanitized,
    // so return those values
    return $valid_input;
}

现在，选项“D”已被列入白名单，应该正确保存到数据库中。

结束

小码农CODE

Upload images - Theme options

相关推荐

get excerpt without images