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

워드프레스에서 다양한 기능 추가해주는 숏코드를 만드는 방법을 초보자도 이해할 수 있도록 풀어 보았습니다. 간단하게 나만의 숏코드를 만들어 활용해 보세요.

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

아주 간단한 숏코드 만들기

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

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

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

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]

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

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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!” + 사용자가 입력한 내용을 붙여서 출력 해줍니다.

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

끝.

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
94 카드형 디자인/갤러리/리스트 코딩하기. file 졸리운_곰 2018.09.06 482
93 jquery json에서 null 값 삭제 졸리운_곰 2018.09.05 307
92 jquery .append(Html). 에서 claas 적용 졸리운_곰 2018.09.05 241
91 JavaScript / Method / .split() – 문자열 분할하는 속성 file 졸리운_곰 2018.09.05 403
90 Javascript - 문자열에서 큰 따옴표를 제거하고 싶습니다. 졸리운_곰 2018.09.05 468
89 [JavaScript] Object.keys, json Object 반복문 돌리기 for...in 문 졸리운_곰 2018.09.05 598
88 javascript JSON Object의 key 개수(length) 구하기. 졸리운_곰 2018.09.05 490
87 treat json objects value as integer : javascript JSON 값을 정수로 변경 졸리운_곰 2018.09.03 279
86 Check if a key exists inside a json object : JSON 키값이 있는지 조사 졸리운_곰 2018.09.03 465
85 Grouping JSON by values : JSON 값으로 그룹핑 분류 졸리운_곰 2018.09.01 488
84 자바스크립트] 오늘 날짜 시간 구하기, 년월일/시분초 출력; Date Time Print JavaScript 졸리운_곰 2018.08.30 434
83 javascript 로 AM / PM 출력 (구하기) 졸리운_곰 2018.08.30 506
82 [JavaScript] 부모창과 자식창의 값 전달 file 졸리운_곰 2018.08.23 415
81 Javascript 자식창에서 부모창으로 데이터 전달하기 졸리운_곰 2018.08.23 961
80 [HTML/CSS] 4. 카드형 리스트 file 졸리운_곰 2018.08.22 1121
79 [jQuery] Ajax 방법 졸리운_곰 2018.08.03 656
78 [jQuery] Ajax 기본 사용법 졸리운_곰 2018.08.03 719
77 [자바스크립트] 정규표현식을 사용하여 태그만 제거하기 졸리운_곰 2018.08.01 675
76 [JS] HTML 태그들을 제거하자! #자바스크립트HTML태그제거 #HTML태그삭제 #HTML태그없애기 file 졸리운_곰 2018.08.01 385
75 jQuery selector,jQuery 셀럭터, jQuery 선택자 졸리운_곰 2018.07.29 731
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED