[WP] 포스트에 자바스크립트 삽입하기

개발자가 포스트를 작성하다보면 코드를 개시할 경우도 있지만 직접 실행시킬 자바스크립트 코드가 있는 경우도 많습니다.

해서 포스트나 페이지의 본문 중간중간 실행되는 자바스크립트를 넣고 싶은데 마땅한 플러그인을 찾아봤습니다만 맘에 드는게 없었습니다.

그래서 간단히 플러그인을 만들었습니다…라고 말하기엔 걍 shortcode하나를 등록하는 것입니다. WP 숏코드 등록은 다음과 같은 API를 이용합니다.

http://codex.wordpress.org/Shortcode_API

근데 WP의 숏코드는 표준 태그파싱을 통해 html 문자열이 contents로 들어오게 됩니다. 따라서 <p>라던가 <br>같은게 한가득 들어있는 문자열을 받게 되므로 자바스크립트는 파싱에러를 토하고 죽어버립니다.

게다가 HTML문자열 인코딩의 적용을 받아서 큰따옴표나 작은 따옴표가 &#8217; 같은 문자열로 변경되어 들어오죠.

이를 해소하고 정리한 코드는 다음과 같습니다. (사실 이것보다 더 많은 예외가 생길텐데 차근차근 더 추가해서 보강해가는걸로 ^^)

function insertJS_shortcode( $atts, $contents ){
	$encode = array(
		'“'=>'"',
		'”'=>'"',
		'″'=>'"',
		'‘'=>"'",
		'’'=>"'",
		'<br />'=>''
	);
	foreach( $encode as $k=>$v ){
		$contents = str_replace( $k, $v, wp_strip_all_tags($contents) );
	}
	return '<script>'.wp_kses_decode_entities($contents).'</script>';
}
add_shortcode( 'insertJS', 'insertJS_shortcode' );

이제 이를 php로 만들어서 플러그인의 서브폴더에 적당한 이름으로 넣어주면 사용할 수 있게 됩니다.

이제 숏태그를 이용해 본문에서 자유롭게 자바스크립트를 삽입할 수 있게 되었습니다.

[insertJS]
alert(1);
[/insertJS]