모두의매뉴얼
🚀

[워드프레스] 테마나 플러그인의 설정 페이지 생성, 설정 값 저장, 사용 방법 총정리

📈9

워드프레스 테마나 플러그인을 만들면서, 나 또는 다른 사용자가 특정 설정 값을 지정해 DB에 저장하고, 테마나 플러그인에서 그 설정 값을 다시 사용해야 하는 상황이 발생할 수 있습니다.

많은 문서들이 이에 대해서 잘 정리해두었으나, 조금 더 알아보기 쉽게 + 나중에 또 다시 검색의 망령이 되지 않기 위해서 기록으로 남겨 봅니다.

예제 상황

저한테 필요한 상황은 아래와 같았습니다.

워드프레스 테마를 만들어서 사용하는데, 문서를 마치는 </html> 태그 이전에 특정 코드를 넣고 싶더라구요.

그런데 그 코드가 나중에 변경될 수도 있고, 시간이 흘러 이게 무슨 코드였지? 라고 생각할 수도 있으니, 아예 워드프레스 블로그 관리자 화면의 설정 메뉴에 하위 메뉴로 테마 설정 페이지를 따로 만들고 그 곳에서 삽입을 원하는 코드를 저장하도록 하고, 테마에서 불러와 사용하도록 하는 것이었습니다.

상황이 조금 복잡한가요?

조금 더 간단히 말해서 워드프레스 테마를 만들 때 특정 부분에 어떤 코드를 넣고 싶은데, 테마의 php 파일에서 직접 넣는게 아니라 워드프레스 관리자 화면에 넣고 저장하면 알아서 테마 파일에 출력하도록 하고 싶다는 것입니다.

만들기

설정 메뉴에서 하위 메뉴 추가하기

먼저 설정 메뉴의 하위 메뉴로 독립적으로 사용할 수 있는 메뉴를 만들어 봅시다. 내가 만든 테마의 functions.php 파일에 add_options_page 함수를 이용해 아래와 같이 구성 하였습니다.

function add_theme_settings_page() {
    add_options_page(
        'Custom WP Theme settings',
        'Custom Theme settins',
        'manage_options',
        'custom-theme-settings',
        'add_theme_settings_page_callback',
        99,
    );
}
add_action( 'admin_menu', 'add_theme_settings_page' );

add_options_page 함수의 파라미터를 위와 같이 구성하였습니다. 위에서 부터 차례로 메뉴 페이지의 타이틀, 관리자 화면에 표시될 이름, 요구하는 사용자 권한, 슬러그, 메뉴 화면 내용을 표시할 callback 함수, 서브 메뉴의 위치입니다.

이렇게 만든 메뉴를 실제 사용자가 들어갔을 때 표시할 내용을 callback 함수로 지정해 표시해줘야 합니다.

callback 함수 설정

<? function add_theme_settings_page_callback() { ?>
    <form method="post" action="options.php">
        <textarea id="addAfterWpFooter" name="addAfterWpFooter"><? echo esc_attr( get_option('addAfterWpFooter') ); ?></textarea>
        <? submit_button(); ?>
    </form>
<? } ?>

실제로 내가 원하는 방식으로 화면에 표시하기 위해서는 훨씬 복잡한 코드가 사용되겠지만, 알아보기 쉽게 하기 위해서 굉장히 단순화 해보았습니다.

일단 아까 add_options_page 에서 사용하려고 했던 callback 함수와 같은 이름의 함수를 하나 만들고, 그 안에 html 태그로 데이터를 주고 받을 form 을 구성해 줍니다.

데이터를 입력 받을 textarea 를 만들어줍니다. 이미 기존에 저장되었던 값이 있으면 사용자에게 표시해줘야 하니까 get_option 함수를 이용해 내용을 표시해줍니다. 참고로 get_option 함수에 파라미터로 들어간 addAfterWpFooter 항목에 주목하세요.

