WordPress 및 WooCommerce 단축 코드를 사용하는 방법은 무엇입니까? (비디오 포함)

최종 업데이트 - 2021년 7월 8일

단축 코드는 WordPress 게시물, 페이지 및 위젯에 특정 기능을 통합하는 데 도움이 되는 짧은 코드 조각입니다. 단축 코드의 장점은 고급 코딩 지식 없이도 사이트 사용자 정의를 관리할 수 있다는 것입니다. 단축 코드는 실제로 긴 코드를 생성하지 않고도 WordPress 게시물 및 페이지에 이미지, 콘텐츠 및 기능을 포함한 동적 콘텐츠를 게시하는 데 도움이 됩니다. 이 기사에서는 WordPress 및 WooCommerce 단축 코드를 사용하는 방법에 대한 몇 가지 기본적인 통찰력을 제공합니다.

WordPress 사이트에서 단축 코드의 중요한 용도는 무엇입니까?

단축 코드는 다양한 동적 콘텐츠 또는 시각적 요소를 쉽게 통합하는 데 도움이 됩니다. 단축 코드가 WordPress 사이트에 도움이 되는 몇 가지 예는 다음과 같습니다.

• WordPress 페이지 또는 게시물에 행동 유도 버튼 추가.
• 사이트에 연락처 양식 표시.
• 광고 삽입.
• 이미지 및 기타 시각적 요소 추가.

WooCommerce에 관한 한 이러한 단축 코드로 인해 일부 필수 페이지가 작동합니다. 예를 들어 장바구니, 체크아웃, 내 계정 페이지에는 특정 단축 코드 덕분에 동적 속성이 있습니다. 설정 마법사를 사용하여 WooCommerce의 필수 페이지를 만들 때 그 안에 있는 단축 코드를 보았을 것입니다. 또한 요구 사항에 따라 추천 제품이나 판매 중인 제품과 같은 특정 콘텐츠를 표시하는 데 도움이 되는 다양한 단축 코드를 사용할 수 있습니다.

자세한 내용은 WooCommerce 단축 코드에 대한 자세한 가이드를 읽어보세요.

WordPress에서 단축 코드를 사용하는 방법은 무엇입니까?

단축 코드를 복사하여 페이지 또는 포스트 편집기에 붙여넣고 게시하기만 하면 됩니다. 이제 해당 단축 코드의 특정 기능이 실행됩니다.

예를 들어 단축 코드를 사용하는 경우

WooCommerce 스토어의 페이지에서 추천으로 표시된 모든 제품이 해당 페이지에 표시됩니다.

방법을 살펴보겠습니다.

클래식 편집기

WordPress Classic Editor를 사용하는 경우 게시물 또는 페이지 편집기에 단축 코드를 붙여넣고 게시 버튼을 클릭하기만 하면 됩니다.

페이지를 게시하면 모든 추천 제품이 이 페이지에 표시됩니다.

구텐베르크

Gutenberg 편집기를 사용하는 경우 단축 코드를 관리하는 방법은 다음과 같습니다.

• + 아이콘을 클릭하여 블록을 선택합니다.
• 위젯까지 아래로 스크롤하고 메뉴 서랍을 엽니다.
• 단축번호 선택

단축번호를 입력하세요.

페이지를 게시합니다.

이제 모든 추천 제품이 이 페이지에 나열되는 것을 볼 수 있습니다.

위젯에 단축 코드를 추가하는 방법은 무엇입니까?

이제 위젯 영역을 통해 단축 코드를 추가하고 싶을 때가 있습니다. 예를 들어 WordPress 사이트의 사이드바에 추천 제품을 추가하는 방법을 살펴보겠습니다.

모양 > 위젯 으로 이동합니다.

텍스트 위젯까지 아래로 스크롤하고 사이드바를 선택하고 위젯 추가 버튼을 클릭합니다.

이제 게시물 편집기와 유사한 텍스트 영역이 있는 위젯을 볼 수 있습니다. 여기에 단축 코드를 추가하십시오.

이제 추천 제품이 사이트의 사이드바에도 표시됩니다.

위에서 설명한 대로 WordPress 및 WooCommerce 사이트에서 단축 코드를 사용할 수 있습니다. 관련 단축 코드를 조달하고 추가하여 이와 같은 동적 콘텐츠를 통합하기만 하면 됩니다.

기본 WordPress 단축 코드

WordPress에서 제공하는 몇 가지 기본 단축 코드가 있습니다. 그들은:

사이트에 동적 콘텐츠를 게시할 수 있는 많은 플러그인이 단축 코드를 사용합니다. 사용 가능한 단축 코드를 사용하여 원하는 특정 결과를 얻을 수 있습니다.

WordPress 단축 코드 만들기

직접 단축 코드를 생성하려는 경우 시작하기 전에 Shortcode API의 WordPress Codex를 읽어보십시오.

WordPress 및 WooCommerce Shortcodes 사용 시 모범 사례

아시다시피 WordPress와 WooCommerce 단축 코드는 사이트에 동적 콘텐츠를 통합하는 가장 쉬운 방법 중 하나입니다. 그러나 단축 코드를 사용하는 동안 특정 모범 사례를 따라야 할 수도 있습니다. 다음은 그 중 일부를 간단히 살펴보겠습니다.

숏코드에 너무 의존하지 마세요

단축 코드는 WordPress 초보자에게 확실히 사용하기 쉽습니다. 그러나 전문가들은 필요 이상으로 사용하지 않는 것이 좋습니다. 시각적 요소를 통합하기 위해 테마에 특정한 단축 코드를 사용하는 경우 모든 게시물에 추가하지 않는 것을 기억하십시오. 테마를 변경하는 경우 테마를 제거하면 해당 테마별 단축 코드가 쓸모 없게 되기 때문입니다. 이러한 시나리오에서는 모든 게시물에서 단축 코드를 수동으로 제거해야 할 수 있습니다.

