워드프레스 ShortCode 완벽 가이드1
워드프레스 ShortCode 완벽 가이드1
실제 존재하는 콘텐츠의 식별자(ID, slug 등)와 옵션값의 의미까지 자세히!
워드프레스 게시글·페이지·위젯에서 복잡한 기능을 한 줄로 삽입하는 방법까지 단계별로 익혀보세요!
1. ShortCode란 무엇인가?
ShortCode(숏코드)는 워드프레스에서 [gallery], [contact-form-7]처럼 대괄호([])로 감싸 사용하며, 복잡한 기능이나 콘텐츠를 간단한 코드 한 줄로 웹페이지에 삽입할 수 있도록 해주는 기능입니다.
기본 테마/플러그인에서 자주 사용되고, 직접 커스텀 ShortCode도 제작할 수 있습니다.
2. ShortCode는 왜 필요할까?
- 코딩 지식 없이 다양한 레이아웃이나 기능(갤러리, 폼, 공지 등) 손쉽게 추가
- 여러 페이지/글에서 중복 활용(재사용성)
- 플러그인, 테마에서 자동으로 제공되는 기능과 연동 가능
3. 핵심: ShortCode의 사용구조와 옵션 파헤치기
▶ 기본 구조
[shortcode 옵션1="값" 옵션2="값2"]▶ 예시
[gallery ids="10,24,35"]- [contact-form-7 id="123" title="Contact form 1"]
- [myplugin_product slug="blue-tshirt"]
4. 여기서 "ID, slug, 옵션값"이란?
| 용어 | 설명 |
|---|---|
| ID | 워드프레스에서 자동 부여되는 숫자값. 각 글/페이지/미디어 등 고유번호. |
| Slug | 사람이 읽기 쉽고, URL 친화적인 문자열. 예: my-product |
| 옵션값 | ShortCode가 동작할 때 필요한 세부설정. 예: columns="3", size="large" 등 |
5. 실전! ShortCode 사용하는 방법 – Step by Step
1) 내 사이트에서 ID(식별자) 또는 Slug 찾기
-
ID 찾는 방법:
-
워드프레스 관리자 → ‘글’, ‘페이지’, ‘상품’ 목록에서 항목에 마우스 올리면 브라우저 하단 주소에 id=숫자 형태로 표시됨
-
-
Slug(슬러그) 확인:
-
글/페이지 작성 화면의 URL 부분 확인(예: /blog/my-first-post)
-
2) ShortCode 문서 예시 확인
-
플러그인이 제공하는 공식 문서나 도움말(Usage/설명서)에서 어떤 옵션(속성)들이 있는지 예시 확인
-
예:
[product id="25" show_price="yes" class="highlight"]
-
3) 실제로 적용하기
-
새 글/페이지 혹은 위젯, HTML 블록에
[shortcode 옵션명="값"]입력 -
예시:
-
실제 갤러리 삽입:
text[gallery ids="15,22,27"] -
특정 상품 정보 불러오기
text[product id="123" show_price="yes"]
-
4) 옵션값 바꿔가며 미리보기 및 적용
-
문법 오류, 오타, ‘존재하지 않는 ID’ 등은 404 에러나 빈 화면의 원인
-
항상 실제 존재하는 콘텐츠의 ID, slug 등 올바른 값을 사용해야 함
6. 워드프레스 숏코드(Shortcode) 수정 및 변환 정리
- 로그인 후 대시보드에서 페이지 또는 글(게시물)을 선택해 편집기에 접속합니다.
- 편집기에서 숏코드가 있는 위치를 찾으세요. 숏코드는 대괄호([ ])로 둘러싸인 문구(예: [gallery])로 구분됩니다.
- 해당 부분을 직접 수정하거나 삭제한 뒤, 변경 사항 저장 및 페이지/글 업데이트를 진행하면 적용됩니다.
- 숏코드를 버튼 스타일로 변환하려면, 워드프레스의 플러그인을 사용해야 하며,
- Shortcodes Ultimate, Buttonizer 등에서 버튼용 숏코드를 생성해 활용할 수 있습니다.
- 플러그인 설치 후에는 각 플러그인 설정에서 버튼 형식의 숏코드를 확인·복사해 원하는 위치에 붙여넣으면 됩니다.
7. ShortCode 활용 꿀팁
- 옵션값 빠뜨리면 동작하지 않거나 기본값으로 표시됩니다.
- 복잡한 옵션이 필요한 경우, 플러그인 공식 사이트 또는 관리자에서 샘플 ShortCode 복사 사용
- 커스텀 ShortCode를 직접 만들 수도 있지만 대부분 플러그인, 테마에서 제공하는 ShortCode로 원하는 기능 구현 가능
8. 자주 묻는 질문(FAQ)
Q. 옵션값을 빼먹으면?
일부 ShortCode는 기본값 적용, 일부는 에러 또는 아무것도 안 뜹니다.
Q. ID로 지정한 글이 없으면?
404 에러 화면이 나타나거나, 비어있는 블록이 보입니다.
Q. 단일 ShortCode에 여러 옵션 가능?
대부분 가능합니다.
[shortcode id="10" title="메뉴" count="3"]처럼 여러 옵션 조합
9. 마치며
오늘은 숏코드에 대해서 알아봤습니다. ShortCode는 워드프레스에서 강력하고 간편한 기능 확장 도구입니다. "ID, slug, 옵션값" 등 기본 구조를 이해하고, 실제 존재하는 콘텐츠의 정보를 넣으면 누구나 멋진 결과를 만들 수 있습니다.
우리는 사용 전, 항상 실제로 존재하는 글/이미지/상품의 식별자와 옵션값을 다시 확인해야 한다는 것도 알았습니다. 물론 우리 모두는 할수있습니다. 화이팅입니다.!!!앞으로도 숏코드 완벽가이드는 계속됩니다.
이렇게 페이지/글 편집을 통해 손쉽게 숏코드를 수정·삭제·변환할 수 있습니다.
