특정 div에 갤러리의 각 이미지를 삽입하는 방법은 무엇입니까? 자료 Wordpress

Question

나는 갤러리를 보여주기 위해 reproduce this Masonry에 노력하고있다. 이것을 위해 CPT를 만들었습니다. "CPT - 갤러리"

먼저 모든 이미지를 함께 게시하기 위해 맞춤형 포스트 유형을 만드는 방법을 생각했습니다.

MY CPT :

--- >>> 제목 < < < ---
--- >>> 이미지의 기본 - 썸네일 < < < ---
--- >>> cotent < < < ---
--- >>> 이미지 < < < ---
--- >>> 이미지 < < < --- ...

처음 세 섹션 (제목, 이미지 기본값 및 내용)이 기본입니다. 준비되었다.

이후 메타 볼을 사용하여 각 이미지 URL을 추가하는 방법에 대해 생각했습니다. 그러나 URL로 URL을 추가하는 것은 직관적 인 것이 아니며 초보자이거나 고급 사용자 여도 더 많은 작업이 필요합니다. 또한 금액은 사진이 1 일 수 있고, 5 일이 10 일 수 있습니다.

나는 거기 plugin for WordPress이지만, 플러그인이 아닌 전체 폭 것을보고 나는 전체 폭으로 플러그인의 css을 설정하면 Mansory 뷰포트 크기 조정에 몇 가지 버그를 가져옵니다.

플러그인과 코드의 기능에 주목하면서 필자는 각 게시물에서 WordPress 편집기 자체 갤러리를 사용한다는 것을 알았습니다. 생성 된 단축 코드 (the_content(); 내부)를 가져 와서 Mansory 클래스 내에 이미지를 표시합니다.

나는 이것을하려하지만 성공하지는 못했다.

어쨌든, 내가 뭘하고 싶은가요?

-> 워드 프레스 갤러리의 단축 코드를 잡아 내 masonry <의 div 초 이내에 각 이미지를 표시 - 논리적

예 : 갤러리의
단축 코드 : [gallery ids="1,2,3,4,5,6"]

내가 각각의 이미지 및 디스플레이를 취할 루프.

실례 : 여기

I는 masonry의 div s의 루프를 실행한다.

<?php 
    $args = array('post_type' => 'gallery', 'showposts' => 1); 
    $wp_query = new WP_Query($args); 
    if(have_posts()): 
    while ($wp_query -> have_posts()) : $wp_query -> the_post(); 
?> 

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 1 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 1 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

루프는 갤러리의 모든 이미지를 나타냅니다.

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 2 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 2 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 3 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 3 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

and so on..... 

어떻게하면됩니까?

Answer 1

거의 다 왔었습니다. 갤러리 이미지를 가져와 루프해야합니다. 이 같은 것이 당신을 위해 일해야합니다. 참조 : https://codex.wordpress.org/Function_Reference/get_post_gallery_images

<?php 
global $post; 
$gallery = get_post_gallery_images($post); 

foreach($gallery as $image_url) { 
?> 
<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php echo $image_url ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php echo $image_url ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 
<?php 
} 
?>