깨진 단축 코드 숨기기

많은 게시물에서 테마별 숏코드를 사용하다가 우연히 테마를 변경한 경우 숏코드 텍스트가 표시됩니다. 이것은 사이트의 프론트엔드에서 매우 이상하게 보일 수 있습니다. 두 가지 방법으로 이 문제를 피할 수 있습니다. 단축 코드를 추가한 모든 게시물에서 수동으로 단축 코드를 제거할 수 있습니다. 또는 테마의 functions.php 파일에서 다음 코드를 사용할 수 있습니다.

add_shortcode( 'yourshortcode', '__return_false' );

이 코드를 사용하는 경우 단축 코드의 출력이 없습니다. 그러나 단축 코드 텍스트는 프런트엔드에 텍스트로 표시되지 않습니다.

단축 코드의 이름을 신중하게 지정하십시오.

고유한 단축 코드를 생성하는 경우 이름을 신중하게 지정하십시오. 이는 동일한 이름을 가진 다른 플러그인의 단축 코드와 충돌을 피하기 위한 것입니다. 또한 나중에 참조할 수 있도록 명확하게 문서화하십시오.

설명서를 주의 깊게 읽으십시오

테마 또는 플러그인과 함께 제공되는 단축 코드를 사용하는 경우 사용하기 전에 설명서를 주의 깊게 읽으십시오. 게시물이나 페이지에 추가하기 전에 단축 코드의 기능을 명확하게 이해해야 합니다.

워드프레스 숏코드 플러그인

다음은 단축 코드를 더 잘 사용하는 데 도움이 되는 몇 가지 WordPress 플러그인입니다.

단축 코드 궁극

이 플러그인은 WordPress 단축 코드를 사용하여 많은 시각적 요소를 만드는 데 도움이 됩니다. 게시물, 페이지, 텍스트 위젯 및 템플릿 파일에서 이러한 단축 코드를 사용할 수 있습니다. 이 플러그인을 사용하여 만들 수 있는 시각적 요소에는 상자, 버튼, 탭, 슬라이더, 회전 목마 등이 있습니다. 플러그인은 반응형 디자인을 가지고 있으며 거의 ​​모든 인기 있는 WordPress 테마와 함께 작동합니다.

단축 코드를 삽입하고 라이브 미리보기를 통해 어떻게 보일지 이해할 수 있으므로 사용하기가 매우 쉽습니다. 플러그인은 Gutenberg 편집기와도 원활하게 작동합니다. 또한 플러그인은 개발자 친화적이며 사용자 정의 CSS 옵션을 제공하므로 여러 사용자 정의 옵션을 제공합니다. 번역 준비가 완료되었으며 RTL 지원도 제공합니다. 광범위한 문서는 WordPress 초보자도 설정하고 사용할 수 있는 50개 이상의 단축 코드를 사용하는 데 도움이 됩니다.

추가 단축 코드 옵션에 대한 프리미엄 버전을 확인할 수도 있습니다.

My Theme Shop의 WP 단축 코드

시각적 요소에 테마별 단축 코드를 사용하는 데 문제가 있는 경우 이 플러그인이 좋은 방법이 될 것입니다. 테마와 상관없이 WordPress 사이트에서 24개 이상의 다양한 시각적 요소를 설정할 수 있습니다. 이러한 요소에는 버튼, 상자, 토글, 표, 레이아웃 등이 포함됩니다. 모든 단축 코드는 스타일이 최소화되어 대부분의 사이트와 호환됩니다. 또한 즉시 사용할 수 없는 경우 쉽게 사용자 정의할 수 있습니다.

이 플러그인을 사용하여 사이트의 프론트엔드를 사용자 정의하고 테마를 변경할 때 변경 사항을 잃을 염려가 없습니다.

amr 모든 위젯 단축

이 플러그인을 사용하면 단축 코드를 사용하여 하나 이상의 위젯과 전체 위젯 영역을 페이지에 추가할 수 있습니다. 클래식 편집기와 구텐베르크 편집기 모두에서 잘 작동합니다. 플러그인은 테마 스타일에 맞는 방식으로 위젯의 스타일을 지정합니다. 마음에 들지 않으면 플러그인을 사용자 정의할 수 있으므로 항상 디자인을 조정할 수 있습니다.

사이트의 테마를 변경하더라도 이 플러그인은 설정을 복원하고 새 테마에 따라 위젯을 표시합니다.

숏코더

이것은 HTML, Javascript 등과 같은 코드 조각을 단축 코드로 저장하는 데 도움이 되는 플러그인입니다. 이러한 단축 코드를 사용하여 페이지 및 게시물에서 코드를 실행할 수 있습니다. 이 코드를 사용하는 것은 매우 쉽습니다. 단축 코드의 이름을 만들고 코드 조각을 붙여넣고 저장하기만 하면 됩니다. 이제 페이지나 게시물에 배치하여 코드 조각을 실행할 수 있는 단축 코드가 생성됩니다. 플러그인은 단축 코드를 사용하고 싶지 않을 때 전역적으로 비활성화하는 옵션도 제공합니다.

아래 비디오 자습서를 볼 수도 있습니다.

WordPress 및 WooCommerce 단축 코드를 사용하는 방법에 대한 기본적인 이해가 있기를 바랍니다. 문의사항이 있으시면 댓글을 남겨주세요.

추가 읽기

• WooCommerce 단축 코드에 대한 궁극적인 가이드
• 단축 코드를 사용하는 WooCommerce 플러그인