워드프레스 플러그인 만들기

개요

이 글에서는 최신글 목록을 표시하는 숏코드를 만들어 사이드바 위젯에 추가할 수 있는 간단한 워드프레스 플러그인을 만드는 방법을 살펴보겠습니다.


※ 아래에서 소개한 Easy Theme Options 플러그인은 오랫동안 업데이트가 되지 않았기 때문에 더 이상 작동하지 않을 것 같습니다. Options Framework 같은 무료 플러그인을 활용하면 아무 것도 없는 상태에서 시작하는 것보다는 조금 수월할 것입니다.

제대로 워드프레스 테마나 플러그인을 개발하고 싶은 경우 워드프레스 공식 문서를 참고하시기 바랍니다.


플러그인 개발이라고 하면 거창하고 어렵게 생각될 수도 있겠지만 일종의 함수를 만든다고 생각하면 되겠습니다. 이 글의 주제에 관심을 가지시는 분들은 아마 워드프레스 관련 함수를 만들어 응용할 수 있는 단계가 아닌가 생각되네요. 그래서 이 글의 일부 내용은 처음 워드프레스를 접하거나 워드프레스 함수를 만들고 적용하는 방법에 익숙하지 않는 분에게는 어려울 수 있습니다.

워드프레스 최신 글 목록 플러그인 만들기최종적으로 위와 비슷한 형식으로 최신 글이 위젯 영역에 표시되도록 할 예정입니다. 몇 가지 파라미터를 사용자가 입력하도록 플러그인 옵션 페이지도 만들도록 해보겠습니다.

워드프레스 플러그인 만들기 도전하기위와 같이 관리자 페이지에서 설정 > 플러그인 옵션 메뉴를 클릭하면 다음과 비슷한 플러그인 옵션 페이지가 표시됩니다.

워드프레스 플러그인 만들기 예제플러그인 옵션 페이지에서는 최대한 심플하게 꼭 필요한 항목만 우선 추가해 보았습니다. 글 정렬 기준(orderby)이나 날짜 추가 여부도 선택할 수 있도록 할 수 있지만, 개인적으로 필요한 기능이 아니라서 넣지 않았습니다.

사실 워드프레스에는 최신 글 목록을 표시해주는 "최근 글" 위젯이 기본적으로 제공됩니다. 글 개수 정도만 지정할 수 있는 단순한 기능을 제공하지만 원하는 경우 기본 "최근 글" 위젯을 수정하여 사용하는 것도 가능할 것입니다. 또는, Recent Posts Widget Extended와 같은 플러그인을 사용하면 더 다양한 기능을 이용할 수 있습니다.

하지만 직접 이와 같은 플러그인을 만들게 된다면 성취감을 느낄 수 있을 것입니다. 이 글에서 최신 글 목록 플러그인을 선택한 이유는 코드가 복잡하지 않기 때문입니다. 최신 글 관련 코드는 인터넷을 통해 쉽게 찾을 수 있습니다. 이러한 코드를 취합, 수정하여 원하는 기능을 만들어낼 수 있습니다. 그리고 다양한 플러그인이 있지만 마음에 꼭 드는 플러그인은 찾기가 쉽지 않은 게 현실입니다. 아무리 좋은 플러그인을 설치해도 어느 정도는 CSS 작업 등을 통해 레이아웃을 조정해줄 필요가 있습니다. 직접 플러그인을 만들면 그런 레이아웃에 대해 마음대로 조정할 수 있다는 점이 매력이라면 매력이라 할 수 있겠네요.

준비하기

플러그인을 만드는 여러 방법이 있겠지만 여기에서는 Easy Theme Options라는 플러그인을 사용하여 최신 글 목록 함수를 추가하고 옵션 페이지를 만들려고 합니다. 이 플러그인은 업데이트가 중단된 지 4년이 되었지만 사용하는 데 별 문제가 없습니다. 이 플러그인은 어떤 기능을 하는 플러그인이 아니라 사용자가 테마 옵션을 만들 수 있도록 샘플 옵션 필드를 제공하는 플러그인입니다. 만약 테마를 제작한 후에 테마 옵션을 만들어야 한다면 이 플러그인을 가지고 응용할 수 있을 것입니다. 물론 플러그인 옵션도 구성할 수 있습니다. 약간 검색을 해보니 Options Framework라는 테마 옵션 만들기용 플러그인도 있네요. 옵션 페이지를 만드는 자세한 방법은 WordPress Codex 페이지에서 확인할 수 있습니다.

