WordPress 대시 보드에서 사용자 지정 관리 페이지를 만드는 방법

작성자 :
  • 주요 기사
  • 업데이트 : Jun 30, 2013

몇 년 전 워드 프레스가 표준 테마 인 큐브릭을 발표했을 때 흥미로운 새 기능이 추가되었습니다. 이 기능은 테마별 "functions.php"파일에서 기능 및 환경 설정을 정의하여 사용 가능한 사용자 정의 테마 관리 패널입니다. 그 후 몇 년 동안 많은 테마 디자이너들이 테마 옵션 페이지를 슬프게 사용했지만 실제로는 사용자가 새 테마를 설치하지 않고도 사이트의 모양을 제어 할 수있는 좋은 방법입니다. 테마 배경 이미지, 열 수 및 글꼴 색상과 같은 것은이 사용자 지정 관리 패널을 사용하여 모두 변경할 수 있습니다.

관리 패널 자체는 테마의 함수 파일을 사용자 정의 값을 정의하는 일련의 PHP 배열로 채워서 변경됩니다. 그런 다음 해당 값이 템플리트에 포함되고 관리 패널에 정의되어 사용자가 외관 환경 설정을 시각적으로 정의 할 수 있습니다. 테마 디자이너가 PHP의 작동 방식과 템플릿 파일 내에서 사용자 정의 프리젠 테이션을 허용하기 위해 해당 코드를 활용할 수있는 방법을 알게되면 전체 프로세스는 실제로 비교적 간단합니다.

여러 단계의 프로세스는 모두 몇 가지 사이트 와이드 변수를 설정하고이 새로운 관리 페이지에서 사용자 정의해야 할 항목을 정의하는 것으로 시작됩니다.

1 : 테마별 Functions.php 페이지 작성 및 편집

자신 만의 테마를 개발했다면 functions.php 파일을 기존 템플릿 파일과 쌍으로 만들었을 가능성이 매우 적습니다. 이것은 비교적 고급 옵션이며 대부분의 디자이너는 간단히 건너 뜁니다. 이 경우 선택한 FTP 클라이언트를 열고 테마 파일이있는 다음 서버 URL을 가리켜 야합니다.

/ public_html / wp-content / themes / 너의 주제 폴더 /

이 폴더 안에 들어가면“functions.php”파일이 없는지 다시 확인한 다음 텍스트 편집 프로그램을 사용하여“functions.php”라는 새 파일을 만드십시오.이 파일을 저장하여 서버에 업로드 할 수 있습니다 FTP. 텍스트 편집 프로그램이 없어도 서버에서 직접 편집 할 수 있습니다.

"functions.php"파일에 유효한 테마 옵션 패널을 정의하는 첫 번째 단계는 문서 맨 위에 두 개의 변수를 정의하는 것입니다. 이 변수는 대시 보드를 사용하여 테마 이름을 표시하고 해당 관리 페이지에서 양식 및 선택 요소를 식별하는 데 사용됩니다. 아래 코드를 확인하여“functions.php”문서의 상단에 배치하고 사이트 요구에 맞게 사용자 정의하십시오.

$ longname = "행정 패널 개발 주제";
$ shortcode = "apdt";

이러한 변수는 다른 목적으로 사용됩니다. $ longname 변수는 실제 관리 옵션 패널에서 테마 이름을 인쇄하는 데 사용됩니다. 따라서 개발자는 테마 사용자 간의 혼동을 피하기 위해 테마의 정확한 이름을이 변수에 할당하는 것이 좋습니다. $ shortcode 변수는 코드 자체에서 양식 요소를 식별하는 데 사용되므로 문장 부호없이 모두 소문자 여야합니다. 이 예에서는 테마의 전체 이름을 기반으로 간단한 약어가 사용되었습니다. 이것은 사용자의 취향에 맞게 사용자 정의 할 수 있습니다.

2 : PHP 배열을 사용하여 사용자 정의 가능한 환경 설정 정의하기

