그리드 레이아웃을 사용하여 WordPress 게시물을 표시하는 방법
게시 됨: 2022-08-30WordPress 게시물을 그리드 형식으로 표시하시겠습니까?
WordPress에서 콘텐츠를 표시할 때 그리드 레이아웃은 추가 옵션을 제공합니다. 이것은 사용자 정의 페이지를 디자인할 때 유용할 수 있습니다. 이 기사에서는 WordPress 게시물을 사이트 어디에서나 그리드 스타일로 빠르게 표시하는 방법을 알려드립니다.
언제 WordPress 그리드 레이아웃이 필요합니까?
모든 WordPress 테마는 대부분의 웹사이트에서 잘 작동하는 고전적인 수직 블로그 포스트 스타일을 지원합니다. 그러나 이 스타일은 특히 기사가 많은 경우 많은 공간을 차지할 수 있습니다. 블로그용 맞춤 홈페이지를 만드는 경우 그리드 스타일을 사용하여 가장 최근 콘텐츠를 표시할 수 있습니다.
이렇게 하면 홈 페이지에 더 많은 항목을 추가할 수 있습니다. 또한 포스트 그리드는 추천 사진을 강조하여 더 미학적으로 매력적이고 클릭하기 쉽게 만듭니다. 포스트 그리드는 독창적인 포트폴리오 및 기타 형태의 고유한 자료를 표시하는 데에도 사용할 수 있습니다.
블록 편집기를 사용하여 WordPress 포스트 그리드 레이아웃을 만듭니다.
WordPress 블록 편집기를 사용하면 포스트 그리드 배열로 포스트와 썸네일을 쉽게 표시할 수 있습니다. 내장된 포스트 그리드 블록을 사용하여 자신만의 그리드를 구성할 수 있습니다.
변경하고자 하는 페이지를 열어 '플러스' 블록 추가 버튼을 클릭하고 '쿼리 루프'를 검색한 후 블록을 클릭하여 추가합니다.
이 블록은 게시물 루프를 페이지에 통합합니다.
그런 다음 블록 상단에서 '공백 시작'을 선택하여 기둥 그리드를 만듭니다.
포스트 그리드에 표시하려는 정보의 종류에 따라 몇 가지 옵션이 있습니다.
우리는 '이미지, 날짜 및 제목'을 사용하지만 원하는 대로 할 수 있습니다.
그런 다음 이미지 위에 마우스를 놓고 '그리드 보기' 옵션을 선택합니다.
이렇게 하면 목록이 게시물 그리드로 변환됩니다.
그러면 표시되는 정보를 사용자 정의할 수 있습니다.
먼저 블록 맨 아래에 있는 페이지 매김을 제거합니다. 그것을 클릭하고 '세 개의 점' 옵션 메뉴를 선택하기만 하면 됩니다.
그런 다음 '페이지 매김 제거'를 선택하십시오.
이렇게 하면 블록에서 요소가 자동으로 삭제됩니다.
마찬가지로 게시물에서 날짜를 제거하거나 독자를 위해 추가 게시물 정보를 남길 수 있습니다.
그런 다음 게시물 썸네일과 게시물 제목에 대한 링크를 추가합니다.
게시물 썸네일을 클릭하고 오른쪽 옵션 상자에서 '게시물 링크' 토글을 전환하기만 하면 됩니다.
그런 다음 게시물 제목에 대해 이 과정을 반복합니다.
완료되면 '업데이트' 또는 '게시' 버튼을 클릭하여 게시물 그리드를 게시합니다.
이제 WordPress 웹 사이트를 방문하여 새 WordPress 게시물 그리드를 볼 수 있습니다.
그런 다음 게시물 제목에 대해 이 과정을 반복합니다. 완료되면 '업데이트' 또는 '게시' 버튼을 클릭하여 게시물 그리드를 게시합니다. 이제 WordPress 웹 사이트를 방문하여 새 WordPress 게시물 그리드를 볼 수 있습니다.
WordPress에 코드를 추가하여 WordPress 포스트 그리드 레이아웃을 만들 수 있습니다.
이 접근 방식을 사용하려면 WordPress에 코드를 삽입하는 방법에 대한 기본적인 이해가 필요합니다. 코드 추가를 시작하기 전에 먼저 포스트 그리드의 새 이미지 크기를 설정해야 합니다.
다음으로 코드 조각을 추가할 WordPress 테마 파일을 찾습니다. 예를 들어, 모든 기사의 맨 아래에 표시되도록 single.php 파일에 포함할 수 있습니다. 또한 자신의 페이지 템플릿을 만들어 블로그 게시물 그리드 레이아웃을 썸네일로 표시할 수도 있습니다.
그런 다음 WordPress에 코드를 추가할 수 있습니다. 코드 샘플이 매우 길기 때문에 섹션별로 분해하겠습니다. 시작하려면 테마 템플릿 파일에 다음 코드 스니펫을 삽입하세요.
<?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>
포스트 루프 쿼리는 이 코드 라인에서 설정됩니다. 원하는 경우 '페이지당 게시물' 변수를 변경하여 페이지당 더 많은 게시물을 표시할 수 있습니다.
그런 다음 테마 템플릿 파일에 다음 코드 조각을 붙여넣습니다.
<?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?>
이 코드 라인은 게시물 제목과 사진을 표시하는 기사에 대한 두 개의 열을 생성합니다. 또한 나중에 스타일을 지정할 CSS 클래스도 생성합니다. '포스트 이미지'를 가리키기도 하며, 기존에 만든 이미지 사이즈 이름으로 바꿔야 합니다.
그런 다음 마지막에 다음 코드 스니펫을 추가합니다.
<?php $counter++; endwhile; //Post Navigation code goes here endif; ?>
이 코드는 루프를 닫습니다. 또한 게시물 탐색을 추가할 수 있지만 대부분의 웹사이트 소유자가 이를 위해 다른 플러그인을 사용하기 때문에 코드 충돌을 피하기 위해 포함하지 않았습니다.
전체 코드 조각이 나타나는 방식은 다음과 같습니다.
<div> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> <?php $counter++; endwhile; //Pagination can go here if you want it. endif; ?> </div>
게시물 그리드가 제대로 표시되도록 하려면 다음 CSS를 웹사이트에 추가하세요.
#gridcontainer{ margin: 20px 0; width: 100%; } #gridcontainer h2 a{ color: #77787a; font-size: 13px; } #gridcontainer .griditemleft{ float: left; width: 278px; margin: 0 40px 40px 0; } #gridcontainer .griditemright{ float: left; width: 278px; } #gridcontainer .postimage{ margin: 0 0 10px 0; }
다양한 CSS 선택기가 포스트 루프의 다양한 구성 요소에 미치는 영향을 실험해 보십시오.
이 기사가 WordPress 게시물을 그리드 스타일로 표시하는 방법을 가르치는 데 도움이 되었기를 바랍니다.