WordPress에 단축 코드를 쉽게 추가하는 방법

게시 됨: 2024-02-05

단축 코드는 WordPress 게시물과 페이지에 뿌려 PHP를 작성하지 않고도 강력한 기능을 추가할 수 있는 편리한 코드 조각입니다.

간단한 코드 한 줄만으로 양식을 삽입하고, 슬라이더를 표시하고, 사용자 정의 버튼을 만들 수 있는 강력한 도구와 같습니다.

이 게시물에서는 WordPress에 단축 코드를 추가하는 방법과 이를 콘텐츠에 사용하는 방법을 보여 드리겠습니다.

그럼 더 이상 고민하지 말고 시작해 보겠습니다.

목차

  1. 단축 코드 이해
  2. WordPress에서 단축 코드를 사용하는 이유는 무엇입니까?
  3. WordPress에 단축 코드를 추가하는 방법
    • 블록 편집기(Gutenberg)를 사용하여 단축 코드 추가
    • 클래식 편집기를 사용하여 단축 코드 추가
    • WordPress 위젯에 단축 코드 추가
    • WordPress 테마 파일 내에 단축 코드 추가
  4. WordPress에서 사용자 정의 단축 코드를 만드는 방법
  5. 자주 묻는 질문
  6. 결론

1 단축 코드 이해

단축 코드는 복잡한 HTML 또는 CSS 코딩이 필요 없이 다양한 기능으로 WordPress 웹사이트를 향상할 수 있는 편리한 솔루션을 제공합니다.

이러한 단축 코드는 대괄호로 묶여 있습니다. 예를 들어 Rank Math SEO 플러그인을 사용하여 로컬 SEO를 설정하는 경우 다음과 같은 비즈니스 정보를 표시하기 위해 단축 코드를 사용해야 합니다.

 [rank_math_contact_info]

WordPress 게시물, 페이지, 위젯의 콘텐츠 편집기에 삽입하기만 하면 해당 페이지가 프런트 엔드에서 표시될 때 단축 코드가 의도한 기능으로 대체됩니다.

웹사이트에 문의 양식을 추가하고 싶다고 상상해 보세요. 전체 양식을 처음부터 코딩하는 대신 플러그인이나 테마에서 제공하는 단축 코드를 사용하면 됩니다. 이 단축 코드는 양식을 자동으로 생성하여 귀중한 시간과 노력을 절약해 줍니다.

하지만 관련 게시물, 배너 광고, 연락처 양식, 갤러리 또는 기타 요소에 대한 게시물에 사용자 정의 코드가 필요한 경우 어떻게 해야 합니까? 이것이 Shortcode API가 들어오는 곳입니다.

Shortcode API를 사용하면 개발자가 자신의 코드를 단축 코드로 등록할 수 있어 사용자가 코딩 지식 없이도 활용할 수 있습니다. WordPress가 단축 코드를 감지하면 관련 코드를 손쉽게 실행합니다.

2 WordPress에서 단축 코드를 사용하는 이유는 무엇입니까?

WordPress 사이트에 단축 코드를 추가하려는 몇 가지 이유는 다음과 같습니다.

  • 사용하기 쉬움: 코딩 경험이 없더라도 단축 코드를 사용하여 사이트에 강력한 기능을 추가할 수 있습니다.
  • 다용도: 연락처 양식 추가부터 슬라이더 표시 및 사용자 정의 버튼 생성에 이르기까지 상상할 수 있는 거의 모든 것에 대한 단축 코드가 있습니다.
  • 이식성: 테마 또는 플러그인을 전환하는 경우 단축 코드를 생성한 테마 또는 플러그인이 활성 상태로 유지되면 단축 코드가 계속 작동합니다.

WordPress에 단축 코드를 추가하는 3가지 방법

이제 WordPress 웹 사이트에 단축 코드를 추가하는 방법에 대해 논의하겠습니다.

3.1 블록 편집기(구텐베르그)를 사용하여 단축 코드 추가

블록 편집기를 사용하여 단축 코드를 추가하려면 단축 코드를 추가하려는 위치에 따라 페이지 또는 게시물 섹션으로 이동하여 시작하세요.

블록 편집기에서 + 아이콘을 클릭하고 단축 코드 블록을 검색하여 아래와 같이 페이지나 게시물에 추가하세요.

구텐베르크에 단축 코드 추가

단축 코드 블록이 추가되면 단축 코드를 입력할 수 있는 필드가 표시됩니다. 필요한 경우 단축 코드 내에 필요한 매개변수를 포함하여 원하는 단축 코드를 입력하십시오.

단축어를 추가하세요

완료되면 페이지나 게시물을 게시하거나 업데이트하여 웹사이트에 단축 코드를 적용하세요.

3.2 클래식 편집기를 사용하여 단축 코드 추가

클래식 편집기에서 단축 코드를 추가하려면 단축 코드를 추가하려는 위치에 따라 페이지 또는 게시물 섹션으로 이동하세요.

클래식 편집기에 단축 코드 추가

완료되면 게시/업데이트 버튼을 클릭하여 변경 사항을 저장하세요.

3.3 WordPress 위젯에 단축 코드 추가

