RSS

카테고리 보관물: 워드프레스 플러그인

자작/유용한 플러그인 소개

Simple Post Box 플러그인에 대한 소개

wp_등록 확인[Wordpress.org에 게시한 첫 플러그인 : Simple Post Box]

Simple Post Box는 블로그의 최신 포스트를 보여주는 박스입니다. 기본으로 제공되는 위젯과 내용상은 동일하지만 jquery와 CSS를 이용하여 액티브하게 만들었습니다. 우측하단의 아이콘을 클릭하면 최신 포스트가 위쪽으로 움직이며 나타납니다.

spb-이미지

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.


플러그인 추가 후 앞으로 해야 할 일들이 많네요. 지속적인 개선은 물론이거니와 소스 공유와 커밋에 대한 것, 스크린 샷 올리기, 피드백 받고 처리하기 등….

Advertisements
 
 

태그: ,

WordPress.org에 플러그인을 게시하다.

워드프레스에 대해 관심을 두게 된 건 친구의 사업 홈페이지 컨설팅 때문이다. 코어까지 모두 오픈 소스로 공유된 환경, 수많은 개발자와 블로그 사용자들이 사용하는 이 플랫폼이 상당히 매력적으로 다가왔다. 단조로운 직장생활 패턴에서 재미있는 놀거리가 생길 것 같았다.

가장 먼저 wordpess.org에서 코어 소스를 내려받아 훑어 보았다. 최적화되고 잘 정형화된 프로그램이라 쉽게 이해할수 없었다. 소스가 모두 오픈되어 있음에도 분석과 활용은 요원해 보였다. 도서관에 가서 책을 빌렸다. 내가 어려워했던 이유를 책 속에서 찾을 수 있었다. 워드 프레스는 핵심 엔지니어가 수정하는 코어 부분과 일반 개발자가 마음껏 활용할 수 있는 부분으로 크게 두 부분으로 구분되어 있다. 난 계속 코어를 디버깅하려고 했으니 얼마나 어려웠겠는가…^^ 그래서 책이 필요하다.

제대로 공부하기 위해 시간과 노력이 필요하다는 생각이 들어 혼자 볼 수 있는 책을 골라 주문했다. 그렇게 올 초부터 약 3개월간 이 블로그에 강좌를 올리며 공부를 시작했다. 이전에 내가 했었던 웹 프로그램과는 많이 달랐다. 그러나 중요한 건 흥미와 관심이 생겼다는 거다.

약 2개월이 지나 어느정도 기초가 쌓이고 플러그인을 개발할 수 있겠다는 생각이 들었다. 뭘 만들까 고민을 했지만 명확하게 떠오르지 않았다. 일단은 최소한의 기능을 가진 플러그인을 사이트에 게시해 보기로 했다. 그 과정에서 배우는 게 많을 거고 또 프로그램의 미비점은 조금씩 개선하자고 마음 먹었다.

로컬 환경에서 많은 테스트를 거쳐, 마침내 wordpress.org에 정식 등록 요청을 했다. 물론, 바로 승인이 날 것으로 기대는 하지 않았다. 하루가 지나 나의 메일로 피드백이 왔다. jquery 참조 방법에 문제가 있다는 내용이었다.

[jquery include 사용 문제 피드백]

jquery문제내 플러그인은 자체 jquery파일을 참조했는데, 그렇게 하면 안 되고 코어에서 제공하는 함수를 이용해 jquery참조를 하라는 것이었다. 프로그램을 수정하고 소스를 압축해 리턴 메일을 보냈다. 하루가 지나 드디어 승인 메일과 함께 플러그인 svn이 할당되었다. 가슴이 두근두근 뛰었다.

[나의 첫 플러그인(Simple Post Box) 승인 메일]

승인메일

다음은 사이트에 실제 게시를 해야 한다. svn에 익숙지 않아 메뉴얼을 찾아보고 연습한 후 소스 업로드 그리고 게시가 완료~~. 정말 나의 플러그인이 wordpress.org에 등록된 것이었다. 허접하긴 하지만 오픈소스에 첫 발을 내디뎠다.

플러그인 개발과 승인 및 게시에 이른 과정을 그려보았다. 

플러그인등록_플로우

나의 첫 플러그인 url은 http://wordpress.org/extend/plugins/simple-post-box/

게시 이틀 만에 27명이 다운로드 했다. 세계 곳곳에 흩어져 있는 개발자들이 받아간 것이다. 흥미롭다. 이런 게 오픈 소스의 매력이 아닐까.

 
 

태그: , ,

인사말 플러그인 기능 개선(포스팅 이용)

플러그인 관리자 페이지 등록을 통해 인사말 목록을 관리할 수 있게 되었다. 처음 소스코드에 랜덤하게 인사말을 가져오는 방식에서 데이터베이스를 쿼리하는 방식으로 변경해 보자.

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. 결과 화면

