質問: フロントエンドから投稿のサムネイルをアップロードする 投稿を編集するときに、投稿のサムネイルをアップロードできるようにします。これはどのように行われますか。私はそれがワードプレスのajax機能を利用するだろうと想像するでしょう。何か案は、素晴らしい
回答: ブラウザのxmlhttprequestオブジェクトを使用してファイルをアップロードすることは不可能なので、ajaxでファイルをアップロードするのは少しトリッキーです。ajaxアップロードプラグインを使用する必要があり、最も簡単なものは jquery form pluginです。 _ これは物事をはるかに簡単にし、それはwordpressに含まれています。それを使うためには、それをエンキューする必要があります。add_action('wp_print_scripts','include_jquery_form_plugin'); function include_jquery_form_plugin(){ if (is_page('12')){ // only add this on the page that allows the upload wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); } } そのページにアップロードフォームとjqueryを追加してjqueryフォームプラグインを呼び出します。<form id="thumbnail_upload" method="post" action="#" enctype="multipart/form-data" > <input type="file" name="thumbnail" id="thumbnail"> <input type='hidden' value='<?php wp_create_nonce( 'upload_thumb' ); ?>' name='_nonce' /> <input type="hidden" name="post_id" id="post_id" value="postid"> <input type="hidden" name="action" id="action" value="my_upload_action"> <input id="submit-ajax" name="submit-ajax" type="submit" value="upload"> <form> <div id="output1"></div> <script> $(document).ready(function() { var options = { target: '#output1', // target element(s) to be updated with server response beforesubmit: showrequest, // pre-submit callback success: showresponse, // post-submit callback url: ajaxurl // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php }; // bind form using 'ajaxform' $('#thumbnail_upload').ajaxform(options); }); function showrequest(formdata, jqform, options) { //do extra stuff before submit like disable the submit button $('#output1').html('sending...'); $('#submit-ajax').attr("disabled", "disabled"); } function showresponse(responsetext, statustext, xhr, $form) { //do extra stuff after submit } </script> 実際の投稿idでpostidを更新する必要があります。次に、ファイルのアップロードを受け入れて投稿のサムネイルを更新するajax関数を作成します。//hook the ajax call //for logged-in users add_action('wp_ajax_my_upload_action', 'my_ajax_upload'); //for none logged-in users add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload'); function my_ajax_upload(){ //simple security check check_ajax_referer('upload_thumb'); //get post data $post_id = $_post['post_id']; //require the needed files require_once(abspath . "wp-admin" . '/includes/image.php'); require_once(abspath . "wp-admin" . '/includes/file.php'); require_once(abspath . "wp-admin" . '/includes/media.php'); //then loop over the files that were sent and store them using media_handle_upload(); if ($_files) { foreach ($_files as $file => $array) { if ($_files[$file]['error'] !== upload_err_ok) { echo "upload error : " . $_files[$file]['error']; die(); } $attach_id = media_handle_upload( $file, $post_id ); } } //and if you want to set that image as post then use: update_post_meta($post_id,'_thumbnail_id',$attach_id); echo "uploaded the new thumbnail"; die(); } お役に立てれば