테스트로 Easy Theme Options라는 플러그인을 사용하여 플러그인 옵션 페이지를 만들어보았습니다. 자세한 방법은 이 글을 참고로 하여 Easy Theme Options 플러그인을 설치하고 옵션 페이지 위치를 설정 메뉴 아래로 이동시키도록 합니다. 링크된 글에서는 탭을 만드는 방법도 설명되어 있지만 굳이 새로운 탭을 만들지 말고 기존 탭을 그대로 활용해도 무방합니다.

워드프레스 플러그인 만들기

저는 플러그인에 있던 Advanced 탭을 제거하고 General 탭과 Help 탭만을 활용하기로 했습니다. Easy Theme Options 플러그인을 설치하고 대시보드에 표시되는 옵션 페이지의 이름을 변경하고 경로를 설정 아래로 바꾸었다면 본격적으로 시작해보겠습니다.

최근 글 플러그인 만들기

최근 글 표시 코드 완성하기

먼저 최신 글을 표시하는 코드를 완성해야 합니다.  WordPress Codex 페이지에 나와 있는 다음과 같은 코드를 활용해보겠습니다. (참고: 아래의 내용은 이미 함수 작성에 익숙한 사용자에게 적합한 글입니다. 이런 부분에 익숙하지 않다면 이해하는 데 시간이 많이 소요될 수 있습니다.)

<h2>Recent Posts</h2>
<ul>
<?php
$args = array( 'numberposts' => '5' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a> </li> ';
}
?>
</ul>

위의 코드는 최신 글 5개의 제목만 표시합니다. 여기에 다양한 인수를 수용할 수 있도록 코드를 $args = array('numberposts' => '5'); 부분을 다음과 비슷한 코드로 대체합니다.

$args = array( 'posts_per_page'   => '5',
'offset'           => 0,
'category'         => '',
'category_name'    => '',
'orderby'          => 'date',
'order'            => 'DESC',
'suppress_filters' => true  );

각 파라미터에 대한 자세한 내용은 여기에서 확인해볼 수 있습니다. 그리고 썸네일과 요약문(Excerpt)도 추가하여 대강적인 뼈대를 만들도록 합니다(최종본은 아래 부분 참고). 썸네일은 get_the_post_thumbnail(), 요약문은 get_the_excerpt() 함수를 사용하면 됩니다.

이와 더불어 CSS 스크립트도 함께 작성하도록 합니다.

숏코드 만들기

이제 위에서 만든 최신 글 표시 코드를 숏코드로 만드는 작업을 하도록 합니다. 숏코드에 대한 자세한 내용은 "워드프레스 숏코드: 완벽 가이드" 글을 참고하시기 바랍니다.

그리고 썸네일의 경우 다양한 크기를 수용할 수 있도록 add_image_size 함수를 사용하여 새로운 썸네일 크기를 만들었습니다. "워드프레스 썸네일 크기 조정" 글을 참고해보세요.

숏코드와 관련 코드를 Easy Theme Options 플러그인 폴더 내에 있는 PHP 파일에 추가하도록 합니다. CSS의 경우 이 글에 소개된 방법에 따라 새로운 CSS 파일을 만들어 연결할 수 있습니다. 이 때 CSS 파일을 플러그인 폴더 아래에 저장하므로 경로명은 plugin_dir_url( __FILE__ )이 되어야 합니다.

