Как сделать блок для загрузки изображений в админке?

Мне нужно сделать блок для загрузки изображений в произвольные поля. Что бы можно было загрузить изображение или несколько и удалять изображения. Все адреса картинок должны находится в 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>';
     }
     }
     
    Добавить Комментарий

    Ваш ответ

    Размещая свой ответ, вы соглашаетесь с правилами сайта.