[решено] Как добавить поля для загрузки изображений WordPress

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

Задача решается в четыре этапа:

1. Написать HTML-код формы и полей для загрузки изображений
2. Подключить скрипт встроенного загрузчика изображений WordPress
3. Настроить поведение загрузчика изображений
4. Написать 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);

?>

Задача решена. Оптимизация принимается, комментарии приветствуются :-)