Как сделать блок для загрузки изображений в админке?
Решено
Мне нужно сделать блок для загрузки изображений в произвольные поля. Что бы можно было загрузить изображение или несколько и удалять изображения. Все адреса картинок должны находится в 1 произвольном поле.
1 Ответ(ы)
Ответ
PHP
add_filter('admin_init', 'add_meta_boxj', 10, 1); wp_enqueue_script('te_portfolio_admin_js', get_bloginfo('template_url') . '/js/admin.js', array('jquery'), false, true); function add_meta_boxj() { add_meta_box('meta_box_slider', 'Slider', 'meta_box_slider', 'post', 'normal', 'high'); } function meta_box_slider($post) { ?> <div class="te-fields-slider"> <?php // output of stored "sliders" $content_array = get_post_meta($post->ID, 'teSlide', 1); if (is_array($content_array)) { foreach ($content_array as $value) { ?> <div class="te-slide-img"> <img src="<?php echo $value; ?>" width="120" height="100" /> <div class="te-slide-img-delete">delete</div> <input name="teSlide[]" type="hidden" value="<?php echo $value; ?>"> </div> <? } } ?> <div class="te-fpb-block te-fpb-img-back"> <div class="te-slide-add">add new</div> </div> </div> <input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" /> <style> /* Document : style_admin Created on : 07.11.2014, 2:45:39 Author : Евгений Description: Purpose of the stylesheet follows. */ .te-fpb-block { clear: both; width: 100%; margin: 0 0 15px 0; overflow: hidden; } .te-fields-h3 { background: #3498db; border-bottom: 2px solid #2980b9; border-radius: 3px; color: white; margin: 0 0 10px !important; } .te-fpb-content { background: #ecf0f1; border-top: 1px solid #bdc3c7; display: block; overflow: hidden; padding: 5px 10px; margin: 0 0 15px; } .te-fpb-box { float: left; width: 47%; margin: 0 10px 10px 0; } .te-fpb-box p { width: 100%; clear: both; display: block; margin: 0; } .te-fpb-delete, .te-slide-img-delete { background: #e74c3c; border-bottom: 3px solid #c0392b; border-radius: 3px; color: white; cursor: pointer; height: 21px; padding: 3px; text-align: center; width: 60px; margin-top: 18px; } .te-fpb-delete:hover, .te-slide-img-delete:hover { background: #c0392b; } .te-fpb-add, .te-slide-add { background: #1abc9c; border-bottom: 3px solid #16a085; border-radius: 3px; clear: both; color: white; cursor: pointer; float: right; height: 21px; padding: 3px; text-align: center; width: 75px; } .te-fpb-add:hover, .te-slide-add:hover { background: #16a085; } .te-fpb-title { width: 90%; } .te-slide-img { float: left; height: 130px; margin: 0 15px 15px 0; position: relative; width: 120px; } .te-slide-img .te-slide-img-delete { bottom: 0; margin: -7px 0 0; right: 0; width: 114px; } .te-slide-img > img { border-bottom: 2px solid #ccc; border-radius: 3px 3px 0 0; } .te_portfolio_item-thumb { width: 80px; height: 80px; } </style> <? } ?>
JS
var te_admin = { EVENTS: function() { // delete slide images jQuery(document).on('click', '.te-slide-img-delete', function(event) { te_admin.UPLOAD_IMG.delet_img(this); return false; }); // add slide images jQuery(document).on('click', '.te-slide-add', function(event) { te_admin.UPLOAD_IMG.add_new(this); return false; }); }, UPLOAD_IMG: { add_new: function(thisClass) { var send_attachment_bkp = wp.media.editor.send.attachment; var button = jQuery(thisClass); wp.media.editor.send.attachment = function(props, attachment) { var html = '\n\ <div class="te-slide-img">\n\ <img src="' + attachment.url + '" width="120" height="100" />\n\ <div class="te-slide-img-delete">delete</div>\n\ <input name="teSlide[]" type="hidden" value="' + attachment.url + '">\n\ </div>\n\ '; jQuery('.te-fpb-img-back').before(html); wp.media.editor.send.attachment = send_attachment_bkp; }; wp.media.editor.open(button); return false; }, delet_img: function(thisClass) { jQuery(thisClass).parent().remove(); } } }; jQuery(document).ready(function() { te_admin.EVENTS(); });
Сохранение
// включаем обновление полей при сохранении add_action('save_post', 'my_extra_fields_update_photo', 0); /* Сохраняем данные, при сохранении поста */ function my_extra_fields_update_photo($post_id) { // var_dump($_POST['teSlide']); // checks passed verification code if (!wp_verify_nonce($_POST['extra_fields_nonce'], __FILE__)) { return false; } // if autosave if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return false; } // if the user does not have permission to edit the record if (!current_user_can('edit_post', $post_id)) { return false; } if (isset($_POST['teSlide'])) { update_post_meta($post_id, 'teSlide', $_POST['teSlide']); } else { delete_post_meta($post_id, 'teSlide'); } return $post_id; }
Вывод
$teSlide = get_post_meta(get_the_ID(), 'teSlide', 1); if (is_array($teSlide)) { foreach ($teSlide as $value) { echo '<a class="none" data-gallery="#blueimp-gallery-fruits" href="' . $value . '"><img src="' . $value . '"></a>'; } }