0

Есть кастомный тип поста "images". Туда можно и нужно добавлять только картинки или ютуб видео без текста и тд. Картинок может быть множество. Видео я буду добавлять с помощью плагина Advanced Custom Field (использую его и для других подобных задач). Но я не знаю как добавлять туда эти картинки. С этим плагином у меня не получается, ведь можно добавить только несколько полей с картинками. Внизу скрин вёрстки , как должен выглядеть пост типа "image" в итоге.

введите сюда описание изображения

4
  • 1
    Думаю вам нужно нанять web разработчика
    – XYZ
    6 ноя 2017 в 13:42
  • @XYZ я и есть веб-разработчик, только начинающий, и не знаю как это можно реализовать
    – Nick
    6 ноя 2017 в 13:51
  • К посту по-умолчанию можно добавить сколько угодно картинок. А вёрстка делается в шаблоне темы. Или же плагин должен подсовывать нужный шаблон.
    – SeVlad
    6 ноя 2017 в 13:55
  • Это делается через meta поля, без плагина. 6 ноя 2017 в 14:04

2 ответа 2

2

Вставьте данный код в function.php

Код добавляет галерею к обычным записям. Если кастомный тип поста измените "post" на ваш тип, например "images"

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);

?>

Результат:

введите сюда описание изображения

9
  • И так каждый раз при смене темы :) Для решения с функционалом существуют плагины. Их можно даже самому написать, оформив тот же код и быть независимым от темы.
    – SeVlad
    7 ноя 2017 в 10:20
  • Согласен, если темы меняются постоянно и часть. Можно на основание данного кода (например) сделать свой плагин. А так же встаёт вопрос, часто ли вы меняете тему в своих проектах на ВП ?) 7 ноя 2017 в 10:31
  • Вопрос не в частоте, а в правильности решений. В теме должно быть только то, что характерно только для конкретной темы - верстка напр. Функционал сайта должен быть в плагинах. Это ко всему прочему еще и на работу (порядок обработки) влияет. Не говоря уже о геммрое при смене темы и избавлении от проблем малой кровью после очередного обновления - отключить плагин можно по ФТП и это совсем не тоже, что сменить упавшую тему. В общем использовать файл функций для глобальной функционала сайта - порочная практика.
    – SeVlad
    7 ноя 2017 в 18:16
  • Есть такое понимание как дочерняя тема от главной темы, при обновлении главной темы ваш функционал остается прежним. Есть такие программисты( ненавистники сторонних плагинов и плагинов вовсе ) Которые берут и вставляют небольшие плагин в саму тему. 7 ноя 2017 в 18:28
  • Механизм дочерних тем к вышесказанному отношения не имеет. Это находится в другой плоскости, вне зависимости от наличия дочки. Обновления которые могут что-то поломать не только родительской темы, но и самого ВП и плагинов, которые могут законфликтовать с этими мануальными вставками.
    – SeVlad
    7 ноя 2017 в 18:41
1

У плагина ACF в версии PRO есть поле Gallery, в которое можно добавить произвольное число изображений. Так выглядит часть настроек этого поля:

введите сюда описание изображения

2
  • Спасибо, а если я вместо обычной версии поставлю PRO - мои старые кастом филды не удалятся с базы ?
    – Nick
    7 ноя 2017 в 9:03
  • Нет, я ставил. Но! на всякий случай, сохраните копию базы перед установкой PRO 7 ноя 2017 в 9:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.