워드프레스 테마에 설정 페이지를 추가하는 방법
1. 필요한 파일을 생성합니다.
테마를 사용자 정의하기 전에 먼저 사용자 정의 가능한 "설정 옵션 페이지"를 생성해야 합니다. 설정 옵션 페이지를 생성하는 코드는 테마 디렉토리의 function.php 파일에 배치되어야 합니다. 템플릿 이름이 "OptionPage"인 경우 함수 파일의 경로는 wp-contentthemesOptionPagefunctions.php입니다.
워드프레스에 수동으로 로드하라고 요청할 필요는 없습니다. 워드프레스가 실행될 때 자동으로 로드됩니다.
2. 설정 옵션 페이지 만들기
먼저 첫 번째 단계는 사용할 수 있도록 백그라운드에 빈 페이지를 만드는 것입니다. add_aaction을 통해 이 단계를 수행합니다. WordPress가 실행되는 특정 시간에 작업을 실행할 수 있습니다. 예를 들어 제어판에서 메뉴를 생성하면 이에 대한 응답으로 admin_menu가 실행됩니다. 따라서 이를 활용하여 필요한 기능을 달성할 수 있습니다. 이는 옵션 페이지를 생성하는 가장 기본적인 기능입니다.
lt;?php
// 옵션 설정 페이지
function themeoptions_admin_menu()
{
/ / 제어판 사이드바에 설정 옵션 페이지 링크 추가
add_theme_page("Theme Settings", "Theme Options", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}
function themeoptions_page()
{
// 옵션 페이지의 주요 기능 설정
}
add_action('admin_menu', 'themeoptions_admin_menu');
themeoptions_admin_menu()는 제어판의 사이드바에 우리가 만든 옵션 페이지인 themeoptions_page를 가리키는 링크를 추가합니다.
add_theme_page()의 매개변수는 다음과 같습니다.
페이지 제목: 테마 설정
메뉴 제목: 테마 옵션 (p.s. 표시를 구별하기 위해 페이지 및 메뉴 제목(다른 이름)
함수: edit_themes;
핸들(handle): 현재 파일;
실행된 함수: themeoptions_page;
이제는 배경 제어판의 사이드바에 추가 "테마 설정" 메뉴가 있지만 여전히 비어 있습니다. 나중에 구현하려는 사용자 지정 콘텐츠가 이 빈 페이지에 생성됩니다.
3. 옵션 및 필드 추가
이제 방금 만든 빈 페이지에 옵션과 필드를 추가할 수 있습니다. 이 페이지의 스타일을 원하는 대로 지정할 수 있지만, 이 튜토리얼에서는 시간을 절약하고 좀 더 원시적으로 보이는 WordPress 기본 클래스를 사용하겠습니다.
themeoptions_page() 함수에 페이지 콘텐츠에 대한 코드가 포함되어야 합니다. 먼저 class="wrap"을 사용하여 div 컨테이너를 추가한 다음 헤더에 페이지 제목으로 기본 아이콘을 추가하고 마지막으로 양식을 디자인합니다.
lt;div class="wrap"gt;
lt;div id="icon-themes" class="icon32″gt;lt;br /gt;lt;/ divgt;
lt;h2gt;테마 설정lt;/h2gt;
lt form method="POST" action=""gt;
lt; type="hidden" name="update_themeoptions" value="true" /gt;
lt;pgt;lt; input type="submit" name="submit" id="submit" class= " 버튼 버튼-기본" value="변경 사항 저장"gt;lt;/pgt;
lt;/formgt;
lt;/divgt;
양식에 먼저 업데이트가 제출되었는지 확인할 수 있는 숨겨진 값을 추가해야 합니다. 그런 다음 제출 버튼을 추가합니다. 여기에는 WordPress의 기본 버튼 스타일도 사용됩니다. 현재 효과는 다음과 같습니다.
이제 설정 옵션 페이지의 기본 구조를 만들었으므로 이전에 개발된 콘텐츠를 기반으로 개선을 시작해 보겠습니다.
먼저 테마 사용자 허용 색 구성표를 변경할 수 있습니다. 이를 위해서는 사용 가능한 색 구성표의 드롭다운 목록이 필요합니다.
두 번째로 두 개의 광고 슬롯의 콘텐츠를 추가하려면 이미지의 URL과 광고 링크의 URL을 입력할 수 있는 두 개의 텍스트 상자를 추가해야 합니다.
마지막으로 사용자는 검색창 표시 여부를 선택할 수 있습니다. 체크박스를 추가하면 됩니다.
코드는 다음과 같습니다.
function themeoptions_page()
{
// 테마를 생성하는 주요 함수입니다. 옵션 페이지;
lt;divgt;
lt;div id="icon-themes"gt;lt;br /gt;lt;/divgt;
lt;h2gt ;테마 설정lt;/h2gt;
lt;form method="POST" action=""gt;
lt;input type="hidden" name=" update_themeoptions" value = "true" /gt;
lt;h4gt;테마 색 구성표lt;/h4gt;
lt; 이름 선택 = "colour"gt;
lt;?php $colour = get_option('mytheme_colour'); ?gt;
lt; 옵션 값="회색" lt;?php if ($colour=='gray') { echo '선택됨'; } gt; greylt;/optiongt;
lt; option value="blue" lt;?php if ($colour=='blue') { echo '선택됨'; } ?gt;gt;light bluelt;/optiongt;
lt;option value="pink" lt;?php if ($colour=='pink') { echo 'selected' } ?gt ;gt;pinklt;/optiongt;
lt;/selectgt;
lt;h4gt;이미지 광고 슬롯(1)lt;/h4gt;
lt ;pgt;lt;input type="text" name="ad1image" id="ad1image" size="32" value="lt;?php echo get_option('mytheme_ad1image'); ?gt;"/gt; ;/pgt;
lt;pgt;lt;input type="text" name="ad1url" id="ad1url" size="32" value="lt;?php echo get_option( 'mytheme_ad1url '); ?gt;"/gt; 광고 링크lt;/pgt;
lt;h4gt;이미지 광고 공간 (2)lt;/h4gt;
lt; pgt;lt ;input type="text" name="ad2image" id="ad2image" size="32" value="lt;?php echo get_option('mytheme_ad2image'); ?gt;"/gt;
lt;pgt;lt;input type="text" name="ad2url" id="ad2url" size="32" value="lt;?php echo get_option('mytheme_ad2url ');? gt;"/gt; 광고 링크lt;/pgt;
<p>lt;h4gt;lt;input type="checkbox" name="display_search" lt;?php echo get_option('mytheme_display_search') ?gt /gt; lt;pgt;lt;input type="submit" name="bcn_admin_options" value="데이터 업데이트"/gt;lt;/pgt;
lt;/formgt;
lt;/divgt;
lt;?php
}
이제 옵션 페이지의 내용은 기본적으로 완료되었습니다.
4. 데이터베이스 업데이트
지금까지 테마 옵션 페이지를 만들었습니다. 다음 단계는 POST를 통해 WordPress 데이터베이스에 데이터를 제출하는 방법입니다. 이를 위해서는 themeoptions_update()라는 새로운 함수를 생성해야 합니다. 이 함수는 themeoptions_page()에 의해 호출되므로 themeoptions_page() 함수 상단에 다음 코드를 추가합니다.
if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update() }
다음 단계는 업데이트 기능을 추가하는 것입니다.
함수 themeoptions_update()
{
//데이터 업데이트 확인
update_option('mytheme_colour', $_POST['colour' ]);
update_option('mytheme_ad1image', $_POST['ad1image']);
update_option('mytheme_ad1url', $_POST['ad1url']);
update_option('mytheme_ad2image', $_POST['ad2image']);
update_option('mytheme_ad2url', $_POST['ad2url']);
if ( $_POST['display_search']=='on') { $display = 'checked'; } else { $display = "; }
update_option('mytheme_display_search', $display);
}
5. 테마를 사용자 정의하는 옵션을 호출합니다.
테마의 기본 스타일 파일은 style.css입니다. 해당 스타일 파일을 만듭니다. 예를 들어 이 예에서 blue.css, pink.css 및 style.css는 기본적으로 회색입니다.
색 구성표 스타일 시트를 전환하려면 테마 헤더에 다음 코드를 추가해야 합니다:
lt; link rel="stylesheet" href="lt;? php bloginfo('stylesheet_directory' ); ?gt;/default.css" type="text/css"gt;
lt; link rel="stylesheet" href="lt;?php bloginfo(' stylesheet_directory'); ?gt ;/lt;?php echo get_option('mytheme_colour'); ?gt;.css" type="text/css"gt;
광고 공간 이미지를 추가하세요. 광고를 게재하려는 경우 다음 코드:
lt;a href="lt;?php echo get_option('mytheme_ad1url'); ?gt;"gt;lt;img src="lt;?php echo get_option('mytheme_ad1image') ); ?gt;” height="125" width="125" /gt;lt;/agt;
lt;a href="lt;?php echo get_option ('mytheme_ad2url'); gt;"gt;lt;img src="lt;?php echo get_option('mytheme_ad2image') ?gt;" height="125" width="125" /gt;lt;/ agt;
검색창 표시 여부 - 검색창을 배치해야 하는 위치에 다음 코드를 추가합니다. 사용자가 검색창 표시를 선택하면 표시되고, 그렇지 않으면 표시되지 않습니다.
lt;?php if (get_option('mytheme_display_search ') == 'checked') { ?gt;
lt;h3gt;검색 상자lt;/h3gt;
lt; form method="get" id="searchform" action="lt;?php echo esc_url( home_url( '/' ) ); ?gt;"gt;
lt; type="text" name="s" id="s" 자리 표시자 ="lt;?php esc_attr_e('검색', '85Ryan'); ?gt;
lt;input type="submit" name="submit" id="searchsubmit" value = "검색" /gt;
lt;/formgt;
lt;?php } ?gt;