망보드(Mangboard) 입맛대로 편집하기

국내 사용자들이 게시판 형식의 UI 와 테이블 위주의 인터페이스에 익숙한데 반해, 워드프레스의 추세가 반응형 ( 웹, 모바일 동시지원) 지원이 중요해서 두 가지 요구사항을 모두 소화해주는 게시판 플러그인으로 망보드가 주목 받고 있습니다.

우선 제가 망보드를 뜯어보면서 느낀 점은 객체지향적이면서도 적당히 어렵고, 자유롭게 커스터마이징할 수 있는 플러그인이어서 customizing point 만 잘 잡고 있으면 자유자재로 가지고 놀 수 있는 플러그인 입니다.

이번 시간에는 망보드를 이용하여 이번에 의뢰받아 제작한 http://marketing.wper.kr 의 프론트 페이지처럼 shortcode 를 구현하는 부분을 설명드릴까 합니다.

망보드 설치하기

망보드를 설치할려면 https://ko.wordpress.org/plugins/mangboard/

위 링크에 접속하거나 플러그인 추가하기에서 mangboard 키워드로 검색해서 인스톨할 수 있습니다.

Mang Board WP

망보드를 설치한 다음에 게시판 관리 -> 게시판 추가에서 게시판을 추가하고요.

흥미로운 점은 망보드에서는 Smart Editor, CK Editor, WP Editor 를 지원하고 있습니다.

하지만 망보드에서 WP Editor 는 사용자 페이지에서 로드해서 사용해서인지 워드프레스 관리자 기능 내의 페이지 에디터와는 차이가 있습니다.

망보드에 이미지를 올릴려면 Smart Editor 이용해서 올릴 수 있더군요. WP Editor 에서는 미디어 추가 버턴이 안 보여서 어려움이 있어요.

본문 사진 올릴려면 smart editor 에서 사진 버턴을 클릭하거나 CK Editor 에서 이미지 모양 아이콘을 클릭하는 방법이 있네요.

CK Editor 에서는 사진을 직접 올리지 않고 링크만 걸어서 가져 오는 기능이 가능하긴 한데, 에디터창의 UI 나 느낌은 조금 이질적이어서 외부링크 이미지를 불러와야하는 경우가 아니라면 스마트 에디터가 편해 보입니다.

망보드에서 썸네일은 첨부파일에 올라간 이미지가 썸네일이 되지만, 첨부파일의 썸네일이 본문에는 기본적으로 노출되지는 않습니다.

망보드 해부하기

망보드에 사진과 이미지를 등록하는 과정은 어떻게 진행 되는 것일까요 ?

위의 복잡한 과정을 걸쳐서 망보드가 글이 쓰지게 됩니다.

저는 망보드 제작팀에 의문을 가지는 부분이 한가지 있는데요. 모델을 json 값으로 db에 저장하는 것이 더 좋지 않았을까. 저 부분을 skin-model.php 에서 json 을 하드코딩 해 두었더라고요.

망보드를 핸들링하려면 skin-model 의 구조를 이해할 필요가 있어요.

json 값을 빠르게 파싱하려면 크롬 개발자도구에서 inspect 해보겠습니다.

여기서 list, list_gallery, list_calender 모두 이 속성 값이 다른데요.

만약 이미지 겔러리를 썸네일만 열거하는 식이 아니라 이미지,제목,내용 세개를 한줄에 표시할려면

{"field":"fn_content","name":"W_CONTENT","type":"search"}

{"field":"fn_content","name":"W_CONTENT","width":"100%","type":"memo","td_class":"content-box text-left","maxlength":"200","maxtext":".."},

{"field":"fn_content","name":"W_CONTENT","type":"search"}

{"field":"fn_content","name":"W_CONTENT","width":"100%","type":"memo","td_class":"content-box text-left","maxlength":"200","maxtext":".."},

컨텐츠 표시 영역의 모델을 바꿔줘야 합니다.

type 을 memo 로 지정했는데요. 이 type 은 tpl.board.php 에서 불러쓸 수 있습니다.

