BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

Добавление загрузчика изображений на страницу или записи 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 type="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)); ?>">

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Привет Степан! Неплохой пост, мне понравилось, но…
    Конечно в чужой монастырь со своим уставом ну лезут, но не удержусь и скажу так. В данном случае, если ты выложил код и знаешь как он работает, то не мешало бы прокомментировать его, ведь есть те кто не понимает в коде что к чему, просто скопипастят, а потом пишут в комментах мол код не работает и что нужно с ним делать. Так вот чтоб лишних вопросов не было, лучше конечно прокомментировать код как можно подробнее, то есть что делает та или иная функция, что будет если ее не поставить или что то в ней поменять, ну и так далее. С одной стороны вопросов будет меньше, а с другой более профессионально, да и сразу не знающие и Оособенно Знающие люди поймут что код пусть и не твой весь лично, зато ты досканально его разобрал и преподнес. Так сказать накормил, напоил и баиньки положили.
    В первую очередь это покажет твой профессиональный уровень. Ну это сугубо моя точка зрения, так что никого обидеть не хотел. Говорю так, поскольку на сегодняшний день, когда пишу код, стараюсь полностью его комментировать, и в первую очередь не для кого то, а именно для себя, поскольку порой получается столько написанного за день, что если не прокомментировать код и отвлечься на пару часов, то точно что нибудь забудешь. Поскольку я не только пишу программный код, а еще и всякие CSS, верстка, js и вот это все в кучу когда соберется и без комментов в коде, то потом паришься что где искать.
    Короче не буду учить, и еще раз это мое сугубо личное мнение и я его никаму навязывать не буду. :coffe:
    А так да, пост с кодом получился хороший :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Привет, Александр!
    Спасибо за замечание, постараюсь исправиться.

    Ответить

  2. Степан, это не замечание, это я так… чтоб у тех кто скопипастит с твоего поста не было потом в комментариях типа, а что можно поменять чтоб так было или вот так, а почему не работает и так далее. Конечно вопросы будут скорее всего, но если прокомментировать, то вопросов будет меньше, да и тебе самому будет понятней. Вот седня ты это сделал и больше в течении, к примеру месяца не делал а занимался другим кодингом. А вот месяц прошел и тебя просят поставить что то такое, но изменить там то а там вот так. В коде практически комментов нет, ты находишь этот код в своих скриптах, смотришь на него и думаешь, а что же же я в прошлый раз делал когда его разберал и как мне поменять вот это вот на вот это… Получается опять возиться с этим кодом и разбирать его, поскольку ты до этого целый месяц делал другие проекты и занимался другим кодом. :idea:
    А тут раз, смотришь а в коде комменты есть и все понятно, где что и от чего. Это я просто объясняю на своих примерах, так как порой за ночь или задень столько понапишу кода и поразбираю, что если не оставлю комменты в нем, то через пару недель мне придется искать в коде где что, а так комменты оставил, залез в код и сразу нашел то что тебе нужно :arrow:

    Ответить

  3. Geck

    Приветствую! Спасибо, статья оказалась очень полезной. И в принципе понятной, за исключением работы с wp.media. То есть не вполне понятно, что происходит в js-части:

    $('.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;
    });

    Я честно пытался разобраться в документации по wp.media на официальном сайте wordpress. Но, видимо, мои знания в js весьма скудны, так что к полному пониманию так я и не пришел.

    Был бы очень признателен, если бы нашлась возможность пояснить этот кусок.

    Спасибо!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Что Вас именно интересует? Что куда отправляется при нажатии, что за что отвечает?

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 784
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4296