Задать вопрос
Martenek
@Martenek

Вывод Содержимого Кастомного Метабокса?

Есть подобный код, который добавляет галерею к стандартным постам вордпресс, но как вывести результат того что он сохраняет?

function add_gallery(){
    add_meta_box( 'catalog-product-images', __( 'Gallery', 'site_name' ), 'metabox_galler', 'post', 'side', 'low' ); //Тип поста post или images
}  
add_action('add_meta_boxes', 'add_gallery');

function metabox_galler($post){ ?>
    <div id="images_container">
        <ul class="images">
            <?php global $post;
                if ( metadata_exists( 'post', $post->ID, '_image_gallery' ) ) {//Тип поста post или images
                    $image_gallery = get_post_meta( $post->ID, '_image_gallery', true );
                } else { 
                    $attachment_ids = get_posts( 'post_parent=' . $post->ID . '&numberposts=-1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image&fields=ids&meta_value=0' );
                    $attachment_ids = array_diff( $attachment_ids, array( get_post_thumbnail_id() ) );
                    $image_gallery = implode( ',', $attachment_ids );
                } 
              $attachments = array_filter( explode( ',', $image_gallery ) );

                if ( $attachments ) {
                    foreach ( $attachments as $attachment_id ) {
                        echo '<li class="image" data-attachment_id="' . esc_attr( $attachment_id ) . '">
                            ' . wp_get_attachment_image( $attachment_id, 'thumbnail' ) . '
                            <ul class="actions">
                                <li><a href="#" class="delete tips" data-tip="' . __( 'Delete image', 'site_name' ) . '">' . __( 'Delete', 'site_name' ) . '</a></li>
                            </ul>
                        </li>';
                    } 
                }  
            ?>
        </ul> 
        <input type="hidden" id="image_gallery" name="image_gallery" value="<?php echo esc_attr( $image_gallery ); ?>" /> 
    </div>
    <p class="add_images hide-if-no-js">
        <a href="#" data-choose="<?php _e( 'Add Images to Gallery', 'site_name' ); ?>" data-update="<?php _e( 'Add to gallery', 'site_name' ); ?>" data-delete="<?php _e( 'Delete image', 'site_name' ); ?>" data-text="<?php _e( 'Delete', 'site_name' ); ?>"><?php _e( 'Add Gallery images', 'site_name' ); ?></a>
    </p>
    <style>
        #catalog-product-images .inside { margin: 0; padding: 0; }
        #catalog-product-images .inside #images_container { padding: 0 0 0 9px; }
        #catalog-product-images .inside #images_container ul:after, #catalog-product-images .inside #images_container ul:before { content: " "; display: table; }
        #catalog-product-images .inside #images_container ul:after { clear: both; }
        #catalog-product-images .inside #images_container ul:after, #catalog-product-images .inside #images_container ul:before { content: " "; display: table; }
        #catalog-product-images .inside #images_container ul { margin: 0; padding: 0; }
        #catalog-product-images .inside #images_container ul li.add, #catalog-product-images .inside #images_container ul li.image, #catalog-product-images .inside #images_container ul li.wc-metabox-sortable-placeholder { background: #f7f7f7 none repeat scroll 0 0; border: 1px solid #d5d5d5; -webkit-border-radius: 2px; border-radius: 2px; box-sizing: border-box; cursor: move; float: left; margin: 9px 9px 0 0; position: relative; width: 80px; }
        #catalog-product-images .inside #images_container ul li.add img, #catalog-product-images .inside #images_container ul li.image img, #catalog-product-images .inside #images_container ul li.wc-metabox-sortable-placeholder img { display: block; height: auto; width: 100%; }
        #catalog-product-images .inside #images_container ul ul.actions { display: none; padding: 2px; position: absolute; right: -8px; top: -8px; }
        #catalog-product-images .inside #images_container ul ul.actions li { float: right; margin: 0 0 0 2px; }
        #catalog-product-images .inside #images_container ul ul.actions li a { display: block; height: 0; margin: 0; overflow: hidden; width: 1em; }
        #catalog-product-images .inside #images_container ul ul.actions li a.tips { cursor: pointer; }
        #catalog-product-images .inside #images_container ul ul.actions li a.delete { display: block; font-size: 1.4em; height: 1em; position: relative; text-indent: -9999px; width: 1em; }
        #catalog-product-images .inside #images_container ul ul.actions li a.delete:before { background-color: #000; -webkit-border-radius: 100%; border-radius: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); color: #fff; content: "X"; font-family: Verdana; font-variant: normal; font-weight: 400; height: 100%; left: 0; line-height: 1; margin: 0; position: absolute; text-align: center; text-indent: 0; text-transform: none; top: 0; width: 100%; }
        #catalog-product-images .inside #images_container ul ul.actions li a.delete:hover:before{background-color:#a00}
        #catalog-product-images .inside #images_container ul li:hover ul.actions{display:block}

        #catalog-product-images .inside .add_images { padding: 0 12px 12px; }
    </style>
    <script>
        jQuery(function($){ 
            var gallery_frame;
            var $image_gallery_ids = $('#image_gallery');
            var $images = $('#images_container ul.images');

            jQuery('.add_images').on( 'click', 'a', function( event ) {
                var $el = $(this);
                var attachment_ids = $image_gallery_ids.val();

                event.preventDefault(); 
                if ( gallery_frame ) {
                    gallery_frame.open();
                    return;
                }

                gallery_frame = wp.media.frames.gallery = wp.media({
                    // Set the title of the modal.
                    title: $el.data('choose'),
                    button: {
                        text: $el.data('update'),
                    },
                    states : [
                        new wp.media.controller.Library({
                            title: $el.data('choose'),
                            filterable :    'all',
                            multiple: true,
                        })
                    ]
                });

                gallery_frame.on( 'select', function() {

                    var selection = gallery_frame.state().get('selection');

                    selection.map( function( attachment ) {

                        attachment = attachment.toJSON();

                        if ( attachment.id ) {
                            attachment_ids   = attachment_ids ? attachment_ids + "," + attachment.id : attachment.id;
                            attachment_image = attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;

                            $images.append('\
                                <li class="image" data-attachment_id="' + attachment.id + '">\
                                    <img src="' + attachment_image + '" />\
                                    <ul class="actions">\
                                        <li><a href="#" class="delete" title="' + $el.data('delete') + '">' + $el.data('text') + '</a></li>\
                                    </ul>\
                                </li>');
                        }

                    });

                    $image_gallery_ids.val( attachment_ids );
                });

                gallery_frame.open();
            });

            $images.sortable({
                items: 'li.image',
                cursor: 'move',
                scrollSensitivity:40,
                forcePlaceholderSize: true,
                forceHelperSize: false,
                helper: 'clone',
                opacity: 0.65,
                placeholder: 'wc-metabox-sortable-placeholder',
                start:function(event,ui){
                    ui.item.css('background-color','#f6f6f6');
                },
                stop:function(event,ui){
                    ui.item.removeAttr('style');
                },
                update: function(event, ui) {
                    var attachment_ids = '';

                    $('#images_container ul li.image').css('cursor','default').each(function() {
                        var attachment_id = jQuery(this).attr( 'data-attachment_id' );
                        attachment_ids = attachment_ids + attachment_id + ',';
                    });

                    $image_gallery_ids.val( attachment_ids );
                }
            });

            // Remove images
            $('#images_container').on( 'click', 'a.delete', function() {
                $(this).closest('li.image').remove();

                var attachment_ids = '';

                $('#images_container ul li.image').css('cursor','default').each(function() {
                    var attachment_id = jQuery(this).attr( 'data-attachment_id' );
                    attachment_ids = attachment_ids + attachment_id + ',';
                });

                $image_gallery_ids.val( attachment_ids );

                // remove any lingering tooltips
                $( '#tiptip_holder' ).removeAttr( 'style' );
                $( '#tiptip_arrow' ).removeAttr( 'style' );

                return false;
            });    
        });
    </script> <?php 
} 
function update_gallery( $post_id, $post, $update ) {
    $slug = 'post'; //Тип поста post или images
    if ( $slug != $post->post_type ) {
        return;
    }
    $attachment_ids = isset( $_POST['image_gallery'] ) ? array_filter( explode( ',', sanitize_text_field( $_POST['image_gallery'] ) ) ) : array();
    update_post_meta( $post_id, '_image_gallery', implode( ',', $attachment_ids ) );

}
add_action( 'save_post', 'update_gallery', 10, 3 );


add_image_size('shop_catalog', 360, 240, true);
add_image_size('shop_single', 555, 370, true);
add_image_size('icon_single', 68, 45, true);
  • Вопрос задан
  • 36 просмотров
Подписаться 1 Средний 4 комментария
Пригласить эксперта
Ответы на вопрос 1
selico
@selico
WordPress
Вы получаете из базы id изображения, далее получайте url по id

wp_get_attachment_image

$imageId = get_post_meta ( $post->ID , '_image_gallery', true );

echo wp_get_attachment_image_url($imageId)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы