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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<?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; } ); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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 ); }); } ); }); |