p4오른쪽 위에 인사말(Happy New Year)과 사용자 이름(admin)이 보인다. 페이지가 갱신될 때마다 랜덤하게 인사말이 변경된다.

 
 

태그: ,

관리자 메뉴에 플러그인 추가하기

플러그인의 관리자 페이지가 반드시 필요한 건 아니다. 하지만, 메타 데이터가 있을 때는 만드는 게 좋다. 그렇지 아니면 데이터베이스를 직접 갱신해야 하는 경우도 생길 수 있다. 상당히 귀찮다.

관리자 페이지 등록을 위해서는 생성한 플러그인을 워드프레스에 등록하고 활성화하는 작업이 필요하다. 플러그인을 등록하면 아래와 같이 해당 목록이 나타난다. 이를 활성화하면 사이트에서 바로 사용할 수 있다. 여기서는 직접 만든 Howdy Notices 플러그인 “활성화” 메뉴를 이용한다.

[플러그인 관리 페이지] 

p1

HowdyNotices 메뉴가 왼쪽에 추가되었다. 이 플러그인 관련 포스트 및 메타 테이터 설정이 가능하다.

[관리자 페이지에 플러그인 추가]p2

소스코드를 보면 관리 페이지 등록을 위해서는 register_post_type()과 이를 호출할 액션훅이 필요하다는 걸 알 수 있다.

// 플러그인이 활성화 될 때 플러그인을 등록하는 함수를 호출한다.
add_action('init', 'Howdy_create_notices');

Howdy_create_notices()에서 관리자 화면에 보일 메뉴명을 배열로 등록하고 register_post_type()을 호출하면 모든 준비가 끝난다. 나머지 기반 구조(포스트 등록 화면, 변경, 삭제, 메타 데이터 관련 편집화면 …)는 워드프레스에서 기본으로 제공한다. 기존 템플릿 페이지를 호출하기 때문에 별도 등록용 페이지를 만들 필요가 없다.

function Howdy_create_notices() {
    $labels = array(
     'name' => _x( 'HowdyNotices', 'post type general name' ), // Tip: _x('') is used for localization
    'singular_name' => _x( 'HowdyNotice', 'post type singular name' ),
    'add_new' => _x( 'Add New', 'Notice' ),
    'add_new_item' => __( 'Add New Notice' ),
    'edit_item' => __( 'Edit Notice' ),
    'new_item' => __( 'New Notice' ),
    'view_item' => __( 'View Notice' ),
    'search_items' => __( 'Search Notices' ),
    'not_found' => __( 'No Notices found' ),
    'not_found_in_trash' => __( 'No Notices found in Trash' ),
    'parent_item_colon' => ''
    );
    $notice_args = array(
    'labels' => $labels,
    'singular_label' => __('Notice', 'simple-notices'),
    'public' => true,
    'show_ui' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'rewrite' => false,
    'supports' => array('title', 'editor'),
    );
    register_post_type('howdynotices', $notice_args);
}

 

 

[Howdy Notices 관리자 페이지]
p3

 
 

태그: , ,

처음으로 만든 워드프레스 플러그인

초보 프로그래밍의 첫 시작을 알리는 “Hello World!”처럼 아주 단순한 플러그인을 만들어 보았다. 물론, 레퍼런스는 있다.^^ 워드프레스에 기본으로 포함된 Hello Dolly을 참고했다.

주요기능은

  1. 인사말을 랜덤하게 추출
  2. 현재 사용자 추출
  3. 테마 페이지 갱신 시 “인사말” + “현 사용자 이름” 출력 (테마 우측 상단)

사용한 액션훅은 wp_head 이다. 훅 이름을 변경하면 다양한 위치나 상태에서 액션을 취할 수 있다. 만약 wp_footer면 페이지 하단에 뿌려진다.

add_action( 'wp_head', 'hello_there' );

액션훅이 발생하면 hello_there 함수가 호출된다.

function hello_there() {
    global $current_user; 
    $chosen = getGreeting().$current_user->display_name; 
    echo "<p id='greeting'>$chosen</p>";
}

hello_there() 함수는 getGreeting()을 호출하여 인사말 목록을 랜덤으로 선택해 반환하고, 사용자 이름을 붙여서 화면에 출력한다.

function getGreeting() {
    $greetings = "Hello~
    Hi!
    Nice to meet you!
    Thank you!
    Thanks!
    Good Morning!
    Good Afternoon!
    Good Evening!
    Good Night~~";

    $greetings = explode( "\n", $greetings );
    return wptexturize( $greetings[ mt_rand( 0, count( $greetings ) - 1 ) ] );
}

글자를 꾸미기 위해 css 함수와 액션훅을 추가했다.

add_action( 'wp_head', 'greeting_css' );
function greeting_css() {
     // This makes sure that the positioning is also good for right-to-left languages
     $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>
    ";
}

[플러그인 실행 화면] : 우측 상단에 인사말과 사용자 이름 출력

wpplugin2

 
 

태그: ,