Главная » Wordpress » Добавление загрузчика изображений на страницу или записи WordPress

Добавление загрузчика изображений на страницу или записи WordPress

2016-05-03 / Вр:13:43 / просмотров: 7205

Поступил мне заказ, где нужно было реализовать простенький мини-магазин (без корзины). Заказчик захотел галерею товара вот в таком стиле:

После добавления кода, который вы сможете скопировать в самом конце поста, в «Записях» вы увидите вот такую новую возможность:

Добавление загрузчика изображений на страницу или записи WordPress

При нажатии кнопки «Загрузить» открывается всплывающее окно для загрузчика медиафайлов:

Добавление загрузчика изображений на страницу или записи WordPress

После того, как вы сделаете выбор картинки и нажмете на кнопку «Вставить в запись», то результат будет вот таким:

Добавление загрузчика изображений на страницу или записи WordPress

Потом это изображение можно вставить в любом месте своего магазина, сайта, блога.
Вот весь процесс!
Создайте файл «upload-image-button.js» в папке вашей темы вот с таким кодом:

jQuery(function($){
/*
* действие при нажатии на кнопку загрузки изображения
* вы также можете привязать это действие к клику по самому изображению
*/
$('.upload_image_button').click(function(){
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
wp.media.editor.send.attachment = function(props, attachment) {
$(button).parent().prev().attr('src', attachment.url);
$(button).prev().val(attachment.id);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
/*
* удаляем значение произвольного поля
* если быть точным, то мы просто удаляем value у input ENGINE="hidden"
*/
$('.remove_image_button').click(function(){
var r = confirm("Уверены?");
if (r == true) {
var src = $(this).parent().prev().attr('data-src');
$(this).parent().prev().attr('src', src);
$(this).prev().prev().val('');
}
return false;
});
});

Далее открываем файл «functions.php» и вставляем следующий код перед знаком «?>»:

function true_include_myuploadscript() {
// у вас в админке уже должен быть подключен jQuery, если нет - раскомментируйте следующую строку:
// wp_enqueue_script('jquery');
// дальше у нас идут скрипты и стили загрузчика изображений WordPress
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
// само собой - меняем admin.js на название своего файла
wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/upload-image-button.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' );

Далее сразу вставляете после верхнего кода вот этот:

function true_image_uploader_field( $name, $value = '', $w = 115, $h = 90) {
$default = get_stylesheet_directory_uri() . '/img/no-image.png';
if( $value ) {
$image_attributes = wp_get_attachment_image_src( $value, array($w, $h) );
$src = $image_attributes[0];
} else {
$src = $default;
}
echo '
<div>
<img data-src="' . $default . '" src="' . $src . '" width="' . $w . 'px" height="' . $h . 'px" />
<div>
<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
<button type="submit" class="upload_image_button button">Загрузить</button>
<button type="submit" class="remove_image_button button">&times;</button>
</div>
</div>
';
}

«no-image.png» – это картинка, которая будет находиться по умолчанию до тех пор, пока вы не загрузите изображение.

Следующий код тоже вставляем сразу после верхнего кода в файле «functions.php»:

/*
* Добавляем метабокс
*/
function true_meta_boxes_u() {
add_meta_box('truediv', 'Настройки', 'true_print_box_u', 'post', 'normal', 'high');
}

add_action( 'admin_menu', 'true_meta_boxes_u' );

/*
* Заполняем метабокс
*/
function true_print_box_u($post) {
if( function_exists( 'true_image_uploader_field' ) ) {
true_image_uploader_field( 'uploader_custom', get_post_meta($post->ID, 'uploader_custom',true) );
}
}

/*
* Сохраняем данные произвольного поля
*/
function true_save_box_data_u( $post_id ) {
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
return $post_id;
update_post_meta( $post_id, 'uploader_custom', $_POST['uploader_custom']);
return $post_id;
}

add_action('save_post', 'true_save_box_data_u');

и в тот же файл добавляем последний штрих:

<?php
function true_add_options_page_u() {
if ( isset( $_GET['page'] ) && $_GET['page'] == 'uplsettings' ) {
if ( isset( $_REQUEST['action'] ) && 'save' == $_REQUEST['action'] ) {
update_option('uploader_custom', $_REQUEST[ 'uploader_custom' ]);
header("Location: ". site_url() ."/wp-admin/options-general.php?page=uplsettings&saved=true");
die;
}
}
add_submenu_page('options-general.php','Дополнительные настройки','Настройки','edit_posts', 'uplsettings', 'true_print_options_u');
}

function true_print_options_u() {
if ( isset( $_REQUEST['saved'] ) ){
echo '<div class="updated"><p>Сохранено.</p></div>';
}
?><div class="wrap">
<form method="post">
<?php
if( function_exists( 'true_image_uploader_field' ) ) {
true_image_uploader_field('uploader_custom', get_option('uploader_custom'));
}
?><p class="submit">
<input name="save" type="submit" class="button-primary" value="Сохранить изменения" />
<input type="hidden" name="action" value="save" />
</p>
</form>

</div><?php
}

add_action('admin_menu', 'true_add_options_page_u');

Все проверяйте.
Чтобы вывести в шаблоне, воспользуйтесь вот такой функцией:

<img src="<?php echo wp_get_attachment_url(get_post_meta($post->ID, 'uploader_custom', 1)); ?>">

Вот и все. Смотрите, на вашем мини магазине появится изображение. Куда применять данный способ, решать вам.

А вот, готовый полностью код, как я реализовал загрузку и показ 3 картинок:


// для добовления фото
function true_include_myuploadscript() {
// у вас в админке уже должен быть подключен jQuery, если нет - раскомментируйте следующую строку:
// wp_enqueue_script('jquery');
// дальше у нас идут скрипты и стили загрузчика изображений WordPress
if ( ! did_action( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
// само собой - меняем admin.js на название своего файла
wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/upload-image-button.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' );

//PHP-функция добавления полей в форму
function true_image_uploader_field( $name, $value = '', $w = 115, $h = 90) {
$default = get_stylesheet_directory_uri() . '/img/no-image.png';
if( $value ) {
$image_attributes = wp_get_attachment_image_src( $value, array($w, $h) );
$src = $image_attributes[0];
} else {
$src = $default;
}
echo '
<div>
<img data-src="' . $default . '" src="' . $src . '" width="' . $w . 'px" height="' . $h . 'px" />
<div>
<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
<button type="submit" class="upload_image_button button">Загрузить</button>
<button type="submit" class="remove_image_button button">&times;</button>
</div>
</div>
';
}

/*
* Добавляем метабокс
*/
function true_meta_boxes_u() {
add_meta_box('truediv', 'Настройки', 'true_print_box_u', 'post', 'normal', 'high');
}

add_action( 'admin_menu', 'true_meta_boxes_u' );

/*
* Заполняем метабокс
*/
function true_print_box_u($post) {
if( function_exists( 'true_image_uploader_field' ) ) {
true_image_uploader_field( 'uploader_custom', get_post_meta($post->ID, 'uploader_custom',true) );
true_image_uploader_field( 'uploader_custom1', get_post_meta($post->ID, 'uploader_custom1',true) );
true_image_uploader_field( 'uploader_custom2', get_post_meta($post->ID, 'uploader_custom2',true) );

}
}

/*
* Сохраняем данные произвольного поля
*/
function true_save_box_data_u( $post_id ) {
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
return $post_id;
update_post_meta( $post_id, 'uploader_custom', $_POST['uploader_custom']);
update_post_meta( $post_id, 'uploader_custom1', $_POST['uploader_custom1']);
update_post_meta( $post_id, 'uploader_custom2', $_POST['uploader_custom2']);
return $post_id;
}

add_action('save_post', 'true_save_box_data_u');

function true_add_options_page_u() {
if ( isset( $_GET['page'] ) == 'uplsettings' ) {
if ( 'save' == isset( $_REQUEST['action'] ) ) {
update_option('uploader_custom', $_REQUEST[ 'uploader_custom' ]);
header("Location: ". site_url() ."/wp-admin/options-general.php?page=uplsettings&saved=true");
die;
}
}
add_submenu_page('options-general.php','Дополнительные настройки','Настройки','edit_posts', 'uplsettings', 'true_print_options_u');
}

function true_print_options_u() {
if ( isset( $_REQUEST['saved'] ) ){
echo '<div class="updated"><p>Сохранено.</p></div>';
}
?><div class="wrap">
<form method="post">
<?php
if( function_exists( 'true_image_uploader_field' ) ) {
true_image_uploader_field('uploader_custom', get_option('uploader_custom'));
}
?><p class="submit">
<input name="save" type="submit" class="button-primary" value="Сохранить изменения" />
<input type="hidden" name="action" value="save" />
</p>
</form>

</div><?php
}

add_action('admin_menu', 'true_add_options_page_u');

Выводим в шаблоне:

<img src="<?php echo wp_get_attachment_url(get_post_meta($post->ID, 'uploader_custom', 1)); ?>">
<img src="<?php echo wp_get_attachment_url(get_post_meta($post->ID, 'uploader_custom1', 1)); ?>">
<img src="<?php echo wp_get_attachment_url(get_post_meta($post->ID, 'uploader_custom2', 1)); ?>">