Advertisement
  1. Code
  2. Plugins

Разрешите пользователям отправлять изображения на ваш сайт WordPress

by
Length:LongLanguages:

Russian (Pусский) translation by Katharina Nevolina (you can also view the original English article)

В этом уроке вы узнаете, как создать плагин, который позволяет пользователям отправлять изображения и загружать их в медиа-библиотеку WordPress.  Вы также узнаете, как правильно удалять изображения из медиа-библиотеки WordPress, а также выполнять базовую проверку загружаемых изображений.


Предварительно ...

Этот урок создан по просьбе некоторых пользователей, которые нашли интересным урок по плагинам quotes, но были особенно заинтересованы в том, как использовать тот же метод для загрузки изображений из интерфейса.  Итак, вот повторение этого урока, который делает именно это.  Подробную информацию о настройке плагинов, коротких кодах и nonces см. в предыдущем учебнике.

Плагин будет:

  • отображать форму загрузки изображения с использованием короткого кода
  • принимать только изображения определенного типа и максимального размера
  • добавлять пользовательский тип сообщения для пользовательских изображений
  • добавлять изображения в медиатеку WordPress с соответствующей прикрепленной надписью 
  • отображать неопубликованные изображения
  • позволит пользователям удалять свои неопубликованные изображения

Мы будем использовать встроенное текстовое поле для изображений в WordPress (aka Рекомендуемое изображение), чтобы удержать изображение для каждого сообщения. Это также облегчает отображение и работу с нашим изображением, так как мы можем использовать функции post_thumbnail.

Вот к чему мы стремимся:

Весь код доступен в источнике плагина в начале этого руководства.


Шаг 1 Настройка плагина

Создайте файл плагина с именем submit_user_images.php в каталоге wp-content/plugins/submit-user-images.

Обратитесь к источнику плагина для информации заголовка плагина.


Шаг 2 Функция инициализации плагина

Мы собираемся создать персонализированный тип сообщения с именем user_images для хранения наших изображений пользователей и пользовательской таксономии с именем user_image_category. Это включит более чистое администрирование изображений, чем просто приписывать их обычным сообщениям и категориям.

Инициативная ловушка и функция

Мы будем использовать следующий код инициализации для создания нашего настраиваемого типа сообщений и пользовательской таксономии:

Что делает этот код:

Теперь у нас появится меню User Images в нашей панели управления администратора и способ администрирования изображений пользователей и их категорий.


Шаг 3 Настройка некоторых значений по умолчанию

Нам нужно сделать некоторую базовую проверку, поэтому давайте определим две константы для дальнейшего использования:


Шаг 4 Определите короткий код

Мы определим короткий код, который позволит нам отображать (и обрабатывать) форму отправки изображений пользователя в сообщении или на странице:


Безопасность

Поскольку наш плагин принимает данные от пользователя, мы реализуем следующие механизмы безопасности:

  • только зарегистрированные пользователи имеют доступ к форме отправки изображения
  • мы используем nonces для проверки того, что формы были сгенерированы нашим плагином
  • изображения передаются с использованием wp_insert_post, который дезактивирует данные перед сохранением их в базе данных
  • пользователи могут просматривать только свои собственные изображения, а nonces не позволяют им удалять сообщения других пользователей

Шаг 5 Основная функция

Это функция, вызванная нашим коротким кодом. Он отображает и обрабатывает форму отправки изображения и форму для распечатки/удаления изображения. Мы будем брать его маленькими кусочками, и на шаге 6 мы рассмотрим вспомогательные функции.

  • проверьте, вошел ли пользователь в систему
  • захватите переменную WordPress $ current_user, которую нам нужно получить для ID нашего пользователя
  • если форма изображения была отправлена, будет поле sui_upload_image_form_submitted, которое было создано нашей функцией wp_nonce_field.  Затем мы можем проверить nonce и приступить к обработке представленного изображения
  • выполните проверку путем передачи входного файла (где хранятся данные загруженного изображения) и входных данных заголовка в функцию проверки, sui_parse_file_errors и отображения любых возвращенных ошибок
  • постройте массив, в котором состояние сообщения должно быть отложено (администратору теперь нужно будет утвердить его для публикации), установите тип сообщения user_images (наш пользовательский тип сообщения) и установите автора сообщения с изображением в текущий вход в систему пользователя
  • если сообщение об изображении было успешно вставлено, сохраните изображение в медиатеке WordPress (sui_process_image) и, наконец, установите категорию для сообщения изображения и отобразите сообщение об успешном завершении
  • если была отправлена форма удаления изображения, будет поле sui_form_delete_submitted, которое было создано нашей функцией wp_nonce_field.  Затем мы можем проверить nonce и перейти к обработке массива изображений, проверенных для удаления
  • мы проверяем, что на самом деле у нас есть некоторые изображения, проверенные для удаления, путем тестирования $ _POST ['sui_image_delete_id'].  Если это так, мы передаем их функции sui_delete_user_images (см. Шаг 6)
  • если изображения были удалены, отображается сообщение об успешном завершении
  • мы выводим форму загрузки изображения
  • наконец, мы выводим форму списка / удаления изображений, передавая идентификатор пользователя функции sui_get_user_images_table (см. Шаг 6)

Шаг 6 Вспомогательные функции

