WordPress에서 설정 페이지를 만드는 방법

WordPress 플러그인을 만드는 경우 설정 페이지 를 만드는 방법이 궁금할 수 있습니다. WordPress는 이에 대한 일종의 "표준" 메커니즘을 제공합니까? 최신 설정 페이지를 만드는 데 사용할 새로운 도구나 프레임워크가 있습니까? 설정 페이지를 만드는 것이 좋은 생각입니까? 글쎄, 오늘 우리는 이 모든 것에 대해 이야기할 것이고 나는 당신의 질문에 답할 것입니다.

옵션이 아닌 결정

워드프레스는 웹의 민주화를 목표로 하는 플랫폼입니다. 매우 훌륭하게 들리지만 동시에 매우 추상적인 이 말은 "누구나 워드프레스를 사용할 수 있기를 바랍니다"라는 표현입니다. 그리고 믿거 나 말거나 설정 페이지가 실제로 많은 경우에 장벽 이 될 수 있습니다. 날 믿지 않아? 글쎄, WordPress 자체는 다음과 같이 말합니다.

결정을 내릴 때 이들은 사용자를 가장 먼저 고려합니다. 이러한 고려 사항의 좋은 예는 소프트웨어 옵션입니다. 사용자에게 선택권을 줄 때마다 결정을 내리도록 요청하는 것입니다. 사용자가 옵션에 관심을 두지 않거나 이해하지 못하면 궁극적으로 좌절감을 느끼게 됩니다. 개발자로서 우리는 때때로 모든 것에 대한 옵션을 제공하는 것이 좋은 일이라고 생각합니다. 너무 많은 선택권이 있을 수는 없습니다. 그렇죠? 궁극적으로 이러한 선택은 일반적인 최종 사용자가 관심을 갖지 않는 기술적 선택으로 귀결됩니다. 현명한 설계 결정을 내리고 최종 사용자에게 기술적 선택의 무게를 두지 않는 것은 개발자로서 우리의 의무입니다.

워드프레스 철학

따라서 설정 페이지를 만들기 전에 사용자에게 제공할 옵션, 해당 옵션에 대한 액세스 권한을 부여하려는 이유, 그렇게 하는 것이 필요한지 또는 유용한지 신중하게 생각하십시오.

대안으로서의 필터

사용자에게 너무 많은 옵션을 제공하면 안 된다는 것을 알면서도 개발자로서 옵션을 제공하는 대신 결정을 내리는 것이 항상 쉬운 일이 아님을 고백해야 합니다. 내가 노출하는 옵션이 복잡하다는 것을 알고 있지만 사용자가 을 선택할 수 있기를 원하는 경우가 있습니다. 이러한 경우에는 어떻게 해야 합니까? WordPress의 권장 사항을 따르고 고급 사용자를 제한합니까?

다행히 WordPress는 이러한 딜레마 에 대한 완벽한 솔루션을 제공합니다. 플러그인을 설계하고 (고급) 사용자가 해당 동작을 조정할 수 있도록 하려면 설정 페이지나 이와 유사한 것을 만들지 마십시오. 대신 WordPress의 필터링 메커니즘을 통해 플러그인을 사용자 정의할 수 있습니다.

필터를 사용하는 경우 대부분의 사용자는 기본 동작("결정", 기억?)을 즐깁니다. 필터에 기본값이 설정된 플러그인을 사용하기 때문이며 고급 사용자는 이러한 기능을 수정할 수 있습니다. 후크를 통한 결정(따라서 "옵션"도 있음). 두 세계의 최고!

워드프레스 설정

자, 이제 우리는 사용자를 위한 결정의 중요성을 인식하고 필터를 통해 이 제한(필요한 경우)을 우회하는 방법을 보았으므로 WordPress에서 설정 페이지를 만드는 방법을 볼 차례입니다. Cuz, yup: 사용자에게 선호도에 따라 결정을 내릴 수 있는 옵션을 제공해야 하는 경우가 있습니다.

WordPress의 설정 API

설정 API는 WordPress 버전 2.7에 추가되었습니다. 이것은 설정 페이지 생성을 표준화하는 기능 세트로, 사용 가능한 옵션, 각 옵션(기본적으로 양식의 필드)을 편집하기 위한 사용자 인터페이스 및 유효성 검사, 저장 방법을 정의할 수 있습니다. , 해당 값을 검색합니다.

