간단한 워드프레스 숏코드 만드는 방법 총정리

🕓2017.09.08 📈10

워드프레스에서 숏코드는 무한한 가능성을 가진 기능입니다. 물론 다른 사람들이 만들어 놓은 숏코드를 가져다 쓰면 좋겠지만, 완벽하게 본인의 니즈를 충족시키기는 어려울 수가 있으니 간단하게 직접 만들어 사용해 보는 것도 괜찮습니다.

아주 간단한 숏코드 만들기

우리가 [hello] 라고 숏코드를 작성하면, “Hello World!” 라는 문구가 반환 되는 숏코드를 만든다고 가정해볼때 우리에게 필요한 것은 아래와 같습니다.

Hello World! 라는 문구를 반환하는 PHP 함수
위 함수를 숏코드로 사용할 수 있도록 등록하기

하나씩 차근차근 해봅시다.

PHP 함수 만들기

PHP 함수는 평소에 만드는 것 처럼 만들면 됩니다.

function say_hello() {
    return 'Hello World!';
}

say_hello 라는 함수를 만들었으며 이 함수를 실행하면 “Hello World!” 라는 문구를 반환 해줍니다.

숏코드 등록하기: add_shortcode

자 그러면 위 함수를 숏코드로 간편하게 사용하기 위해서 숏코드로 등록해줘야겠죠? 숏코드로 등록하기 위해서는 add_shortcode 라는 워드프레스 내장 함수를 사용하면 됩니다.

add_shortcode 함수는 2개의 파라미터를 사용합니다. 예제는 아래와 같습니다.

add_shortcode( $tag, $func );

사용자가 $tag 에 지정된 태그로 숏코드를 적으면 $func 에 지정된 함수를 실행해주는 것이죠. 그러면 우리는 아래와 같이 숏코드를 등록할 수 있습니다.

add_shortcode( 'hello', 'say_hello' );

함수와 숏코드 등록을 함께 적으면 아래와 같습니다.

function say_hello() {
    return 'Hello World!';
}
add_shortcode( 'hello', 'say_hello' );

이제 우리는 이 코드를 테마의 functions.php 파일에 넣어놓든, 플러그인에 넣어놓든 하면 hello 숏코드를 사용할 수 있습니다.

숏코드의 내용을 가져와 사용하기: $content

사용자가 “Hello World!” 뒤에 추가 문구를 더 넣고 싶다면 아래와 같이 사용할 수 있습니다.

[hello]Nice to meet you.[/hello]

숏코드를 열고 닫으면서 그 사이에 추가하고 싶은 문구를 넣어주는거죠. 자 그럼 숏코드의 함수에서는 어떻게 처리 해야 할까요.

function say_hello( $atts, $content ) {
    return 'Hello World! ' . $content;
}
add_shortcode( 'hello', 'say_hello' );

say_hello 함수에 몇가지 매개변수를 받아서 return 부분에 추가 해주면 됩니다.

$atts: 숏코드 사용자가 입력한 파라미터
$content: 숏코드 사용자가 입력한 추가 컨텐츠

숏코드에서 사용할 함수에서는 반드시 위 순서대로 변수를 받아서 사용해야 합니다. $atts(attributes) 는 조금 있다가 다시 보도록 하고 $content 에만 집중합시다.

위에서와 같이 hello 숏코드를 사용자가 사용하면서 추가로 넣은 내용을 넣으면, $content 변수에는 “Nice to meet you.” 라는 값이 담깁니다. 이제 say_hello 함수가 최종 값을 return 할 때 “Hello World” 뒤에 $content 를 붙여서 return 하도록 설정 했으니 최종적으로 반환되는 값은 “Hello World! Nice to meet you.” 가 됩니다.

숏코드 파라미터를 등록하고 사용하기

자, 이제 숏코드 만들기의 거의 막바지에 왔습니다. 이번에는 hello 숏코드에 사용자가 파라미터를 넣어서 반가움을 표시 할지, 아니면 작별 인사를 하도록 할지 설정할 수 있도록 만들어 봅시다.

[hello bye=1]See you soon.[/hello]

hello 숏코드에서 bye 라는 파라미터를 받아 bye 가 1일 경우, 작별 인사를 하도록 만들어 봅시다.

function say_hello( $atts, $content ) {
    $atts = shortcode_atts( 
        array( 'bye' => 0 ), 
        $atts, 
        'hello'
    );

    if ( $atts['bye'] == 1 ) { return 'Bye,' . $content; }
    else { return 'Hello World! ' . $content; }
}
add_shortcode( 'hello', 'say_hello' );

숏코드의 파라미터 받아오기: shortcode_atts

숏코드의 파라미터를 받아오기 위해서는 어떤 것을 파라미터로 사용할지 정하고 해당 파라미터의 기본 값을 설정해줘야 할 것입니다. 여기서 사용되는 것이 shortcode_atts 라는 워드프레스 내장함수 입니다.

shortcode_atts 를 이용해 bye 라는 파라미터를 받아 오는데, 기본 값은 0 으로 설정 해주도록 합니다.

숏코드의 파라미터에 따라 출력 값 다르게 설정하기

이제 if 문을 이용해 bye 라는 파라미터의 값에 따라 다른 결과물을 반환하도록 하면 됩니다.

bye 가 1이면 “Bye, ” 에 사용자가 입력한 내용을 붙여서 출력해주고, bye 가 다른 값으로 들어 가있다면 우리가 계속 해왔던 “Hello World!” + 사용자가 입력한 내용을 붙여서 출력 해줍니다.

글이 꽤나 길어졌는데, 차근차근 보면 굉장히 간단합니다.

끝.