web-dev-qa-db-ja.com

Ajaxを使ってユーザーメタを更新する

私はAjaxのフォームを使用して前面にユーザーのメタを編集したい、これは私が持っているものです：

フォームにはユーザーIDがあります。

<form id="<?php echo $current_user->ID; ?>"...

これがスクリプトです：

<script>
    jQuery( document ).ready( function() {
        jQuery( '#<?php echo $current_user->ID; ?>' ).submit( function( e ) {
            e.preventDefault();
            jQuery.ajax( {
                type: "POST",
                url: ajaxurl,
                data: "action=updateUserFront&id=" + <?php echo $post->ID?>,  
                success: function() {
                    alert( 'funcionó' );
                }
            } );
        } );
    } );
</script>

これは私が私のfunctions.phpファイルに持っているものです

function my_ajaxurl() {
    $html  = '<script type="text/javascript">';
    $html .= 'var ajaxurl = "' . admin_url( 'admin-ajax.php' ) . '"';
    $html .= '</script>';
    echo $html;
}
add_action( 'wp_head', 'my_ajaxurl' );

function updateUserFront_ajax() {
    $user_id    = get_current_user_id();
    $newVal     = 'test';
    $userUrl    = get_user_meta( $user_id, 'url', true ); 

    update_user_meta($post_id,'url',$newVal);

    die( $newVal );
}
add_action( 'wp_ajax_updateUserFront', 'updateUserFront_ajax' );
ajaxuser-metafront-end
2
Al Rosado

さて、標準化されたWordPressではないことがいくつかあるので、私は少しずつ説明する最小のスクリプトをまとめました。うまくいけば、最後になるまでに物事を片付けてください。

HTMLフォーム

以下は非常に単純なHTMLフォームです。我々は投稿を待ち受けて、実際にページを更新するのを止めるためにjavascriptを使用するつもりですが、それは後であります。

<form id="um_form" method="POST">
        <p>
            <label for="um_key">
                User Meta Value:&nbsp;&nbsp;
                <input type="text" name="um_key" id="um_key" value="" style="width:100%;" />
            </label>
            <input type="submit" value="Submit" />
        </p>
    </form>

フォームを$_POSTしていますが、必要に応じてフォームを$_GETすることもできます。このような状況では私はそれが重要だとは思わない。

スクリプトをエンキューする

そのため、WordPressにはwp_enqueue_scriptsという名前の適切な場所（ヘッダーまたはフッター）にスタイルとスクリプトをエンキューするために使用できるフックがあります。これを使って スクリプトをローカライズすることができます そして私達のJavascript、特にajax_urlに変数（あるいは望むなら2つ）を渡します。そうすることはこのような何かに見えます：

/**
 * Enqueue our Scripts and Styles Properly
 */
function theme_enqueue() {

    $theme_url  = get_template_directory_uri();     // Used to keep our Template Directory URL
    $ajax_url   = admin_url( 'admin-ajax.php' );        // Localized AJAX URL

    // Register Our Script for Localization
    wp_register_script(
        'um-modifications',                             // Our Custom Handle
        "{$theme_url}/scripts/um-modifications.js",  // Script URL, this script is located for me in `theme-name/scripts/um-modifications.js`
        array( 'jquery' ),                              // Dependant Array
        '1.0',                                          // Script Version ( Arbitrary )
        true                                            // Enqueue in Footer
    );

    // Localize Our Script so we can use `ajax_url`
    wp_localize_script(
        'um-modifications',
        'ajax_url',
        $ajax_url
    );

    // Finally enqueue our script
    wp_enqueue_script( 'um-modifications' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue' );

上記のコードはコメントが多いので、意味がわからない場合はコードのコメントを読んでください。これはあなたのfunctions.phpファイルに入ります。

私たちのJavascript/JQuery

この例では1つのmeta_valueしか処理していませんが、複数のmeta_valuesをデータオブジェクトに渡し、PHP by $_POSTインデックスでそれらを参照することもできます後で見てください。以下はscriptsディレクトリのtheme-name/scripts/um-modifications.jsにあります、そしてまた大いにコメントされます：

// Declare our JQuery Alias
jQuery( 'document' ).ready( function( $ ) {

    // Form submission listener
    $( '#um_form' ).submit( function() {

        // Grab our post meta value
        var um_val = $( '#um_form #um_key' ).val();

        // Do very simple value validation
        if( $( '#um_form #um_key' ).val().length ) {
            $.ajax( {
                url : ajax_url,                 // Use our localized variable that holds the AJAX URL
                type: 'POST',                   // Declare our ajax submission method ( GET or POST )
                data: {                         // This is our data object
                    action  : 'um_cb',          // AJAX POST Action
                    'first_name': um_val,       // Replace `um_key` with your user_meta key name
                }
            } )
            .success( function( results ) {
                console.log( 'User Meta Updated!' );
            } )
            .fail( function( data ) {
                console.log( data.responseText );
                console.log( 'Request failed: ' + data.statusText );
            } );

        } else {
            // Show user error message.
        }

        return false;   // Stop our form from submitting
    } );
} );

AJAX PHPコールバック/ハンドラ/アクション

最後に、実際の加工！注意すべき重要なことは、この関数の最後にあるフックです。

ここでは、現在のユーザーを取得し、それらのuser_meta、または必要に応じてユーザーオブジェクトを更新することができます。

/**
 * AJAX Callback
 * Always Echos and Exits
 */
function um_modifications_callback() {

    // Ensure we have the data we need to continue
    if( ! isset( $_POST ) || empty( $_POST ) || ! is_user_logged_in() ) {

        // If we don't - return custom error message and exit
        header( 'HTTP/1.1 400 Empty POST Values' );
        echo 'Could Not Verify POST Values.';
        exit;
    }

    $user_id        = get_current_user_id();                            // Get our current user ID
    $um_val         = sanitize_text_field( $_POST['first_name'] );      // Sanitize our user meta value
    $um_user_email  = sanitize_text_field( $_POST['user_email'] );      // Sanitize our user email field

    update_user_meta( $user_id, 'first_name', $um_val );                // Update our user meta
    wp_update_user( array(
        'ID'            => $user_id,
        'user_email'    => $um_user_email,
    ) );

    exit;
}
add_action( 'wp_ajax_nopriv_um_cb', 'um_modifications_callback' );
add_action( 'wp_ajax_um_cb', 'um_modifications_callback' );

うまくいけば、これによって理解しやすくなり、視覚化しやすくなります。質問がある場合は、以下にコメントしてください。

3
Howdy_McGee