산소 리피터 및 쉬운 게시물에 다른 콘텐츠를 삽입하는 방법 - Mega Tutorial

Oxygen Builder의 Repeater 및 Easy Posts 요소는 게시물 목록을 표시하는 빠르고 쉬운 방법입니다.

이 가이드는 필요한 이유가 무엇이든 목록에 "기타 항목"을 삽입하는 다양한 방법을 보여줍니다.

혼동을 피하기 위해 원래 Repeater/Easy Post 쿼리에서 쿼리하지 않은 항목에 대해 "Other Item(s)"을 사용합니다.

왜요?

Repeater/Easy Posts 요소는 게시물 목록을 표시합니다. 해당 목록은 게시물을 가져오는 데 사용되는 쿼리에 설정된 매개변수에 의해 제한됩니다.

각 항목의 모양과 목록 레이아웃의 서식을 지정할 수 있습니다. 그게 전부입니다. 때로는 그것이 필요한 전부이지만 때로는 원래 가져오지 않은 다른 항목을 포함하도록 목록을 변경하고 싶을 수도 있습니다. 다음과 같은 기타 항목:

• 목록 끝 대신 목록 중간에 클릭 유도문안 항목(예: 전체 아카이브에 대한 "자세히 보기" 링크)
• 목록 안의 항목을 설명하는 일부 유익한 텍스트, 흥미롭게 유지하기 위해 정보 흐름 분할
• 일부 장식 요소
• 목록 내의 다른 전체 목록
• 광고 배너 또는 기타 판촉물

산소 빌더 과정 - 곧 제공됩니다!

Oxygen Builder Mastery 과정은 ACF, MetaBox 및 WooCommerce 모듈이 포함되어 있어 초심자부터 전문가까지 여러분을 안내합니다.

출시 알림 및 할인 받기

어떻게?

위의 예 중 일부를 사용하여 목록에 다른 항목을 추가하는 다양한 방법을 보여드리겠습니다.

매우 간단한 방법에서 복잡한 방법은 다음과 같습니다.

• 제이쿼리
• the_posts 후크 사용
• PHP 템플릿 편집(쉬운 포스트)
• the_posts 후크를 다시 사용하지만 용어(카테고리/분류)와 같은 포스트가 아닌 항목 추가

내 예에서는 도시 목록일 뿐인 사용자 정의 게시물 유형 목적지를 사용할 것입니다.

주의 사항

• 다른 항목은 내부에 삽입되기 때문에 Repeater/Easy Post 요소의 자식이 되며 재정의되지 않는 한 부모에서 설정한 레이아웃 규칙의 적용을 받습니다.
• 목록 변경 사항은 Oxygen 편집기에 표시되지 않습니다.
• Easy Post PHP 템플릿 메서드는 향후 Oxygen 업데이트에서 변경될 수 있지만 가능성은 없는 문서화되지 않은 변수에 액세스합니다.

JQuery를 사용하여 Repeater 내부에 다른 요소 추가

JQuery를 사용하여 Repeater/Easy Post 내부의 일부 인덱스에 요소를 삽입합니다.

단계들

1. 게시물 유형 대상이 포함된 사용자 지정 쿼리로 리피터 또는 쉬운 게시물을 만듭니다. ID를 example-repeater-1 설정합니다.
2. 항목은 게시물 제목과 배경으로 추천 이미지입니다.
3. 이 예에서는 그리드 레이아웃을 사용하고 행의 2개 열에 걸쳐 있는 네 번째 항목을 설정했습니다. 여기에 내 항목이 삽입됩니다.
4. 다른 항목은 높이 100%, 너비 100%인 div 로 클릭 유도문안 버튼이 있는 간단한 배너로 만들었습니다. ID를 guide-ad-banner 설정합니다.
5. 나는 repeater 아래에 다른 항목을 배치하지만 스크립트가 그것을 이동할 것이기 때문에 어디든 갈 수 있습니다.

제이쿼리

페이지에 코드 블록을 삽입하고 다음을 Javascript 섹션에 추가하거나 PHP / HTML 섹션의 <script> 태그 안에 추가합니다.

 jQuery( ( $ ) => { const allRepeaterDivs = $( "#example-repeater-1 > div" ); const insertionIndex = allRepeaterDivs.length > 2 ? 2 : allRepeaterDivs.length - 1 ; allRepeaterDivs.eq(insertionIndex).after($( "#guide-ad-banner" )[ 0 ]); });
 코드 언어: JavaScript ( javascript )

