안녕하세요. 린치핀소프트 한광희입니다.

이번 포스트는 워드프레스 위젯을 제작하는 방법을 소개합니다. 위젯은 보통 최신글, 저자 소개, 최신 상품 소개, 관련 글이나, 페이스북,트위터와 같은 SNS LIKE BOX 등과 같은 성격의 추가적인 컴포넌트로 제작되어 “사이드바”에 추가 할 수 있는 컴포넌트입니다.

 

screenshot-www.linchpinsoft.com 2016-03-12 21-19-36

린치핀소프트 블로그에서도 다양한 사이드바 위젯이 차용되고 있습니다. 위의 화면 처럼 저자 소개 , Knowledge Base , 블로그 구독 , 최신글, 인기글 목록 등등과 같은 블로그에 관련된 정보를 우측 사이드바에 위젯을 추가하여 알려주고 있습니다.

사용하는 몇 가지 위젯은 플러그인과 테마에서 지원하는 위젯을 활용하였으며 이외에도 직접 개발하여 플러그인으로 제작하여 사용하는 위젯도 있습니다. 예를 들어 위의 스크린샷의 “Knowledge Base” 란 이름의 위젯의 경우 현재 작성된 블로그 포스트의 수를 애니메이션 효과와 함께 표현하며 클릭시 블로그 아카이브로 링크되도록 위젯을 직접 제작하였습니다.

 

 

 

워드프레스에서 사이드바의 위젯을 추가하는 메뉴는 관리자 페이지 “외모”->”위젯”에서 추가 할 수 있습니다.

 

screenshot-www.linchpinsoft.com 2016-03-12 21-17-53

 

위의 스크린샷처럼 자신이 직접 제작한 위젯은 다른 플러그인과 테마에서 지원하는 위젯과 마찬가지로, “사용할 수 있는 위젯” 목록에 리스트됩니다. 그 후 우측에 “사이드 바”영역에 추가하여 주는 동일한 과정을 통해 자신이 제작한 위젯을 사이드바에 추가 할 수 있습니다.

위 스크린샷을 참고하여 보면 위젯의 “제목(이름)” 과 “소개”가 있습니다. 또한 위젯을 사이드바에 추가하면 “애니메이션 지속 시간” , “애니메이션 설정”과 같은 이름으로 텍스트 입력 상자와 체크 박스가 생성되어 있습니다.

위와 같이 위젯을 제작할때도 위젯의 “환경 설정 옵션”을 추가 생성하여 환경설정에 따라 위젯의 동작을 제어 해 볼 수 있습니다.

 

 

위젯의 제작은 아래와 같은 단계로 제작합니다.

class MyNewWidget extends WP_Widget {

	function __construct() {
		// Instantiate the parent object
		parent::__construct( false, 'My New Widget Title' );
	}

	function widget( $args, $instance ) {
		// Widget output
	}

	function update( $new_instance, $old_instance ) {
		// Save widget options
	}

	function form( $instance ) {
		// Output admin widget options form
	}
}

function myplugin_register_widgets() {
	register_widget( 'MyNewWidget' );
}

add_action( 'widgets_init', 'myplugin_register_widgets' );

< 소스코드 예시 출처 : https://codex.wordpress.org/Function_Reference/register_widget >

 

1. WP_Widget 클래스를 상속하는 새로운 위젯 클래스를 정의합니다.

2.widget 클래스 메서드를 정의합니다.

사이드바에 게시되는 위젯의 직접 구현되는 부분입니다. 사용자 위젯 환경설정에서 지정한 데이터값을 참조하여 위젯을 구현하는 부분입니다.

3.update 클래스 메서드를 정의합니다.

update 클래스 메서드는 사용자 위젯 환경설정에서 저장되는 데이터를 확인 후 저장(Update) 하는 메서드입니다.

4.form 클래스 메서드를 정의합니다.

사용자 위젯 환경설정에서 보여지는 Form 을 구현합니다. 위에 소개한 Knowledge Base 위젯에서는 체크박스와 텍스트 인풋 상자를 이 메서드에서 구현하여 주고 있습니다.

5.”widgets_init” 액션 훅을 이용하여 “register_widget()”  호출하는 함수를 콜백 메서드로 지정하여 줍니다.

register_widget(“새로 정의한 위젯 클래스 이름”)을 입력하여 “widgets_init” 액션 훅의 콜백 함수로 지정되도록 합니다( 위의 소스코드 예시와 같이 이해하면 수월합니다).

 

 

위젯(Widget) 제작하기 #2