WordPress REST API kullanarak öne çıkan fotoğraf/dosya yükleme işlemi

WordPress’e dosya yüklemek için REST API’yi kullanmak oldukça basittir. İhtiyacınız olan tek şey dosyayı wp/v2/media aracılığı ile POST-Request etmek .

Dosya göndermenin iki yolu vardır. İlk yöntem, dosyayı isteğin gövdesine gönderir. Aşağıdaki PHP betiği temel prensibi gösterir:

PHP

<?php

$file = file_get_contents( 'test.jpg' );
$url = 'http://example.com/wp-json/wp/v2/media/';
$ch = curl_init();
$username = 'admin';
$password = 'password';

curl_setopt( $ch, CURLOPT_URL, $url );
curl_setopt( $ch, CURLOPT_POST, 1 );
curl_setopt( $ch, CURLOPT_POSTFIELDS, $file );
curl_setopt( $ch, CURLOPT_HTTPHEADER, [
	'Content-Disposition: form-data; filename="example.jpg"',
	'Authorization: Basic ' . base64_encode( $username . ':' . $password ),
] );
$result = curl_exec( $ch );
curl_close( $ch );
print_r( json_decode( $result ) );
?>

Medya dosyalarını yükleyebilecek bir kullanıcı olarak oturum açtığınızdan emin olmanız gerekir. Örneğimizde Temel kimlik doğrulamayı kullanıyoruz. Content-Disposition Başlıklar aracılığıyla dosya adını da eklediğiniz yeri de göndermeniz gerekir .

Dosyanın kendisi basitçe isteğin gövdesine gönderilir.

Bonus: Javascript kullanarak bir dosya yükleyelim

<?php
/**
 * Plugin Name: Upload a file via the REST API
 * Description: Upload a file with Javascript using the Rest API.
 * License: GPLv2
 */

add_action( 'wp_enqueue_scripts', function() {

	wp_register_script( 'rest-uploader', plugins_url( '/assets/js/script.js', __FILE__ ), [ 'jquery' ] );
	$js_vars = [
		'endpoint' => esc_url_raw( rest_url( '/wp/v2/media/' ) ),
		'nonce'    => wp_create_nonce( 'wp_rest' ),
	];
	wp_localize_script( 'rest-uploader', 'RestVars', $js_vars );
} );

add_shortcode( 'uploader', function() {
	wp_enqueue_script( 'rest-uploader' );
	ob_start();
	?>

	<h2><?php esc_html_e( 'Upload a file', 'rest-uploader' ); ?></h2>
	<form method="post">
		<p>
			<label for="uploader-title">
				<?php esc_html_e( 'Title', 'rest-uploader' ); ?>:
			</label>
			<input id="uploader-title">

		</p>
		<p>
			<label for="uploader-caption">
				<?php esc_html_e( 'Caption', 'rest-uploader' ); ?>:
			</label>
			<input id="uploader-caption">

		</p>
		<p>
			<label for="uploader-file">
				<?php esc_html_e( 'File', 'rest-uploader' ); ?>:
			</label>
			<input id="uploader-file" type="file">
		</p>
		<button id="uploader-send"><?php esc_html_e( 'Send', 'rest-uploader' ); ?></button>
	</form>
	<?php
	$content = ob_get_contents();
	ob_end_clean();
	return $content;
} );

jQuery( document ).ready( function() {
	jQuery( '#uploader-send' ).click( function( event ) {

		event.preventDefault();

		var title = jQuery( '#uploader-title' ).val();
		if ( ! title.length ) {
			alert( 'Please enter a title!' );
		}
		var caption = jQuery( '#uploader-caption' ).val();
		if ( ! caption.length ) {
			alert( 'Please enter a caption!' );
		}
		// Check, if a file is selected.
		if ( 'undefined' === typeof( jQuery( '#uploader-file' )[0].files[0] ) ) {
			alert( 'Select a file!' );
			return;
		}
		// Grab the file from the input.
		var file = jQuery( '#uploader-file' )[0].files[0];
		var formData = new FormData();
		formData.append( 'file', file );
		formData.append( 'title', title );
		formData.append( 'caption', caption );

		// Fire the request.
		jQuery.ajax( {
			url: RestVars.endpoint,
			method: 'POST',
			processData: false,
			contentType: false,
			beforeSend: function ( xhr ) {
				xhr.setRequestHeader( 'X-WP-Nonce', RestVars.nonce );
			},
			data: formData
		} ).success( function ( response ) {
			console.log( response.id )
		} ).error( function( response ) {
			console.log( 'error' );
			console.log( response );
		});
	} );
});