WordPress Walker 클래스에 익숙해지기

게시 됨: 2020-11-27

Walker Class에 익숙하지 않은 경우 작업에 얼마나 도움이 될 수 있는지 놀랄 준비를 하십시오. 워드프레스 워커 클래스는 워드프레스 2.1에서 구현되어 개발자들에게 HTML을 렌더링할 목적으로 트리와 같은 데이터 구조를 탐색할 수 있는 수단을 제공합니다. 이 기사에서는 Walker 매개변수가 작동하는 방식과 메뉴, 카테고리 및 주석의 출력을 사용자 정의하는 방법을 연구할 것입니다.

가자!

워커 클래스 개요

WordPress에서 탐색 메뉴, 카테고리 목록 또는 댓글 목록과 같은 계층 구조를 가진 개체를 자주 봅니다.

이미 알고 계시겠지만 트리 데이터 구조의 경우 일부 요소는 부모이고 다른 요소는 자식입니다. "Post Subcategory 1"은 "Post Category 1"의 자식이고, 댓글에 대한 답글은 댓글 자체에 대한 자식 댓글이고, "Service 1"은 "Services" 항목의 자식 메뉴 항목입니다.

Walker는 단순히 각 객체 또는 연관 배열을 통해 "걸어서" 각 노드에서 기능을 실행하는 것과 같이 명명됩니다. 이를 통해 우리가 달성하고자 하는 것은 '최상위' 링크를 특정 요구사항에 따라 다른 방식으로 '하위' 항목과 함께 나열하는 기능입니다.

즉, WordPress는 표준 <ul> <li> 구조를 제공하고 해당 인수를 사용자 정의할 수 있지만 Walker를 확장하면 HTML 콘텐츠를 수정하여 구조 자체를 사용자 정의할 수 있습니다.

Walker 클래스와 관련된 핵심 파일은 wp-includes/class-wp-walker.php 이며 이전에 나열한 모든 유형의 나무와 같은 데이터를 관리합니다.

추상 PHP 클래스이므로 HTML을 생성하려면 해당 속성 및 메서드의 사용자 정의 버전을 정의할 개발자가 확장해야 합니다. 그럼 class-wp-walker.php 파일에 있는 자식 클래스들을 하나씩 공부해 봅시다.

어린이 수업

$tree_type 은 유형 또는 유형의 배열로 제공되고 클래스가 처리하는 것을 정의하는 선택적 변수입니다.

 public $tree_type = array( 'post_type', 'taxonomy', 'custom' );

$db_fields 는 필수 변수이며 사용할 데이터베이스 필드를 정의합니다. 이 속성은 'parent' 및 'id'라는 두 개의 키가 있는 배열입니다. 이 키의 값은 각각 부모 ID와 항목 ID를 보유하는 개체 속성의 이름입니다.

 public $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id', );

$max_pages 속성도 선택 사항이며 그 역할은 페이징 워커가 이동하는 최대 페이지 수를 지정하는 것입니다.

 public $max_pages = 1;

$has_children 은 실제로 자명하며 현재 요소에 자식이 있는지 여부에 따라 true 또는 false 값을 갖습니다.

 public $has_children;

start_lvl 메소드는 새로운 나무와 같은 객체의 루트에서 실행되며 $output, $depth 및 $args 인수를 사용합니다.

 public function start_lvl( &$output, $depth = 0, $args = array() ) {}

$output 인수는 추가 내용을 추가하고 $depth 는 항목의 깊이를 지정하며 $args 는 추가 인수의 배열입니다.

end_lvl 메소드는 이전에 start_lvl 메소드에 의해 열린 모든 태그를 닫습니다.

 public function end_lvl( &$output, $depth = 0, $args = array() ) {}

start_el (요소 시작) 메서드는 현재 요소에 대한 여는 HTML 태그를 표시하는 데 사용됩니다. 예를 들어 메뉴의 경우 일반적으로 <li> 태그입니다.

 public function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {}

end_el 함수는 Walker가 모든 자식이 있는 요소를 전달하고 닫는 태그를 반환한 후에 호출됩니다.

 public function end_el( &$output, $object, $depth = 0, $args = array() ) {}

