WordPress 루프 설명: 정의 및 작동 방식

루프는 워드프레스의 핵심 부분입니다. 그것이 없으면 WordPress 웹 사이트에서 콘텐츠를 볼 수 없습니다. 블로그 페이지와 아카이브 및 단일 페이지의 정적 콘텐츠에 기사가 표시되는지 확인하는 역할을 합니다.

당신이 테마 디자이너라면 그것을 사용하는 방법을 배우지 못할 것입니다. 그러나 일반 WordPress 사용자로서 그것이 존재하는지조차 알지 못할 수 있습니다.

이를 완화하기 위해 이번 포스트에서는 워드프레스 루프에 대해 자세히 설명하도록 하겠습니다. 그것이 무엇인지, 어떻게 작동하는지, WordPress에서 찾을 수 있는 위치에 대해 알아보겠습니다. 또한 자신만의 것을 만드는 방법을 배우고 WordPress 루프에 대한 이해를 확고히 하기 위해 몇 가지 예를 볼 것입니다.

WordPress 루프는 무엇이며 어디에서 찾을 수 있습니까?

워드프레스 루프가 무엇인지 간단히 설명하자면 워드프레스 웹사이트의 페이지에 있는 콘텐츠를 가져와 출력하는 마크업일 뿐입니다. 그것이 정적 페이지, 게시물, 블로그 페이지 또는 아카이브이든 - WordPress가 데이터베이스에서 콘텐츠를 가져와 페이지에 표시하는 모든 곳에서 루프가 관련됩니다.

그러나 처음에 루프라고 불리는 이유는 무엇입니까?

반복적으로 실행되기 때문입니다. 또한 아래에서 볼 수 있듯이 말 그대로 PHP 루프로 구성됩니다.

WordPress 루프는 얼마나 자주 실행됩니까?

더 이상 표시할 것이 없을 때까지. 정적 페이지에서도 사용 가능한 콘텐츠를 반복합니다. 단, 이 경우 1회 통과 후 정지합니다.

WordPress 루프는 어떻게 생겼습니까?

우리가 말하는 내용을 더 명확하게 하기 위해 예를 보고 단계별로 살펴보겠습니다. 다음은 간단한 WordPress 루프의 모양에 대한 예입니다.

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

PHP를 이미 알고 있거나 WordPress 개발자라면 이해하는 데 문제가 없을 것입니다. 그러나 다른 모든 사람들을 위해 조각을 하나씩 살펴보겠습니다.

• if ( have_posts() ) : — have_posts() 함수를 사용하는 if 문입니다. 문이 프로그래밍에서 일반적인 경우 "다음 조건이 적용되면 계속"이라고 간단히 말합니다. 이 경우 조건은 have_posts() 이며, 이는 단순히 표시할 수 있는 게시물이 있는지 여부를 확인하는 것입니다.
• while ( have_posts() ) : — 이 줄은 while 루프이며 WordPress 루프의 시작을 표시합니다. 조건이 참인 한 포함된 코드를 실행합니다. 다시 말하지만 조건은 WordPress에 저장된 게시물이 있는지 여부입니다. true 를 반환하는 빈도는 관리자 인터페이스의 WordPress 설정에 설정된 게시물 수에 따라 결정됩니다.
• the_post(); — 이것은 루프가 실행하는 코드입니다. 다음 게시물에 사용할 수 있는 모든 데이터를 호출하고 표시할 준비를 위해 저장하는 WordPress 기능입니다. 이를 위해 아래에서 설명할 템플릿 태그가 많이 있습니다.
• // Display content here — 표시할 콘텐츠 부분과 방식을 결정하는 마크업을 여기에 배치합니다. 일반적으로 PHP와 HTML이 혼합되어 있습니다. 더 복잡하기 때문에 여기에 표시하지 않고 나중에 다시 살펴보겠습니다.
• endwhile; — 필요한 작업을 수행한 후 while 루프를 닫는 코드 조각.
• endif; — 위와 같지만 if 문의 경우입니다.

