WordPress Plugin중에 Link to Post 소개

예전에 WordPress Plugin 중에서 Posting 할때, 예전 Posting을 참고하여 Link를 만들어 주는 Plugin으로 Simple Link를 이용하였었습니다. 간단하게 Searching도 되고, 본문중에 Link를 바로 삽입하게 해주니 글을 쓸때, 무척 편리한 Plugin 이었습니다.

그런데, 최근 WordPress를 이용 도중에 AJAX가 동작하지 않는 등의 문제가 있어 살펴 본 결과 Simple Link Plugin 이 일으키는 문제였음을 알게 되었습니다. 현재 Simple Link는 Maintenance가 되고 있지 않습니다.

다시 googling과 searching을 하여 찾아 낸 것이 Link to Post 라는 Plugin 입니다. 위의 Simple Link와 비슷한 역할을 하면서도, 특별하게 아직까지 WordPress Admin Page들에 대한 Side Effect등의 Bug는 없는 듯 싶습니다.

사용하는 방법도 간단하게도 TinyMCE와 HTML에 버튼이 삽입이 되어 링크로 만들 부분을 Block으로 잡고, 버튼을 누르면 지난 페이지들을 Search도 할 수 있고, 최근 Post 된 목록도 보여주면서 쉽게 Link를 만들 수 있게 해 줍니다. Post 된 것만 Link로 잡는 것이 아니라, Page도 Link로 잡아주는 버튼도 있습니다.

WordPress Plugin인 Flickr Tag에 Lightbox Plugin 이용시 원본 파일 사이즈를 정할 수 있게 하는 방법

WordPress에서 Flickr에 있는 사진등을 Share 할 수 있게 하는 Plugin인 Flickr Tag가 있습니다. 이 Flickr TagLightbox Plugin을 사용할 수 있도록 자동으로 링크를 만들어 주는 편리한 기능까지 가지고 있습니다.

안타깝게도 이 Plugin에서 아쉬운 것은 2.4.6 버전이후로 저작자인 Jeff Maki가 더이상 Maintenance를 하지 않는다는 데 있습니다. 제가 필요한 기능은 사진을 클릭했을때, 다시 사진을 크게 보여주는 Lightbox Plugin을 사용하할때, 원본크기를 제 마음데로 정할 수 없다는데 있습니다.

제가 그렇게 잘 아끼고 잘 쓰고 있는 Flickr TagLightbox Plugin을 이용할때 원본크기를 정할 수 있도록 수정했습니다.

1. 우선 Flickr Tag의 원본은 이곳에서 받았습니다.

2. 그리고 이것은 제가 수정한 Flickr Tag 입니다.

3. 다음 파일을 클릭하면 Diff 된 모습을 볼 수 있습니다.

WordPress용 다음 뉴스 블로거 송고 자동 위젯 삽입

그동안 다음 뉴스 송고를 중단했었던 이유가 위젯삽입이 너무 불편했기 때문이었습니다. 다음에 들어가서 아이디와 패스워드를 입력한후에 다음뉴스송고 메뉴를 찾아 들어가서, 다음에서 내 블로거의 리스트를 읽은 후에 선택을 하고, 다시 category를 분류해서 선택한후에 송고를 할 수 있습니다. 이 송고후에 나타나는 메뉴를 찾아 들어가서 다시 자바스크립트를 카피하여 본문에 수동으로 삽입을 했었던 것이 기존의 방법이었습니다.

여전히 불편은 하지만 (믹시는 그런면에서 한번 세팅하면 자동으로 모든 블로깅내용이 송고가 되는 편리함과 영문윈도우즈에서도 한글이 깨지지 않는 두가지 장점이 있습니다.) 그 불편함중에 자바스크립트를 카피해서 본문에 수동으로 삽입하는 과정을 자동화 할 수 있는 플러그인이 생겼습니다. 아직 wordpress plugin depository에 있지 않아서 플러그인의 자동 업데이트라던가 하는 것은 기대할 수 없지만, 수동으로 그나마 이 플러그인을 설치해 두면, 다음에 들어가서 송고만 했다면, 자동으로 위젯이 설치 되는 플러그인입니다.

다운로드: http://code.google.com/p/wp-daum-bloggernews/downloads/list

