Home테마 개발테마 기능의 확장숏코드 등록 및 활용

숏코드 등록 및 활용

■ 스터디의 목적

  • 나만의 쇼트코드 등록, 이용
  • 쇼트코드의 구조 및 활용(인자값 다루기)

※ 참고 문서 : https://codex.wordpress.org/Shortcode_API


wordpress의 shortcode란?

쇼트 코드는 일반적으로 약속된 태그를 이용해서 복잡하고 코드가 많이 필요한 구조를 포함 시킬 수 있는 아주 간단하면서 유용한 워드프레스의 한 요소입니다.

간단한 예로 흔히 접할 수 있는 페이지 빌더 또한 사용자가 드래그 앤 드롭 방식으로 컨텐츠를 꾸밀 수 있도록 쇼트코드들과 위젯의 조합을 이용한 방식입니다.

ex:

: Visual Composer UI 요소를 제외한 워드프레스 기본 편집기로 본 페이지 내용

Cap 2017-03-20 17-40-17-818

: 해석되어 실제 외부에 보여지는 html 구조


Shortcode 추가, 등록

워드프레스에는 기본적으로 제공되는 쇼트코드 외에, 원하는대로 새로 등록하고 사용할 수 있는 방법 또한 마련이 돼 있습니다.

◎ 쇼트코드의 기본 형태

  • 단순치환 : [shortcode]
  • 컨텐츠포함 : [startend]내용내용내용[/startend]
  • 인자값사용 : [shortcode title="테스트"]

◎ 쇼트코드의 3가지 요소

  • $atts – an associative array of attributes, or an empty string if no attributes are given
  • $content – the enclosed content (if the shortcode is used in its enclosing form)
  • $tag – the shortcode tag, useful for shared callback functions

> ex : [tag atts="something"] contentcontent [/tag]
※인자값($atts)은 정의할 때 기본값을 가지도록 할 수도 있고, 입력 시의 오류를 방지하기 위한 함수도 존재
> shortcode_atts / shortcodehandler

◎ 관련 함수 (등록과 사용, 제거)

  • remove_shortcode
  • remove_all_shortcode
  • add_shortcode
  • do_shortcode

(※ 테마의 functions.php에 정의)

 


활용 방법 예 :

– 위젯에 같은 카테고리 내의 최신 글들을 보여주려고 할 때
1) 커스텀 쿼리를 이용해서 목적에 맞는 구조를 쇼트코드로 제작

2) 위젯 텍스트 위젯에 쇼트코드를 사용할 수 있도록 하기

3) 어드민 > 외모 > 위젯 > 텍스트 위젯에 쇼트코드 입력 (저장)

Cap 2017-03-20 18-52-07-655

Was this article helpful to you? Yes No