Как создать фотогалерею в дополнительных полях WordPress

26
1332

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

Перейдем к практической части.

В главных ролях:

  • Файл темы functions.php
  • Javascript с jQuery
  • HTML и немного CSS

В первую очередь поставим цель. Наша задача создать дополнительное поле в WordPress, в котором мы сможем добавлять необходимое нам количество изображений для дальнейшего отображения их в виде слайдера на сайте (это к примеру). Так как слайдер должен начинаться с какой-то «первой» картинки, а бывает так, что мы можем захотеть поменять порядок отображения картинок? Для такой прихоти сделаем сортировку наших картинок прямо в админке. Поехали.

Регистрируем произвольное (дополнительное) поле WordPress

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

Теперь необходимо отобразить форму, для этого воспользуемся универсальным способом, используя switch-case. Это необходимо на тот случай, если вы решите использовать и другие типы полей в вашей произвольной области. Данная конструкция switch-case определяет тип поля, в массиве multiupload_fields мы указали пока только одно поле типа multiupload.

Форма отобразилась. Теперь необходимо написать функцию, которая будет сохранять данные из этой формы, а также сделать её рабочей с помощью jQuery.

Функция сохранения выглядит следующим образом:

Обратите внимание на строчки:

Функция array_values возвращает массив в соответствии с очередностью, это позволит нам сохранять порядок изображений и тем самым мы сможем менять порядок отображения с помощью jQuery.

В папке с Вашей темой WordPress создайте файл, в котором мы будем писать jQuery скрипт. Я назову файл multiupload.js и размещу его в папке js.

Содержание файла следующее:

Подключим этот javascript файл в functions.php (подключите его перед регистрацией нового дополнительного поля):

Готово. Запускаем админку и заходим в раздел добавления записей. Видим следующее дополнительное поле и его работу. При добавлении поля создается квадрат с стандартным изображением, добавить изображение можно нажав на синий плюс, а удалить, соответственно, синий крест. Каждую картинку можно передвигать, тем самым изменять её положение в списке.

Галерея изображений WordPress

Выводим дополнительные изображения на сайт

Теперь у нас имеются картинки, которые мы можем отображать так, как мы захотим. Для вывода их на сайт воспользуйтесь следующей конструкцией в цикле вывода:

Соответственно, если обрамить вывод внутрь любого слайдера или галереи, то можно получить любой желательный результат. Данный способ использования картинок достаточно гибок и не сложен в реализации.

Вот пример, как можно вывести наши картинки (в данном примере, был использован jQuery плагин unslider):

Галерея изображений WordPress

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

Создание дополнительных полей:

Создание собственного типа записи с дополнительными полями:

Рад был помочь, спасибо за внимание!

