워드프레스에서 커스텀 페이지 네비게이션 플러그인 작성 예
개요
이 코드는 간단한 페이지 네비게이션 기능을 가진 워드프레스 플러그인이며 모든 리스트 페이지 하단에 Shortcode를 추가하면 사용할 수 있다. 화면에 리스트를 보여주는 것이 아니라 리스트 하단에 페이지 네비게이션을 보여주고 클릭하면 리스트를 가진 페이지에 요청을 보내는 기능을 구현한 것이다. 그러므로 리스트 기능을 가진 플러그인과 적절히 연결해 주어야 한다. 리스트 플러그인과 페이지 네비게이션 플러그인을 연결하는 일은 Shortcode의 속성 중에 'table', 'rows_per_screen'과 'page_param_name'의 값을 2개의 플러그인끼리 서로 일치하도록 지정하면 된다. 리스트 플러그인과 연결하는 예는 이 페이지 하단에 나와 있다
커스텀 페이지 네비게이션 출력 예시
페이지 네비게이션 Shortcode 사용법
워드프레스가 생성해준 페이지 템플릿의 리스트가 출력되는 페이지의 하단에 다음과 같은 Shortcode를 추가하면 된다
[kcw_show_page_navi table='myguests' pages_per_screen='5' rows_per_screen='3' page_param_name='pg']
table : 접속할 테이블 이름
pages_per_screen : 한 화면에 출력할 페이지 번호의 갯수
rows_per_screen : 한 화면에 출력할 리스트의 아이템 행수
page_param_name : 리스트에 전달되는 페이지 파라미터의 이름
커스텀 페이지 네비게이션 플러그인 코드
wp-content/plugins/my-plugin-test/kcw-pagination-plugin.php
<?php /* Plugin Name: KCW Pagination Plugin Plugin URI: http://micropilot.tistory.com Description: 페이지 하단에 페이지 네비게이션 링크를 보여주는 플러그인 Shortcode [kcw_show_page_navi table='myguests' rows_per_screen='3' pages_per_screen='3' page_param_name='pg'] Version: 1.0 Author: Kim Chang Woon Author URI: http://micropilot.tistory.com */ // Pagination Start//////////////////////////////// // 화면의 페이지 하단에 페이지 네비게이션을 출력하는 함수 // Shortcode[kcw_show_page_navi table='myguests' pages_per_screen='5' rows_per_screen='3' page_param_name='pg'] add_shortcode('kcw_show_page_navi', 'kcw_show_page_navi'); function kcw_show_page_navi($atts) { set_navi_style(); $table = $atts['table']; $pages_per_screen = $atts['pages_per_screen']; $rows_per_screen = (int)$atts['rows_per_screen']; $page_param_name = $atts['page_param_name']; $cur_page = 1; if(isset($_GET[$page_param_name])){ $cur_page = $_GET[$page_param_name]; } global $wpdb; $total_rows = $wpdb->get_col("SELECT count(id) FROM $table"); $tmp = ((int)$total_rows[0]) / ((int)$rows_per_screen); $tmp += (((int)$total_rows[0]) % ((int)$rows_per_screen)) > 0 ? 1 : 0; $total_pages = (int)$tmp; // 현재 페이지($cur_page)는 몇번째 네비게이션 그룹에 속하나? $tmp = $cur_page / $pages_per_screen; $tmp += $cur_page % $pages_per_screen > 0 ? 1 : 0; $group = (int)$tmp; $pg_end = $group * $pages_per_screen; $pg_start = $pg_end - ($pages_per_screen-1); $pg_end = $pg_end > $total_pages ? $total_pages : $pg_end; //log_d('페이지네이션', "cur_page=$cur_page, pages_per_screen=$pages_per_screen, group=$group, total_rows=$total_rows[0], total_pages=$total_pages, offset=$offset, $pg_start~$pg_end"); echo "<hr>"; // 첫 페이지로 이동 링크(|<) echo "<span class=\"end_page\"><a href=".get_permalink()."?$page_param_name=1> |< </a></span>"; // 전 페이지 이동 링크(<<) if($pg_start > 1) { $prev_page = $pg_start-1; echo "<span class=\"next_page\"><a href=".get_permalink()."?$page_param_name=$prev_page> << </a></span>"; } // 페이지 번호 링크 for($i=$pg_start;$i<=$pg_end;$i++){ ?> <span class="page_num <?php echo $i==$cur_page ? 'cur_page':'';?>"> <a href="<?php echo get_permalink()."?$page_param_name=$i";?>"> <?php echo $i ?> </a> </span> <?php } // 다음 페이지 이동 링크(>>) if($pg_end < $total_pages){ $next_page = $pg_end+1; echo "<span class=\"next_page\"><a href=".get_permalink()."?$page_param_name=$next_page> >> </a></span>"; } // 마지막 페이지로 이동 링크(>|) echo "<span class=\"end_page\"><a href=".get_permalink()."?$page_param_name=$total_pages> >| </a></span>"; } // <head>태그 안에 삽입될 자바스크립트가 필요하다면 아래처럼... add_action('wp_head', 'defineJS'); function defineJS(){ ?> <script> jQuery(function(){ //jQuery('span.cur_page').css('background-color', 'yellow'); }); </script> <?php } // 페이지 네비게이션 스타일 설정 function set_navi_style(){ ?> <style> span.page_num {border:1px solid gray; margin:5px; padding:5px;text-align:center;} span.next_page {border:1px solid gray; margin:5px; padding:5px;text-align:center; background-color:rgb(240,240,240);} span.end_page {border:1px solid gray; margin:5px; padding:5px;text-align:center; background-color:rgb(220,220,220);} span.cur_page {background-color:yellow;} </style> <?php } ?>
페이지 템플릿을 편집하여 Shortcode를 추가한 예
페이지 위에는 리스트 플러그인의 Shortcode를 추가하고 아래에는 페이지 네비게이션 플러그인의 Shortcode를 추가한 것이다
[kcw_show_list table='myguests' rows_per_screen='10' page_param_name='pg']
<hr>
[kcw_show_page_navi table='myguests' pages_per_screen='10' rows_per_screen='10' page_param_name='pg']
리스트 플러그인과 페이지 네비게이션은 서로 독립적인 플러그인이므로 서로 연동하기 위해서는 위와 같이 'table', 'rows_per_screen' 과 'page_param_name' 속성의 값이 2개의 플러그인끼리 서로 일치하도록 설정해야 한다
'table', 'rows_per_page', 'page_param_name' 속성을 커스텀 리스트 플러그인에서 사용하는 예
// 화면에 리스트를 보여주는 함수
// Shortcode[kcw_show_list table='myguests' rows_per_screen='10' page_param_name='pg']
add_shortcode('kcw_show_list', 'kcw_show_guest_list');
function kcw_show_guest_list($atts){
$pg = 1;
$table = $atts['table'];
$page_param_name = $atts['page_param_name'];
if(isset($_GET[$page_param_name])) $pg = (int)($_GET[$page_param_name]);
$rows_per_screen = (int)$atts['rows_per_screen'];
$offset = ($rows_per_screen * $pg - ($rows_per_screen-1))-1;
global $wpdb;
$rs = $wpdb->get_results ("SELECT id, firstname FROM $table LIMIT $offset,$rows_per_screen");
echo '<table>';
echo '<tr><th>아이디</th><th>First Name</th></tr>';
foreach($rs as $guest){
echo "<tr><td> $guest->id </td><td> ";
echo "<a href=../guest-desc?id=$guest->id>$guest->firstname</a>";
echo "</td></tr>";
}
echo '</table>';
echo "[<a href=../guest-add>추 가</a>]";
}