WordPress 용 위젯 플러그인을 만드는 방법

WordPress는 위젯과 같은 많은 훌륭한 기능을 갖춘 놀라운 콘텐츠 관리 시스템입니다. 이 튜토리얼에서는 작은 플러그인 내에서 자신 만의 위젯을 만드는 방법을 설명하겠습니다. 이 포스트는 위젯 자체를 만들기 전에 이해해야 할 몇 가지 추가 사항을 다룹니다. 우리는 간다!


1 단계 : 위젯 플러그인 작성

나는 최근에“Freelancer Widgets Bundle”이라는 플러그인을 만들었고, 어떤 사람들은 그런 플러그인을 만드는 방법을 물었 기 때문에이 글을 쓰기로 결정했습니다. 첫 번째 단계는 플러그인 생성입니다. 보시다시피, 가장 어려운 부분은 아닙니다. 플러그인은 일단 활성화하면 WordPress에 추가되는 코드입니다. WordPress는 폴더를 통해 루프를 만들어 사용 가능한 모든 플러그인을 검색하여 백 오피스에 나열합니다. 플러그인을 만들려면 Coda (Mac) 또는 Dreamweaver (PC & Mac)와 같은 편집기가 필요합니다. 로컬 WordPress 설치에서 플러그인을 작성하는 것이 좋습니다. 실시간 서버에서 플러그인을 작성하면 오류가 발생하면 문제가 발생할 수 있습니다. 따라서 플러그인을 호스팅하기 전에 테스트하기를 기다리십시오..

이제 wp-content / plugins 폴더를여십시오. 플러그인을 추가 할 위치입니다. 새 디렉토리를 작성하고 “widget-plugin”이라고 부릅니다 (실제로이 이름은 원하는 이름이 될 수 있습니다). 플러그인에 단일 파일이 하나만 있어도 각 플러그인마다 폴더를 사용하는 것이 좋습니다. 디렉토리에 “widget-plugin.php”라는 새 파일을 만들고 (이 이름도 변경할 수 있음) 엽니 다. 이제 첫 번째 코드 줄을 추가하려고합니다. 워드 프레스의 플러그인 정의는 읽을 수있는 몇 가지 규칙을 따릅니다. 여기 코덱스에. WordPress에서 플러그인을 정의하는 방법은 다음과 같습니다.

따라서이 코드를 필요에 맞게 수정해야합니다.

파일을 저장하십시오. widget-plugin.php 파일에만 코드를 추가하여 플러그인을 만들었습니다! 글쎄, 지금은 플러그인이 아무것도하지 않지만 WordPress는 그것을 인식합니다. 사실인지 확인하려면 관리 부서에서 "플러그인"메뉴로 이동하십시오. 플러그인이 플러그인 목록에 표시되면 괜찮습니다. 그렇지 않으면 내 지침을 따르고 다시 시도하십시오. 이제 플러그인을 활성화 할 수 있습니다.

2 단계 : 위젯 생성

이제 위젯 자체를 만들 것입니다. 이 위젯은 핵심 WordPress 클래스를 확장하는 PHP 클래스입니다. WP_ 위젯. 기본적으로 위젯은 다음과 같이 정의됩니다.

// 위젯 클래스
My_Custom_Widget 클래스는 WP_Widget {

// 주요 생성자
공용 함수 __construct () {
/ * ... * /
}

// 위젯 양식 (백엔드 용)
공공 함수 양식 ($ instance) {
/ * ... * /
}

// 위젯 설정 업데이트
공개 함수 업데이트 ($ new_instance, $ old_instance) {
/ * ... * /
}

// 위젯을 표시합니다
공개 함수 위젯 ($ args, $ instance) {
/ * ... * /
}

}

// 위젯 등록
함수 my_register_custom_widget () {
register_widget ( 'My_Custom_Widget');
}
add_action ( 'widgets_init', 'my_register_custom_widget');

