Загрузка миниатюры записи через внешний интерфейс

7 мар. 2011 г., 22:33:26
Просмотры: 23.2K
Голосов: 9

Мы хотели бы дать пользователям возможность загружать миниатюры при редактировании записей. Как это можно реализовать? Я предполагаю, что это будет использовать AJAX функции WordPress.

Есть идеи,

Марвеллоус

0
Все ответы на вопрос 1
8
25

Загрузка файлов через ajax немного сложна, потому что нельзя загружать файлы с помощью объекта XMLHttpRequest браузера, поэтому необходимо использовать какой-либо плагин для ajax-загрузки. Самый простой вариант — это JQuery Form Plugin, который значительно упрощает процесс и уже включен в WordPress. Чтобы его использовать, нужно подключить его следующим образом:

add_action('wp_print_scripts','include_jquery_form_plugin');
function include_jquery_form_plugin(){
    if (is_page('12')){ // добавляем только на странице, где разрешена загрузка
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); 
    }
}

На этой странице добавьте форму загрузки и jQuery-код для вызова плагина JQuery Form. Например:

<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="Загрузить">
</form>
<div id="output1"></div>
<script>
$(document).ready(function() { 
    var options = { 
        target:        '#output1',      // элемент(ы), которые будут обновлены ответом сервера
        beforeSubmit:  showRequest,     // функция перед отправкой
        success:       showResponse,    // функция после успешной отправки
        url:    ajaxurl                 // ajaxurl определен в админке и указывает на admin-ajax.php     
    }; 

    // привязываем форму с помощью 'ajaxForm'
    $('#thumbnail_upload').ajaxForm(options); 
});
function showRequest(formData, jqForm, options) {
// дополнительные действия перед отправкой, например, отключение кнопки
$('#output1').html('Отправка...');
$('#submit-ajax').attr("disabled", "disabled");
}
function showResponse(responseText, statusText, xhr, $form)  {
// дополнительные действия после успешной отправки
}
</script>

Замените POSTID на реальный ID поста.

Затем создайте функцию Ajax для обработки загрузки файла и обновления миниатюры поста:

// подключаем Ajax-запрос
// для авторизованных пользователей
add_action('wp_ajax_my_upload_action', 'my_ajax_upload');
// для неавторизованных пользователей
add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload');

function my_ajax_upload(){
// базовая проверка безопасности
    check_ajax_referer('upload_thumb');

// получаем данные POST
    $post_id = $_POST['post_id'];

// подключаем необходимые файлы
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
// обрабатываем загруженные файлы с помощью media_handle_upload()
    if ($_FILES) {
        foreach ($_FILES as $file => $array) {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                echo "Ошибка загрузки: " . $_FILES[$file]['error'];
                die();
            }
            $attach_id = media_handle_upload( $file, $post_id );
        }   
    }
// если нужно установить изображение как миниатюру поста:
  update_post_meta($post_id,'_thumbnail_id',$attach_id);
  echo "Новая миниатюра загружена";
  die();
} 

Надеюсь, это поможет.

7 мар. 2011 г. 23:25:57
Комментарии

Это просто великолепно. Осталось только пару вопросов. А именно, куда нужно вставлять каждый фрагмент кода. Очевидно, саму форму нужно разместить на нужной странице, и её ID поста будет использоваться. Первый add_action - он добавляется в раздел HEAD или в functions.php? И последний блок с AJAX, начинающийся с //hook the ajax call - куда его вставлять? Большое спасибо.

Robin I Knight Robin I Knight
9 мар. 2011 г. 13:50:25

Первый и последний фрагменты кода можно разместить в любом месте вашего файла functions.php, а второй фрагмент нужно разместить на странице, где должна отображаться форма загрузки. Также вы можете преобразовать второй фрагмент в шорткод для удобства.

Bainternet Bainternet
9 мар. 2011 г. 13:58:23

Что мне непонятно - как форма узнаёт, что нужно использовать my_ajax_upload()? Разве это не должно быть указано в AJAX-вызове? Я спрашиваю, потому что у меня есть цикл постов, которые можно редактировать, и для обработки разных постов нужны разные функции.

Pollux Khafra Pollux Khafra
29 нояб. 2012 г. 15:31:39

Форма знает, что нужно использовать my_ajax_upload, потому что её атрибут action связан (add_action(...) с функцией my_ajax_upload.

Bainternet Bainternet
29 нояб. 2012 г. 20:05:44

Были ли недавние изменения в WP, которые могли повлиять на эту функциональность? По какой-то причине у меня нет данных $_POST к моменту выполнения my_ajax_upload, хотя в JS-колбэке showRequest параметр formData содержит всё, что ожидается.

drzaus drzaus
4 янв. 2013 г. 11:23:01

Странно, но если я изменяю метод формы на "GET", она всё равно выполняет POST-запрос, но с данными формы в URL, и только тогда данные формы становятся доступны на стороне сервера (хотя и в виде параметров URL). Обновление: За исключением файлов :)

drzaus drzaus
4 янв. 2013 г. 11:48:50

@Bainternet, Отличное решение. Функция обратного вызова post (showResponse) не работает. У вас есть какие-либо предложения по этому поводу?

Rocker Maruf Rocker Maruf
27 янв. 2015 г. 18:09:01

Не работает? Какие-либо ошибки?

Bainternet Bainternet
28 янв. 2015 г. 10:40:40
Показать остальные 3 комментариев