먼저, 관리 패널의 이름이 무엇인지 테마에 알리는 것이 중요합니다. 이것은 모든 잠재적 인 설정 위에 인쇄되며 초보자 사용자에게 목적의 명확성을 높이는 데 도움이됩니다. "functions.php"파일의 $ settings 태그에 다음 배열을 추가하면됩니다.

$ settings = array (
array ( "name"=> $ longname. "모양 설정",
"type"=> "title"),

다음으로, 옵션으로 가득 찬 배열이 "열렸거나"사용자 입력으로 수정할 수 있음을 표시해야합니다. 이것은 페이지 제목 정의 바로 아래에 나타나는 또 다른 간단한 배열을 사용하여 수행됩니다. 다음과 같이 보입니다 :

array ( "type"=> "open"),

이제 테마 모양 옵션을 자유롭게 정의 할 수 있으며 각 옵션은 새로운 배열로 생성됩니다. 이 예에서는 테마 바닥 글에 배치 할 텍스트를 정의합니다. 기본적으로 예제 테마에는 테마 버전 정보뿐만 아니라 테마 개발자 웹 사이트에 대한 링크가 포함되어 있습니다. 바닥 글에 자신의 정보를 배치하려는 WordPress 사용자는 바람직하지 않으므로이 사용자 지정 컨트롤을 사용하면 "footer.php"파일을 수동으로 편집 할 수 있습니다. 방법은 다음과 같습니다.

어레이 (
"name"=> "사용자 정의 테마 꼬리말 텍스트",
"desc"=> "이 테마 안에 포함 된 모든 페이지의 맨 끝에 표시되는 텍스트입니다.",
"id"=> $ shortcode. "_ custom_footer",
"type"=> "text",
"std"=> "실험 테마 v1.0. John Doe가 개발했습니다. 더 많은 주제는 여기에 있습니다. "),

위의 배열을 사용하면 테마의 표준 바닥 글 텍스트를 결정할 수 있지만이 프로세스의 작동 방식과 배열의 각 부분이 정의하는 내용을 더 잘 설명하기 위해 배열 태그를 설명해야합니다.

이름: 이것은 실제 텍스트 상자 자체의 이름을 나타내며 사용자가 테마에 대한 관리 옵션 페이지를 입력 할 때 표시되지 않습니다.

제품 설명: 이것은 사용자 정의 설정과 함께 제공되는 간단한 설명이며 사용자에게 표시됩니다.

ID: 텍스트 상자를 표시하고 스타일을 지정하기 위해 양식 이름의 사용자 정의 ID와 함께 짧은 코드를 사용합니다.

거래증명방식: 폼 요소가 텍스트 줄, 텍스트 상자, 드롭 다운 메뉴, 라디오 단추 또는 확인란인지 여부를 정의합니다.

성병: 선택한 요소의 기본값을 결정합니다. 텍스트 상자의 경우 입력 된 기본 텍스트가 결정됩니다. 확인란, 라디오 단추 및 드롭 다운 상자의 경우 기본적으로 선택되는 옵션이 결정됩니다.

3 : 새로운 옵션 페이지에 액세스 할 수 있도록 WordPress에 알리기.

옵션 페이지에 테마의 홈 폴더에있는 "functions.php"파일을 사용하는 목적이 있지만 WordPress에서 아직 인식되지 않았거나 WordPress 대시 보드 내의 다른 여러 설정 페이지에 포함되지 않았습니다. 테마의 옵션 페이지가 기능 페이지에서 식별되고 어디로 가야하는지 (독립 사이드 바 요소 또는 "설정"그룹 내에서) 알려 주어야하기 때문입니다. 이것은 잠재적 인 커스터마이제이션 배열 아래의“functions.php”파일에 추가되는 비교적 간단한 함수를 사용하여 수행됩니다.

function experimental_theme_save_values ​​() {
전역 $ longname, $ shortcode, $ settings;
if ($ _GET [ 'page'] == basename (__ FILE__)) {
if ( 'save'== $ _REQUEST [ 'action']) {
foreach ($ 설정으로 $ 설정) {
update_option ($ value [ 'id'], $ _REQUEST [$ value [ 'id']]); }
foreach ($ 설정으로 $ 설정) {
if (isset ($ _REQUEST [$ value [ 'id']])) {update_option ($ value [ 'id'], $ _REQUEST [$ value [ 'id']]); } else {delete_option ($ value [ 'id']); }}
header (“위치 : themes.php? page = functions.php & saved = true”);
다이;
} else if ( 'reset'== $ _REQUEST [ 'action']) {
foreach ($ 설정으로 $ 설정) {
delete_option ($ value [ 'id']); }
header (“위치 : themes.php? page = functions.php & reset = true”);
다이;
}
}
add_menu_page ($ longname. "모양 설정", "". $ longname. "모양 설정", 'edit_themes', 기본 이름 (__FILE__), 'experimental_theme_save_values');

이 코드는 두 가지 작업을 수행합니다. 먼저 관리 옵션 패널을 통해 테마 설정을 저장할 수 있습니다. 둘째, WordPress 대시 보드의 사이드 바에 사용자가 버튼을 클릭하고 테마 옵션 패널로 직접 이동할 수있는 독립 버튼을 배치합니다. 실제 페이지 자체와 마찬가지로“모양 설정”이라고 표시되어 있습니다. 일관성은 혼란을 제거하고 사용자가 옵션 패널로 이동하여 테마 모양을 사용자 정의하도록 지시하지 않고 페이지로 사용자를 안내하는 핵심입니다.

4 : 오류 메시지 추가 및 PHP 파일 닫기

테마 옵션 패널의 모든 요소를 ​​채우는 마지막 단계는 사용자가 마주 칠 수있는 오류 메시지를 정의한 다음 양식 요소를 옵션 페이지의 기본 WordPress 스타일로 표시 할 수 있는지 확인하는 것입니다. 에러 메시지를 추가하는 것은이 코드를 PHP 함수 파일에 붙여 넣는 것입니다 :

function experimental_theme_save_values ​​() {
전역 $ longname, $ shortcode, $ settings;
if ($ _REQUEST [ 'saved']) echo '
'. $ themename.' 모양 사용자 정의가 성공적으로 저장되었습니다.
';
if ($ _REQUEST [ 'reset']) echo '
'. $ themename.' 모양 사용자 정의가 성공적으로 재설정되었습니다.
';

이 두 줄의 코드 바로 아래에서?> ending 태그를 사용하여 functions.php 파일의 PHP 섹션을 닫을 수 있습니다. 이 아래에서 XHTML 코드는 표준 WordPress 대시 보드 스타일 시트를 사용하여 요소 스타일을 지정합니다.

5 : 옵션 페이지에 스타일 지정하기

현재 WordPress Dashboard 사용자는 새 오류 페이지를 볼 수 있지만 많은 오류 페이지를 볼 수는 없습니다. 관리 인터페이스 내에서 사용하기 위해 양식 요소와 스타일 시트가 아직 functions.php 파일에 배치되지 않았기 때문입니다. 새 패널에서 사용할 스타일 시트와 기본 양식 요소가 포함되어 변경되었습니다.

<div class = "wrap">
<h2> <? php echo $ longname; ? > 설정 </ h2>

<form method = "post"action = "options.php">

<? php break; 사례 '텍스트':? >

<tr>
<td width =”20 %”rowspan =”2 ″ valign =”middle”> <strong> <? php echo $ value [ 'name']; ? > </ strong> </ td>
<td width =”80 %”> <입력 스타일 =”width : 100 %;”name =”<? php echo $ value [ 'id']; ? > "id ="<? php echo $ value [ 'id']; ? >”type =”<? php echo $ value [ 'type']; ? >”value =”<? php if (get_settings ($ value [ 'id'])! =“”) {echo get_settings ($ value [ 'id']); } else {echo $ value [ 'std']; }? >”/> </ td>
</ tr>

<tr>
<td> <small> <? php echo $ value [ 'desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<? php break;}? >

<input type =”submit”value =”<? php _e ( '테마 설정 저장')? >”/>

이 코드는 PHP 함수 파일의 닫는 태그 아래에 붙여지며 테마 옵션 패널에 포함될 수있는 각 양식 유형에 따라 사용자 정의 할 수 있습니다. "case"변수는 "text"에서 텍스트 상자, 확인란, 선택 및 제목과 같은 것으로 변경할 수 있습니다. 이러한 양식은 테마에서 사용중인 경우에만 포함, 정의 및 스타일을 지정하면됩니다. 그렇지 않으면, 그것들의 포함이 필요하지 않으며 테마의 기능 파일을 빠져 나가면 효율성과 깨끗한 코드가 촉진됩니다.

9 : 실제 테마에서 볼 수있는 맞춤 옵션 활성화

테마의 공개 템플릿에서 변경 사항을 볼 수 있도록하려면 두 단계를 수행해야합니다. 첫 번째는 테마 바닥 글에 변수를 배치하여이 자습서의 이전 단계에서 활성화 한 사용자 정의 저작권 및 버전 텍스트를 표시하는 것입니다. 바닥 글 저작권 영역에 다음 코드를 배치하면됩니다.

<? php echo $ apdt_custom_footer; ? >

이 텍스트는 이전에 정의 된 바닥 글 텍스트에 대한 사용자 지정 배열을 호출하고 "Echo"문에 따라 해당 텍스트를 바닥 글에 인쇄합니다. 이 태그는 사용자가보기에 적합한 XHTML 태그에 포함될 수 있지만 사이트 헤더에 코드 조각이 추가되지 않으면 표시되지 않습니다.

헤더에서 테마는 WordPress 대시 보드에서 설정 한 사용자 정의 옵션을 찾도록 지시해야하며 사용자 정의 "functions.php"파일에 정의 된 변수를 알아야 해당 내용을 인쇄 할 수 있습니다 웹 사이트에. 이것은 웹 사이트의 헤더 (일반적으로 "header.php"파일)에 다음 PHP 변수를 배치하여 수행됩니다.

<? php global $ settings;
foreach ($ 설정으로 $ 설정) {
if (get_settings ($ value [ 'id']) === FALSE) {$$ value [ 'id'] = $ value [ 'std']; } else {$$ value [ 'id'] = get_settings ($ value [ 'id']); }
}
? >

그것이 전부입니다. 이제 사용자 정의 functions.php 파일에 정의 된 모든 옵션은 지정된 사용자 정의 및 컨텐츠가 적용되는 사용자 정의 PHP 변수를 포함하여 페이지의 모양에 반영 될 수 있습니다.

10 단계 : 새 설정 및 옵션 페이지 테스트

“functions.php”파일에있는 PHP 코드에서 버그, 오류 및 실수로 인한 오류가 철저히 테스트 될 때까지 워드 프레스 개발 노력은 완전히 완료되지 않았습니다. 이제 테스트를 할 차례입니다! WordPress 대시 보드에 로그인하고 작업중인 테마가 현재 선택되어 있지 않은 경우 사이드 바에서 "모양"범주로 이동하여 관련 테마를 활성화하십시오.

거기에서 몇 가지 사항을 확인하십시오.

  1. 테마의 설정 링크가 "설정"사이드 바 카테고리 제목 아래의 사이드 바에 자체 엔티티로 나타나는지 확인하십시오.
  2. 지정된 바닥 글 텍스트 사용자 정의 옵션이 사용자 정의 옵션 제어판에서 액세스 될 수 있는지 확인하십시오. 꼬리말의 기본 내용을 수정하고 환경 설정을 저장하십시오. 오류없이 저장되는지 확인하십시오.
  3. 실제 공개 웹 사이트를 방문하여 바닥 글의 내용과 관련된 대시 보드의 변경 사항이 표시되는지 확인하십시오.
  4. 모든 것이 제대로 작동하면 안도의 한숨을 쉬고 첫 번째 WordPress 테마 옵션 제어판 페이지를 즐기십시오.

Jerry Low 정보

WebHostingSecretRevealed.net (WHSR)의 설립자 - 100,000의 사용자가 신뢰하고 사용하는 호스팅 검토. 웹 호스팅, 제휴 마케팅 및 SEO에서 15 년 이상의 경험. ProBlogger.net, Business.com, SocialMediaToday.com 등의 기고자.