WordPress 사용자 정의 게시물 유형 – 더 나아가기

게시 됨: 2020-12-16

WordPress 사용자 정의 게시물 유형에 대한 시리즈에서 지금까지 플러그인을 사용하여 사용자 정의 게시물 유형을 생성하고 사용자 정의 코드 스니펫을 작성하여 수동으로 사용자 정의 게시물 유형을 생성하는 방법을 살펴보았습니다. 또한 WordPress 관리자에서 더 쉽게 처리할 수 있도록 게시물 유형에 몇 가지 기본 구성을 적용하는 방법을 살펴보았습니다. 이 기사를 확인하지 않았다면 살펴보십시오!

이 기사에서는 이전에 만든 사용자 정의 게시물 유형을 기반으로 한 단계 더 나아가 웹 사이트에서 기능과 유용성을 확장할 것입니다. 따라 하려면 '수동으로 WordPress 사용자 정의 게시물 유형 만들기' 기사에서 구축한 사용자 정의 게시물 유형을 생성해야 하므로 다음 정보가 이해될 수 있도록 먼저 작성했는지 확인하세요.

시작하자!

어디에서나 사용자 정의 게시물 유형 표시

보시다시피 이전에 웹사이트에 레시피를 표시하기 위해 사용자 정의 게시물 유형을 구축했습니다. 이것은 사용자 정의 게시물 유형이 우리 웹사이트의 기능을 확장하는 매우 유용한 방법인 상황의 완벽한 예입니다.

이 예에서는 레시피 게시물을 기본 웹사이트 메뉴에 추가하여 표시할 수 있었습니다. 또한 모든 레시피 관련 게시물을 나열하는 아카이브 보기를 설정했습니다. 이것은 새로운 사용자 정의 게시물 유형을 표시하기 위한 훌륭한 옵션이지만 이 콘텐츠를 당사 웹사이트의 다른 곳에 표시하려는 경우 어떻게 됩니까?

WP_Query 함수를 사용하여 사용자 정의 게시물 유형 표시

웹사이트에서 선택한 위치에 새로운 레시피 게시물을 표시하기 위해 WP_Query 기능을 사용할 것입니다. 해당 인수에서 쿼리하려는 게시물 유형을 정의하므로 이 인스턴스에서 사용될 post_types 를 찾을 수 있습니다. 이와 함께 게시 상태가 있는 레시피 게시물을 표시하고 날짜 내림차순으로 정렬하여 가장 최근 항목을 먼저 표시하기 위해 publish 및 orderby 매개변수를 사용합니다.

저작권 정보 위의 웹 사이트 바닥글에 레시피 게시물 목록을 표시하려고 한다고 가정해 보겠습니다. 이를 위해 우리는 <footer> 요소 시작 부분 아래의 singular.php 파일에 삽입해야 하는 코드 조각을 사용할 것입니다.

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

이 예에서는 현재 기본 WordPress Twenty Twenty 테마를 사용하고 있습니다. Twenty Twenty 이외의 테마를 사용하는 경우 테마의 바닥글 내용이 포함된 파일을 편집해야 합니다.

코드가 추가되면 웹사이트를 열 수 있으며 바닥글에 레시피 게시물이 나열되어야 합니다.

바닥글에 있는 이러한 게시물의 레이아웃과 모양은 CSS를 사용하여 원하는 대로 스타일을 지정할 수 있습니다. CSS를 추가하는 가장 좋은 위치는 테마의 기본 폴더 아래에 있는 style.css 파일입니다. 아래에서 사용할 수 있는 CSS가 있습니다.

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

이 CSS가 저장되고 페이지가 새로고침되면 바닥글의 레시피 게시물 레이아웃이 다음과 같이 변경되는 것을 볼 수 있습니다.

루프 재설정의 중요성

코드에서 필요한 인수를 정의한 후 사후 루프가 wp_reset_postdata() 함수로 시작하고 끝나는 것을 눈치채셨을 것입니다. 이 기능의 사용은 매우 중요하며 여기에 그 이유가 있습니다.

WordPress가 페이지 레이아웃을 생성할 때 페이지에 루프가 하나만 있는 경우 제대로 작동하는 전역 $post 변수를 사용합니다. 이제 사용자 지정 루프를 추가했으므로 기본적으로 전역 $post 변수를 재정의하고 WordPress에 루프 재설정을 알리지 않는 한 루프에서 정의한 사용자 지정 게시물 유형을 사용하여 거기에서 다시 시작합니다.

다음과 같이 위의 코드 아래에 게시물 제목을 표시하여 실제로 어떻게 작동하는지 살펴보겠습니다.

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

