将媒体上载按钮添加到用户配置文件页面(遵循教程)

时间：2013-10-12 作者：tristanojbacon

我目前正在学习史蒂文·斯莱克（StevenSlack）的教程s2webpress.com 关于如何将作者图像上载字段添加到用户配置文件页面。除了允许我使用WP 3.5 media manager系统的部分之外，我已经设法使大部分功能正常工作。

我试图添加的jQuery代码段位于以下代码中：

/**
 * Adds additional user fields
 * more info: http://justintadlock.com/archives/2009/09/10/adding-and-using-custom-user-profile-fields
 */

function bck_authorimagefield( $user ) { ?>

    <h3><?php _e( \'Author Image\', \'textdomain\' ); ?></h3>

    <table class="form-table">

        <tr>
            <th><label for="user_meta_image"><?php _e( \'The author profile picture\', \'textdomain\' ); ?></label></th>
            <td>
                <!-- Outputs the image after save -->
                <img src="<?php echo esc_url( get_the_author_meta( \'user_meta_image\', $user->ID ) ); ?>" style="width:150px;"><br />
                <!-- Outputs the text field and displays the URL of the image retrieved by the media uploader -->
                <input type="text" name="user_meta_image" id="user_meta_image" value="<?php echo esc_url_raw( get_the_author_meta( \'user_meta_image\', $user->ID ) ); ?>" class="regular-text" />
                <!-- Outputs the save button -->
                <input type=\'button\' class="additional-user-image button-primary" value="<?php _e( \'Upload Image\', \'textdomain\' ); ?>" id="uploadimage"/><br />
                <span class="description"><?php _e( \'Upload an additional image for your user profile.\', \'textdomain\' ); ?></span>
            </td>
        </tr>

    </table><!-- end form-table -->
<?php } // bck_authorimagefield

add_action( \'show_user_profile\', \'bck_authorimagefield\' );
add_action( \'edit_user_profile\', \'bck_authorimagefield\' );

/**
* Saves additional user fields to the database
*/
function bck_saveauthorimagefield( $user_id ) {

    // only saves if the current user can edit user profiles
    if ( !current_user_can( \'edit_user\', $user_id ) )
        return false;

    update_usermeta( $user_id, \'user_meta_image\', $_POST[\'user_meta_image\'] );
}

add_action( \'personal_options_update\', \'bck_saveauthorimagefield\' );
add_action( \'edit_user_profile_update\', \'bck_saveauthorimagefield\' );


/*
 * Adapted from: http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
 */
jQuery(document).ready(function($){
// Uploading files
var file_frame;

  $(\'.additional-user-image\').on(\'click\', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
      file_frame.open();
      return;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
      title: $( this ).data( \'uploader_title\' ),
      button: {
        text: $( this ).data( \'uploader_button_text\' ),
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });

    // When an image is selected, run a callback.
    file_frame.on( \'select\', function() {
      // We set multiple to false so only get one image from the uploader
      attachment = file_frame.state().get(\'selection\').first().toJSON();

      // Do something with attachment.id and/or attachment.url here
    });

    // Finally, open the modal
    file_frame.open();
  });

});
/**
 * Return an ID of an attachment by searching the database with the file URL.
 *
 * First checks to see if the $url is pointing to a file that exists in
 * the wp-content directory. If so, then we search the database for a
 * partial match consisting of the remaining path AFTER the wp-content
 * directory. Finally, if a match is found the attachment ID will be
 * returned.
 *
 * http://frankiejarrett.com/get-an-attachment-id-by-url-in-wordpress/
 *
 * @return {int} $attachment
 */
function bck_getattachmentimagebyurl( $url ) {

    // Split the $url into two parts with the wp-content directory as the separator.
    $parse_url  = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );

    // Get the host of the current site and the host of the $url, ignoring www.
    $this_host = str_ireplace( \'www.\', \'\', parse_url( home_url(), PHP_URL_HOST ) );
    $file_host = str_ireplace( \'www.\', \'\', parse_url( $url, PHP_URL_HOST ) );

    // Return nothing if there aren\'t any $url parts or if the current host and $url host do not match.
    if ( !isset( $parse_url[1] ) || empty( $parse_url[1] ) || ( $this_host != $file_host ) ) {
        return;
    }

    // Now we\'re going to quickly search the DB for any attachment GUID with a partial path match.
    // Example: /uploads/2013/05/test-image.jpg
    global $wpdb;

    $prefix     = $wpdb->prefix;
    $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM " . $prefix . "posts WHERE guid RLIKE %s;", $parse_url[1] ) );

    // Returns null if no attachment is found.
    return $attachment[0];
}

/*
 * Retrieve the appropriate image size
 */
function bck_getadditionalusermetathumb() {

    $attachment_url = esc_url( get_the_author_meta( \'user_meta_image\', $post->post_author ) );

    // grabs the id from the URL using Frankie Jarretts function
    $attachment_id = bck_getattachmentimagebyurl( $attachment_url );

    // retrieve the thumbnail size of our image
    $image_thumb = wp_get_attachment_image_src( $attachment_id, \'thumbnail\' );

    // return the image thumbnail
    return $image_thumb[0];

}

function bck_displayauthorimage() {
// retrieve our additional author meta info
$user_meta_image = esc_attr( get_the_author_meta( \'user_meta_image\', $post->post_author ) );

    // make sure the field is set
    if ( isset( $user_meta_image ) && $user_meta_image ) {

        // only display if function exists
        if ( function_exists( \'bck_getadditionalusermetathumb\' ) ) ?>
            <img alt="author photo" src="<?php echo bck_getadditionalusermetathumb(); ?>" class="author-photo" />

    <?php }      

}
但是，当我尝试激活此作者图像代码所包含的插件时，出现以下错误：

Parse error: syntax error, unexpected \'$\', expecting \'&\' or variable (T_VARIABLE) in [the file\'s base URL]/authorimage.php on line 154
第154行是我在上面添加的jQuery片段的第一行。我从插件中删除了这段代码，只留下了其他所有内容，当我在用户配置文件页面上按Upload Image时，没有出现任何对话框。

我错过什么了吗？我认为PHP可以包含jQuery，只要它从以下内容开始：jQuery(document).ready(function($){ ....

2 个回复
SO网友:brasofilo

是的，PHP中可以包含JavaScript（以及CSS和HTML），但您必须说明：“这里结束PHP->其他语言->这里开始PHP”，如下所示：

<?php
echo \'<div id="hide-me">something</div>\';
?>
<script>
// some JS to hide the div
</script>
<?php
echo \'another thing\';
另一方面，您的代码将无法工作，因为您将JS倾倒在一个不知名的地方。不清楚你是否在做插件(which you should) 或者在主题上使用它。在主题中，有时你可以这样做，但这里不是这样。

您需要将该JS代码添加为一个单独的文件，并使用：

add_action( \'admin_enqueue_scripts\', \'profile_script_wpse_117593\' );

function profile_script_wpse_117593( $hook_suffix ) 
{
    if ( \'profile.php\' == $hook_suffix ) 
    {
        // URL TO USE IN A PLUGIN: plugins_url( \'/js/script.js\', __FILE__ );
        wp_enqueue_script( 
             \'my-script\' // Handle
            , get_stylesheet_directory_uri() . \'/js/script.js\' // Theme URL
            , array( \'jquery\' ) // Dependencies
            , false // Version
            , true // In footer
        );
    }
}
或者我们可以懒散地直接在个人资料页的页脚中打印：

add_action( \'admin_footer-profile.php\', \'dump_script_wpse_117593\' );

function dump_script_wpse_117593()
{
    ?>
        <script type="text/javascript">
        jQuery(document).ready(function ($){
            alert(\'in!\');
        });
        </script>
    <?php
}
请注意，以屏幕为目标是很重要的，这样就不会将脚本排到整个管理区域。

SO网友:Steven Slack

这绝对是为了像上面提到的插件一样使用。jquery应该放在插件中适当的脚本文件中。我将更新这篇文章，并提到代码不应该是插入式的，也不应该使用代码。

它只能用作方法的演示。

结束
标签： plugins   php   jquery   小码农  

相关推荐

分类类别类别.php不起作用

我已经创建了自定义的帖子类型、分类法和类别。查看类别时，它似乎在使用索引。php并忽略WordPress模板层次结构。任何想法为什么分类。php，类别-{id}。php等不适用于自定义帖子类型类别，但适用于常规帖子？谢谢add_action(\'init\', \'collegestampede_register\'); function collegestampede_register() { $labels = array( \'na