이 코드는 WordPress에 시스템이 위젯을 사용하는 데 필요한 모든 정보를 제공합니다.

  1. 그만큼 건설자, 위젯을 시작합니다
  2. 그만큼 form () 함수 관리에서 위젯 양식을 작성하려면
  3. 그만큼 update () 함수, 편집 중 위젯 데이터를 저장하려면
  4. 그리고 widget () 함수 프론트 엔드에 위젯 컨텐츠를 표시

1 – 생성자

생성자는 위젯 이름과 주요 인수를 정의하는 코드의 일부입니다. 아래는 그 모양에 대한 예입니다..

// 주요 생성자
공용 함수 __construct () {
부모 :: __ construct (
'my_custom_widget',
__ ( '내 사용자 정의 위젯', 'text_domain'),
정렬(
'customize_selective_refresh'=> true,
)
);
}

위젯 이름에 __ ()을 사용하지 마십시오.이 함수는 WordPress에서 번역을 위해 사용합니다. 항상 사용하는 것이 좋습니다. 이 기능들, 테마를 완전히 번역 할 수 있습니다. 'customize_selective_refresh'매개 변수를 사용하면 아래에서 위젯을 새로 고침 할 수 있습니다 모양> 사용자 화 위젯을 편집 할 때 전체 페이지를 새로 고치는 대신 위젯을 변경하면 위젯 만 새로 고쳐집니다..

2 – form () 함수

이 기능은 WordPress 관리 영역 (모양> 위젯 또는 모양> 사용자 정의> 위젯에서)에서 위젯 양식 설정을 작성하는 기능입니다. 웹 사이트에 표시 할 데이터를 입력했습니다. 위젯 필드 설정에 텍스트 필드, 텍스트 영역, 선택 상자 및 확인란을 추가하는 방법에 대해 설명하겠습니다..

// 위젯 양식 (백엔드 용)
공공 함수 양식 ($ instance) {

// 위젯 기본값 설정
$ defaults = 배열 ​​(
'title'=> '',
'text'=> '',
'textarea'=> '',
'checkbox'=> '',
'select'=> '',
);

// 현재 설정을 기본값으로 파싱
extract (wp_parse_args ((배열) $ instance, $ defaults)); ?>


/>

이 코드는 단순히 위젯에 5 개의 필드 (제목, 텍스트, 텍스트 영역, 선택 및 확인란)를 추가합니다. 먼저 위젯의 기본값을 정의한 후 다음 함수는 위젯에 대해 정의 / 저장된 현재 설정을 기본값으로 구문 분석합니다 (따라서 위젯을 처음 추가 할 때와 같이 존재하지 않는 설정은 기본값으로 되돌아갑니다) 사이드 바). 마지막은 각 필드의 HTML입니다. 양식 필드를 추가 할 때 esc_attr () 사용은 보안상의 이유로 수행됩니다. 사이트에서 사용자 정의 변수를 에코 할 때마다 처음 소독되었는지 확인해야합니다.

3 – update update () 함수

update () 함수는 정말 간단합니다. WordPress 핵심 개발자가 정말 강력한 위젯 API를 추가 했으므로 각 필드를 업데이트하려면이 코드 만 추가하면됩니다.

// 위젯 설정 업데이트
공개 함수 업데이트 ($ new_instance, $ old_instance) {
$ 인스턴스 = $ old_instance;
$ instance [ 'title'] = isset ($ new_instance [ 'title'])? wp_strip_all_tags ($ new_instance [ 'title']) : '';
$ instance [ 'text'] = isset ($ new_instance [ 'text'])? wp_strip_all_tags ($ new_instance [ 'text']) : '';
$ instance [ 'textarea'] = isset ($ new_instance [ 'textarea'])? wp_kses_post ($ new_instance [ 'textarea']) : '';
$ instance [ 'checkbox'] = isset ($ new_instance [ 'checkbox'])? 1 : 거짓;
$ instance [ 'select'] = isset ($ new_instance [ 'select'])? wp_strip_all_tags ($ new_instance [ 'select']) : '';
$ 인스턴스 반환;
}