예제를 통해 배우는 것이 가장 좋은 방법이라고 생각하므로 설정 API를 사용하여 첫 번째 설정 페이지를 차근차근 만들어 봅시다.

새 설정 페이지 만들기

설정 페이지를 생성하기 위해 가장 먼저 해야 할 일은 (놀라움, 놀라움!) 설정을 표시할 페이지를 생성하는 것입니다. 이렇게 하려면 admin_menu 작업 중에 add_options_page 기능을 사용하고 페이지를 등록하기만 하면 됩니다.

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

보시다시피, 이 기능으로 우리가 하는 유일한 일은 WordPress 설정 메뉴 아래에 표시될 새 페이지를 등록하는 것입니다. 이 페이지는 제목, 메뉴의 이름, 사용자가 액세스할 수 있어야 하는 권한이 있습니다. , 및 운영 체제가 켜져 있습니다. 마지막 인수인 nelio_render_settings_page 는 해당 페이지를 렌더링할 함수의 이름입니다.

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

설정 페이지 자체는 비교적 만들기 쉽습니다. WordPress에서 반자동으로 콘텐츠를 생성할 form 을 추가하기만 하면 됩니다. 한편으로 우리는 settings_fields 함수를 호출하는데, 기본적으로 폼에 nonce 를 추가하여 "안전"하게 만듭니다. 다음으로, do_settings_sections 함수를 사용하여 플러그인에 대해 만든 모든 설정을 렌더링하도록 WordPress에 요청합니다. 마지막으로 양식 제출 에 버튼을 추가하기만 하면 됩니다.

설정 페이지의 실제 설정

다음으로 설정 페이지의 일부가 될 각 옵션을 등록해야 합니다. 이를 위해 우리는 두 가지 함수를 사용할 것입니다. register_setting 은 데이터베이스에 설정을 저장할 이름을 표시하도록 하고, add_settings_field 는 각 개별 옵션을 추가합니다.

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

이전 코드 스니펫에는 특별한 주의가 필요한 몇 가지 사항이 있습니다. 한편으로는 register_setting 함수의 세 번째 인수인 nelio_validate_example_plugin_settings 있습니다. 이것은 사용자가 선택한 값의 유효성을 검사하기 위해 호출될 콜백 함수의 이름입니다(항상 양식 필드의 유효성을 검사하고 삭제해야 함을 기억하십시오). 이 기능은 다음과 같습니다.

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

여기서 우리는 $input 에서 제출된 각 필드를 검색하고 이를 $output 으로 삭제하여 데이터베이스에 저장하는 것이 무엇이든 유효하고 정확하다는 것을 확실히 알 수 있습니다.

두 번째로 강조하고 싶은 것은 우리가 정의한 각 필드에는 WordPress에 각 필드를 렌더링하는 방법을 알려주는 함수 참조도 포함되어 있다는 것입니다. 예를 들어, 이 예에서 필드의 콜백은 다음과 같을 수 있습니다.

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

본질적으로 이러한 모든 콜백은 렌더링해야 하는 필드의 현재 값을 검색하고( get_option 사용) 사용자가 값을 설정할 수 있도록 HTML을 렌더링합니다(이 예에서는 input 필드 text 또는 number ).

최종 결과는 무엇입니까? 이:

마지막 생각들

보시다시피 설정 페이지를 만드는 것은 비교적 간단합니다. 저는 개인적으로 전체 프로세스를 별로 좋아하지 않습니다. 왜냐하면 매우 반복적이고 동일한 상용구 코드를 계속해서 작성해야 하기 때문입니다. 하지만 그럼에도 불구하고 쉽습니다.

그러나 이 프로세스를 더욱 단순화하기 위해 간단한 사용자 인터페이스를 통해 설정 페이지에서 원하는 다른 필드를 정의할 수 있는 몇 가지 온라인 코드 생성기가 있습니다. 몇 가지 예는 다음과 같습니다.

• WP 설정 API
• WordPressOption 페이지 생성기

물론 React와 같은 기술을 사용하여 설정 페이지를 만들 가능성은 항상 존재합니다. 하지만 이것은 다른 시간의 이야기입니다. 그렇지 않나요?

Unsplash에서 Rima Kruciene의 추천 이미지.