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

1 ответ

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

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){ ?&gt;     &lt;div id="images_container"&gt;         &lt;ul class="images"&gt;             &lt;?php global $post;                 if ( metadata_exists( 'post', $post-&gt;ID, '_image_gallery' ) ) {//Тип поста post или images                     $image_gallery = get_post_meta( $post-&gt;ID, '_image_gallery', true );                 } else {                      $attachment_ids = get_posts( 'post_parent=' . $post-&gt;ID . '&amp;numberposts=-1&amp;post_type=attachment&amp;orderby=menu_order&amp;order=ASC&amp;post_mime_type=image&amp;fields=ids&amp;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 '&lt;li class="image" data-attachment_id="' . esc_attr( $attachment_id ) . '"&gt;                             ' . wp_get_attachment_image( $attachment_id, 'thumbnail' ) . '                             &lt;ul class="actions"&gt;                                 &lt;li&gt;&lt;a href="#" class="delete tips" data-tip="' . __( 'Delete image', 'site_name' ) . '"&gt;' . __( 'Delete', 'site_name' ) . '&lt;/a&gt;&lt;/li&gt;                             &lt;/ul&gt;                         &lt;/li&gt;';                     }                  }               ?&gt;         &lt;/ul&gt;          &lt;input type="hidden" id="image_gallery" name="image_gallery" value="&lt;?php echo esc_attr( $image_gallery ); ?&gt;" /&gt;      &lt;/div&gt;     &lt;p class="add_images hide-if-no-js"&gt;         &lt;a href="#" data-choose="&lt;?php _e( 'Add Images to Gallery', 'site_name' ); ?&gt;" data-update="&lt;?php _e( 'Add to gallery', 'site_name' ); ?&gt;" data-delete="&lt;?php _e( 'Delete image', 'site_name' ); ?&gt;" data-text="&lt;?php _e( 'Delete', 'site_name' ); ?&gt;"&gt;&lt;?php _e( 'Add Gallery images', 'site_name' ); ?&gt;&lt;/a&gt;     &lt;/p&gt;     &lt;style&gt;         #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; }     &lt;/style&gt;     &lt;script&gt;         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('                                 &lt;li class="image" data-attachment_id="' + attachment.id + '"&gt;                                     &lt;img src="' + attachment_image + '" /&gt;                                     &lt;ul class="actions"&gt;                                         &lt;li&gt;&lt;a href="#" class="delete" title="' + $el.data('delete') + '"&gt;' + $el.data('text') + '&lt;/a&gt;&lt;/li&gt;                                     &lt;/ul&gt;                                 &lt;/li&gt;');                         }                      });                      $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;             });             });     &lt;/script&gt; &lt;?php  }  function update_gallery( $post_id, $post, $update ) {     $slug = 'post'; //Тип поста post или images     if ( $slug != $post-&gt;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);

Дополнительно:

Если я делаю вывод через

echo get_post_meta ( $post-&gt;ID , '_image_gallery', true );

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

то у меня выводит post_id этой картинки в бд, а мне нужно забрать ее url

См.п.3.6

Рекомендую прятать длинные портянки кода под спойлер. Также советую размещать как можно меньший фрагмент кода, иллюстрирующий проблему. Чем больше код, тем меньше вероятность, что кто-то вообще будет читать его.

Алан Гибизов, Большое спасибо, просто тут важна именно полнота кода, потому что я не могу найти мета кей в этом коде, человек который его писал просто забил, как я понимаю на это. Даже если выводить значения POST - которые я по сути добавляю в админке и сохраняю, то в этом Array нет url. По этим причина я и выкатил весь код, за спойлер спасибо!

Ответы:

Вы получаете из базы id изображения, далее получайте url по id

wp_get_attachment_image

$imageId = get_post_meta ( $post-&gt;ID , '_image_gallery', true );  echo wp_get_attachment_image_url($imageId)

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Андрей PHP Ответ

Судя по коду, галерея сохраняется в метаполе записи с ключом _image_gallery. Внутри лежит строка с ID вложений через запятую, например 12,15,27. Чтобы вывести галерею на фронте, нужно получить это метаполе, разбить строку на ID и вывести изображения через wp_get_attachment_image().

$gallery = get_post_meta(get_the_ID(), '_image_gallery', true);
$attachment_ids = array_filter(array_map('absint', explode(',', $gallery)));
 
if ($attachment_ids) {
    echo '&lt;div class="post-gallery"&gt;';
 
    foreach ($attachment_ids as $attachment_id) {
        echo '&lt;a href="' . esc_url(wp_get_attachment_image_url($attachment_id, 'full')) . '" class="post-gallery__item"&gt;';
        echo wp_get_attachment_image($attachment_id, 'medium');
        echo '&lt;/a&gt;';
    }
 
    echo '&lt;/div&gt;';
}

$gallery = get_post_meta(get_the_ID(), '_image_gallery', true); $attachment_ids = array_filter(array_map('absint', explode(',', $gallery))); if ($attachment_ids) { echo '<div class="post-gallery">'; foreach ($attachment_ids as $attachment_id) { echo '<a href="' . esc_url(wp_get_attachment_image_url($attachment_id, 'full')) . '" class="post-gallery__item">'; echo wp_get_attachment_image($attachment_id, 'medium'); echo '</a>'; } echo '</div>'; }

Если нужно выводить в шаблоне конкретной записи, этот код ставится внутри WordPress Loop. Если вне цикла, передайте ID записи явно:

$post_id = 123;
$gallery = get_post_meta($post_id, '_image_gallery', true);

$post_id = 123; $gallery = get_post_meta($post_id, '_image_gallery', true);

Минимальные стили:

.post-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
 
.post-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

.post-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .post-gallery img { display: block; width: 100%; height: auto; }

Важно: не выводите URL картинки вручную из базы, если можно использовать WordPress-функции. wp_get_attachment_image() добавит корректные размеры, srcset, alt и лучше впишется в оптимизацию изображений.

Также проверьте сохранение метабокса: должен быть nonce, проверка прав пользователя и обработчик save_post. Без этого галерея может отображаться в админке, но не сохраняться стабильно.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов

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

Дополнительно:

Ответы:

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

Вам также может быть интересно

Ежедневно, круглосуточно