다음은 스크립트에 대한 간단한 설명입니다.

1. 페이지가 로드/준비되면 #example-repeater-1 의 자식인 모든 div 목록을 얻습니다. 이것은 repeater의 개별 항목입니다.
2. 이 항목을 삽입할 인덱스를 계산하는데, 이상적으로는 3번째 항목(인덱스 2, 인덱스는 0부터 시작) 뒤에 삽입하고 싶지만 항목 수가 2보다 작으면 맨 끝에 삽입합니다. 물론 결과의 크기를 미리 알고 있으므로 이 계산은 3개 미만의 항목이 반환되는 쿼리로 변경할 경우를 대비한 예방책일 뿐입니다.
3. 마지막으로 3번째 항목 뒤에 id가 #guide-ad-banner 요소를 삽입하여 다른 항목을 4번째 항목으로 만듭니다.

결과

프런트 엔드에서는 id가 guide-ad-banner 항목을 가져와서 id가 #example-repeater-1 repeater의 4번째 자리에 삽입합니다.

the_posts 후크를 사용하여 Repeater 내부에 다른 항목 추가

WordPress의 the_posts 필터 후크를 사용하면 쿼리로 가져온 게시물에 액세스할 수 있습니다. 참조
이 후크를 사용하여 원래 쿼리에 포함되지 않은 다른 게시물을 삽입할 수 있습니다.

이 예에서는 대상에 대해 쿼리를 사용하는 리피터 끝에 일반 게시물을 삽입합니다.

단계들

1. 대상 게시물 유형에 대한 반복 레이아웃을 만들고 제목과 추천 이미지를 div 배경으로 사용하여 항목의 스타일을 지정합니다.
2. 리피터 위와 아래에 코드 블록을 추가합니다.

코드 블록

첫 번째 코드 블록

이 PHP 코드를 repeater 위에 있는 코드 블록에 추가하십시오.

 <?php function b58_add_cta_last ( $posts, $query ) { $cta_post = get_post( 347 ); $posts[] = $cta_post; return $posts; } add_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 코드 언어: HTML, XML ( xml )

이 코드를 살펴보겠습니다.

1. get_post 를 사용하여 ID가 ​​347인 게시물을 가져옵니다. 이것은 리피터의 끝에 삽입하려는 게시물입니다.
2. $posts 배열의 끝에 이전 게시물을 추가합니다.
3. 수정된 배열을 반환합니다.
4. 이전에 만든 함수를 the_posts 필터 후크에 추가합니다.

두 번째 코드 블록

repeater 아래의 코드 블록에 다음 PHP를 추가하십시오.

 <?php remove_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 코드 언어: HTML, XML ( xml )

이것은 이전에 추가된 기능을 제거하는데 사용되는 하나의 the_posts 필터 후크가 호출됩니다. 제거하지 않으면 나중에 실행되는 다른 쿼리에 영향을 미칩니다.

결과

ID 347로 받은 게시물이 리피터 끝에 추가되었습니다. 이미지에서 목적지 목록이 있고 끝에는 일반 게시물이 있습니다. 그래서 여행이나 예약 방법 등에 대해 이야기하는 기사였을 수 있습니다.

사용자 정의 필드와 같은 동적 데이터를 반복 항목에 추가하고 해당 메타 키가 다른 항목에 존재하지 않으면 해당 div에서 공백이 됩니다. 따라서 이상한 레이아웃 문제를 피하기 위해 조건을 사용하여 메타 키가 존재하는지 확인해야 합니다.

Easy Posts 요소 안에 다른 목록 추가하기

여기에는 Easy Posts 요소에 대한 PHP 템플릿 편집이 포함됩니다.

이 예에서는 게시물 목록이 있는 반복 레이아웃이 포함된 재사용 가능한 파트를 만든 다음 다른 게시물 집합을 쿼리하는 Easy Post 요소에 삽입합니다. 나는 이것을 위해 Destination CPT를 사용하지 않을 것입니다.

재사용 가능한 부품으로 목록 생성

1. 3가지 주요 요소, 제목, 반복 레이아웃용 div 및 텍스트를 포함하는 재사용 가능한 새 파트를 만듭니다.
2. 리피터는 기본 게시물 유형과 뉴스 카테고리에 대한 쿼리를 실행하고 나는 no_found_rows = true를 설정하여 페이지 매김을 비활성화합니다.
3. 상단 텍스트 요소는 BREAKING NEWS라고 말하고 하단 텍스트는 뉴스 게시물 아카이브에 대한 링크입니다.
4. 리피터 위와 아래에 코드 블록을 추가하려면 이 코드 블록을 사용하여 리피터 쿼리를 변경해야 합니다.

