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

 

워드프레스에서 관리자  페이지에서 가장 먼저 보여지는 페이지는 “대시보드(알림판)” 페이지입니다.  대시보드 페이지에서는 기본적으로 사이트의 콘텐츠 현황이나 워드프레스의 소식, 임시글을 바로 작성할 수 있는 “빠른 임시글” 위젯등이 존재 합니다. 워드프레스에서 기본적으로 제공하는 “대시보드 위젯” 말고도 테마나 플러그인에서 제공하는 대시보드 위젯도 있습니다.

보통 대시보드(알림판) 페이지는 워드프레스 사이트의 전체 현황과 상황을 모니터링하는데 도움이 될 수 있는 정보등을 제공하는 것이 보통입니다. 저 역시도 여러가지 플러그인이 제공하는 대시보드 위젯의 도움을 받아 워드프레스 사이트를 관리하고 있습니다.

screenshot-www.linchpinsoft.com 2016-01-19 20-03-21

위 스크린샷은 플러그인등이 제공하는 대시보드 위젯이 추가된 “대시보드(알림판)”페이지를 캡춰하였습니다. 위의 화면에서는 JetPack 플러그인과 Yoast SEO 플러그인에서 제공하는 대시보드 위젯을 보여주고 있습니다. 이처럼 전체 사이트의 현황과 콘텐츠의 개요를 일목요연하게 파악해 볼 수 있어서 좋은 플러그인과 테마는 양질의 “대시보드 위젯”을 제공합니다.

 

워드프레스에서는 기본적인 훅과 함수로 위와 같은 대시보드위젯을 손쉽게 추가 할수 있도록 기능을 제공하고 있습니다.

class LinchpinSdashBoard{
 public function __construct(){
  add_action('wp_dashboard_setup',array($this,'widgetAction'));
 }

public function widgetAction(){
 
  wp_add_dashboard_widget('widgetBoard','콘텐츠 개요 현황',array($this,'widgetBoard'));
  wp_add_dashboard_widget('widgetLinchpinSprogram','프로그램 등록 현황',array($this,'widgetLinchpinSprogram'));
  wp_add_dashboard_widget('widgetLinchpinScat','카테고리 현황',array($this,'widgetLinchpinScat'));
  wp_add_dashboard_widget('widgetAlert','시스템 주의사항',array($this,'widgetAlert'));
  wp_add_dashboard_widget('widgetContact','린치핀소프트 고객소리함',array($this,'widgetContact'));
}

public function widgetAlert(){
?>
<header style='text-align:center;font-wieght:bold;font-size:2.0em;'>
<h1>시스템 사용 주의사항 안내</h1>
</header>
<div style='margin-top:2em;background-color:#ec971f;color:white;font-size:1.7em;padding:0.6em;line-height:1.8em'>
<ul style='list-style-type:circle'>
<li><i class="announcement icon"></i> 인터넷 익스플로러 브라우저의 경우 IE10 이상의 버전에서 정상적으로 작동합니다</li>
<li><i class="announcement icon"></i> 프로그램에 있어 옵션 필드를 활용하세요</li>
<li><i class="announcement icon"></i> 프로그램 오작동시에는 린치핀소프트 고객소리함 메뉴를 이용해 연락주시면 영업일 2일 기준 응답드리겠습니다.
</li>
</ul>
</div>
<?php
 }
}

위의 코드는 클래스를 활용하여 “wp_dashboard_setup” 액션 훅과 wp_add_dashboard_widget() 함수를 활용하여 대시보드 페이지에 대시보드 위젯을 추가하는 예제입니다.

“wp_dashboard_setup” 액션 훅의 경우 대시보드의 위젯을 추가하거나 삭제할때 사용하는 액션입니다. 위의 소스코드에서는 “wp_dashboard_setup” 액션 훅의 콜백 메서드로 클래스 메서드 “widgetAction”을 지정하였습니다.

즉, 대시보드화면이 구성될때 호출되는 wp_dashboard_setup 훅을 추가하고 해당 훅의 콜백함수로 위의 정의된 클래스의 메서드인 “widgetAction”메서드를 호출합니다.

widgetAction 메서드에서는 “wp_add_dashboard_widget()” 함수를 이용하여 위젯을 추가합니다.

 

wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback, $callback_args );

wp_add_dashboard_widget은 위와 같은 형식으로 사용해주어야 하며, 이 예제에서는 세번째 인수 $control_callback 위치에 클래스의 메서드를 지정했습니다.

제가 예제로 작성한 소스코드에서는 정의된 클래스의 widgetAlert() 메서드가 호출되며 해당 메서드에서 기술된 HTML과 PHP로직이 워드프레스의 대시보드에 위젯으로 추가됩니다.

screenshot-211.110.165.134 2016-01-19 19-57-31

위의 스크린샷은 오늘 소개해드린 훅과 함수를 이용하여 대시보드에 위젯을 추가한 화면입니다. 추가로 앞서 wp_add_dashboard_widget()에서 기술한 $widget_id 항목을 이용하영 JS(자바스크립트)와 CSS를 이용하여 디자인과 기능을 추가할 수 있습니다.

 

참고 포스트 : 워드프레스 훅(hook) 소개