따라서 기본적으로 구조는 다음과 같습니다. 게시물이 있는지 확인한 다음 데이터베이스에서 필요한 데이터를 가져와서 미리 정해진 방식으로 표시하고, 표시할 유효한 게시물이 있는 한 이것을 반복합니다.

대체 구문

한 가지 빠른 것은 때때로 다음과 같이 작성된 루프를 볼 수도 있습니다.

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

이것은 대체 PHP 구문에서 위의 예와 정확히 동일합니다. 어느 것을 사용하느냐는 정말 당신에게 달려 있습니다. 일관성을 위해 첫 번째 변형을 계속하겠습니다.

WordPress 루프는 어디에서 찾을 수 있습니까?

콘텐츠가 페이지에 나타날 때마다 루프가 항상 작동한다는 사실은 이미 WordPress 루프를 찾을 위치에 대한 답을 제공합니다. 답변은 콘텐츠를 표시하는 테마의 모든 템플릿 파일에 있습니다.

또는 테마 아키텍처에 따라 템플릿 부분에 있을 수도 있습니다. 이들은 자주 사용되는 코드 조각(예: 루프)을 포함하는 템플릿 파일입니다. 매번 동일한 코드 조각을 재사용하는 대신 다른 파일로 가져올 수 있습니다.

예를 들어, Twenty Twenty-One 테마의 page.php 파일을 열면 여기에서 루프가 여러 부분으로 분할된 것을 볼 수 있습니다. 파일 자체 내에서 시작하는 동안 데이터를 출력하는 방법을 결정하는 섹션은 content-page.php 라는 템플릿 부분에 있습니다.

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

WordPress 템플릿 계층 구조는 시스템이 어떤 종류의 페이지를 표시하는 데 사용하는 파일을 결정하고 각 파일에는 루프 또는 찾을 수 있는 위치에 대한 참조가 포함되어야 합니다.

또한 루프가 개별 파일에서 다르게 보일 수 있음을 의미합니다. 즉, 다른 페이지에서 의미합니다. 예를 들어 아카이브에서는 발췌한 게시물만 표시하고 메인 블로그 페이지에서는 전체 게시물을 표시할 수 있습니다(최대 "더 읽기" 링크까지). 이를 위해서는 다른 종류의 마크업이 필요합니다. 이것이 루프가 home.php 및 archive.php 내부에서 동일하게 보이지 않는 이유입니다.

루프를 만드는 방법

루프를 생성하기 위해 기본적으로 위에서 분석한 간단한 코드로 시작할 수 있습니다. 이것이 바로 표준 루프입니다. 여기 다시 있습니다:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

까다로운 부분은 우리가 생략한 것입니다. 콘텐츠의 표시를 결정하는 부분입니다. 이를 위해 언급했듯이 일반적으로 HTML과 PHP를 혼합하여 사용합니다. 예를 들어 다음은 WordPress에 사용자 정의 클래스 및 ID, 제목을 h1 제목, 추천 이미지 및 콘텐츠와 함께 <article> 태그로 래핑된 게시물을 뱉어내도록 지시하는 방법입니다.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

위에서 눈에 띄는 것은 밑줄로 작성된 태그가 많이 있다는 것입니다. 콘텐츠의 공통 부분을 호출하기 위한 바로 가기를 제공하는 WordPress 템플릿 태그입니다. 여기에서 게시물 제목을 표시하는 데 the_title() , 추천 이미지에 the_post_thumbnail() , 메인 콘텐츠에 the_content() 를 사용합니다. the_excerpt() 또는 the_category() ) 와 같은 더 많은 것이 있습니다. 여기에서 옵션 목록을 찾을 수 있습니다.