display_element 는 실제로 트리 개체의 요소를 표시합니다. start_el , start_lvl , display_element , end_lvl , end_el 함수를 이 순서로 호출합니다. 이제 그 주장을 살펴보자.

  • $element : 현재 요소
  • $children_elements : 트리 객체의 모든 자식 요소
  • $max_depth : 탐색할 수 있는 최대 깊이 제한
  • $depth : 현재 우리가 있는 수준
  • $args : 추가 선택적 인수
  • $output : 현재 HTML 출력.

이제 Twenty Twenty 테마가 활성화된 WordPress 설치를 사용하여 각 데이터 유형에 대한 한 가지 예를 보여줍니다.

메뉴 구조 사용자 정의

워드프레스가 메뉴를 표시하기 위해 사용하는 wp_nav_menu() 함수는 wp-includes/nav-menu-template.php 파일에 포함되어 있습니다. 이 파일에서 WordPress는 605행 주변의 Walker_Nav_Menu 클래스도 호출합니다.

 function walk_nav_menu_tree( $items, $depth, $r ) { $walker = ( empty( $r->walker ) ) ? new Walker_Nav_Menu : $r->walker; return $walker->walk( $items, $depth, $r ); }

Walker_Nav_Menu 클래스는 wp-includes/class-walker-nav-menu.php 파일 내부에 정의되어 있으며 기본적으로 파일의 모든 내용입니다.

메뉴의 출력을 표시하기 위해 WordPress 코드는 이 파일 안에 설명된 Walker_Nav_Menu 클래스의 속성과 메서드를 사용합니다.

예를 들어 방문자가 클릭하지 못하도록 하기 위해 빈 사용자 정의 링크('#')로 상위 메뉴 항목의 요소를 변경하는 많은 개발자가 직면하는 잘 알려진 문제를 수정해 보겠습니다.

결과를 비교할 수 있도록 먼저 <header> 요소 시작 바로 뒤에 header.php 에서 아래 코드를 추가하여 기본 메뉴의 복제본을 만듭니다.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'menu_class' => 'primary-menu reset-list-style' ) ); ?>

여기서 우리가 실제로 한 것은 기본 메뉴를 재생성하고 기본 primary-menu reset-list-style 클래스를 새 메뉴에 추가하여 드롭다운 기능과 CSS를 상속하는 것입니다.

이제 functions.php 파일에서 Walker_Nav_Menu 클래스를 확장하는 클래스를 생성할 것입니다. 요소 유형을 변경하고 싶기 때문에 start_el 메서드를 재정의합니다.

 if ( !class_exists('My_Custom_Nav_Walker') ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth=0, $args=[], $id=0) { $output .= "<li class='" . implode(" ", $item->classes) . "'>"; if ($item->url && $item->url != '#') { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ($item->url && $item->url != '#') { $output .= '</a>'; } else { $output .= '</span>'; } } } }

그래서 우리는 일반적으로 각 요소를 <li> 태그로 래핑한 다음 if 문을 사용하여 링크가 "#"일 때 스팬을 추가하고 나머지는 <a> 태그를 추가했습니다.

이것을 메뉴에 적용하려면 이전에 추가한 메뉴 코드로 돌아가서 walker 매개변수를 지정합니다.

 wp_nav_menu( array( 'walker' => new My_Custom_Nav_Walker, 'menu_class' => 'primary-menu reset-list-style' ) );

이제 결과는 다음과 같아야 합니다.

이제 메뉴 항목에서 '서비스' 위로 마우스를 가져가면 손 모양 커서가 나타나지 않으며 이 메뉴 항목도 클릭할 수 없습니다. 그러나 드롭다운 하위 메뉴는 여전히 올바르게 표시됩니다.

카테고리 사용자 정의

먼저 관리 영역으로 이동하여 데모용 카테고리 트리를 만들기 위해 일부 게시물 카테고리와 하위 카테고리를 만드십시오.

그런 다음 header.php 어딘가에 이 코드를 추가하여 카테고리 목록을 생성합니다. 이전과 같이 헤더 요소의 시작 뒤에 넣을 수 있습니다.

 <header class="header-footer-group" role="banner"> <?php wp_list_categories( array('hide_empty' => FALSE) ); ?>

이 기능은 카테고리 트리의 HTML 출력을 생성하는 내장 WordPress 기능입니다. 기본적으로 게시물이 포함된 카테고리만 표시되므로 이 예제의 목적을 위해 hide_empty 옵션을 사용하여 빈 카테고리도 표시하고 전체 계층 구조를 확인합니다.

