私は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' );
さて、標準化されたWordPressではないことがいくつかあるので、私は少しずつ説明する最小のスクリプトをまとめました。うまくいけば、最後になるまでに物事を片付けてください。
以下は非常に単純なHTMLフォームです。我々は投稿を待ち受けて、実際にページを更新するのを止めるためにjavascriptを使用するつもりですが、それは後であります。
<form id="um_form" method="POST">
<p>
<label for="um_key">
User Meta Value:
<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
ファイルに入ります。
この例では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
} );
} );
最後に、実際の加工!注意すべき重要なことは、この関数の最後にあるフックです。
ここでは、現在のユーザーを取得し、それらの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' );
うまくいけば、これによって理解しやすくなり、視覚化しやすくなります。質問がある場合は、以下にコメントしてください。