WordPress 관리자 목록 테이블: 빠른 편집 기능 확장

지금까지 WordPress의 관리 테이블에 대한 기사 시리즈에서 새 열을 추가하는 방법을 포함하여 WordPress 관리 테이블의 레이아웃을 사용자 정의하는 다양한 방법을 살펴보았습니다. 이 시리즈의 마지막 기사에서는 관리 테이블에 있는 '빠른 편집' 기능을 확장하는 등 고려해야 할 사용자 지정 기능을 하나 더 살펴보겠습니다.

시작하자!

빠른 편집 필드 확장

이 자습서의 예제에서는 '소스'로 설명되는 URL을 표시하는 사용자 정의 필드를 추가할 것이며, 이 URL은 우리 기사와 관련된 몇 가지 추가 정보로 연결되는 URL로 채울 것입니다. 게시물 관리 화면의 빠른 편집 영역에 추가하는 방법과 이 필드에 대한 업데이트를 저장하는 방법을 살펴보겠습니다.

1단계: 사용자 정의 필드 추가

WordPress 사용자 정의 필드 시작하기 기사에서 '소스' 필드를 만드는 방법을 살펴보았습니다. 간결함을 위해 여기에서 해당 지침을 반복하지 않습니다. 물론 원하는 사용자 정의 필드를 만들 수 있습니다.

'소스' 사용자 정의 필드 또는 해당 문제에 대한 다른 사용자 정의 필드를 추가하는 방법에 익숙하지 않은 경우 이에 대한 기사를 참조하십시오. 적절한 사용자 정의 필드를 추가했으면 다음 단계로 넘어갈 차례입니다.

2단계: 사용자 정의 열 추가

관리 테이블에 사용자 정의 열을 추가해야 합니다. WordPress 관리 테이블 사용자 지정: 시작하기 기사에서 이 작업을 수행하는 방법을 자세히 설명했습니다. 살펴보고 단계를 따르세요.

궁극적으로 활성 테마의 functions.php 에 다음과 같은 코드가 있어야 합니다.

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

이제 Posts Admin 테이블에 새 열이 표시됩니다.

사용자 정의 빠른 편집 상자 추가

게시물 목록 테이블로 이동하여 게시물 중 하나 아래에 있는 '빠른 편집' 링크를 클릭해 보겠습니다.

여기에서 볼 수 있는 것은 WordPress가 빠른 편집 화면에서 제공하는 모든 기본 사용 가능한 옵션입니다. 현재로서는 새로운 '소스' 필드가 표시되지 않습니다.

WordPress에서 제공하는 quick_edit_custom_box 후크를 사용하여 이것을 추가합니다. 이 작업은 사용자 정의 열을 포함하여 각 열에 대해 한 번씩 실행하여 '빠른 편집' 모드의 모든 기본 작업을 구문 분석합니다.

다음과 같이 구성됩니다: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . 매개변수는 편집할 열의 이름인 $column_name , 포스트 유형 슬러그인 $post_type 및 필요한 경우 분류 이름에 대한 $taxonomy 입니다.

functions.php 파일에 다음 행을 추가하십시오.

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

$post->source; .

이제 페이지를 새로고침하고 '빠른 편집'을 다시 클릭하면 올바른 값이 있는 '소스' 필드가 표시되어야 합니다.

3단계: 인라인 편집 저장

데이터 입력을 사용자 정의 필드에 저장하기 위해 게시물이 업데이트될 때 트리거되는 save_post 작업을 사용합니다.

빠른 편집 작업을 수행하는 이 예에서 게시물의 데이터는 save_post 실행된 후 $_POST 에 저장됩니다.

이를 달성하는 데 필요한 코드는 다음과 같으며 functions.php 파일에 삽입되어야 합니다.

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

이 작업은 완료되지 않았습니다. 필드의 입력 값을 "https://random.url"과 같은 다른 값으로 변경하고 오른쪽 하단의 업데이트 버튼을 눌러 보겠습니다.

소스 필드의 값이 예상대로 업데이트되었음을 ​​알 수 있습니다. 그러나 빠른 편집 버튼을 다시 클릭하고 사용자 정의 필드(이 경우 '소스')를 다시 살펴보면 편집 상자에서 값이 변경되지 않았음을 알 수 있습니다.

값을 여러 번 변경하면 항상 관리 테이블 열 셀에 변경 사항이 표시되지만 이 입력은 빠른 편집 필드에 반영되지 않습니다.

왜 이런 일이 발생합니까?

$post->source; . 빠른 편집 콘텐츠는 사용자가 '편집' 버튼을 누르면 채워집니다. 즉, 게시물 관리 화면이 로드될 때 미리 채워지지 않고 동적으로 생성됩니다. 새 값 대신 관리 화면에 들어갈 때 채워진 값이 항상 표시되기 때문에 PHP 코드를 통해 메타데이터를 검색하여 메타데이터를 올바르게 표시할 수 없습니다.

대신 JavaScript를 사용하여 값을 수집해야 합니다. 따라서 진행하기 전에 이전 PHP 코드로 이동하여 이 줄을 교체하여 반향된 값을 제거합니다...

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

... 이것으로:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

4단계: JS를 사용하여 입력 값 검색

먼저 functions.php 파일에 다음 행을 추가하여 JS 스크립트를 포함해야 합니다.

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

따라서 예를 들어 extend-quick-edit.js 파일을 만들어 활성 테마 폴더 아래에 넣으면 위 코드에서 'UNIQUE-SCRIPT-NAME'을 'extend-quick-edit-script'와 같은 것으로 바꿔야 합니다. ' 및 '/PATH-TO-YOUR-JS-FILE' get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

array('jquery','inline-edit-post' ) 스크립트가 jQuery를 사용하기 때문에 jQuery를 추가했으며 원래 inline-edit-post 함수가 수정되도록 정의했습니다.

extend-quick-edit.js 의 내용은 다음과 같습니다.

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

여기서 우리가 한 일을 조금 분해해 봅시다.

먼저 /wp-admin/js/inline-edit-post.js WordPress 코어 파일에 소개된 inlineEditPost.edit 개체를 가져옵니다. 이제 $inline_editor 변수에 개체의 복사본이 있습니다.

그런 다음 $inline_editor.apply( this, arguments); 에 있는 기존 기능을 적용하여 inlineEditPost.edit 기능을 수정합니다. 그리고 바로 뒤에 원하는 추가 기능을 추가합니다.

따라서 JS 코드의 다음 줄에서 최종적으로 수행할 작업은 빠른 편집 영역의 '소스' 입력 필드 값을 '소스' 열 셀의 값으로 바꾸는 것입니다.

이제 모두 예상대로 작동해야 합니다. 값을 저장하고 빠른 편집 영역을 다시 열면 소스 입력도 변경되어야 합니다.

사용자 정의 필드가 사용자 정의 열과 함께 이미 등록되어 있는 경우 워크플로는 다음과 같습니다.

결론

관리자 목록 테이블의 빠른 편집 모듈에 사용자 정의 필드를 추가하는 것은 쉽지 않습니다. 그러나 정기적으로 업데이트되는 필드를 추가하는 경우 장기적으로 많은 시간을 절약할 수 있습니다. 항상 그렇듯이 WordPress에서 달성할 수 있는 것은 매우 무궁무진합니다. 바로 사용할 수 있어 광범위한 사용자 정의가 가능하지만 몇 가지 추가 코딩으로 할 수 있는 일이 많지 않습니다!