Создаем свой собственный тип записей в WordPress, часть 3

27
12496

Продолжая предыдущий урок я покажу Вам, как добавить datepicker или поле для даты с помощью JQuery UI и пары функций WordPress API. Также в данном уроке мы добавим дополнительное поле с изображением. В требованиях нашей задачи, присутствует поле «Ареал», которое подразумевает изображение карты с местами обитания животных попавших в красную книгу.

Если вы хотите загружать неограниченное количество изображений в дополнительных полях (например, для слайдера или фотогаллереи), читайте — Как создать фотогалерею в дополнительных полях WordPress.
Начнем с даты, по принципу того, как мы добавляли предыдущие поля, добавим еще одно поле типа text. В массиве $red_meta_fields допишем еще один элемент:

Чтобы datepicker функционировал правильно необходимо подключить JQuery UI и необходимые ему таблицы стилей, рекомендую скачать jquery-ui.css с официального сайта. Из скачанного Вами архива нам потребуется только файл стилей jquery-ui.css, который надо разместить в директории с Вашей темой WordPress. Нам не потребуется сам jquery-ui.js, он уже встроен в WordPress и нам останется только вызвать его через функцию. Давайте подключим datepicker и стили к нему:

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

Добавляем поле дополнительного изображения:

Добавим поле дополнительного изображения в WordPress. Чтобы реализовать такое поле, нам потребуется Jquery и пара функций API WordPress. Приступим к реализации, первым делом в директории с Вашей темой создайте файл imagefield.js, в нем мы напишем наш Jquery код, который инициализирует кнопку и даст возможность добавлять изображение, а также удалять его. В созданный файл вставьте этот код:

Данный код объявляет нашему полю нужные классы и дает возможность загружать изображение в самом WordPress. После загрузки изображения мы будем видеть его рядом с кнопкой добавления и по желанию сможем удалить изображение из поста.

Теперь запустим этот код, для этого в файле functions.php изменим конструкцию, где мы добавляли datepicker и допишем 1-у строчку:

В массив $red_meta_fields добавим элемент image:

В функцию show_my_red_metabox добавим еще один case, который выводит поле на экран:

Готово! Поздравляю! Мы добились желаемого результата, теперь давайте посмотрим:

Как вывести изображение на сайт

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

В переменную $field записываем значение поля и передаем его в функцию wp_get_attachment_url — получаем ссылку на изображение, а дальше уже подставляем его в src тега img.

Как загружать файлы вместо изображений

Для того, чтобы загружать файлы, например файлы .pdf, необходимо изменить не только форму, но и принцип работы скрипта jQuery. Во первых, для этого я добавил новый тип мета-поля в файле functions.php — «file»:

Затем я добавил новый тип для отображения такого типа поля в функцию show_my_red_metabox():

И, конечно же, jQuery скрипт:

 

Заключение

Следующая часть: Создание файла шаблона.