Здесь мы рассмотрим функции, которые генерируют формы, добавляют изображения в медиа-библиотеку и функцию, которая удаляет выбранные изображения. 

  • функция принимает 2 опциональных аргумента для повторного заполнения полей формы.  Это удобно для пользователя. 
  • выводится поле nonce, которое мы проверяем при отправке формы
  • выводим выпадающее меню для категорий изображений, вызывая sui_get_image_categories_dropdown (см. Следующую функцию)
  • функция принимает 2 аргумента, включая элемент ID, выбранной в данный момент категории 
  • мы используем функцию WordPress wp_dropdown_categories для создания раскрывающегося списка, в котором перечислены категории пользовательских изображений из таксономии user_image_category (наша пользовательская таксономия). 
  • принимает ID пользователя, потому что нам нужно получить список пользовательских изображений только для текущего пользователя 
  • создает $args, чтобы указать нашего пользователя, тип сообщения user_images и пользовательские изображения, которые находятся на рассмотрении (еще не опубликованы администратором)
  • выполняет пользовательский запрос с использованием WP_Query 
  • вернуть false, если наш запрос не возвращает никакие изображения пользователя
  • запустить форму и сгенерировать nonce для формы
  • прокрутить записи изображений, чтобы убедиться, что мы также захватим категорию сообщения об изображении
  • создайте флажок nonce для удаления изображения, присвойте уникальное имя для nonce, объединив ID сообщения изображения пользователя
  • вывод строки таблицы, содержащей информацию о сообщении изображения, а также флажок удаления

Зачем добавлять nonce для каждого изображения?

Формами можно манипулировать в браузере для отправки неожиданных данных.  В нашем случае каждому флажку delete присваивается значение сообщения.  Но что, если злонамеренный пользователь изменил это значение и заставил нашу функцию удаления отменить сообщение, которое на самом деле не указано?

Один из способов избежать этого - использовать nonces для каждой строки почтовых данных, обеспечивая уникальность имени nonce, при этом значение столбца должно быть удалено. Затем мы проверяем сообщение nonce при отправке формы, чтобы убедиться, что это истинное возвращаемое значение. 

  • функция принимает массив ID сообщений изображения для удаления
  •  каждый ID сообщения изображения проверяется, чтобы узнать, было ли для него сгенерировано nonce
  • если nonce проверяется, мы удаляем вложение изображения, которое существует в медиа-библиотеке, передавая ID изображения сообщения в функцию WordPress wp_delete_attachment 
  • мы также удаляем сообщение изображения с помощью функции WordPress wp_trash_post

Но не удаляется ли вложение эскизов, когда сообщение оборвано? 

Нет, и это потому, что WordPress хранит вложения как обычные записи в таблице базы данных сообщений. Посмотрите сами: все вложения хранятся в таблице сообщений с post_type вложения. Простое удаление типа пользователя user_images не удаляет его вложение в миниатюру. Он остается в медиа-библиотеке для будущего использования, если мы специально не удалим его с помощью wp_delete_attachment. Для наших целей я подумал, что лучше удалять вложение, когда сообщение пользователя было удалено. 


Шаг 7 Функции обработки изображений

Напомним, как выглядит вывод ввода файла html, когда он помещает изображение в ваш скрипт:

Мы передаем этот массив к функции sui_process_image вместе с идентификатором сохраненной записи изображения пользователя и заголовком подчищенного изображения. 

  • нам нужно включить сценарии администратора WordPress, которые обрабатывают загрузку изображений за кадром 
  • мы вызываем функцию media_handle_upload (которая является частью медиафайла .php),  передавая ему загруженный массив файлов и идентификатор сообщения
  • теперь у нас есть идентификатор вложения, который мы можем использовать с помощью update_post_meta, чтобы назначить вложение для сообщения в виде миниатюры.  Примечание: "_thumbnail_id" ссылается на мета-поле внутреннего миниатюра (обработанное изображение).  Внутренние поля Wordpress начинаются с подчеркивания. 
  • затем мы используем идентификатор вложения, чтобы обновить заголовок вложения, используя функцию wp_update_post

Поскольку вложения - это просто регулярные сообщения, если мы обновляем поле post_excerpt для вложения, мы фактически обновляем поле заголовка вложения, как показано на экране редактирования медиа-библиотеки.

Функция проверки

Мы также проверяем массив файлов и пользовательскую подпись изображения с помощью функции sui_parse_file_errors. 

  • проверить элемент ошибки массива файлов для ошибки загрузки html, если он найден, возвращает массив результатов с ошибкой
  • запустите некоторое регулярное выражение в заголовке изображения, чтобы удалить все, кроме буквенно-цифровых данных и пробелов, заменяя пробелы для удобства чтения
  • если у нас заканчивается пустой заголовок после его очистки, мы возвращаем ошибку
  • проверьте внутренний тип изображения (не доверяйте расширению файла) с помощью функции PHP getimagesize с постоянной TYPE_WHITELIST
  • проверьте размер изображения вопреки константе MAX_UPLOAD_SIZE

Шаг 8 Некоторые стили. 

Просто отбросьте эту информацию  о стиле в файл style.css в папке темы:


Шаг 9 Попробуйте 

Активируйте плагин, введите короткий код на странице, зайдите на свой сайт и проверьте его.  Когда вы загрузите изображение, вы увидите новое сообщение в меню Пользовательские изображения.  Он будет опубликован.  Вы также увидите новое изображение, включенное в вашу медиа-библиотеку, прикрепленное к вашему новому сообщению, с заголовком, как предусмотрено.

Полный источник кода плагина и ссылка на демо-сайт указаны в верхней части этого урока. 

Исходная папка также содержит шаблон страницы Wordpress с настраиваемым циклом, который отображает опубликованные изображения для всех пользователей.


Последние размышления

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

Также мы создали заголовок приложения, обновив поле вложения post_excerpt. Вы также можете установить описание вложения, используя поле вложения post_content.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.