[WP] Daumbook – 워드프레스 플러그인

책 리뷰를 자주 올리다보니 공식적인 책정보도 같이 실어주면 좋겠다는 생각을 했습니다.

전에 살짝 만들었던 플러그인을 본격적으로 개조하여 필터방식으로 작동하거나 숏태그(대괄호를 이용하는)형식으로도 쓸 수 있게 개조되었습니다.

사실 저도 제가 워프플러그인을 이리 본격적으로 탐구해서 배포까지 할 줄은 몰랐습니다만,

http://www.1efthander.com/ 님이 배포하는 네이버지도 플러그인을 보면서 느낀 점이 많아 저도 제대로 워드프레스 플러그인에 등록하고 수정해가면서 관리해야겠다고 생각했습니다.

[notification type=”alert-info”]플러그인의 공식이름은 ‘Daumbook’ 입니다. 소스코드는 깃헙에 공개되어있습니다.
https://github.com/hikaMaeng/daumbook[/notification]

[notification type=”alert-warning”]플러그인 다운로드 경로는 아래와 같습니다.
www.bsidesoft.com/wp/daumbook.zip[/notification]

[tabs class=”detail”][tab title=”숏태그로 사용하기” active=”active”]
포스트나 페이지 작성 중 자유롭게 숏태그를 사용하여 책검색 결과를 삽입할 수 있습니다.

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/Screenshot_11.jpg” shape=”img-rounded”]

삽입결과 – 본문에 다음과 같은 결과로 삽입됩니다.

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/shorttag.jpg” shape=”img-rounded”]

[/tab][tab title=”필터로 사용하기”]
포스트나 페이지의 하단에 자동으로 삽입시키는 경우는 커스텀필드를 이용해 isbn을 넣어줍니다.

이 때 컴마를 이용해 여러 개를 지정할 수도 있습니다.

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/customfield.jpg” shape=”img-rounded”]

[notification type=”alert-warning” close=”false” ] daumbook_style 필드을 추가로 설정하면 생성될 책정보에 인라인 스타일을 줄 수 있습니다. [/notification]

생성된 결과는 다음과 같이 포스트나 페이지 하단에 자동으로 삽입됩니다.

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/filter1.jpg” shape=”img-rounded”]

[/tab][tab title=”설치하기”]

[toggles class=””]
[toggle title=”1. 다운로드” class=”in”]

다운로드는 해당 깃헙에서 하실 수 있는데 직접 경로는 다음과 같습니다.

[notification]hikamaeng.github.io/daumbook/daumbook.zip[/notification]

[/toggle]

[toggle title=”2. 압축풀기”]

워드프레스가 설치된 폴더의 하위에 있는 ‘wp-content/plugins’ 폴더에 압축을 풉니다.

[notification type=”alert-success” close=”false” ]예를 들어 다음과 같이 폴더구조가 완성됩니다.

/wordpress/wp-content/plugins/daumbook/[/notification]

[/toggle]

[toggle title=”3. 활성화”]

워드프레스 어드민 화면에서 설치된 플러그인을 눌러 플러그인 목록 중에 Daumbook항목을 골라 활성화합니다.

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/Screenshot_4.jpg” shape=”img-rounded”]

[/toggle]
[toggle title=”4. 설정하기”]

어드민 메뉴의 ‘셋팅/Daumbook’ 으로 들어가 다음검색API KEY를 등록합니다.

다음 검색 API KEY는 다음의 주소에서 얻을 수 있습니다(다음계정이 필요합니다)

[notification]http://dna.daum.net/apis/search[/notification]

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/Screenshot_21.jpg” shape=”img-rounded”]

[image src=”https://www.bsidesoft.com/wp-content/uploads/2014/10/Screenshot_3.jpg” shape=”img-rounded”]

[/toggle]

[/toggles]

[/tab][tab title=”숏태그 테스트”]
[button style=”btn-default btn-sm” icon=”fa fa-play” align=”left” type=”button” title=”Run”]
[bsjs div=”shorttagresult”]
var f = function(e){
var v = bs.Dom(‘#shorttagtest’).S(‘@value’), isbn, style, i;
i = v.indexOf( ‘isbn=”‘ );
if( i == -1 ) return;
isbn = v.substring( i + ‘isbn=”‘.length, v.indexOf( ‘”‘, i + ‘isbn=”‘.length ) );
i = v.indexOf( ‘style=”‘ );
if( i > -1 ) style = v.substring(i + ‘style=”‘.length, v.indexOf( ‘”‘, i + ‘style=”‘.length ) );
bs.Dom(‘#shorttagresult’).S( ‘html’, ‘‘ );
daumbook( isbn, “ade0e0d14b975175f2254be446eb3869ff3bce96″ )();
};
bs.Dom(
bs.Dom(‘#shorttagtest’).S(‘@value’, ‘[daumbook isbn=”8960775525″ style=”width:50%”]’, ‘vertical-align’, ‘bottom’, ‘width’, 450, ‘height’, 30, ‘line-height’, 30, ‘font-size’, 15, ‘margin-right’, 5, ‘after’ )
).S(‘down’, f);
f();
[/bsjs]
[/tab]
[/tabs]