보시다시피 각 설정을 확인하고 비어 있지 않은 경우 데이터베이스에 저장하십시오. wp_strip_all_tags () 및 wp_kses_post () 함수를 사용하면 데이터베이스에 추가되기 전에 데이터를 삭제하는 데 사용됩니다. 사용자가 제출 한 콘텐츠를 데이터베이스에 삽입 할 때마다 악성 코드가 없는지 확인해야합니다. 첫 번째 함수 인 wp_strip_all_tags는 기본 텍스트를 제외한 모든 것을 제거하므로 최종 값이 문자열 인 필드에 사용할 수 있고 두 번째 함수 인 wp_kses_post ()는 포스트 컨텐츠에 사용 된 동일한 함수이며 링크와 같은 기본 HTML 외에 모든 태그를 제거합니다. , 범위, div, 이미지 등.

4 – widget widget () 함수

widget () 함수는 웹 사이트에서 컨텐츠를 출력하는 함수입니다. 방문자들이 보게 될 것입니다. 이 기능은 CSS 클래스 및 테마 표시와 완벽하게 일치하는 특정 태그를 포함하도록 사용자 정의 할 수 있습니다. 코드는 다음과 같습니다 (필요에 따라이 코드를 쉽게 수정할 수 없음).

// 위젯을 표시합니다
공개 함수 위젯 ($ args, $ instance) {

추출 ($ args);

// 위젯 옵션 확인
$ title = isset ($ instance [ 'title'])? apply_filters ( 'widget_title', $ instance [ 'title']) : '';
$ text = isset ($ instance [ 'text'])? $ instance [ 'text'] : '';
$ textarea = isset ($ instance [ 'textarea'])? $ instance [ 'textarea'] : '';
$ select = isset ($ instance [ 'select'])? $ instance [ 'select'] : '';
$ checkbox =! empty ($ instance [ 'checkbox'])? $ instance [ 'checkbox'] : 거짓;

// WordPress 코어 before_widget 후크 (항상 포함)
에코 $ before_widget;

// 위젯을 표시합니다
에코
'; // 정의 된 경우 위젯 제목 표시 if ($ title) { echo $ before_title. $ title. $ after_title; } // 텍스트 필드 표시 if ($ text) { 에코

'. $ text '

'; } // 텍스트 영역 필드 표시 if ($ textarea) { 에코

'. $ textarea. '

'; } // 디스플레이 선택 필드 if ($ select) { 에코

'. $ select '

'; } // 확인란이 true 인 경우 무언가 표시 if ($ checkbox) { 에코

멋진 것

'; } 에코
'; // WordPress 코어 after_widget 후크 (항상 포함) 에코 $ after_widget; }

이 코드는 복잡하지 않습니다. 기억해야 할 것은 변수가 설정되어 있는지 확인하고, 설정하지 않은 경우 인쇄하려는 경우 오류 메시지가 표시됩니다..

완전한 위젯 플러그인 코드

이제 올바르게 따르고 있다면 플러그인이 완전히 작동하고 필요에 맞게 사용자 정의 할 수 있습니다. 가이드를 따르지 않았거나 코드를 다시 확인하려면 Github 페이지를 방문하여 전체 코드를 볼 수 있습니다.

Github에서 전체 코드보기

결론

우리는 플러그인 내에서 위젯을 생성하는 것이 매우 흥미 롭다는 것을 알았습니다. 이제 다른 필드 유형의 위젯을 포함하는 간단한 플러그인을 생성하는 방법을 알아야하며 고급 기술을 사용하여 위젯을 사용자 정의하는 방법을 조금 더 배우는 방법을 배웠습니다. 축하합니다, 당신은 놀라운 일을했습니다!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me