오늘 소개할 워드프레스 플러그인은 'WP-Popular Posts Tool' 입니다.
원래 처음 관심을 가지고 설치를 하려고 했던 플러그인은 'Popular Posts Bar Widget' 이었습니다.
우선 2가지 플러그인의 안내 페이지(사이트)는 아래와 같습니다.
Popular Posts Bar Widget 의 형태가 마음에 들어 처음에는 구입을 하려고 했습니다. $8(약 9,600원)정도의 가격이니 구입을 하려고 하다고 그래도 혹시나 하는 마음에 비슷한 플러그인이 있는지 워드프레스 공식사이트에서 검색을 해보았습니다.
그랬더니 아니나다를까 비슷한 형태의 플러그인이 존재하더라구요. 바로 WP-Popular Posts Tool 입니다.
그래서 일단 설치...
그러나 원래 의도했던 플러그인의 형태와는 조금 차이가 있었습니다. 당연한 것이었지만요...
<Popular Posts Bar Widget 적용 화면>
처음 보았던 플러그인인 Popular Posts Bar Widget의 디자인은 위의 그림처럼 깔끔하고 정갈한 느낌의 플러그인 이었다면, 비슷한 느낌의 무료 플러그인이었던 WP-Popular Posts Tool은 조금 부족한 느낌이 남아 있었습니다.
<WP-Popular Posts Tool 설정화면과 적용 화면 1>
<WP-Popular Posts Tool 적용 화면 2>
그런데 다른 적용된 샘플 페이지를 보니 Popular Posts Bar Widget과 비슷한 느낌이 나더라구요.
그래서 조금 손을 대어 보기로 했습니다. 참고로 전 디자이너라서 프로그램을 직접 만들거나 하지는 못합니다. 그런 제가 수정을 했으니, 어렵지 않아요.. 여러분도 충분히 수정하실 수 있으실거라 믿고 혹시 도움이 필요한 분이 있을까 하여 수정한 방법을 공유하고자 합니다.
<WP-Popular Posts Tool 설정화면과 적용 화면 1>을 보시면 아시겠지만 이 플러그인은 3가지 옵션이 있습니다.
텍스트 모드와 그래픽 모드인데 그래픽 모드는 그래프를 왼쪽/오른쪽을 선택할 수 있도록 되어 있습니다. 그래서 다른 소스는 수정하지 않고 그래픽(Graphic) 모드의 왼쪽(Left) 위치일 때의 옵션만 조금 건들어 보았습니다.
우선 플러그인이 설치된 폴더를 보시면 4개의 파일로 구성되어 있습니다. 아주 깔끔하게요.. 좋습니다.
- comments.png 파일은 <WP-Popular Posts Tool 설정화면과 적용 화면 1>의 코멘트 숫자 앞에 보이는 말풍선 이미지 입니다.
- readme.txt 파일은 해당 플러그인에 대한 설명 및 설치 방법에 대한 안내 파일입니다.
- screenshot-1.png 파일은 <WP-Popular Posts Tool 설정화면과 적용 화면 1> 이미지 입니다.
- wp-popular-posts-tool.php 파일은 바로 우리가 수정할 프로그램 파일입니다.
우선 수정된 부분을 보여 드리면,
음, 잘 안보이는 군요...
if($mode==0) echo $begin;
$postCount = 0;
$maxPostComments = 0;
//$colors = array('#FF3333', '#FF6666', '#FF9999', '#FFCCCC', '#FFEEEE');
//$colors = array('#CC0000', '#FF9900', '#FFCC00', '#669966', '#336699');
$colors = array('#0066CC', '#2178CF', '#4087CF', '#6399CF', '#7AA3CC');
foreach($myposts as $post) {
if($mode==0) echo $pre;
switch($mode){
case 0://Normal mode, with comment count
default:
?><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title ?></a><?php
if($disableComments==0){echo '<br />' . $post->comment_count . ' '; _e('comments');}
break;
case 1://Graphical mode
if($postCount==0) $maxPostComments = $post->comment_count;
$areaSize = 100;
//$width = $post->comment_count / $maxPostComments * $areaSize / 2;
$width = $post->comment_count / $maxPostComments * $areaSize;
if($barsLocation==1){//BARS AT THE RIGHT SIDE
?><table style="width:100%">
<tbody><tr style="height:40px">
<td style="width:<?php echo $areaSize / 2;?>%;">
<a href="<?php echo get_permalink($post->ID); ?>">
<?php echo $post->post_title ?>
</a>
<?php echo '<br />'; if($disableComments==0){echo '<a title="Comments" class="hot-comments-count" href="'. get_permalink($post->ID).'#comments"><img src="' .plugins_url('', __FILE__) . '/comments.png" alt="Comments" title="Comments"><span>' . $post->comment_count .'</span></a>';}?>
</td>
<td style="width:<?php echo ($width); ?>%;
background-color:<?php if($postCount < 5){echo $colors[$postCount];}else{echo $colors[4];}; ?>"></td>
<td style="width:<?php echo ( $areaSize / 2 - $width); ?>%;"></td>
</tr>
</tbody></table>
<?php
}else{//BARS AT THE LEFT SIDE ?>
<table style="width:100%">
<tbody><tr style="height:40px;">
<td style="height:40px;width:<?php echo ($width); ?>%;
background-color:<?php if($postCount < 5){echo $colors[$postCount];}else{echo $colors[4];}; ?>;padding:10px;" class="pps">
<a href="<?php echo get_permalink($post->ID); ?>">
<?php echo $post->post_title ?>
</a>
</td>
<td style="width:<?php echo ( $areaSize / 2 - $width); ?>%;padding-left:2px">
<div style="position:relative;left:-15px;background:#333;color:#fff;padding:2px 10px 4px;display:inline-block;height:20px;" class="pps">
<?php echo ''; if($disableComments==0){echo '<a title="Comments" class="hot-comments-count" href="'. get_permalink($post->ID).'#comments"><span>' . $post->comment_count .'</span>';}?>
<?php echo '<br />'; if($disableComments==0){echo '<a title="Comments" class="hot-comments-count" href="'. get_permalink($post->ID).'#comments"><img src="' .plugins_url('', __FILE__) . '/comments.png" alt="Comments" title="Comments" /><span>' . $post->comment_count .'</span></a>';}?>
</div>
</td>
</tr>
</tbody></table> 이미지는 잘 안보이는 소스보기로 다시 보도록 하겠습니다.
먼저 처름으로 보시면 1번째줄에 if($mode==0) echo $begin; 으로 시작하는 부분을 원래 소스에서 찾으세요.
그 아래 2~3줄 밑을 보시면 컬러코드를 넣도록 되어 있는 부분이 있습니다.
그 부분에 5가지 컬러가 배열 형식으로 담겨있는데 원하는 컬러를 지정하여 해당 컬러코드로 수정하세요.
전 원래 코드값은 주석으로 처리하고 새로운 row를 추가했습니다. 이 부분은 수정하셔도 되고 추가하셔도 됩니다.
이 부분만 수정해 주시면 원하시는 색상의 그래프를 만드실 수 있습니다.
그리고 이어서 15번째줄에 case 1 : //Graphical mode 를 찾도록 하겠습니다.
마찬가지로 하단으로 2줄 정도 아래를 보시면 $width = 로 시작하는 부분이 있습니다.
원래 플러그인의 절반을 나누어 절반 영역은 그래프를 출력하고 나머지 절반 영역은 텍스트를 채우는 형식이었습니다.
그래서 구분 마지막에 보면 * $areaSize / 2 ; 로 되어 있는데 전 텍스트를 그래프 안쪽으로 포함시키고자 하기에 절반으로 나누지 않기로 했습니다. 그래서 /2 부분을 삭제했습니다.
이제 마지막 부분이네요...
서두에 그래프가 왼쪽에 있는 경우의 수만 수정하겠다고 말한거 기억하시나요?
그래서 전 36번째줄 }else{ 부분 하단의 테이블만 수정했습니다.
즉, 지금 수정한 부분은 그래픽모드의 왼쪽 옵션일때만 반영이 된다고 보시면 되어... 만약 오른족 모드나 텍스트 모드를 수정하고 싶으시면 상단이나 하단의 조건들을 보시면 해당 부분을 수정하시면 되겠죠.. ^^*
수정하고자한 내용처럼 2번째 <td>에 있던 <?php echo $post->post_title ?> 을 첫번째 <td> 영역으로 이전하였습니다. 물론 감사고 있는 <a> 태크를 포함해서요.
그리고 2번째 <td> 에 남아있는 코멘트 관련해서 이미지를 지우고 <div> 영역을 추가하여 배경이나 위치를 잡아주었습니다.
이것이 제가 수정한 것의 전부입니다. 간단하시죠?
번외로 <a> 로 감싸지는 부분에 글자색이 마음대로 바뀌지 않아 신규 클래스를 하나 추가했습니다.
그런데 해당 php내에 어떻게 class를 추가해야할지 몰라 테마의 style.css에 pss라는 클래스를 추가했습니다. 그래서 테마에 해당 클래스가 추가되지 않는다면 <a> 태크의 글자색은 변하지 않을 것입니다.
이 php 파일내에 클래스 정의하는 방법은 누가 좀 알려주세요. 그럼 추가할 수 있을거 같네요.. ^^*
이상이었습니다.
모두 즐거운 워드프레스 관리를 하시기 바랍니다.
수정한 플러그인의 파일은 첨부하도록 하겠습니다. 필요하신 분은 받아서 사용하셔도 됩니다.
wp-popular-posts-tool.zip'IT > Wordpress' 카테고리의 다른 글
| 워드프레스 자동저장(Autosave), 리비전(Revision) 조절하기 (0) | 2012.08.23 |
|---|---|
| Wordperss의 Permalink를 Short URL로 치환하기 (0) | 2012.08.21 |
| JigoShop 원화 추가 관련 수정 사항 (0) | 2012.07.27 |
| 워드프레스 사용자 등급별 역할이해하기 (2) | 2012.07.12 |
| 다중의 다이나믹 사이드바 만들기 (1) | 2012.07.03 |