WordPress 루프에서 중요한 또 다른 것은 조건부 태그입니다. 특정 조건에서만 무언가를 표시하기 위해 루프 관련 마크업에서 많이 사용되는 것을 볼 수 있습니다. 예를 들어, 추천 이미지가 없을 때 WordPress가 페이지에 이를 표시하지 못하도록 하기 위해 the_post_thumbnail() 을 조건문으로 래핑하는 것이 매우 일반적입니다.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

아래에 더 많은 예가 있습니다. 조건부 태그에 대해 자세히 알아보려면 WordPress Codex를 확인하십시오.

WordPress 루프의 예

이 튜토리얼의 마지막 부분으로 WordPress 루프를 사용하는 방법에 대한 몇 가지 예를 살펴보겠습니다.

스물 스물한 테마

Twenty Twenty-One 테마를 보면 가장 먼저 눈에 띄는 것은 템플릿 파트를 많이 사용한다는 점입니다. page.php , single.php 및 index.php 와 같은 모든 표준 템플릿 파일은 파일 내부에서 루프를 시작하지만 get_template_part 를 사용하여 콘텐츠 표시를 다른 파일로 오프로드합니다. 이 경우에는 각각 content content-page.php , content-single.php , content.php 입니다. 다음은 예를 들어 single.php 의 단축 버전입니다.

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

이것은 다른 파일에서도 볼 수 있습니다. 예를 들어 머리글과 바닥글에도 자체 템플릿 부분이 있습니다. 다른 위치에서 루프 내부에 대한 참조를 볼 수 있습니다. 예를 들어 content-single.php 를 보면 끝에 author-bio.php 템플릿 부분에 대한 호출을 볼 수 있습니다.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

그 외에도 비교적 표준적인 공정입니다.

1. 사용자 정의 ID 및 클래스가 있는 <article> HTML 요소 열기
2. h1 제목으로 래핑된 제목을 출력하고 Twenty Twenty-One에 맞춤화된 기능을 사용하여 추천 이미지를 표시하는 기사 헤더 요소를 만듭니다.
3. 단일 게시물 콘텐츠를 출력하기 위해 the_content() 템플릿 태그를 포함하는 entry-content 요소로 후속 조치를 취하십시오.
4. 페이지 매김을 위한 마크업과 포스트 메타 정보를 표시하기 위한 다른 Twenty Twenty-One 기능이 있는 항목 바닥글 포함
5. 마지막으로 자체 템플릿 부분에 저자 약력에 대한 앞서 언급한 호출이 있습니다.

Twenty Ten WordPress 기본 테마

최초의 WordPress 기본 테마인 Twenty Ten으로 돌아가서 Subversion 저장소를 사용하여 버전 1.0의 파일을 보면 루프 및 템플릿 파일 처리가 시간이 지남에 따라 어떻게 발전했는지 알 수 있습니다. 그 당시에는 많은 템플릿 파일에 재사용 가능한 템플릿 부분에 아웃소싱하는 대신 자체적인 완전한 WordPress 루프가 포함되어 있었습니다. 이것은 테마의 page.php 에서 명확하게 볼 수 있습니다.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

테마가 제공하는 사용자 정의 페이지 템플릿을 제어하는 ​​파일인 onecolumn-page.php 에서도 동일한 내용을 볼 수 있습니다. 또한 주목할만한 점은 그 당시 한 줄로 작성된 루프에 대한 이전 호출을 사용하고 있다는 것입니다.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

현대 테마에서는 코드 가독성을 높이기 위해 앞에서 본 것처럼 여러 줄에 걸쳐 퍼져 있는 것을 가장 일반적으로 볼 수 있습니다.

Twenty Ten 테마에는 내 단어 제한을 초과하지 않고 여기에 포함하기에는 너무 긴 독립형 loop.php 파일도 있습니다. 여러 유형의 게시물(이미지 갤러리, Asides 카테고리의 게시물, 기타 모든 게시물)의 표시를 제어하는 ​​세 부분으로 나뉩니다. 이들 각각은 아카이브 및 검색 페이지와 같은 다양한 경우를 설명하기 위해 if 및 else 문으로 더 세분화됩니다.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

전체 내용에는 꽤 복잡한 논리가 포함되어 있어 다소 길고 복잡하게 나옵니다. 오늘 다른 방법으로 이를 처리할 수 있어 기쁩니다. 에뮬레이트하고 싶지 않은 WordPress 루프 예제를 보려면 이를 살펴보시기 바랍니다.

그건 그렇고, 내가 그때부터 개발자들에게 너무 가혹하다고 생각한다면 안심하십시오. 그들은 내 평가에 동의합니다. loop.php 가 루프를 닫는 개발자 주석을 보십시오.

 <?php endwhile; // End the loop. Whew. ?>

WordPress 쿼리 루프 블록

비교적 새로운 Gutenberg 기능이기 때문에 인식하지 못할 수도 있지만 이제 블록 편집기(확장하여 전체 사이트 편집)에도 WordPress 루프가 포함된 블록이 있습니다. 쿼리 루프 블록 이라고 하며 다른 블록처럼 사이트에 추가할 수 있습니다. 가장 쉬운 방법은 슬래시를 추가하고 /queryloop 과 같이 이름을 입력하는 것입니다. Enter 키를 누르면 페이지에 나타납니다.

블록을 사용하면 코드를 작성하지 않고도 PHP 루프를 생성할 수 있습니다. 사이트의 최신 게시물이 자동으로 표시됩니다. 그 외에도 몇 가지 사용자 정의 옵션이 있습니다. 우선, 블록에는 여러 사전 설정 레이아웃이 함께 제공됩니다. 화살표를 통해 순환하거나 그리드 옵션을 클릭하여 한 번에 모두 볼 수 있습니다.

원하는 것을 선택하거나 원하는 옵션에 도달했다면 선택을 클릭하여 선택 을 마무리하십시오. 레이아웃은 블록 패턴으로 구성되어 있으므로 미리 정렬된 단일 블록 그룹이 있다는 점에 유의하는 것이 중요합니다. 이것은 또한 필요에 따라 다르게 배열할 수 있음을 의미합니다. 여전히 일반 블록입니다. 화살표를 사용하거나 드래그 옵션을 길게 클릭하여 원하는 위치로 이동합니다.

또한, 각 블록(종종 각 블록 그룹)은 기본 편집기 화면과 사이드바에서 일반적인 옵션과 함께 제공됩니다. 여기에서 색상, 글꼴 크기, 형식 등을 변경할 수 있습니다.

만족하면 페이지를 게시하거나 미리 보면 사용자 정의 WordPress 쿼리 루프가 페이지에 표시됩니다. 따라서 WordPress 개발자가 아니고 PHP를 이해하지 못하더라도 루프가 제공하는 것을 계속 이용할 수 있습니다.

간단히 말해서 설명하는 WordPress 루프

루프는 모든 WordPress 전문가가 익숙해야 하는 것입니다. 그러나 더 캐주얼한 사용자일지라도 작동 방식을 이해하는 것은 여전히 ​​나쁜 생각이 아닙니다. 원하는 경우 문제를 해결하거나 사용자 지정 페이지 템플릿을 만드는 것이 더 쉬울 수 있습니다.

이 포스트에서 우리는 루프가 무엇인지, 어디에 상주하는지, 그리고 자세히 분석했습니다. 또한 기본 테마와 새 쿼리 블록에서 고유한 루프와 예제를 만드는 방법을 살펴보았습니다. 이제 WordPress 루프를 만들고 사용자 지정하는 데 필요한 모든 것을 알았습니다.

WordPress 루프를 가장 좋아하는 용도는 무엇입니까? 아래 댓글에 여러분의 생각을 공유해주세요!

이미지: Jonny Gios/Unsplash, Tine Ivanic/Unsplash