원문: 워드프레스 플러그인 다음뷰 추천 위젯

WP plugin: light box 2 소개

lightbox는 Lockesh Dhakar가 Javascript를 이용하여 그림이 삽입될때, 크기가 큰 사진의 경우 작은 thumbnail로 만들어서 클릭했을때, 본 크기로 보여지게 하는데 도움을 주는 툴입니다. 이것을 wordpress plugin으로 적용한 것이 Lightbox plugin for WordPress 입니다.

이 plugin이 할 수 있는 feature의 하나는 lightbox에서 한가지 실험해 볼 수 있습니다. 이 글에서도 예제를 하나 보여드리면,

ain't no sunshine...

위를 클릭해 보면, 현재 제가 쓰고 있는 lightbox plugin이 어떻게 동작하는가를 보여 줍니다. (예제는 flickr에서 linoush2000님이 올린 photo중에서 “ain’t no sunshine…” 이라는 제목의 사진을 가져왔습니다.)

Install

Plugin의 install은 무척 쉽습니다. admin 페이지에서 add new를 클릭하여 lightbox를 검색해서 찾아서 바로 인스톨하거나 lightbox에 들어가서 zip파일을 받은 후에 역시 admin 페이지에서 add new로 업로드 하시면 됩니다. (자세한 것은 WP 홈페이지 를 참조하시기 바랍니다.)

Usage

아주 간단합니다. 다음과 같은 tag를 써주면 됩니다. 위의 예제를 보면,

<a title="ain't no sunshine..." href="http://farm2.static.flickr.com/1320/3352689777_c561568b36_b.jpg" target="_blank"><img title="ain't no sunshine..." src="http://farm2.static.flickr.com/1320/3352689777_c561568b36_m.jpg" alt="ain't no sunshine..." width="240" height="180" /></a>

와 같이 하면 됩니다.

워드프레스 플러그인: Keyword Link Plugin (V0.6) 수정

키워드에 따라 자동으로 하이퍼링크를 만들어 주는 플러그인을 찾다가 마침내, Keyword Link Plugin [1. Plugin Homepage: WordPress Keyword Link Plugin] [2. WordPress Plugin Page: BlogMechanics KeywordLink] 를 발견했습니다.

이것은 제가 그동안 찾고 싶었던 플러그인인데요, 제가 촛점으로 맞춘 기능은 다음과 같습니다.

  • 키워드를 넣고 거기에 따른 하이퍼링크를 자동으로 추가할 것
  • UTF-8을 지원할 것
  • 새창으로 열기 옵션이 있을 것

다 좋았는데, utf-8을 완벽하게 지원하지 안는 것 같았습니다. 그래서 몇가지 수정을 했구요, 또 “EDIT” 버튼을 눌렀을 때, 제대로 옵션을 표현하지 못하는 버그도 있고 해서 수정했습니다. 이 글은 제가 수정한 것을, 첫째는 저를 위한 노트가 될 듯 싶구요, 둘째는 이 수정을 다른 분들과 공유하고자 하여 글을 올립니다.

1. 버그: 옵션을 저장할때 제대로 기록하지 않는다.

Export/Import CSV를 이용하면, 이 문제가 사라지지만, 폼을 이용하여 수정하고 추가할때는 발생하는 문제입니다. 옵션을 선택하고 이것을 저장할때, 워드프레스의 option 테이블에 잘못된 정보를 기록하는 것이 문제였습니다. 문제를 보면, 예를 들어 플러그인 세팅 페이지에서 다음과 같이 입력하면,

Wordpress keyword link plugin option selection

정보가 사실은 “0|0|1|1|0” 와 같이 되어야 하지만, 실제 저장이 “||new window|ignore case|” 이와 같이 됩니다. 그래서 다시 EDIT 버튼을 누르면, 다음과 같이 나옵니다.

bug picture when edit button is clicked.

이 문제를 해결하기 위해 bm_getvalue() 함수를 추가했구요, bm_keywordlink_savenew() 함수를 다음과 같이 수정했습니다.

[sourcecode language='php']function bm_getvalue($var) {
     if ($var) {
	  return "1";
     } else {
	  return "0";
     }
}

function bm_keywordlink_savenew()
{
      $links = get_option(BM_KEYWORDLINK_OPTION);

		$keyword = $_POST['keyword'];
		$link = $_POST['link'];
		$nofollow = bm_getvalue($_POST['nofollow']);
 		$firstonly = bm_getvalue($_POST['firstonly']);
 		$newwindow = bm_getvalue($_POST['newwindow']);
 		$ignorecase = bm_getvalue($_POST['ignorecase']);
 		$isaffiliate = bm_getvalue($_POST['isaffiliate']); 

		if ($keyword == '' || $link == '')
		{
		  bm_keywordlink_topbarmessage(__('Please enter both a keyword and URL'));
		  return;
		}

		if (isset($links[$keyword]))
		{
		  bm_keywordlink_topbarmessage(__('Existing keyword has been updated'));
		}

 		/* Store the link */
	  $links[$keyword] = implode('|',array($link,$nofollow,$firstonly,$newwindow,$ignorecase,$isaffiliate));
	  update_option(BM_KEYWORDLINK_OPTION,$links);
}
[/sourcecode]

이 이후에는 동작을 잘 했습니다.

2. UTF-8 지원문제

2-1. readme.txt에 있는 가이드라인을 따라하기

readme.txt에 보면, 아시아 언어를 쓰기 원한다면, bm_keywordlink.php에 있는 $regEx 변수값을 수정해야 한다고 되어 있습니다. 관련된 함수는 bm_keywordlink_replace() 인데요, 거의 마지막 부분에 다음을

[sourcecode language='php']$regEx = ''(?!((<.*?)|(<>]*?)>)|([^>]*?))'s' . $case;[/sourcecode]

다음으로 수정해 줍니다.

[sourcecode language='php']$regEx = ''(?!((<.*?)|(<>]*?)>)|([^>]*?))'s' . $case;[/sourcecode]

2-2. UTF-8을 지원하기 위한 decode64 추가

이미 javascript로 decode64() 함수가 이 플러그인에 있지만, 아시아 언어와는 동작을 제대로 하지 않는 것 같습니다. 그래서, 아시아언어를 같이 지원하기 위해 다른 javascript code를 WebToolKit site에서 가져왔습니다. 다음은 그 부분입니다.

[sourcecode language='php']
/**
*
*  Base64 encode / decode
*  http://www.webtoolkit.info/
*
**/

var Base64 = {

    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    // public method for encoding
    encode : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }

            output = output +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

        }

        return output;
    },

    // public method for decoding
    decode : function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9+/=]/g, "");

        while (i < input.length) {

            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }

        }

        output = Base64._utf8_decode(output);

        return output;

    },

    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/rn/g,"n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }

        return utftext;
    },

    // private method for UTF-8 decoding
    _utf8_decode : function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;

        while ( i < utftext.length ) {

            c = utftext.charCodeAt(i);

            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            }
            else if((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i+1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else {
                c2 = utftext.charCodeAt(i+1);
                c3 = utftext.charCodeAt(i+2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }

        }

        return string;
    }

}
[/sourcecode]

또한, BMEditKeyword() 함수를 다음과 같이 수정합니다.

[sourcecode language='php']
function BMEditKeyword(keyword,url,nofollow,firstonly,newwindow,ignorecase,isaffiliate)
		{
 			 document.bm_keywordadd.keyword.value      = Base64.decode(keyword);
			 document.bm_keywordadd.link.value         = Base64.decode(url);
			 document.bm_keywordadd.nofollow.checked   = (nofollow==1);
			 document.bm_keywordadd.firstonly.checked  = (firstonly==1);
			 document.bm_keywordadd.newwindow.checked  = (newwindow==1);
			 document.bm_keywordadd.ignorecase.checked = (ignorecase==1);
			 document.bm_keywordadd.isaffiliate.checked= (isaffiliate==1);
			 window.location.hash = "keywordeditor";
		}
[/sourcecode]

2.1 와 2.2 는 utf-8을 지원하기 위해 반드시 필요한 작업이었습니다. 이 이후에 "EDIT" 버튼을 누르면, 기존에는 아시아문자 (예:한국어)를 가져오지 못했지만, 이제는 폼으로 잘 가져오게 되네요.

이제 키워드를 등록하고 자동으로 하이퍼링크를 만들어주는 플러그인을 즐기시면 됩니다. 🙂