function mbw_get_list_template($data,$tag=null,$echo=true){
		global $mstore;
		global $mb_tags;
...
		if(!empty($data["type"])){
			if($data["type"]=='date'){

			}else if(strpos($data["type"],'memo')===0){
				$template_start	.= '<div class="fn_content">'.strip_tags(htmlspecialchars_decode($data['value'])).'</div>';
			}else{
				$template_start	.= mbw_get_item_template("list",$data);
			}
		}else{
...

function mbw_get_list_template($data,$tag=null,$echo=true){

global $mstore;

global $mb_tags;

...

if(!empty($data["type"])){

if($data["type"]=='date'){

}else if(strpos($data["type"],'memo')===0){

$template_start .= '<div class="fn_content">'.strip_tags(htmlspecialchars_decode($data['value'])).'</div>';

}else{

$template_start .= mbw_get_item_template("list",$data);

}

}else{

...

스킨 수정은 skin/bbs_basic/list.php view.php write.php 위주로 하시면 되고요.

tpl.board.php 의 함수 내에 컨텐츠를 가공해주는 부분 입맛에 맞게 마크업 추가하시면 됩니다.

나만의 최근 게시물 shortcode 만들기

워드프레스를 가볍고 유용하게 쓰는 전략 중 한가지가 shortcode 를 이용한 방법입니다.

간단하게 사용할 거면 자신의 테마의 functions.php 에 add_shortcode 를 이용해서 추가하는 방법이 일반적입니다.

add_shortcode('get_latest_board','wper_get_latest_board');

function wper_get_latest_board($atts){

global $wpdb;

  extract(shortcode_atts(array(
      'board_id' => ''
  ), $atts));

$arr_board = explode(',',$board_id);

$str_board = " select a.*, b.board_name, b.description, b.post_id from ( ";

foreach($arr_board as $k=>$v){

	if($k>0){
		$str_board.= " union all ";
	}
	$str_board = $str_board." select pid, title, reg_date ,is_notice, image_path, '".$v."' as board from mb_".$v." ";

}

$str_board = $str_board." ) a inner join mb_boards b on a.board = b.board_name order by is_notice desc, image_path desc limit 0,3 ";
$sql = $str_board;

$arr_rs = $wpdb->get_results($sql,ARRAY_A);

echo '<div class="cat-box-content column2 cat-box"><ul>';

	foreach($arr_rs as $k=>$r){ 

		$t_url = get_permalink($r['post_id']);
		$tt_url = $t_url.'/?board_name='.$r['board'].'&vid='.$r['pid'];
		$down_url = '/wp-content/uploads/mangboard/'.$r['image_path'];

		if($k == 0){ 
			echo '<li class="first-news">
						<div class="inner-content">
							<div class="post-thumbnail tie-appear">
								<a href="'.$tt_url.'" rel="bookmark">
									<img width="310" height="165" src="'.$down_url.'" class="attachment-tie-medium size-tie-medium wp-post-image tie-appear" alt="">									<span class="fa overlay-icon"></span>
								</a>
							</div><!-- post-thumbnail /-->
						<h2 class="post-box-title"><a href="'.$t_url.'" rel="bookmark">'.$r['description'].'</a></h2>
							<div class="entry">
								<p>'.$r['title'].'</p>
								<a class="more-link" href="'.$tt_url.'">Read More »</a>
							</div>
						</div>
					</li><!-- .first-news -->';
		} else {
				echo '<li class="other-news">
								<div class="post-thumbnail tie-appear">
									<a href="'.$tt_url.'" rel="bookmark"><img width="110" height="75" src="'.$down_url.'" class="attachment-tie-small size-tie-small wp-post-image tie-appear" alt=""><span class="fa overlay-icon"></span></a>
								</div><!-- post-thumbnail /-->
								<h3 class="post-box-title"><a href="'.$t_url.'" rel="bookmark">'.$r['description'].'</a></h3>
								<p><a href="'.$tt_url.'">'.$r['title'].'</a></p>
							</li>';
		}

	}

echo '</ul></div>';

}

add_shortcode('get_latest_board','wper_get_latest_board');

function wper_get_latest_board($atts){

global $wpdb;

extract(shortcode_atts(array(

'board_id' => ''

), $atts));

$arr_board = explode(',',$board_id);

$str_board = " select a.*, b.board_name, b.description, b.post_id from ( ";

foreach($arr_board as $k=>$v){

if($k>0){

$str_board.= " union all ";

}

$str_board = $str_board." select pid, title, reg_date ,is_notice, image_path, '".$v."' as board from mb_".$v." ";

}

$str_board = $str_board." ) a inner join mb_boards b on a.board = b.board_name order by is_notice desc, image_path desc limit 0,3 ";

$sql = $str_board;

$arr_rs = $wpdb->get_results($sql,ARRAY_A);

echo '<div class="cat-box-content column2 cat-box"><ul>';

foreach($arr_rs as $k=>$r){

$t_url = get_permalink($r['post_id']);

$tt_url = $t_url.'/?board_name='.$r['board'].'&vid='.$r['pid'];

$down_url = '/wp-content/uploads/mangboard/'.$r['image_path'];

if($k == 0){

echo '<li class="first-news">

</a>

</div>

<h2 class="post-box-title"><a href="'.$t_url.'" rel="bookmark">'.$r['description'].'</a></h2>

<p>'.$r['title'].'</p>

</div>

</li>';

} else {

echo '<li class="other-news">

</div>

<h3 class="post-box-title"><a href="'.$t_url.'" rel="bookmark">'.$r['description'].'</a></h3>

<p><a href="'.$tt_url.'">'.$r['title'].'</a></p>

</li>';

}

echo '</ul></div>';

}

shortcode 를 사용하기 위해서는 [get_latest_board board_id=”pds,notice”] 이런 식으로 사용하시면 됩니다.

자신만의 shortcode 제작하는 방법에 관해서는 별도의 페이지를 이용해서 설명드리는 것이 좋겠네요.

부연 설명을 하자면, 망보드는 default prefix 를 mb 를 사용하기 때문에 저 부분을 그냥 하드코딩해두었습니다. 행여나 prefix 가 다르다면 바꿔주시면 되겠죠 ?

위 마크업에 관한 CSS 는 아래와 같습니다만, 디자인은 여러분들의 상상력으로 창조하시는 편이 나을 듯 합니다.

.latest-mb-wrapper {
    position: relative;
    left: -20px;
    -webkit-box-shadow: 0 0 3px #CACACA;
    -moz-box-shadow: 0 0 3px #cacaca;
    box-shadow: 0 0 3px #CACACA;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-top: 10px;
}

.cat-box-content {
    border-bottom-color: #e95ca2;
}

.cat-box-content {
    background: #FFF;
    -webkit-box-shadow: 0 0 3px #CACACA;
    -moz-box-shadow: 0 0 3px #cacaca;
    box-shadow: 0 0 3px #CACACA;
}

.cat-box li.first-news .inner-content {
    padding: 20px;
    overflow: hidden;
}

.lazy-enabled #main-content .post-thumbnail.tie-appear, .lazy-enabled #main-content img.tie-appear, .lazy-enabled #featured-posts.tie-appear {
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.tie-hide, .lazy-enabled #main-content .post-thumbnail, .lazy-enabled #main-content img, .lazy-enabled #featured-posts {
    opacity: 0;
}

.cat-box.column2 li.first-news .post-thumbnail {
    margin: 0 0 10px 0;
    float: none;
}
.cat-box li .post-thumbnail {
    margin: 0 10px 0 0;
}
.column2 .post-thumbnail {
    float: left;
}

h2.post-box-title {
    font-size: 20px;
    line-height: 26px;
}

.cat-box .entry {
    font-size: 12px;
}
.cat-box .entry p, .archive-box .entry p {
    line-height: 21px;
    margin-bottom: 12px;
}
.column2 li.other-news {
    padding-top: 10px;
    padding-bottom: 10px;
}
.column2 li.other-news, .list-box li.other-news {
    background: #f7f7f7;
    overflow: hidden;
    padding: 17px 20px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #eaeaea;
    -webkit-transition: all .40s;
    -moz-transition: all .40s;
    -o-transition: all .40s;
    transition: all .40s;
}
.cat-box li.first-news .inner-content {
    padding: 20px;
    overflow: hidden;
}
.cat-box.column2 li.first-news .post-thumbnail {
    margin: 0 0 10px 0;
    float: none;
}
a.more-link {
    color: #FFF !important;
    float: left;
    margin-top: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #e95ca2;
    width: auto;
    position: relative;
    color: #FFF;
    padding: 5px 12px;
    font: 12px Tahoma;
    display: inline-block;
    line-height: 22px;
    border: 0 none;
    cursor: pointer;
    text-decoration: none;
    webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;    

}

li.first-news {
    min-height: 330px;
}

h3.post-box-title {
    font-size: 14px;
    line-height: 20px;
}

.cat-box-content ul {
	margin:0px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

.latest-mb-wrapper {

position: relative;

left: -20px;

-webkit-box-shadow: 0 0 3px #CACACA;

-moz-box-shadow: 0 0 3px #cacaca;

box-shadow: 0 0 3px #CACACA;

margin-left: -10px;

margin-right: -10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 1px;

padding-top: 1px;

margin-top: 10px;

}

.cat-box-content {

border-bottom-color: #e95ca2;

}

.cat-box-content {

background: #FFF;

-webkit-box-shadow: 0 0 3px #CACACA;

-moz-box-shadow: 0 0 3px #cacaca;

box-shadow: 0 0 3px #CACACA;

}

.cat-box li.first-news .inner-content {

padding: 20px;

overflow: hidden;

}

.lazy-enabled #main-content .post-thumbnail.tie-appear, .lazy-enabled #main-content img.tie-appear, .lazy-enabled #featured-posts.tie-appear {

opacity: 1;

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

-o-transition: all .4s ease-in-out;

transition: all .4s ease-in-out;

}

.tie-hide, .lazy-enabled #main-content .post-thumbnail, .lazy-enabled #main-content img, .lazy-enabled #featured-posts {

opacity: 0;

}

.cat-box.column2 li.first-news .post-thumbnail {

margin: 0 0 10px 0;

float: none;

}

.cat-box li .post-thumbnail {

margin: 0 10px 0 0;

}

.column2 .post-thumbnail {

float: left;

}

h2.post-box-title {

font-size: 20px;

line-height: 26px;

}

.cat-box .entry {

font-size: 12px;

}

.cat-box .entry p, .archive-box .entry p {

line-height: 21px;

margin-bottom: 12px;

}

.column2 li.other-news {

padding-top: 10px;

padding-bottom: 10px;

}

.column2 li.other-news, .list-box li.other-news {

background: #f7f7f7;

overflow: hidden;

padding: 17px 20px;

border-top: 1px solid #FFF;

border-bottom: 1px solid #eaeaea;

-webkit-transition: all .40s;

-moz-transition: all .40s;

-o-transition: all .40s;

transition: all .40s;

}

.cat-box li.first-news .inner-content {

padding: 20px;

overflow: hidden;

}

.cat-box.column2 li.first-news .post-thumbnail {

margin: 0 0 10px 0;

float: none;

}

a.more-link {

color: #FFF !important;

float: left;

margin-top: 4px;

padding-top: 2px;

padding-bottom: 2px;

background-color: #e95ca2;

width: auto;

position: relative;

color: #FFF;

padding: 5px 12px;

font: 12px Tahoma;

display: inline-block;

line-height: 22px;

border: 0 none;

cursor: pointer;

text-decoration: none;

webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

-webkit-appearance: none !important;

-moz-appearance: none !important;

appearance: none !important;

}

li.first-news {

min-height: 330px;

}

h3.post-box-title {

font-size: 14px;

line-height: 20px;

}

.cat-box-content ul {

margin:0px;

}

이상으로 Mangboard customizing point 와 최근 게시물 shortcode 생성법에 대한 설명을 마쳤네요.

문의하기

쾌속개발 서식다운로드