26 КОММЕНТАРИИ

  1. Привет. Попытался внедрить твой код не разбираясь в нем..но столкнулся с ошибками в двух местах.
    1. при wp_enqueue_script JS скрипта нужно третьим параметром дописать зависимости а именно ‘jquery-ui-core’, ‘jquery-ui-sortable’
    2. почему то(я не разбирался детально) в JS скрипте во время выполнения window.send_to_editor в переменную fileUrl данные не приходят из атрибута ‘href’, поменял на fileUrl = jQuery(html).attr(‘src’);
    С этими дополнениями все заработало как и было тобой задумано. Надеюсь кому нибудь поможет.
    Спасибо за скрипт! =)

    • У меня выбивает ошибку в этой строке jQuery(‘.custom_repeatable’).sortable({
      jQuery(…).sortable is not a function, в чем загвоздка ?
      Версия WP 4.5.2

    • ну если при подгрузке скрипта не забыли указать в зависимостях необходимые библиотеки, то хз.

    • Подскажите какие библиотеки еще нужно подключить, можете ссылки на них привести. Спасибо
      Делаю так : wp_enqueue_script(‘multiuploadmin’, get_template_directory_uri().’/js/multiupload.min.js’, ‘jquery-ui-core’, ‘jquery-ui-sortable’);

    • попробуй вот так
      [code lang=»php»]
      if (is_admin()) {
      wp_enqueue_script(‘imagefield’, get_template_directory_uri() . ‘/js/multiupload.js’, array(‘jquery’, ‘media-upload’, ‘jquery-ui-core’, ‘jquery-ui-sortable’));
      }
      [/code]

    • Спасибо за указание на ошибку! Рад был помочь!

  2. Ставлю огромный жирный плюс! Спасибо!
    Весь день искал такое решение. Очень гибко и шаблонно.
    Удивило, что таким простым функционалом не обладают готовые плагины для слайдера.

  3. Что-то не получается. В загрузчике выбираю картинку, нажимаю вставить в запись… и ничего. Как была стандартная, так и остаётся. Не знаю куда копать

    • О! получилось. Сделал так, как сказал iamopk. Поменял на fileUrl = jQuery(html).attr(‘src’);

    • Техническая ошибка. Я исправил в тексте. Спасибо за подсказку :)

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

  4. Отличная статья, спасибо.
    Единственное — столкнулся с проблемой: скрипты из функшнс не выводились в админке, и, соответственно, клики по кнопкам не давали результата, если у кого-то возникла такая же проблема, то предлага решение, найденное в кодексе:
    скрипт подключать для определенной страницы в админке:
    [code lang=»php»]
    function my_enqueue($hook) {
    if ( ‘post.php’ != $hook ) {
    return;
    }
    wp_enqueue_script( ‘my_custom_script’, get_template_directory_uri() . ‘/js/multiupload.js’ );
    }
    add_action( ‘admin_enqueue_scripts’, ‘my_enqueue’ );
    [/code]
    Наверняка, есть что-то более элегантное правильное, но, к сожалению, не было времени особо искать.

  5. Добрый день!
    Второй раз использую данную наработку.
    В первый столкнулся с проблемой валидации: an invalid form control with name is not focusable
    Ошибка выдавалась на скрытый инпут.
    Как-то я в прошлый раз это обошел, но сейчас опять та же проблема, а вспомнить, как победил, к сожалению, не выходит.
    Наверняка, подобная проблема не только у меня возникает, возможно, есть какое-то простое решение, или я что-то упустил, например?

    • jQuery(«#library-form»).attr(‘novalidate’,»); перед строкой window.send_to_editor

  6. Приветствую !
    Такой вопрос меня мучает, пытаюсь к блоку также добавить поле , чтобы к добавленным фотографиям можно было еще добавлять и текст(к каждой). Таким образом чтобы на сайте потом можно было вывести (Фото + ее текст; Фото + ее текст; Фото + ее текст…)
    Подскажите если не трудно решение этой реализации.
    Заранее Спасибо !

  7. Добрый вечер! Меня интересует то же вопрос что и комментарий выше, подскажите как к фотографии добавить поле с описанием(названием) что бы на сайте можно было вывести фото а ниже название. Спасибо!

    • Сергей приветствую !
      Как успехи с поиском реализации, доделать галерею, чтобы фото с текстом сохранялось ?)
      Если успешно, сбросьте ссылку на решение.

    • У изображений в вп есть атрибут description, с его помощью полгода назад выводил текст под картинкой. Сейчас уже всего не вспомню, но пришлось добавить отдельный файл вот с такими конструкциями :
      [code lang=»php»]
      $field = get_post_meta( get_the_ID(), ‘multiupload’, true );
      [/code]
      ….
      [code lang=»php»]
      foreach ($field as $imgurl) {
      if($imgurl != »){
      global $wpdb;
      $attach = $wpdb->get_col($wpdb->prepare(«SELECT ID FROM $wpdb->posts WHERE guid=’%s’;», $imgurl ));
      $attachment_meta = wp_get_attachment($attach[0]);
      $desc = $attachment_meta[‘description’];
      echo ‘

      ‘.$desc.»;
      }
      }
      [/code]

  8. а можно ли подключить эту галлерею не только к типу постов, а к определенной рубрике либо даже к определенной записе/странице?

  9. Советую ещё добавить одну строчку проверки на пустоту $image_meta_box в функцию сохранения. Иначе при удалении всех изображений из галереи при сохранении поста получается ошибка PHP.
    Вот часть поправленного кода:
    // Если все отлично, прогоняем массив через foreach
    foreach ($multiupload_fields as $field) {
    $old = get_post_meta($post_id, $field[‘id’], true); // Получаем старые данные (если они есть), для сверки
    $image_meta_box = $_POST[$field[‘id’]];
    if($field[‘type’] == ‘multiupload’)
    if ($image_meta_box !=»»){ // проверка не пуст ли $image_meta_box
    $image_meta_box = array_values($image_meta_box);}
    if ($image_meta_box && $image_meta_box != $old) { // Если данные новые
    update_post_meta($post_id, $field[‘id’], $image_meta_box); // Обновляем данные
    } elseif (» == $image_meta_box && $old) {
    delete_post_meta($post_id, $field[‘id’], $old); // Если данных нету, удаляем мету.
    }
    } // end foreach

  10. Спасибо большое за статью! Не хотел плагины лишние добавлять)) Жаль, мультизагрузкой сразу штук 10 не воткнуть картинок(

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя