[WordPress] 워드프레스 숏 코드 (short code) 소개

워드프레스 숏코드란?

숏코드 API는 게시물과 페이지에서 사용할 수 있는 워드프레스 숏코드를 생성하기 위한 간단한 함수 집합입니다. 예를 들어, 다음과 같은 숏코드(게시물이나 페이지 본문 내에)는 해당 게시물이나 페이지에 첨부된 이미지들로 구성된 사진 갤러리를 추가할 수 있습니다:

이 API는 플러그인 개발자들이 특별한 종류의 콘텐츠(예: 양식, 콘텐츠 생성기)를 만들 수 있게 해주며, 사용자는 해당 숏코드를 페이지 텍스트에 추가하여 특정 페이지에 해당 콘텐츠를 첨부할 수 있습니다. (공식 사이트 번역)

https://codex.wordpress.org/Shortcode_API

나만의 숏코드 (쇼트코드) 제작하기

사용 중인 테마에서 숏코드 함수 등록하기

function custom_shortcode($atts, $content = null) {
    $output = '<div class="custom-shortcode">';
    $output .= '<h3>제목</h3>';
    $output .= '<p>' . $content . '</p>';
    $output .= '<button onclick="alert(\'버튼 클릭!\')">버튼</button>';
    $output .= '</div>';
    
    $output .= '<style>';
    $output .= '.custom-shortcode { background-color: #f1f1f1; padding: 10px; }';
    $output .= '.custom-shortcode h3 { color: #333; }';
    $output .= '.custom-shortcode button { background-color: #4CAF50; color: white; border: none; padding: 5px 10px; }';
    $output .= '</style>';
    
    $output .= '<script>';
    $output .= 'console.log("숏코드 초기화!");';
    $output .= '</script>';
    
    return $output;
}
add_shortcode('custom_shortcode', 'custom_shortcode');Code language: PHP (php)

숏코드 등록할 곳에 작성하기

[custom_shortcode]숏코드 내용[/custom_shortcode]Code language: CSS (css)

결과