아, 물론 textarea 태그의 id 와 name 역시 addAfterWpFooter로 설정했습니다.

당연히 저장 버튼도 있어야겠죠? submit_button 함수가 아주 쉽게 저장 버튼을 만들어줍니다.

설정 항목을 워드프레스에 등록하기

그런데 이것만 가지고는 제대로 작동하지 않습니다. 아직 워드프레스가 어떤게 사용자가 정의한 설정인지는 명확히 모르거든요.

그래서 워드프레스가 사용자 정의 설정을 인식 할 수 있도록 하는 함수를 먼저 만들어야 합니다.

function add_theme_settings_register() {
    register_setting( 'custom-theme-option-group', 'addAfterWpFooter' );
}

먼저 add_theme_settings_register 라는 함수를 만드는데, 이 함수는 register_setting 라는 함수를 이용해서 사용자가 임의로 어떤 세팅 그룹(예제에서는 custom-theme-option-group라고 정의한)을 만들고 그 안에 addAfterWpFooter 라는 속성을 만들도록 합니다. addAfterWpFooter 이건 아까 get_option 함수에서 봤었죠? 이제 우리는 여기에 원하는 값을 담아서 이용할 것이라고 알려주는 것입니다.

그러면 이 설정 값 등록 함수를 어디선가 실행 시켜 줘야겠죠?

아까 서브 메뉴 페이지를 만들었던 add_theme_settings_page 함수를 만들어 두었잖아요? 여기에 아래 예시와 같이 add_action 을 추가해서 add_theme_settings_register 함수가 실행 될 수 있도록 만들어줍니다.

function add_theme_settings_page() {
    add_options_page(
        'Custom WP Theme settings',
        'Custom Theme settins',
        'manage_options',
        'custom-theme-settings',
        'add_theme_settings_page_callback',
        99,
    );
    add_action( 'admin_init', 'add_theme_settings_register' );
}
add_action( 'admin_menu', 'add_theme_settings_page' );

뿐만 아니라 아까 우리가 설정 값 저장을 위해 만들었던 form 에서도 설정 값 이용을 위한 사전 준비를 해줘야 하기 때문에 아래와 같이 코드를 변경 해줍니다.

<? function add_theme_settings_page_callback() { ?>
    <form method="post" action="options.php">
        <? 
            settings_fields( 'custom-theme-option-group' ); 
            do_settings_sections( 'custom-theme-option-group' );
        ?>
        <textarea id="addAfterWpFooter" name="addAfterWpFooter"><? echo esc_attr( get_option('addAfterWpFooter') ); ?></textarea>
        <? submit_button(); ?>
    </form>
<? } ?>

사전 준비라고 해봤자 별 것 없는데, settings_fields 함수와 do_settings_sections 함수를 이용해서 “이 폼에서는 custom-theme-option-group 그룹의 설정을 핸들링 할거야.” 라고 선언해준다고 생각하시면 됩니다.

설정 값 사용

이제 거의 다 왔습니다.

각자가 어떤 설정 값을 따로 정의하고 사용하는지와는 무관하게 get_option 함수만 있으면 저장되어 있는 설정 값을 언제든지 불러와 사용할 수 있습니다.

처음에 저는 html 문서 하단에 특정 소스코드를 넣고 싶다고 했었죠? 그 소스코드를 관리자 화면에서 textarea 를 이용해 저장했다고 가정하고 아래와 같이 간단히 설정 값을 불러내 echo 해주기만 하면 됩니다.

        // 기존 코드 종료
    <? echo get_option('addAfterWpFooter'); ?>
</html>

조금 복잡해 보이지만, 잠깐만 정신차리고 보면 딱히 어려울 것도 없습니다.

굉장히 많은 부분을 다룬 것 같지만, 찬찬히 살펴 보시고 아래 워드프레스 공식 개발자 문서도 참고해 보세요.

외부링크

끝.

    댓글 남기기
© 모두의매뉴얼 2024
🗝️