На мой взгляд получилось достойно! Для того, чтобы вывести данные в посте, рекомендую прочитать эту статью, там я рассказал как вывести данные из дополнительных полей на сайт. Если у Вас возникли вопросы, задавайте их в комментариях. Спасибо за внимание!

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

  1. В предыдущем уроке вы пишите в конце: «…и выведем все на сам сайт.» И где в этом уроке описан вывод всех постов на сайт? Где про файл шаблона?

  2. Доброе утро. Подскажи пожалуйста, как можно добавить поле с загрузкой изображения в стандартный тип записи? точнее в страницу. И желательно НЕ один, к примеру есть блок, в котором 4 под-блока, для каждого соответствующая картинка… расплодить не сложно.

    • Здравствуйте! В этой статье, как вы могли заметить, есть дополнительное поле, для добавления изображений. Так же создаете дополнительные поля типа image, сколько нужно.

  3. Добрый вечер! Статья замечательная, но я столкнулся с проблемой. У меня не работает поле с датой и поле с картинкой.

    • Добрый вечер! Таакс! Вангую, что возможно, проблема в подключении скриптов javascript. Во-первых, это единственные поля, которые используют кастомные (пользовательские) скрипты. Убедитесь, что скрипты (datepicker и imagefield) подключаются корректно. Можете воспользоваться инструментами web-разработчика — Google Chrome или Firebug в браузере Firefox. И если они действительно подключены не корректно, посмотрите, что именно не так. Например, неправильно прописан путь к файлу или что-то еще…

    • Для вывода изображения на экран:

      $field = get_post_meta( get_the_ID(), ‘image’, true );
      $field_url = wp_get_attachment_url( $field );
      echo »;

  4. Подскажите пожалуйста, уже 2 дня голову ломаю, как реализовать возможность загрузки и удаления pdf файлов ?(функционал похожий на тот как вы картинки загружаете и удаляете только возвращать ссылку на pdf в тег (a href)), не могу никак разобраться с вашей регуляркой…

    • Привет! Добавил пункт в статью, там написано как это сделать!

    • Огромное Вам Спасибо !!! После добавления файла, у меня стояла задача, чтобы при (публикации или обновлении записи) оставалось Имя файла, а не вся ссылка на него. Как оставить имя не придумал, решил
      вот таким образом:

      case ‘file’:
      $pdfkit = get_template_directory_uri().’/images/pdf.png’;
      $mimes = array(
      ‘pdf’ => ‘application/pdf’,
      );
      if ($meta) { $filetype = wp_check_filetype( $meta, $mimes ); }
      if( $filetype[‘ext’] )
      $file_text = ‘Файл загружен’;
      else
      $file_text = ‘Файл не загружен’;

      echo ‘

      ‘.$file_text.’

      ‘.$field[‘desc’].’‘;
      break;
      Может кому пригодится, тут слева вверху над кнопкой иконку pdf файла еще добавляю и кнопку удалить делаю кнопкой.

  5. Хотелось бы еще урок от Вас на такую тему:»Как сделать блок для добавления фото к кастомной записи и их вывод в виде слайдера в шаблоне». По принципу как это, реализовали в WooCommerce для товара (Блок «Галерея Товара»)
    Готов даже пожертвовать на развитие Вашего проекта.

  6. На данный момент реализовал личный кабинет для пользователей(сайта) кроме админа, две вкладки, профиль и добавления кастомной записи, в ядре WP(в файлах user-edit.php и edit.php) добавил фунцию вывода шапки сайта на этих страницах, но не могу убрать на странице добавления кастомной записи, стандартное верхнее меню, перепробовал все хуки, не цепляются.
    Можно ли как то вынести нужный мне функционал стандартного личного кабинета в папку (своей темы), только тот что мне нужен(через функции, хуки) ? дабы не скрывать стилями и JQwery все не нужное.
    Такой личный кабинет у меня вышел.

    • Привет! Полностью убираем верхний стандартный сайдбар в WordPress:
      add_filter( ‘show_admin_bar’, ‘__return_false’ );
      add_filter( ‘wp_admin_bar_class’, ‘__return_false’ );
      add_filter( ‘show_wp_pointer_admin_bar’, ‘__return_false’ );
      wp_deregister_script( ‘admin-bar’ );
      wp_deregister_style( ‘admin-bar’ );
      remove_action( ‘init’, ‘_wp_admin_bar_init’ );
      remove_action( ‘wp_footer’, ‘wp_admin_bar_render’, 1000 );
      remove_action( ‘admin_footer’, ‘wp_admin_bar_render’, 1000 );

      add_action(‘admin_head’, ‘my_custom_styles’);

      function my_custom_styles() {
      echo ‘
      .wp-toolbar {
      padding-top: 0 !important;
      }
      ‘;
      }

    • Не помогло, вышел из положения подключением своего файла стилей

      function add_main_style(){
      if(!current_user_can(‘administrator’)){
      wp_enqueue_style(‘abdula’,get_template_directory_uri().’/css/abdula.css’,true);
      }
      };
      add_action( ‘admin_enqueue_scripts’, ‘add_main_style’ );

  7. An invalid form control with name=’attachments[77][post_title]’ is not focusable. подскажите пожалуйста почему не добавляется картинка? Как исправить?

  8. Знаю что тема довольно старая, но я только сейчас начал изучать WordPress и делаю плагин по вашим урокам. Так вот, не выводилось поле для ввода даты (раз 5 переписывал всё с самого начала) потом начал искать в интернете, может плохо искал, но ничего не нашёл. После чего начал сам боротся с этой проблемой либо я не понял либо вы (автор) забыли написать что в функцию show_my_red_metabox(), в foreach есть нужно добавить кейс для вывода поля с датой

    case ‘date’:
    echo »;
    break;

  9. Не хочет код скидать(((
    case ‘date’:
    echo (сюда код поля (посмотрите на сайте jquery));
    break;

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

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