[решено] Как добавить поля для загрузки изображений WordPress
При создании записи в Вордпрессе существует возможность прикреплять к ней изображение или целую галерею. На уровне кода мы можем работать с этими изображениями (выводить их в нужных нам местах). Но бывают ситуации, когда к записи нужно прикрепить несколько изображений, которые служат разным целям. Допустим, что нам нужно выводить одно изображение в качестве фона для записи, другое в качестве картинки-превью для записи, третье в качестве иконки в меню для этой записи (или страницы). Можно создать галерею из трех изображений и на уровне кода определять какое где отображать. Можно также создать
Задача решается в четыре этапа:
- Написать HTML-код формы и полей для загрузки изображений
- Подключить скрипт встроенного загрузчика изображений WordPress
- Настроить поведение загрузчика изображений
- Написать PHP-код сохраняющий данные из полей формы
Весь код добавлям в файл functions.php в папке с используемым на сайте шаблоном. Можно в любое место, но как по мне, то лучше в конец.
Итак, поехали:
1 Код формы и полей для загрузки изображений:
// Пишем код формы с полями. function my_extra_fields_content( $post ) { // URL-ы загруженных изображений будем сохранять в мета-полях $background = get_post_meta($post->ID, 'post_background', 1); $preview = get_post_meta($post->ID, 'post_preview', 1); $icon = get_post_meta($post->ID, 'post_icon', 1); ?> <label for="post_background"> <h4>Фон записи</h4> <input id="post_background" type="text" size="45" name="post_background" value="<?php echo $background; ?>" /> <input id="post_background_button" type="button" class="button" value="Загрузить" /> <br /> <small>Вставьте URL изображения для фона записи или загрузите его</small> </label> <label for="post_preview"> <h4>Превью записи</h4> <input id="post_preview" type="text" size="45" name="post_preview" value="<?php echo $preview; ?>" /> <input id="post_preview_button" type="button" class="button" value="Загрузить" /> <br /> <small>Вставьте URL изображения для превью записи или загрузите его</small> </label> <label for="post_icon"> <h4>Иконка для меню</h4> <input id="post_icon" type="text" size="45" name="post_icon" value="<?php echo $icon; ?>" /> <input id="post_icon_button" type="button" class="button" value="Загрузить" /> <br /><small>Вставьте URL изображения иконки меню или загрузите его</small> </label> <!-- Создаем проверочное поле для проверки того, что данные пришли с нашей формы --> <input type="hidden" name="extra_field_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" /> <?php } // Добавляем мета-блок с нашей формой на странице редактирования записи function my_add_extra_fields() { add_meta_box( 'extra_fields', 'Характерные изображения', 'my_extra_fields_content', 'post', 'normal', 'high' ); } // Запускаем вышенаписанный код в действие if( is_admin() ) add_action('admin_init', 'my_add_extra_fields', 1);
Описанный выше код создаст на странице редактирования записи следующие поля. Но они пока еще не позволяют загружать изображения и не сохраняют данные вписанные в них.
2 Подключаем встроенный загрузчик изображений WordPress
function my_add_upload_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script( 'my-upload-script' /* Подключаем JS-код задающий поведение * загрузчика и указывающий, куда вставлять * ссылку после загрузки изображения * Его код будет приведен ниже. */ ,get_bloginfo('template_url').'/js/upload.js' /* Указываем скрипты, от которых * зависит наш JS-код */ ,array('jquery','media-upload','thickbox') ); wp_enqueue_script('my-upload-script'); } // Запускаем функцию подключения загрузчика if( is_admin() ) add_action('admin_print_scripts', 'my_add_upload_scripts');
3 Настраиваем поведение загрузчика изображений.
Для этого создадим JavaScript файл «upload.js» в папке /папка с темой/js/ В файле разместим следующий код:
jQuery(document).ready(function() { // Код стоило-бы оптимизировать, но не было времени сделать это. jQuery('#post_background_button').click(function() { formfield = jQuery('#post_background').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true&ETI_field=post_background'); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('input[name='+formfield+']').val(imgurl); tb_remove(); } return false; }); jQuery('#post_preview_button').click(function() { formfield = jQuery('#post_preview').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true&ETI_field=post_preview'); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('input[name='+formfield+']').val(imgurl); tb_remove(); } return false; }); jQuery('#post_icon_button').click(function() { formfield = jQuery('#post_icon').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true&ETI_field=post_icon'); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('input[name='+formfield+']').val(imgurl); tb_remove(); } return false; }); });
4 Пишем обработчик формы, который сохраняет или удаляет информацию из дополнительных полей Водпресс.
<?php function my_extra_fields_content_update( $post_id ){ // Если данные пришли не из нашей формы, ничего не делаем if ( !wp_verify_nonce($_POST['extra_field_nonce'], __FILE__) ) return false; // Если это автосохранение, то ничего не делаем if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return false; // Проверяем права пользователя if ( !current_user_can('edit_post', $post_id) ) return false; $extra_fields = array( 'post_background' => $_POST['post_background'], 'post_preview' => $_POST['post_preview'], 'post_icon' => $_POST['post_icon'] ); $extra_fields = array_map('trim', $extra_fields); foreach( $extra_fields as $key=>$value ){ // Очищаем, если пришли пустые значения полей if( empty($value) ) delete_post_meta($post_id, $key); // Обновляем, (или создаем) в случае не пустых значений if($value) update_post_meta($post_id, $key, $value); } return $post_id; } // Запускаем обработчик формы во время сохранения записи if( is_admin() ) add_action('save_post', 'my_extra_fields_content_update', 0); ?>
Ну и собственно получение ссылок на загруженные изображения в нужных нам местах осуществляется так:
<?php // Фоновое изображение $post_background = get_post_meta($post->ID, 'post_background', 1); // Превью $post_preview = get_post_meta($post->ID, 'post_preview', 1); // Иконка $post_icon = get_post_meta($post->ID, 'post_icon', 1); ?>
Задача решена. Оптимизация принимается, комментарии приветствуются :-)
Rocky
Отлично то что искал!
Андрей
Пользуюсь) Спасибо)
Скажи, а как сделать загрузку не картинок а файлов? Суть в том что ИМГ тега нет! Спасибо)
Андрей
Большое спасибо, помогли решить проблему!
Black Jack
Очень помогло, и статья написана просто и грамотно! спасибо, Андрей!
Trackback: Как настроить плагин Domain Mappings для Wordpress | Степасюк Андрей
Николай Библив
5 балов. Просто и понятно.
asdf
А код из пунктов 4 и 5 куда вписывать?
В functions.php не получается.
gro
Разобрались? Мне тоже не удалось реализовать.
Если разобрались, подскажите, пожалуйста, решение проблемы.
Александр
мб кто споткнется. надо перед предыдущим куском кода поставить ?>
vladmaxi
Добрый день! Ваша статья — ка раз то что нужно! У меня версия wp 3.8, делаю всё как описано, загружать получается, но когда нажимаю сохранить — белый экран, в чем может быть проблема? спсп
Ий
Это уже интересно. Если планируете писать на эту же тему, то хотелось бы узнать о реализации множественной загрузки файлов (одно поле несколько файлов) и о добавить новое из админки ( по аналогии с категориями). Если встречали подобную информацию я был бы рад и ссылки. Спасибо.
bobichek
огромное спасибо за статью!
Дмитрий
Спасибо, что поделились. Меня однажды очень выручил этот пример. А вы случайно не сталкивались с добавлением поля для ссылок, как в визуальном редакторе. Что бы можно было ввести ссылку вручную, либо выбрать страницу или запись
Алена
Спасибо большое ! Здорово помогли начинающему программисту добавить возможность загрузки картинки в метаданные
Максим Н
А как к этому примеру добавить ещё поля для ввода текста??? Опиши если не сложно или дайте кто ссылку
Andrey
Откуда взялось ETI_field и что это такое?
Афлук
Ну вроде картинки загружаются!
Но как их отобразить? не отображаются там где и поставил single.рhp!
$post_a1 = get_post_meta($post->ID, ‘post_a1’, 1);
$post_a2 = get_post_meta($post->ID, ‘post_a2’, 1);
$post_a3 = get_post_meta($post->ID, ‘post_a3’, 1);