워드프레스에서 숏코드 (shortcode) 를 직접 작성하여 사용하는 방법을 알아보자.
워드프레스에서 글을 작성하다가 [apple] 이라고 입력하면 사과 이미지가 삽입되도록 해 보자.
1. 숏코드 핸들러 함수 작성
현재 사용 중인 워드프레스 테마 (theme) 의 functions.php 파일을 연다.
vi wp-content/themes/twentytwenty/functions.php
다음과 같이 숏코드 핸들러 (handler) 함수를 작성한다.
작성하는 위치는 파일의 맨 앞부분이다.
function apple_function () {
return '<img src="http://xtmci.com/wp-content/uploads/apple.png">';
}
2. 숏코드 핸들러 함수 등록
add_shortcode() 함수로 apple_function() 함수를 등록한다.
add_shortcode(‘apple’, ‘apple_function’);
apple 은 숏코드의 태그 (tag) 이다. 본문에서 [apple] 과 같이 대괄호 안에 쓰인다.
태그 이름에는 작성 규칙이 있다. 영문 소문자와 밑줄 문자 (underscore) 만 허용된다.
apple_function 은 앞에서 작성한 핸들러 함수의 이름이다.
다음은 functions.php 파일에 추가되는 전체 내용이다.
function apple_function () {
return '<img src="http://xtmci.com/wp-content/uploads/apple.png">';
}
add_shortcode('apple', 'apple_function');
3. 숏코드 사용하기
워드프레스 본문에서 사과 이미지가 필요한 위치에 [apple] 이라고 입력한다.
...... [apple] ......
숏코드 위치에 실제로 이미지 태그가 삽입되는지 미리보기로 확인해 보자.