그것이 재사용 가능한 부품의 구조입니다.

코드 블록

첫 번째 코드 블록

이 repeater는 Easy Post 요소 내에 존재하지만 해당 쿼리는 Easy Post와 독립적이어야 합니다. Easy Post 요소가 내부 목록에 영향을 줄 수 있는 한 가지 방법은 페이지 매김을 사용하는 것입니다. 누군가 Easy Post 요소에 대해 2페이지를 클릭하면 기본적으로 내부 목록도 2페이지를 가져옵니다. 이를 방지해야 합니다.

리피터 위의 첫 번째 코드 블록은 페이지된 쿼리 인수를 1로 설정하는 pre_get_posts 작업을 추가하여 항상 첫 번째 페이지를 반환하도록 합니다.
이 반복 레이아웃이 정적 홈 페이지에 있는 경우 대신 page = 1을 사용하십시오. (참조: WP_Query 문서)

 <?php function b58_set_paged ( $query ) { // use paged if the repeater is on an archive page // or page other than a static home page. $query->set( "paged" , 1 ); // use page if this repeater is on a static home page. // $query->set( "page", 1 ); return $query; } add_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 코드 언어: HTML, XML ( xml )

두 번째 코드 블록

두 번째 코드 블록은 이전에 추가된 작업을 제거하여 향후 쿼리에 영향을 미치지 않도록 합니다.

 <?php remove_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 코드 언어: HTML, XML ( xml )

이제 리피터는 항상 결과의 첫 페이지를 표시합니다.

이 재사용 가능한 부품의 템플릿 ID를 기록해 둡니다. WP 대시보드의 주소 표시줄에서 가져올 수 있습니다.

산소 빌더 과정 - 곧 제공됩니다!

Oxygen Builder Mastery 과정은 ACF, MetaBox 및 WooCommerce 모듈이 포함되어 있어 초심자부터 전문가까지 여러분을 안내합니다.

출시 알림 및 할인 받기

쉬운 포스트

1. 쉬운 게시물을 추가하려는 실제 페이지에서 해당 페이지에 추가하고 Masonry 사전 설정을 선택했습니다.
2. 뉴스가 아닌 다른 카테고리의 게시물로 쿼리를 변경합니다.
3. 그리드가 깔끔하게 보이도록 1개의 추가 게시물을 수동으로 추가할 것이기 때문에 페이지당 게시물 수를 홀수로 설정했습니다.

템플릿 PHP

Easy Posts 스타일 패널에서 템플릿 PHP로 이동합니다. 여기에서 Easy Post 컨테이너의 모든 항목에 사용되는 템플릿을 편집할 수 있습니다(템플릿이 반복됩니다.).

기본 템플릿 아래에 다음 php를 붙여넣습니다.

 <?php $current_index = $this ->query->current_post; // Place this element after the 3rd post item, or // the last post if the # of posts is less than 3 // this ensure this element is added even if there // are less than 3 posts on the page. $other_post_index = $this ->query->post_count < 3 ? $this ->query->post_count - 1 : 2 ; if ( $current_index == $other_post_index ) { echo "<div class='oxy-post'>" ; echo do_oxygen_elements( json_decode( get_post_meta( 321 , 'ct_builder_json' , true ), true ) ); echo "</div>" ; } ?>
 코드 언어: HTML, XML ( xml )

이 코드를 살펴보겠습니다.

1. 먼저 현재 표시되고 있는 항목의 인덱스를 가져와 $current_index 로 설정합니다. 배후에서 Oxygen Builder는 Easy Posts 요소에 설정된 쿼리에서 반환된 모든 항목을 반복하고 목록 내의 모든 게시물에 대해 템플릿 내부의 코드를 실행합니다. $this->query 를 사용하여 쿼리 변수에 접근하는 방법이 있으며 현재 처리 중인 항목의 인덱스는 쿼리 내부의 current_post 입니다.
2. 내 다른 항목이 삽입되어야 하는 인덱스를 결정합니다. 저는 처리될 총 아이템 수를 확인하여 하고, 3개 미만일 경우 다른 아이템을 Easy Post의 마지막 아이템으로 추가합니다. 그렇지 않으면 세 번째 요소(색인이 0에서 시작) 뒤에 추가하여 다른 항목을 Easy Post 그리드의 네 번째 항목으로 만듭니다.
3. 항목을 추가할 인덱스에 있는 경우 Oxygen의 내장 함수 do_oxygen_elements 를 사용하여 재사용 가능한 항목(템플릿 ID 321)을 렌더링하고 oxy-post 클래스가 있는 div에 래핑합니다.

결과

재사용 가능한 부품은 Easy Posts 그리드의 4번째 항목으로 배치됩니다.

재사용 가능한 부품의 목록은 목록 내에서 스크롤 가능합니다.

재사용 가능한 부분의 pre_get_posts 후크는 항상 게시물의 첫 번째 페이지를 로드하므로 Easy Post의 다른 페이지로 이동할 수 있고 결과는 동일하게 유지됩니다.

이 방법을 사용하면 위 코드의 do_oxygen_elements 부분을 대체하고 Easy Posts 요소 안에 원하는 것을 추가하는 고유한 HTML을 작성할 수 있습니다.

추가된 요소는 oxy-post 클래스에 설정된 크기 조정 규칙을 따라야 함을 기억하십시오. 그렇지 않으면 목록의 나머지 부분이 사라질 수 있습니다.

Repeater 내부에 용어 요소 삽입

이 방법은 용어별로 정렬된 게시물 목록 내부에 용어에 대한 링크를 삽입하기 위해 the_posts 후크를 사용하는 것을 기반으로 합니다.

따라서 다음과 같이 반복되는 목록을 상상해 보십시오.
파랑 A, 파랑 B, 파랑 C, 파랑 모두 보기, 빨강 X, 빨강 Y, 빨강 Z, 빨강 모두 보기 등

전자 상거래 사이트에서 몇 가지 주요 항목을 나열하고 용어 아카이브를 연결하려는 경우 매우 유용합니다.

이 방법에는 많은 단계가 필요하지만 매우 간단합니다.

단계들

1. 사용자 정의 필드 설정
2. 도우미 함수 집합 만들기
3. 원하는 게시물 유형을 쿼리하는 리피터를 추가합니다.
4. the_posts 후크를 사용하여 위 쿼리로 가져온 게시물 목록 수정

사용자 정의 필드 설정

Term 개체와 함께 추천 이미지를 사용하려는 경우 이 단계는 선택 사항입니다.

내 예에서는 추천 이미지를 항목의 배경으로 사용합니다. 기본적으로 용어에는 추천 이미지가 없으므로 고급 사용자 정의 필드가 있는 사용자 정의 분류에 추가했습니다.

사용자 정의 필드는 ID를 반환하는 이미지 필드입니다.

도우미 함수

Code Snippets에 다음 도우미 함수를 추가하고 원하는 방법을 사용하여 동일한 작업을 수행합니다.

function b58_create_post_from_term ( $term, $post_type= "post" ) { $post_id = -1 * $term->term_id; // negative ID, to avoid clash with a valid post $post = new stdClass(); $post->ID = $post_id; $post->post_author = 1 ; $post->post_date = current_time( "mysql" ); $post->post_date_gmt = current_time( "mysql" , 1 ); $post->post_title = $term->name; $post->post_content = $term->description; $post->post_status = "publish" ; $post->comment_status = "closed" ; $post->ping_status = "closed" ; $post->post_name = "regions/" . $term->slug; $post->post_type = $post_type; $post->filter = "raw" ; // important! $wp_post = new WP_Post( $post ); wp_cache_add( $post_id, $wp_post, "posts" ); return $wp_post; } function b58_get_the_featured_image ( $get_url, $size = 'thumbnail' ) { global $post; $post_id = $post->ID; $thumbnail_id = 0 ; if ( $post_id > 0 ) { // this is a regular post. $thumbnail_id = get_post_thumbnail_id( $post_id ); } else { // this is our fake post and it doesn't // have a thumbnail ID so we have to use the // custom field we set for this term. $pos_term_id = -1 * $post_id; $thumbnail_id = get_field( "term_background" , "term_" . $pos_term_id ); } if ( $get_url ) { return wp_get_attachment_image_url( $thumbnail_id, $size ); } return $thumbnail_id; } function b58_get_the_link () { global $post; $post_id = $post->ID; if ( $post_id > 0 ) { return get_permalink( $post_id ); } // post id is negative, we use a negative post id in our dummy post object $pos_term_id = -1 * $post_id; $term_link = get_term_link( $pos_term_id ); return $term_link; }
 코드 언어: PHP ( php )

이 스니펫의 각 기능을 검토해 보겠습니다.

b58_create_post_from_term( $term, $post_type="post" )

이것은 WP 용어 개체( $term )를 사용하고 $post_type에 설정된 유형의 가짜 게시물을 만듭니다.
ID를 실제 게시물이 아닌 용어임을 나타내는 일종의 "플래그"로 먼저 실제 ID의 음수로 설정합니다.
WP_Post 객체에 필요한 다른 변수를 설정하지만 우리 목적에서 주목해야 할 변수는 post_title뿐입니다.
그런 다음 이 게시물을 wp 캐시에 추가합니다. 무언가가 이 게시물을 요청하고 음수 ID를 가지고 있기 때문에 데이터베이스로 이동하려고 하면 실패합니다.

b58_get_the_featured_image( $get_url, $size = 'thumbnail' )
 코드 언어: PHP ( php )

용어에 대한 이미지가 있는 사용자 정의 필드를 추가하지 않은 경우 이 기능을 건너뛰십시오.
이 함수는 2개의 인수인 $get_url 을 취하며 이는 부울이 될 것이며 이미지의 ID 또는 URL을 반환할지 여부를 결정합니다.
두 번째 인수는 크기를 설정합니다.

먼저 현재 게시물의 ID가 음수인지 확인하고, 음수이면 용어인 가짜 게시물이고, 그렇지 않으면 실제 게시물입니다.
가짜 게시물인 경우 해당 용어의 ID에 대해 get_field 를 사용하여 이미지 ID를 검색합니다.
실제 게시물인 경우 내장된 get_post_thumbnail_id 함수를 사용합니다.

둘째, $get_url 이 false이면 ID만 반환됩니다. 그렇지 않으면 wp_get_attachment_image_url 을 사용하여 이미지 URL을 가져오고 이를 반환합니다.

b58_get_the_link()

이 게시물에 대한 링크(고유 링크 또는 용어 링크)를 반환합니다.
게시물 ID가 음수이면 가짜 게시물입니다. 실제 게시물인 경우 get_permalink 대신 get_term_link 를 사용하여 링크를 가져옵니다.

그것이 도우미 기능에 대한 것입니다.

리피터

목적지에 대한 쿼리와 함께 페이지에 리피터를 추가합니다. 나는 이전 예와 동일한 레이아웃을 사용하고, 추천 이미지 배경이 있는 중심 게시물 제목과 게시물 영구 링크 또는 용어 링크에 대한 div 링크를 사용합니다.

추천 이미지 배경의 경우 Dynamic Data에서 일반적인 추천 이미지 방법을 사용하지 않습니다. 항목이 "가짜 게시물"(용어)일 수 있기 때문에 도우미 함수를 사용하여 이미지를 가져오고 싶기 때문에 PHP 함수 반환 값 메서드를 사용합니다. 따라서 div 배경 URL의 경우 PHP를 사용합니다. 함수 이름 b58_get_the_featured_image 이고 매개변수가 true 인 함수 반환 값. 여기서도 크기를 지정할 수 있지만 지정하지 않습니다.

링크에 대해서도 같은 생각입니다. Permalink 동적 데이터는 가짜 게시물에 대해 잘못될 것이기 때문에 평소처럼 사용할 수 없으므로 대신 b58_get_the_link 를 사용합니다.

the_posts 후크

리피터 전후에 코드 블록을 추가하기 전과 마찬가지로, 이 방법으로 후크로 호출할 함수를 설정하고 나중에 해당 함수를 제거하여 다른 쿼리에 영향을 미치지 않도록 할 수 있습니다.

다음은 리피터 위의 코드 블록에 대한 코드입니다.

첫 번째 코드 블록

 <?php function b58_add_tax_links ( $posts, $query ) { // ignore if in admin if ( is_admin() ) { return $posts; } try { $terms = get_terms([ "taxonomy" => "regions" , "hide_empty" => true , "orderby" => "name" , "order" => "ASC" ]); } catch ( Exception $e) { echo 'Caught exception: ' , $e->getMessage(), "\n" ; return $posts; } if ( empty ( $terms ) ) { return $posts; } $new_posts = array (); foreach ( $terms as $term ) { for ( $i = 0 ; $i < count($posts); $i++ ) { if ( has_term( $term->slug, "regions" , $posts[$i] ) ) { $posts[$i]->post_title = $posts[$i]->post_title; $new_posts[] = $posts[$i]; } } // create a post object from this term. $term_post = b58_create_post_from_term( $term, "destinations" ); $new_posts[] = $term_post; } return $new_posts; } add_filter( 'the_posts' , 'b58_add_tax_links' , 10 , 2 ); ?>
 코드 언어: HTML, XML ( xml )

이 코드를 살펴보겠습니다.

1. 관리자 대시보드에 있는 경우 아무 것도 하지 마십시오.
2. 그렇지 않으면 이름을 기준으로 오름차순으로 정렬된 슬러그 regions 이 있는 분류에 대해 get_terms 쿼리를 실행합니다. 지역 분류는 대상 사용자 정의 포스트 유형에 첨부되며 대상이 위치한 7개 대륙 중 하나이므로 나이로비와 카이로는 아프리카에, 홍콩은 아시아에 있는 식입니다.
3. 용어 이름에 오타가 있거나 분류에 대한 용어가 없는 경우 몇 가지 검사 및 오류 처리를 추가하면 원래 결과만 반환됩니다.
4. 검색어 쿼리가 모든 검사를 통과하면 $new_posts 라는 새 빈 배열을 선언하고 이 배열에 게시물을 추가하고 실제 게시물 배열 대신 반환합니다.
5. $terms 배열을 반복하고 각 항에 대해 $posts 배열을 반복하고 해당 항이 있는 항목을 찾아 $new_posts 에 추가합니다.
6. $posts 배열 검색을 마친 후 현재 $term 으로 가짜 게시물을 만들고 게시물 유형의 대상을 지정합니다(정말 무엇이든 될 수 있음). 그런 다음 이 가짜 게시물을 $new_posts 에 추가합니다.

함수가 반환되면 $new_posts 배열 항목은 다음과 같아야 합니다.
카이로, 나이로비, 아프리카, 홍콩, 아시아, 런던, 유럽 등. 아프리카, 아시아, 유럽은 가짜 게시물입니다.

마지막으로 위의 함수를 the_posts 후크에 추가합니다.

두 번째 코드 블록

리피터 아래의 코드 블록은 다음과 같습니다.

 <?php remove_filter( 'the_posts' , 'b58_add_tax_links' ); ?>
 코드 언어: HTML, XML ( xml )

이것은 후크에서 함수를 제거합니다.

목록 형식 지정

이 시점에서 리피터가 완료됩니다. 분류가 동일한 항목은 함께 그룹화되며 각 그룹의 끝에 용어 아카이브에 대한 링크가 있습니다. 그러나 목록은 약간 뒤죽박죽이며 모두 큰 그리드에서 함께 실행됩니다. 각 항목 그룹과 해당 아카이브 링크가 한 줄에 있기를 원하며 이것이 수행하는 방법입니다.

요소 설정

1. repeater 아래에서 반복되는 항목 div를 선택하고 data-post-id 라는 속성을 추가하고 해당 값으로 동적 데이터 Post ID를 사용합니다.
2. 리피터를 선택하고 ID를 지정하거나 현재 ID를 복사하십시오. 내 ID는 _dynamic_list-5-343 입니다.

제이쿼리

맨 위 코드 블록(하나가 작동하거나 새 블록)에서 Javascript 섹션에 다음 코드를 추가합니다.

 jQuery( ( $ ) => { $( "#_dynamic_list-5-343 [data-post-id^=\"-\"]" ).after( $( "<div />" ) .css({ height : "0px" , "flex-basis" : "100%" }) ) });
 코드 언어: JavaScript ( javascript )

이것은 용어 div(게시물 ID가 "-"로 시작, 음수) 뒤에 div를 추가하고 div에는 반복기 행에 줄 바꿈을 추가하는 것과 같은 flex-basis: 100% 및 height: 0px 가 있습니다.

그리고 그게 다야.

결과

반복되는 각 항목에는 각각의 게시물 제목과 추천 이미지가 배경으로 있습니다. 약관 항목에 대해 "탐색"이라는 단어를 추가하고 게시물 ID가 음수(< 0)일 때 조건부로 표시되도록 설정했습니다.

결론

이러한 기술을 사용하여 Oxygen Builder 리피터 또는 Easy Posts를 멋지게 꾸밀 수 있기를 바랍니다.

질문이 있는 경우 트위터 @robchankh로 DM을 보내거나 FB에 댓글을 남겨서 이를 게시할 수 있습니다.