이제 웹사이트 프론트엔드에서 페이지를 새로 고치면 최근 레시피 아래에 '포스트 1'이라는 제목이 표시됩니다.

이것은 wp_reset_postdata(); 기능.

이제 wp_reset_postdata(); 당신의 코드에서. the_title(); 코드는 '포스트 1' 대신 '레시피 1' 제목을 표시합니다.

사용자 정의 게시물 유형 – 추가 관리

사용자 지정 게시물 동작과 모양을 추가로 사용자 지정하기 위해 이전 기사에서 '레시피' 게시물 유형을 등록하는 데 사용한 코드의 확장으로 추가할 수 있는 몇 가지 옵션을 살펴보겠습니다.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

다음을 위해 몇 가지 인수를 더 추가할 것입니다.

레시피 사용자 정의 게시물 유형의 URL 슬러그 변경
사용자 정의 게시물 유형 관리 메뉴의 위치 변경
메뉴 아이콘 변경

사용자 정의 게시물 유형 URL 슬러그 변경

레시피 게시물을 만들고 이름을 '레시피 1'로 지정하면 '레시피 1' 게시물의 기본 URL은 https://mycompanyname.com/recipes/recipe-1/ 과 같으며 영구 링크가 ' Permalink 설정의 게시물 이름'.

레시피 사용자 정의 게시물 유형이 URL에 표시되는 방식을 변경하려면 해당 slug 키와 함께 rewrite 인수를 사용할 수 있습니다.

URL에서 알 수 있듯이 이 인수를 건너뛰면 기본값은 Custom Post Type 레이블 'recipes'가 됩니다. 예를 들어 이것을 my-home-recipes 로 변경하려면 코드 스니펫을 다음과 같이 편집하여 덮어써야 합니다.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

이제 영구 링크를 저장하고(영구 링크 캐시 플러시) 레시피를 다시 보면 URL이 https://mycompanyname.com/my-home-recipes/recipe-1/ 이어야 합니다.

슬러그를 변경하면 메인 메뉴 페이지에서 아카이브 URL도 /recipes/ 에서 /my-home-recipes/ 로 변경해야 합니다.

사용자 정의 포스트 유형 메뉴 위치 변경

레시피 메뉴를 다른 위치로 이동하려면 다음과 같이 menu_position 인수를 사용할 수 있습니다.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

이 인수에 사용할 수 있는 값은 다음과 같습니다.

0 : 맨 위에
5 : 게시물 아래
10 : 미디어 아래
15 : 아래 링크
20 : 페이지 아래
25 : 댓글 아래
60 : 메뉴의 첫 번째 공백 아래
65 : 플러그인 아래
70 : 사용자 이하
75 : 도구 아래
80 : 아래 설정
100 : 메뉴의 두 번째 공백 아래

아래 스크린샷은 menu_position 인수에 값 5가 추가되었을 때 메뉴의 위치를 보여줍니다.

사용자 정의 게시물 유형 메뉴 아이콘 변경

현재 레시피 메뉴는 기본 게시물 아이콘을 사용합니다. 고유한 아이콘이 있었다면 좋았을 것입니다. 이를 수행하기 위해 menu_icon 인수를 사용할 수 있습니다.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

자신의 아이콘을 표시하려면 메뉴 아이콘 위치의 전체 URL(위 코드 참조)을 삽입하거나 아이콘의 클래스 이름을 추가하여 WordPress Dashicons 라이브러리를 사용할 수 있습니다. 여기에서 해당 클래스의 아이콘을 볼 수 있습니다.

예를 들어 음식 아이콘을 선택하면 'menu_icon' => 'dashicons-food' 와 같이 코드에 추가합니다.

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

최종 결과는 선택한 아이콘이 사용자 정의 게시물 메뉴에 나타나야 합니다... 사용자 정의 게시물이 정말 사용자 정의된 느낌을 주는 데 도움이 됩니다!

추가 읽기

플러그인을 사용하여 WordPress 사용자 정의 게시물 유형 만들기
WordPress 사용자 정의 게시물 유형을 수동으로 생성
자신의 플러그인을 사용하여 WordPress 사용자 정의 게시물 유형을 만드십시오!

결론

이 팁이 사용자 정의 게시물 유형을 구축하고 WordPress 웹사이트의 기능과 사용을 더욱 개선하는 데 도움이 되기를 바랍니다. 모든 코딩과 마찬가지로 시간을 내어 플레이하고 새 코드가 웹사이트에 어떤 영향을 미치는지 확인하는 것이 가장 좋습니다. 이러한 토대를 구축하면 많은 사용자 지정이 필요한 훨씬 더 복잡한 프로젝트를 처리할 수 있습니다.