WordPress 사용자 정의 QuickTags 추가

WordPress QuickTags API를 사용하면 WordPress 관리 텍스트 편집기에 버튼을 추가할 수 있습니다. 솔직히 말해서 텍스트 편집기는 리치 편집기보다 덜 사용됩니다. 그런데 빠른 태그를 추가하면 동일한 작업을 자주 반복할 때 꽤 유용할 수 있습니다.

WordPress에서 제공되는 기본 빠른 태그 목록은 다음과 같습니다.

보시다시피 다양한 유형의 버튼을 생성하고 각 버튼에 액세스 키를 할당하고 사용자 정의 코드를 쉽게 정의할 수 있습니다.

빠른 태그를 추가하려면 맞춤 함수를 admin_print_footer_scripts 후크에 연결해야 합니다. 기본적으로 아이디어는 관리자 바닥글 내에 일부 사용자 정의 자바스크립트 코드를 추가하는 것입니다. 빠른 태그 API는 addButton이라는 내장 함수를 제공합니다.

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

이 함수는 8개의 인수를 허용합니다:

id: (문자열) (필수) 버튼의 HTML ID
display: (문자열) (필수) 버튼의 HTML 값
arg1: (문자열) (필수) '<span>'처럼 삽입할 시작 태그 또는 버튼을 클릭할 때 실행되는 콜백
arg2: (문자열) (선택사항) ''과 같은 종료 태그입니다. 태그를 닫을 필요가 없으면 비워 두세요(예: '
').
access_key: (문자열) (선택사항) 버튼에 대한 바로가기 액세스 키
제목: (문자열) (선택사항) 버튼의 HTML 제목 값
우선순위: (int) (선택사항) 툴바에서 원하는 버튼 위치를 나타내는 숫자입니다. 1 – 9=첫 번째, 11 – 19=두 번째, 21 – 29=세 번째 등
인스턴스: (문자열) (선택사항) 버튼을 Quicktag의 특정 인스턴스로 제한하고, 존재하지 않는 경우 모든 인스턴스에 추가합니다.

다음은 편집기에 WPExplorer 링크를 추가하는 전체 스니펫입니다.

// Add buttons to html editor
add_action('admin_print_footer_scripts','rc_quicktags');
function rc_quicktags() { ?>
	<script language="javascript" type="text/javascript">
		/* Adding Quicktag buttons to the editor WordPress ver. 3.3 and above
		* - Button HTML ID (required)
		* - Button display, value="" attribute (required)
		* - Opening Tag (required)
		* - Closing Tag (required)
		* - Access key, accesskey="" attribute for the button (optional)
		* - Title, title="" attribute (optional)
		* - Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (optional)
		*/
		QTags.addButton( 'WPexplorerlove', 'WPexplorerlove', '<a href="http://wpexplorer.com" target="_blank">', '</a>', 'w' );
	</script>
<?php
}

결과는 다음과 같습니다.

해당 빠른 태그를 사용하려면 해당 태그를 한 번 클릭하면 <a> 태그의 시작 부분이 삽입되고 텍스트가 추가된 다음 버튼을 다시 클릭하면 닫는 태그가 추가됩니다. 그게 다야!

질문이나 추천사항이 있으시면 댓글을 남겨주세요!