function myplugin_scripts() {
wp_register_style( 'custom-styles',  plugin_dir_url( __FILE__ ) . 'assets/custom.css' );
wp_enqueue_style( 'custom-styles' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_scripts' );

또는 wp_head 액션을 사용하여 <head>...</head> 사이에 삽입되도록 할 수도 있습니다.

add_action('wp_head','hook_javascript');

function hook_javascript() {

$output="<script> alert('Page is loading...'); </script>";

echo $output;
}
// Source: WordPress Codex

숏코드(최종 숏코드 샘플은 아래 참고)와 CSS가 완성되었다면 이제 사용자가 플러그인 옵션 페이지에서 지정할 수 있는 옵션을 만들 차례입니다. 예를 들어 표시할 글 개수나 정렬 순서, 썸네일 크기, 요약문 길이 등을 사용자가 백엔드에서 직접 지정할 수 있도록 옵션을 제공할 수 있을 것입니다.

플러그인 옵션 필드 만들기

플러그인 옵션 필드를 만드는 방법은 "테마 옵션/플러그인 옵션 페이지 만들기" 글을 참고하시면 됩니다. 가령 /includes/options.php 파일에서 예시로 나와 있는 텍스트 타입의 옵션 필드를 복사하여 새로운 필드를 만들 수 있습니다.

array(
'label'=> '글 개수',
'desc' => '<br>표시할 글 개수를 지정하세요(기본값: 5).',
'id' => $prefix.'postno',
'value' => '5',
'type' => 'text'
),

이와 같은 방식으로 원하는 개수의 옵션 필드를 만들도록 합니다.

플러그인 옵션 필드를 만들었다면 최신 글 표시 코드에서 해당 옵션 필드를 호출하도록 수정하도록 합니다. 예:

$postnumber = (!eto_get_option('eto_postno') ? '5' : eto_get_option('eto_postno'));
$args = array( 'posts_per_page'   => $postnumber,
...

위와 같은 식으로 글 개수 옵션 필드를 불러올 수 있습니다.

최종 코드

이상과 같이 다소 복잡하게 보이는 과정을 통해 최신 글 플러그인이 완성되었습니다. 하지만 이 방법이 다른 방법보다 직관적이고 조금만 연구하면 수월하게 따라 할 수 있을 것 같습니다. 무엇보다 테마 옵션 페이지를 쉽게 만들고 필드 옵션 필드를 추가하여 간단하게 호출할 수 있어 코딩에 대한 부담감을 많이 덜 수 있을 것입니다.

위의 과정을 거쳐 완성한 최종 코드입니다(CSS 부분 제외).

메인 PHP 파일(플러그인 루트 폴더 아래에 위치)

// ************************************************
// Shortcode for Simple Recent Posts
// ************************************************
function simple_recent_posts() {
// default values
$postnumber = (!eto_get_option('eto_postno') ? '5' : eto_get_option('eto_postno'));
$content = '';

$temp = '';
$args = array( 'posts_per_page'   => $postnumber,
'offset'           => 0,
'category'         => '',
'category_name'    => '',
'orderby'          => 'date',
'order'            => 'DESC',
'include'          => '',
'exclude'          => '',
'meta_key'         => '',
'meta_value'       => '',
'post_type'        => 'post',
'post_mime_type'   => '',
'post_parent'      => '',
'author'    => '',
'post_status'      => 'publish',
'suppress_filters' => true  );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
$temp .= '<li>';
if ( has_post_thumbnail($recent["ID"] )) {
$temp .= '<div class="recent_left">' . get_the_post_thumbnail($recent["ID"], 'thumb-recents' ) . "</div>";
}
$temp .= '<a href="' . get_permalink($recent["ID"]) . '"><span class="recent_right"><span class="recent-title">' .   $recent["post_title"].'</span><span class="recent-excerpts">' . get_the_excerpt($recent->ID) . '</span></a></span> </li> ';
}
if(eto_get_option('eto_posttitles')) {
$content = '<h2>' . eto_get_option('eto_posttitles') . '</h2>';
}
$content .= '<div class="recent_wrapper"><ul>' . $temp . '</ul></div>';
return $content;
}
add_shortcode('simpleposts', 'simple_recent_posts');

// Custom Thumbnail Size
function custom_thumbs()
{
$thumbwide = (!eto_get_option('eto_thumbwd') ? '50' : eto_get_option('eto_thumbwd'));
$thumbheight = (!eto_get_option('eto_thumbht') ? '50' : eto_get_option('eto_thumbht'));

add_image_size( 'thumb-recents', $thumbwide, $thumbheight );
}
add_action( 'after_setup_theme', 'custom_thumbs' );

/includes/options.php 파일

<?php

/* ----------------------------------------
* To retrieve a value use: $eto_options[$prefix.'var']
----------------------------------------- */

$prefix = 'eto_';

$eto_custom_tabs = array(
array(
'label'=> __('General', 'eto'),
'id' => $prefix.'general'
),

);

/* ----------------------------------------
* Options Field Array
----------------------------------------- */

$eto_custom_meta_fields = array(

/* -- TAB 1 -- */
array(
'id' => $prefix.'general', // Use data in $eto_custom_tabs
'type' => 'tab_start'
),

array(
'label'=> '최신 글 목록을 표시하려면 [simpleposts] 숏코드를 사용하십시오.',
'id' => $prefix.'title',
'type' => 'title'
),

array(
'label'=> '위젯 제목',
'desc' => '<br>최신 글 목록의 제목(없는 경우 표시되지 않음)',
'id' => $prefix.'posttitles',
'type' => 'text'
),

array(
'label'=> '글 개수',
'desc' => '<br>표시할 글 개수를 지정하세요(기본값: 5).',
'id' => $prefix.'postno',
'type' => 'text'
),

array(
'label'=> '썸네일 너비',
'desc' => '<br>썸네일의 폭을 숫자(px 없이)로 지정해주세요(기본값: 50px, 최대값: 100px).',
'id' => $prefix.'thumbwd',
'type' => 'text'
),

array(
'label'=> '썸네일 높이',
'desc' => '<br>썸네일의 높이를 숫자(px 없이)로 지정해주세요(기본값: 50px).',
'id' => $prefix.'thumbht',
'type' => 'text'
),

array(
'type' => 'tab_end'
),

);

?>

그러면 서두의 그림에 표시된 레이아웃의 플러그인 옵션 페이지가 대시보드에 표시되고, 사이드바에 썸네일과 요약글과 함께 최신 글 리스트가 표시됩니다.

마치며

이상으로 Easy Theme Options라는 플러그인을 사용하여 비교적 수월하게 플러그인 옵션 페이지를 만들고 옵션 필드를 만들어 최신 글 코드에 연결하는 방법을 살펴보았습니다. 플러그인을 사용하지 않고 직접 테마 옵션 혹은 플러그인 옵션 페이지를 만들 수도 있습니다. 그 중에 하나로 이 페이지의 소개된 코드를 활용할 수 있습니다. 플러그인을 사용하지 않고 함수 파일 등에 직접 추가하여 활용할 수 있지만, 다소 복잡하고 필드 하나를 추가하더라도 코드를 많이 작성해야 하는 번거로움이 있습니다.

참고:


9개 댓글

  1. Easy Theme Options 플러그인은 6년 동안 업데이트가 안 되고 있네요.

    다른 비슷한 플러그인을 찾아보는 것이 좋을 듯 합니다. 시간이 될 때 한 번 찾아보아야겠네요.

  2. 아.. 정말 보고 바로 따라 할 수 있을정도로 되고 싶네요.ㅜㅜㅜㅜ 

    궁굼한게 있습니다. 
    워드프레스에 있는 기능 중에 권한을 나누는것이 있지 않습니까..
    그 기능을 이용해서, 세부적으로 권을을 줄 수는 없습니까?
    예를 들어, 미디어에 들어가서 사진을 편집하거나 지울수는 없지만, 페이지나 글을 적어 올린다거나.. 할 수 있게 말입니다.
    네이버 검색해도 그런 내용이 나와 있지 않아 혹시나 해서 여쭙습니다.><
    1. 안녕하세요?

      User Role Editor 플러그인을 한 번 사용해보시기 바랍니다. (이 글을 참고해보세요.)

      비슷한 성격의 플러그인도 있는데요(어쩌면 원하는 종류의 플러그인이 아닐 수도 있지만), Press Permit Core 플러그인도 한 번 확인해보시기 바랍니다.

      즐거운 주말 저녁 시간 되시기 바랍니다.

      1. 와우.. 또 한번 놀랍니다.! 

        감사합니다.!!
        근데 개인적 질문인데.. 프로그래머 이신건가요??
        개인적으로 홈페이지 좀 주물러 달라는 의뢰도 받으시는건가요??
        혹시 그렇다면, 가격은 어느정도면 의뢰를 수락하시나요??
        이런곳에서 이런 질문 해도 되는지 모르겠지만,;;
        혹시나해서 여쭙습니다.
      2. 안녕하세요?

        자세한 내용을 https://www.thewordcracker.com/support-system/ 페이지에서 제출해주시면 연락을 드리겠습니다. 구체적으로 어떤 수정을 원하시는지를 정확하게 알려주시기 바랍니다.

        만약 학생이시라면 비용이 부담될 것이므로 가급적 직접 공부하시면서 해볼 것을 권장합니다. 물론 노력 여하에 달려있겠지만, 젊은 나이에는 더 빠르게 습득하지 않을까 생각되네요.

      3. 직접 도전하면서 배우는 것도 좋을 듯합니다.
        개인적인 생각은 제대로 접근하면 빠른 시간 내에 배울 수 있으리라 생각되네요.
        책을 한 권 구입하여 보면서 전체적으로 익힌 후에 응용하는 것도 좋은 방법 같습니다.
        많은 분들이 책에서 배울 것이 없다고 느끼지만, 실제로는 책의 내용을 제대로 이해하고 워드프레스가 어떻게 작동하는지를 제대로 이해하면 많은 문제가 쉽게 해결될 수 있다고 생각합니다.
        수고하세요.

      4. 넵! 사실.. 오랫동안 책도 보고 했는데.. 머리가 안따라 줘서 코드를 만지지는 못합니다.ㅎㅎ

        User Role Editor <-- 이 플러그인 정말 좋네요!! 감사합니다.
        딱하나.. 사용자가 파일을 올릴 수는 있되, 라이브러리는 못봤으면 좋겠는데.. 그렇게는 안되네요.
        파일을 올릴 수 있게 하니까.. 동시에 라이브러리 안에 있는 사진까지 볼 수 있네요.ㅜㅜ.
        좀더 궁리를 해보겠습니다.
        감사합니다.!

댓글 남기기

* 이메일 주소는 공개되지 않습니다.