Simple Post Box 플러그인에 대한 소개
[Wordpress.org에 게시한 첫 플러그인 : Simple Post Box]
Simple Post Box는 블로그의 최신 포스트를 보여주는 박스입니다. 기본으로 제공되는 위젯과 내용상은 동일하지만 jquery와 CSS를 이용하여 액티브하게 만들었습니다. 우측하단의 아이콘을 클릭하면 최신 포스트가 위쪽으로 움직이며 나타납니다.
SVN은 http://plugins.svn.wordpress.org/simple-post-box/
readme 파일 작성할 때는 영어의 압박으로 힘들었지만, 사전, 번역툴, 워드프레스 플러그인 디렉토리를 참조하며 작성했습니다. 주요 내용은 Simple Post Box에 대한 설명, 사용 가능 환경, 버전 정보 등이다.
=== Plugin Name === Contributors: jandbond Donate link: Tags: post, posts, simple, box, korean, plugin Requires at least: 2.0.2 Tested up to: 3.2 Stable tag: 1.0 This plugin will help you to display recent posts in your site. == Description == Simple Post Box is a very easy plugin for WordPress which displays your recent 5 posts with a simple box. This plugin will be shown on the footer of your pages. Once you click the icon, a recent post will be shown. This is a jQuery and css based box. Thank you. == Installation == 1. Download the .zip file 2. Extract the contents and upload into your wp-content/plugins directory 3. Activate the plugin in your WordPress Dashboard == Screenshots == 1. screenshot-1.png 2. screenshot-2.png == Changelog == = 1.0 = * This is the first version of the plugin. == Upgrade Notice == There have been no upgrades yet.
플러그인 추가 후 앞으로 해야 할 일들이 많네요. 지속적인 개선은 물론이거니와 소스 공유와 커밋에 대한 것, 스크린 샷 올리기, 피드백 받고 처리하기 등….
WordPress.org에 플러그인을 게시하다.
워드프레스에 대해 관심을 두게 된 건 친구의 사업 홈페이지 컨설팅 때문이다. 코어까지 모두 오픈 소스로 공유된 환경, 수많은 개발자와 블로그 사용자들이 사용하는 이 플랫폼이 상당히 매력적으로 다가왔다. 단조로운 직장생활 패턴에서 재미있는 놀거리가 생길 것 같았다.
가장 먼저 wordpess.org에서 코어 소스를 내려받아 훑어 보았다. 최적화되고 잘 정형화된 프로그램이라 쉽게 이해할수 없었다. 소스가 모두 오픈되어 있음에도 분석과 활용은 요원해 보였다. 도서관에 가서 책을 빌렸다. 내가 어려워했던 이유를 책 속에서 찾을 수 있었다. 워드 프레스는 핵심 엔지니어가 수정하는 코어 부분과 일반 개발자가 마음껏 활용할 수 있는 부분으로 크게 두 부분으로 구분되어 있다. 난 계속 코어를 디버깅하려고 했으니 얼마나 어려웠겠는가…^^ 그래서 책이 필요하다.
제대로 공부하기 위해 시간과 노력이 필요하다는 생각이 들어 혼자 볼 수 있는 책을 골라 주문했다. 그렇게 올 초부터 약 3개월간 이 블로그에 강좌를 올리며 공부를 시작했다. 이전에 내가 했었던 웹 프로그램과는 많이 달랐다. 그러나 중요한 건 흥미와 관심이 생겼다는 거다.
약 2개월이 지나 어느정도 기초가 쌓이고 플러그인을 개발할 수 있겠다는 생각이 들었다. 뭘 만들까 고민을 했지만 명확하게 떠오르지 않았다. 일단은 최소한의 기능을 가진 플러그인을 사이트에 게시해 보기로 했다. 그 과정에서 배우는 게 많을 거고 또 프로그램의 미비점은 조금씩 개선하자고 마음 먹었다.
로컬 환경에서 많은 테스트를 거쳐, 마침내 wordpress.org에 정식 등록 요청을 했다. 물론, 바로 승인이 날 것으로 기대는 하지 않았다. 하루가 지나 나의 메일로 피드백이 왔다. jquery 참조 방법에 문제가 있다는 내용이었다.
[jquery include 사용 문제 피드백]
내 플러그인은 자체 jquery파일을 참조했는데, 그렇게 하면 안 되고 코어에서 제공하는 함수를 이용해 jquery참조를 하라는 것이었다. 프로그램을 수정하고 소스를 압축해 리턴 메일을 보냈다. 하루가 지나 드디어 승인 메일과 함께 플러그인 svn이 할당되었다. 가슴이 두근두근 뛰었다.
[나의 첫 플러그인(Simple Post Box) 승인 메일]
다음은 사이트에 실제 게시를 해야 한다. svn에 익숙지 않아 메뉴얼을 찾아보고 연습한 후 소스 업로드 그리고 게시가 완료~~. 정말 나의 플러그인이 wordpress.org에 등록된 것이었다. 허접하긴 하지만 오픈소스에 첫 발을 내디뎠다.
플러그인 개발과 승인 및 게시에 이른 과정을 그려보았다.
나의 첫 플러그인 url은 http://wordpress.org/extend/plugins/simple-post-box/
게시 이틀 만에 27명이 다운로드 했다. 세계 곳곳에 흩어져 있는 개발자들이 받아간 것이다. 흥미롭다. 이런 게 오픈 소스의 매력이 아닐까.
워드프레스 위젯 만들기
워드프레스는 다양한 위젯을 제공하며 사용자가 직접 생성도 가능하다. 사이드바에 기능별로 묶여 있는 위젯을 쉽게 볼 수 있는데, “최근글”, “카테고리”,”방문자 카운트”, “달력” 등이 모두 위젯이다. 하나의 위젯은 하나의 클래스이기 때문에 사이드바에 같은 위젯을 여러 개 올려도 무방하다.
위젯의 구성은 매우 간단하다. 먼저 WP_Widget를 상속한 클래스를 생성한다. 다음으로 정해진 네 개의 기능별 function을 만들어 필요한 기능을 구현하면 된다.
class My_Widget extends WP_Widget {
public function __construct() {
// 생성자, 위젯이 실행되면 가장 먼저 처리된다.
}
public function form( $instance ) {
// 관리자 페이지에 나타날 위젯 폼이다.
}
public function update( $new_instance, $old_instance ) {
// 위젯 옵션을 저장할 때 처리한다.
}
public function widget( $args, $instance ) {
// 위젯의 실제 출력될 모습.
}
}
위젯을 만들었으면 초기화할 훅을 선택해야 한다. 위젯 초기화 훅은 widgets_init이며 기본 워드프레스 위젯이 등록되는 순간 실행된다.
add_action('widgets_init', 'my_register_widgets');
초기화가 완료되면 사용자가 정의한 함수를 콜백하여 본격적으로 위젯을 이용할 수 있다.
function my_register_widgets() {
register_widget('My_Widget');
}
register_widget()을 이용해 사용자가 만든 위젯, My_Widget 클래스를 호출한다. 생성자(__construct)가 자동 호출되어 사용자 위젯 정보를 등록하고 관리자 페이지 위젯 메뉴에 추가된다.
class My_Widget extends WP_Widget {
function __construct(){
$widget_ops = array(' ' => 'My_Widget',
'description'=> 'A widget that displays a admin\'s notice.');
$this->WP_Widget('my_widget_notice','Notice Widget',$widget_ops);
}
...
위젯을 사이드바에 추가하려면 드래그해서 원하는 위치에 놓으면 된다.
관리자 페이지에서 위젯을 변경할 때는 form(), update() 함수를 호출한다. form()은 위젯 관리자 페이지로 “저장하기” 버튼을 누르면 update()가 호출되어 DB에 등록된다. 위젯의 “삭제”,”닫기”,”저장하기”는 위젯의 기본 기능으로 별도 구현할 필요가 없다. 메타 데이터의 wp_optoins 테이블에 저장된다.
class My_Widget extends WP_Widget {
...
function form($instance){
$defaults = array('title'=> 'My Notice', 'name'=> '', 'notice' => '');
$instance = wp_parse_args((array)$instance, $defaults);
$title = strip_tags($instance['title']);
$name = strip_tags($instance['name']);
$notice = strip_tags($instance['notice']);
?>
<p><?php _e('Title')?>:
<input class="widefat" name="<?php echo $this->get_field_name('title');?>"
type="text" value="<?php echo esc_attr($title)?>" /></p>
<p><?php _e('Notice')?>:
<textarea class="widefat" name="<?php echo $this->get_field_name('notice');?>">
<?php echo esc_attr($notice);?></textarea></p>
<?php
}
function update($new_instance, $old_instance){
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['notice'] = strip_tags($new_instance['notice']);
return $instance;
}
...
}
블러그의 사이드 바에 위젯이 제대로 생성되었는지 확인해보자. 이 때 widget()함수가 호출된다.
class My_Widget extends WP_Widget {
...
function widget($args, $instance){
extract($args);
$title = apply_filters('widget_title', $instance['title']);
$notice = empty($instance['notice']) ? ' ' :
apply_filters('widget_notice', $instance['notice']);
if ( !empty($title)) {
echo $before_title . $title . $after_title;
}
echo $before_widget;
echo '<p>' . '==>' . ': ' . $notice . '</p>';
echo $after_widget;
}
}
관리자 페이지에 메타박스 만들기
이전에 포스트 타입(register_post_type() 호출)을 이용해 커스텀 포스트를 생성해 보았다. 이번에는 이 포스트의 메타 데이터를 등록/변경할 수 있는 메뉴를 만들어 확장해 보자.
먼저 사용할 메타 데이터를 정의하자. $jhp_meta_box 메타 데이터에 포스트 레벨과 멤버 접근 권한 메뉴를 추가한다. 콤보를 통해 포스트의 상.중.하 중요도를 지정하고 체크박스는 회원/비회원 공개 여부를 결정하게 된다.
$jhp_meta_box = array(
'id' => 'jhp_meta_box',
'title' => 'Level Configuration',
'context' => 'side',
'priority' => 'low',
'fields' => array (
array(
'name' => 'Level',
'id' => 'levelselection',
'type' => 'select',
'desc' => 'Choose the level of the post',
'options' => array('High','Medium','Low')
),
array(
'name' => 'Member Only',
'id' => 'memberOnly',
'type' => 'checkbox',
'desc' => 'Member Only?'
)
)
);
메타 박스를 관리자 페이지에 추가하자. add_action의 admin_menu 액션훅을 호출하여 메뉴를 등록한다. 메뉴가 생성되면 jhp_render_meta_box() 함수가 콜백되어 관리자 메타 박스 화면이 만들어진다.
function howdy_add_meta_boxes() {
$hn_meta_box['context'], $hn_meta_box['priority']);
global $jhp_meta_box;
add_meta_box($jhp_meta_box['id'],$jhp_meta_box['title'],'jhp_render_meta_box', 'howdynotices',$jhp_meta_box['context'],$jhp_meta_box['priority']);
}
렌더링 페이지 만드는 함수는 다음과 같다. 콤보와 체크박스의 값을 비교해 화면에 나타낸다.
function jhp_render_meta_box() {
global $jhp_meta_box, $post;
echo '<input type="hidden" name="jhp_meta_box" value="', wp_create_nonce(basename(__FILE__)), '" />';
echo '<table class="form-table">';
foreach ($jhp_meta_box['fields'] as $field) {
$meta = get_post_meta($post->ID, $field['id'], true);
echo '<tr>';
echo '<td>', $field['desc'], '</td>';
echo '<td>';
switch ($field['type']) {
case 'select':
echo '<select name="', $field['id'], '" id="', $field['id'], '">';
foreach ($field['options'] as $option) {
echo '<option', $meta == $option ? ' selected="selected"' : '', '>', $option, '</option>';
}echo '</select>';
break;
case 'checkbox' :
echo '<input type="checkbox" value="1" name="', $field['id'], '" id="', $field['id'], '"', $meta ? ' checked="checked"' : '', ' />';
break;
}
echo '</td>';
echo '</tr>';
}
echo '</table>';
}
메타 박스가 포스트 오른쪽에 나타났다. 메타 데이터의 레벨 및 접근 권한을 변경해 갱신해 보자.
메타 데이터의 저장 및 변경을 위한 코드도 필요하다. add_action의 save_post 훅을 이용해 메타 박스 저장 함수를 호출한다.
function jhp_save_meta_data($post_id) {
global $jhp_meta_box;
if (!isset($_POST['jhp_meta_box']) || !wp_verify_nonce($_POST['jhp_meta_box'], basename(__FILE__))) {
return $post_id;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return $post_id;
}
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id)) {
return $post_id;
}
} elseif (!current_user_can('edit_page', $post_id)) {
return $post_id;
}
foreach ($jhp_meta_box['fields'] as $field) {
if(isset($_POST[$field['id']])) {
$old = get_post_meta($post_id, $field['id'], true);
$data = $_POST[$field['id']];
if (($data || $data == 0) && $data != $old) {
update_post_meta($post_id, $field['id'], $data);
} elseif ('' == $data && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
} else {
delete_post_meta($post_id, $field['id']);
}
}
}
메타 데이타는 wp_postmeta테이블에 저장된다. wp_posts 테이블과는 post_id를 키로 연결된다.
최상위 메뉴 생성하기
사용자가 직접 만든 관리자 메뉴를 추가해 보자.
add_menu_page() 함수를 호출하면 간단하게 탑 메뉴가 생성된다. 기본 제공되는 워드프레스 메뉴와 같은 레벨로 등록된다. 위치를 지정하지 않으면 제일 아래쪽에 붙고, 위치값을 주면 원하는 곳에 생성할 수 있다.
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
$function 인자에 콜백 함수를 지정해서 세부 설정 페이지를 구성할 수 있따. 메뉴가 호출되면서 콜백함수가 호출되는 식이다. $position으로 탑 메뉴 위치를 조정한다. 기존 설정된 것과 중복되지 않도록 주의해야 하는데, 가능하면 정수형보다는 소수점을 주면 중복을 최소화 할 수 있다. 예를 들어 Posts와 Media 사이에 추가하고 싶으면 6.3 값을 준다. 정수가 아닌 decimal형태로 주는 게 좋다.
2 Dashboard 4 Separator 5 Posts 10 Media 15 Links 20 Pages 25 Comments 59 Separator 60 Appearance 65 Plugins 70 Users 75 Tools 80 Settings 99 Separator
탑 메뉴에 하위 메뉴를 추가하려면 add_submenu_page()를 호출한다. 상위 메뉴와의 연관성을 위해 부모명을 입력해 주면 된다. 서브메뉴의 설정 페이지 역시 $function에 정의하여 콜백 처리하면 된다.
add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );
인사말 플러그인 기능 개선(포스팅 이용)
플러그인 관리자 페이지 등록을 통해 인사말 목록을 관리할 수 있게 되었다. 처음 소스코드에 랜덤하게 인사말을 가져오는 방식에서 데이터베이스를 쿼리하는 방식으로 변경해 보자.
1. 테마 화면에 인사말과 사용자명 나타내기
function hello_all() {
global $current_user;
query_posts(‘orderby=rand&post_type=howdynotices’);
if (have_posts()){
the_post();
$rtngreeting = get_the_title();
}
$chosen = $rtngreeting.’ ‘.$current_user->display_name;
echo “<p id=’greeting’>$chosen</p>”;
}
add_action(‘wp_head’, ‘hello_all’);
query_posts의 인자로 “orderby=rand”과 “post_type=howdynotices'”를 전달한다. 포스트 타입이 howdynotices인 랜덤 포스트를 추출해 가져온다.
$chosen 변수에는 포스트에서 가져온 타이틀(인사말)과 현 사용자 이름($current_user->display_name)이 담겨 출력된다. 출력을 좀 더 보기 좋게 만들기 위해 css를 추가했다.
2. css 코드
function hn_greeting_css() {
$x = is_rtl() ? ‘left’ : ‘right’;
echo “
<style type=’text/css’>
#greeting {
float: $x;
padding-$x: 155px;
padding-top: 5px;
margin: 0;
font-size: 15px;
color:red;
}
</style>
“;
}
add_action(‘wp_head’, ‘hn_greeting_css’ );
3. 결과 화면
오른쪽 위에 인사말(Happy New Year)과 사용자 이름(admin)이 보인다. 페이지가 갱신될 때마다 랜덤하게 인사말이 변경된다.
워드프레스 공중부양 