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명이 다운로드 했다. 세계 곳곳에 흩어져 있는 개발자들이 받아간 것이다. 흥미롭다. 이런 게 오픈 소스의 매력이 아닐까.
관리자 페이지에 메타박스 만들기
이전에 포스트 타입(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를 키로 연결된다.
인사말 플러그인 기능 개선(포스팅 이용)
플러그인 관리자 페이지 등록을 통해 인사말 목록을 관리할 수 있게 되었다. 처음 소스코드에 랜덤하게 인사말을 가져오는 방식에서 데이터베이스를 쿼리하는 방식으로 변경해 보자.
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)이 보인다. 페이지가 갱신될 때마다 랜덤하게 인사말이 변경된다.