WordPress 웹사이트의 위젯 영역에 단축 코드를 추가하여 사이드바, 바닥글 또는 헤더에 표시되도록 할 수 있습니다.

시작하려면 WordPress 대시보드에서 모양 → 위젯 으로 이동하세요. 그런 다음 단축 코드를 삽입하려는 위젯 영역을 찾으세요.

그런 다음 + 아이콘을 클릭하고 단축 코드 블록을 검색한 후 끌어서 놓거나 클릭하여 원하는 영역에 배치합니다.

위젯 영역에 단축 코드 추가

단축코드 블록을 추가한 후 해당 영역 내에 원하는 단축코드를 삽입할 수 있습니다.

단축 코드 추가

그런 다음 변경 사항을 저장하면 이제 선택한 위젯 영역에 단축 코드가 활성화됩니다.

3.4 WordPress 테마 파일 내에 단축 코드 추가

WordPress 테마 파일 내의 단축 코드는 플러그인에 의존하지 않고도 웹사이트에 사용자 정의 기능을 추가할 수 있습니다.

이렇게 하려면 page.php, Single.php 등 단축 코드를 추가하려는 테마 파일이나 사용자 정의 템플릿 파일에 액세스하고 WordPress에서 제공하는 do_shortcode 기능을 사용하세요.

이 함수에 매개변수로 단축코드를 전달하면 해당 출력이 표시됩니다.

예를 들어 [your_shortcode] 라는 단축 코드가 있는 경우 다음과 같이 테마 파일에 추가할 수 있습니다.

<?php echo do_shortcode("[your_shortcode]"); ?>

테마 파일에 단축 코드 추가

단축 코드를 추가한 후에는 변경 사항을 저장하는 것을 잊지 마세요.

그러나 테마가 업데이트되면 변경 사항이 손실될 수 있으므로 테마 파일에 사용자 정의 코드를 추가할 때 하위 테마를 사용하는 것이 가장 좋습니다.

4 WordPress에서 사용자 정의 단축 코드를 만드는 방법

단축 코드는 WordPress 게시물 및 페이지에 동적 콘텐츠나 사용자 정의 코드를 추가하는 데 유용하지만 사용자 정의 단축 코드를 만들려면 코딩 기술이 필요합니다.

PHP에 익숙하다면 다음 템플릿 코드를 사용하세요.

 // Define a custom shortcode function function custom_shortcode() { // Define the desired functionality $message = 'This is my custom shortcode!'; // Return the output return $message; } // Register the shortcode add_shortcode('my_shortcode', 'custom_shortcode');

이 예에서는 "이것은 내 사용자 정의 단축 코드입니다!"라는 텍스트를 표시하는 단축 코드 [my_shortcode] 를 생성합니다. 귀하의 웹사이트에서.

따라서 이 코드를 테마의 function.php 파일에 추가하거나 코드 조각 플러그인을 사용할 수 있습니다.

필요한 단계를 완료한 후 다음 코드를 사용하여 게시물, 페이지 및 위젯에 단축 코드를 삽입할 수 있습니다.

 [my_shortcode]

게시물이나 페이지를 게시하거나 미리 보면 단축 코드가 함수의 출력으로 대체됩니다.

5 자주 묻는 질문

여러 기능에서 동일한 단축 코드 이름을 사용할 수 있나요?

아니요, 각 단축코드에는 고유한 이름이 있어야 합니다. 여러 단축 코드에 동일한 이름을 사용하면 충돌이 발생하고 예측할 수 없는 동작이 발생할 수 있습니다.

단축 코드와 구텐베르그 블록의 차이점은 무엇입니까?

단축 코드는 [my_shortcode]와 같은 간단한 태그 시스템을 활용하여 WordPress에 동적 콘텐츠를 추가하는 기존 방법입니다. 반면에 구텐베르크 블록은 시각적 편집기와 블록 기반 구조를 제공하는 보다 현대적인 접근 방식입니다.

단축 코드가 WordPress에 동적 콘텐츠를 추가하는 유일한 방법입니까?

아니요, 단축 코드는 한 가지 방법입니다. 또한 사용자 정의 게시물 유형, 페이지 템플릿 및 작업 후크를 사용하여 WordPress 사이트에 동적 콘텐츠를 추가할 수도 있습니다.

6 결론

WordPress에서 단축 코드를 사용하면 모든 것을 처음부터 코딩하지 않고도 복잡한 기능과 스크립트를 쉽게 삽입할 수 있으므로 매우 유용할 수 있습니다.

우리는 클래식 편집기와 구텐베르그 편집기를 모두 사용하여 WordPress에 단축 코드를 추가하는 방법에 대해 논의했습니다. 단계에 따라 웹사이트의 게시물, 페이지 및 위젯에 단축 코드를 쉽게 추가할 수 있습니다.

단축 코드의 이름을 고유하게 유지하고 다른 플러그인이나 기능과의 충돌을 피하는 것이 중요합니다.

또한 단축 코드가 올바르게 작동하고 WordPress 테마 및 플러그인과 호환되는지 확인하는 것이 중요합니다.

이 게시물이 마음에 들면 @rankmathseo를 트윗하여 알려주세요.