이전과 마찬가지로 우리는 wp-includes/class-walker-category.php 파일에 설명된 기본 Walker_Category 클래스를 확장하고 변경 사항을 적용하기 위해 functions.php 에서 사용자 정의 클래스를 생성할 수 있습니다. 예를 들어 다음 코드를 추가하여 카테고리 이름 앞에 몇 가지 아이콘을 추가합니다.

 if ( !class_exists('My_Category_tree_Walker') ) { class My_Category_tree_Walker extends Walker_Category { function start_el(&$output, $item, $depth=0, $args=array(),$current_object_id = 0) { $output.= '<li><a href="'.home_url('category/'.$item->slug).'"> <img src="http://path/to/mages/'.($item->slug).'.jpg"> '.esc_attr($item->name); } } }

이것이 작동하려면 물론 적절한 이미지를 준비하고 정의된 폴더에 저장해야 합니다. 이러한 이미지는 이 예에서 "post-category-1", "post-subcategory-1", "post-category-3.jpg" 등의 특정 이름 형식을 따라야 합니다.

주석 사용자 정의

메뉴와 카테고리 목록을 업데이트하는 것은 Walker Class를 커스터마이징하는 가장 일반적인 이유이지만 때로는 주석에 대해서도 동일한 기술을 구현해야 합니다. 예를 들어 주석 섹션의 Gravatar 이미지 옆에 있는 메타 정보를 변경하려는 경우 wp-includes/class-walker-comment.php 파일에 있는 Walker_Comment 클래스를 확장하여 쉽게 변경할 수 있습니다.

functions.php 파일에 다음 코드를 추가하십시오.

 if ( !class_exists('My_Comment_Walker') ) { class My_Comment_Walker extends Walker_Comment { protected function html5_comment( $comment, $depth, $args ) { $tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?> <<?php echo $tag; ?> <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>> <article class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?> <?php printf( __( '%s <span class="says">says:</span>' ), sprintf( '<span class="fn">%s</span>', get_comment_author_link( $comment ) ) ); ?> </div><!-- .comment-author --> <div class="comment-metadata"> <?php $user_id=$comment->user_id; ?> <p class="commenter-bio"><?php the_author_meta('description',$user_id); ?></p> <p class="commenter-url"><a href="<?php the_author_meta('user_url',$user_id); ?>" target="_blank"><?php the_author_meta('user_url',$user_id); ?></a></p> </div><!-- .comment-metadata --> <?php if ( '0' == $comment->comment_approved ) : ?> <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p> <?php endif; ?> </footer><!-- .comment-meta --> <div class="comment-content"> <?php comment_text(); ?> </div><!-- .comment-content --> <?php comment_reply_link( array_merge( $args, array( 'add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'], 'before' => '<div class="reply">', 'after' => '</div>' ) ) ); ?> </article><!-- .comment-body --> <?php } } }

about 코드와 원본 Walker_Comment의 내용을 비교하면 알 수 있듯이 기본적으로 HTML5 형식으로 주석을 출력하는 html5_comment 메소드만 변경하면 됩니다.

그런 다음 주석 트리와 같은 개체 HTML을 표시하기 위해 올바른 인수와 함께 내장 wp_list_comments 함수를 사용하여 주석 목록을 표시해야 합니다.

 wp_list_comments( array( 'page' => 143, 'walker' => new My_Comment_Walker ));

이전에 했던 header.php의 동일한 줄에 코드를 삽입하고 댓글이 포함된 게시물의 ID를 사용했습니다. 물론 템플릿의 댓글 관련 코드를 대신 교체하고 '페이지' 옵션을 건너뛰어 모든 기사 댓글 섹션에 적용되도록 할 수도 있습니다.

지금 웹사이트 프런트 엔드를 새로 고치면 위의 사용자 정의 코드에 추가한 추가 정보 항목(저자 약력 및 저자 URL)을 확인할 수 있습니다.

결론

위의 내용이 WordPress Walker Class 사용에 대한 통찰력을 제공했기를 바랍니다. 모든 예제에서 핵심 테마 파일에 직접 변경 사항을 적용했습니다. 데모용으로는 괜찮지만 실제로는 워드프레스나 사용된 테마가 업데이트될 때 이러한 업데이트를 덮어쓰지 않도록 실제로 자식 테마에만 편집 내용을 적용하고 싶을 것입니다.