WordPress 단축 코드는 무엇입니까? 포괄적인 단계별 가이드

게시 됨: 2023-03-17

@Cloudways 팔로우

WordPress 게시물과 페이지를 보다 상호 작용적이고 시각적으로 매력적으로 만들고 싶습니까? 워드프레스 단축 코드는 여러분의 삶을 더 쉽게 만들어 드립니다. 이러한 편리한 코드 스니펫을 사용하면 고급 코딩 기술 없이도 다양한 기능과 디자인 요소를 추가할 수 있습니다.

이 블로그 게시물에서는 WordPress 단축 코드에 대해 알아야 할 모든 것을 다룰 것입니다. 먼저 기본 WordPress 단축 코드와 이를 추가하는 방법을 살펴보겠습니다. 다음으로 게시물, 페이지, 위젯, 테마 파일 등 웹 사이트의 다양한 부분에서 단축 코드를 사용하는 방법에 대해 자세히 살펴보겠습니다.

또한 WordPress에서 사용자 지정 단축 코드를 생성하여 웹 사이트의 디자인과 기능을 정확한 필요에 맞게 사용자 지정할 수 있도록 안내해 드립니다. 마지막으로 단축 코드를 웹 사이트에 사용자 지정 요소를 추가하는 또 다른 인기 있는 방법인 Gutenberg 블록과 비교할 것입니다.

자, 파헤쳐 봅시다!

WordPress 단축 코드: 개요
WordPress 단축 코드: 장단점
기본 WordPress 단축 코드
WordPress 단축 코드를 추가하는 방법(5가지 쉬운 방법)
단축 코드와 구텐베르크 블록

WordPress 단축 코드: 개요

WordPress 단축 코드는 코딩 기술 없이도 웹 사이트에 동적 콘텐츠와 기능을 추가할 수 있는 강력하고 다양한 기능입니다. 단축 코드는 기본적으로 게시물, 페이지, 위젯 또는 테마 파일에 삽입하여 특정 기능이나 콘텐츠를 표시할 수 있는 작은 코드 스니펫입니다.

단축 코드를 사용하면 버튼, 양식, 갤러리 등과 같은 사용하기 쉬운 기능을 제공하여 사용자 경험을 크게 향상시킵니다. 또한 콘텐츠를 보다 상호작용적이고 방문자에게 매력적으로 만들어 웹사이트의 SEO를 개선할 수도 있습니다.

Featured-Pack 솔루션으로 개발 워크플로 간소화

만족스러운 11,000명 이상의 웹 개발자와 함께 Cloudways로 원활한 웹 호스팅을 경험하세요. 더 이상 관리 번거로움이 없습니다.

3일 무료 체험!

WordPress 단축 코드: 장단점

이제 WordPress 단축 코드에 대한 아이디어를 얻었으므로 방법 부분으로 들어가기 전에 장단점을 빠르게 살펴보겠습니다.

WordPress 단축 코드의 장점

시간 절약 : 수동 코딩 없이 복잡한 기능을 추가할 수 있습니다.
사용자 지정 가능 : 특정 요구 사항에 맞게 단축 코드를 사용자 지정할 수 있습니다.
사용자 친화적 : 사용하기 쉽고 고급 코딩 기술 없이도 WordPress 게시물이나 페이지에 추가할 수 있습니다.
호환성 : 다양한 플러그인 및 테마와 호환됩니다.따라서 대부분의 경우 WordPress 테마 또는 플러그인을 자유롭게 선택할 수 있습니다.

WordPress 단축 코드의 단점

종속성 : 단축 코드에 대한 과도한 의존은 플러그인 또는 테마가 업데이트되지 않으면 문제를 일으킬 수 있습니다.
호환성 문제 : 일부 단축 코드는 모든 WordPress 테마 및 플러그인과 호환되지 않을 수 있습니다.
학습 곡선 : 단축 코드를 사용하고 사용자 정의하는 방법에 대한 기본적인 이해가 필요합니다.
보안 : 단축 코드는 보안 취약성을 방지하기 위해 적절하게 삭제 및 검증되어야 합니다.

WordPress 단축 코드는 사이트의 기능과 디자인을 향상시키는 편리한 솔루션을 제공합니다.

그러나 종속성 문제, 호환성 문제 및 잠재적인 보안 취약성을 피하기 위해 신중하게 사용하는 것이 중요합니다.

다음 제목에서 기본 WordPress 단축 코드에 대해 자세히 알아보십시오.

기본 WordPress 단축 코드

WordPress에는 페이지와 게시물에 기능을 쉽게 추가할 수 있는 6개의 기본 내장 단축 코드가 포함되어 있습니다.

[ 오디오]: 페이지 또는 게시물에 오디오 파일을 추가합니다.
[ 캡션]: 이미지 또는 비디오에 캡션을 추가합니다.
[ embed]: 포함된 항목의 너비와 높이를 설정합니다.
[ 갤러리]: 이미지를 사용하여 사진 갤러리를 만듭니다.
[ 동영상]: 페이지 또는 게시물에 동영상을 추가합니다.
[재생 목록]: 게시물에 오디오 또는 비디오 파일을 표시합니다.

기능이 있는 몇 가지 유용한 단축 코드 목록(표)

다음은 기능과 함께 WordPress의 유용한 단축 코드 목록입니다.

기능	실용적인 사용법
[오디오]	[오디오**소스 =”#”]**
[캡션]	[캡션너비 ="450"]<imgsrc="#"/ >이미지[/캡션]
[ 퍼가기]	[삽입너비=”450″높이=”320″]
[갤러리]	[갤러리아이디 =”32″]
[동영상]	[비디오src=”#”]
[플레이 리스트]	[재생목록유형= “동영상”]
[wpforms]	[wpforms id=”10″]
[혼잣말]	[독백 id=”578″]

WordPress 단축 코드를 추가하는 방법(5가지 쉬운 방법)

WordPress 단축 코드를 추가하는 것은 쉽고 다섯 가지 방법을 사용하여 수행할 수 있습니다. 이러한 방법에는 게시물 또는 페이지에 직접 단축 코드 추가, 텍스트 위젯 사용, 단축 코드 플러그인 생성, 테마의 functions.php 파일에 단축 코드 추가 및 단축 코드 빌더 플러그인 사용이 포함됩니다.

WordPress 게시물 및 페이지에 단축 코드를 추가하는 방법

WordPress 게시물 및 페이지에 단축 코드를 쉽게 추가하는 방법은 다음과 같습니다.

게시물/페이지 편집기로 이동하여 "단축 코드 "를 검색합니다.

Gutenberg를 사용하는 경우 차단 섹션에서 단축 코드를 검색하여 페이지 또는 게시물에 추가하십시오.

블록의 단축 코드

표시하려는 해당 필드에단축 코드를 붙여넣습니다 .
연락처 양식을 추가하기 위해 WP Forms Shortcode를 추가했습니다.

wp 양식 단축 코드

게시물 또는 페이지를미리보고 단축 코드가 작동하는지 확인하십시오.

블록의 쇼트코드 미리보기

모든 페이지 빌더에 대해 유사한 단계를 따를 수 있습니다. 예를 들어 Elementor의 Element 섹션에서 Shortcode를 검색하고 원하는 접기에 끌어다 놓습니다.

요소에 대한 단축 코드

WordPress 위젯에 단축 코드를 추가하는 방법

다음은 위젯에 WordPress 단축 코드를 추가하는 단계입니다.

WordPress 대시보드 로 이동하여 Appearance > Widgets로 이동합니다.
"+ " 아이콘을 클릭하여 사용 가능한 모든 위젯 옵션을 찾아보고 Shortcode 위젯을 검색합니다.

위젯의 단축 코드

필드에단축 코드를 추가 하고 위젯 섹션을 업데이트하십시오. 이 자습서 목적을 위해WP Forms 단축 코드를 추가합니다.

wp는 위젯에서 단축 코드를 형성합니다.

단축 코드가 위젯 영역에 제대로 표시되는지 확인하려면사이트를 미리 보십시오 .

위젯에서 쇼트코드 미리보기

WordPress Classic Editor에서 단축 코드를 추가하는 방법

WordPress Classic Edtior는 여전히 WordPress의 게시물 및 페이지 편집에 널리 사용됩니다. 클래식 편집기에서 단축 코드를 추가하는 것은 매우 쉽고 아래의 간단한 단계를 따라 수행할 수 있습니다.

편집하려는 게시물/페이지로 이동하고 편집 옵션에서 "클래식 편집기 "를 선택하여 WordPress 클래식 편집기를 엽니다.
새 게시물/페이지를 만들 거나 단축 코드를 추가하려는기존 게시물/페이지를 편집합니다.
단축 코드를 추가할 영역을 찾으십시오. 간단히 입력하십시오.

클래식 편집기의 wpforms 단축 코드

게시물/페이지에 대한변경 사항을 저장한 다음 미리 보기를 통해 단축 코드가 제대로 작동하는지 확인하십시오.

WordPress 테마 파일에 단축 코드를 추가하는 방법

WordPress 테마 파일에 단축 코드를 추가하는 단계는 다음과 같습니다.

파일을 백업하거나 스테이징 사이트를 사용하여 프로덕션 사이트의 손상을 방지하십시오.

예를 들어, 모든 404 페이지에 대한 단축 코드를 추가하고 싶습니다(누군가가 존재하지 않는 페이지에 액세스하려고 할 때).

WordPress 대시보드 > 모양>테마 파일 편집기로 이동합니다.

단축 코드를 추가할 파일 섹션을 선택합니다. 예를 들어 모든 404 오류 페이지의 경우 404.php입니다.
선택한 파일 내에단축 코드를 붙여넣습니다 .예를 들어:

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

쇼트코드 스크립트

변경 사항을 저장 하고 출력 결과를 미리 봅니다.
다음은 누군가가 존재하지 않는 페이지에 액세스하려고 할 때 얻을 수 있는 출력 결과입니다.

404 페이지의 단축 코드

WordPress에서 나만의 맞춤 단축 코드를 만드는 방법

WordPress에서 사용자 지정 쇼트코드를 생성하는 것은 일반적으로 새 플러그인을 생성해야 하기 때문에 어려운 작업처럼 보일 수 있습니다. 그러나 적절한 준비와 관리를 통해 프로세스를 간소화하고 상대적으로 고통을 덜 수 있습니다.

쇼트 코드 생성 과정에서 문제가 발생하면 이전 버전으로 쉽게 되돌릴 수 있도록 백업을 생성하거나 준비 사이트에서 작업하는 것이 좋습니다.

Cloudways 호스팅으로 WordPress 개발 게임 향상

부진한 WordPress 호스팅에 안주하지 말고 개발 워크플로우를 지연시키십시오. Cloudways로 업그레이드하고 번개처럼 빠른 속도, 무료 스테이징을 즐기고 웹 앱을 쉽게 배포하십시오.

무료 평가판 시작

사용자 지정 플러그인 만들기

다음은 WordPress에서 사용자 지정 단축 코드를 생성하는 단계입니다.

FileZilla와 같은FTP 클라이언트를 통해 서버/사이트에 액세스하여 단축 코드에 대한 사용자 지정 플러그인을 만듭니다.
wp-content 폴더 > 플러그인 > 으로 이동하여 새 디렉토리를만듭니다.
예를 들어:subscribe-shortcode 와 같이 플러그인 뒤에 디렉터리 이름을 지정합니다.

단축 코드 플러그인 폴더

플러그인 폴더를 열고 my-shortcode.php와 같은 원하는 이름으로새 PHP 파일을 만듭니다 .

단축 코드 PHP 파일

PHP 파일보기/편집을 클릭하고 로컬 파일을 엽니다.
플러그인 헤더 코드를 붙여넣고 " ctrl+s"를 눌러 저장합니다. 코드는 다음과 같아야 합니다.

 <?php

/*

 * 플러그인 이름: Shosrtcode 구독하기

 * 플러그인 URI: https://cloudways.com/en/

 * 설명: 이 플러그인은 테스트용입니다.

 * 버전: 1.0.0

 * 최소 요구 사항: 5.3

 * PHP 필요: 7.4

 * 저자: Farhan Ayub

 * 저자 URI: https://profiles.wordpress.org/farhanayub/

 * 라이선스: GPL v2 이상

 * 라이선스 URI: https://www.gnu.org/licenses/gpl-2.0.html

 * 업데이트 URI: https://cloudways.com/en/

 * 텍스트 도메인: my-basics-plugin

 * 도메인 경로: /언어

 */

?>

변경 사항을 저장하면 FileZilla 도구에"파일이 변경되었습니다" 팝업이 나타납니다.
"편집 완료 및 로컬 파일 삭제 "를 선택하고 예를클릭합니다.

파일 변경

파일이 업데이트되면WordPress 대시보드 > 설치된 플러그인 으로 이동하여 새 플러그인을 활성화합니다.
플러그인 세부 정보에는 버전, 작성자 이름 등과 같은 헤더 필드가 표시되어야 합니다.

설치된 플러그인의 커스텀 플러그인

사용자 정의 WordPress 단축 코드 생성

플러그인을 활성화한 후 사용자 정의 WordPress 단축 코드를 생성할 수도 있습니다. 이 섹션에서는 사용자가 Cloudways YouTube 채널을 구독할 수 있는 단축 코드를 생성합니다.

사용자 지정 WordPress 단축 코드를 만드는 단계는 다음과 같습니다.

PHP 파일(이 경우: my-shortcode.php)을 열고 다음 코드를 붙여넣습니다.

 add_shortcode( '구독', 'cloudways_link' );

함수 cloudways_link(){

    'Cloudways <a href="https://www.youtube.com/@Cloudways/featured?sub_confirmation=1">YouTube 채널</a> 구독'을 반환합니다.

    }

add_action('init', 'cloudways_link');

플러그인 파일의 쇼트코드 스크립트

게시물에 사용자 정의 단축 코드를 사용합시다. 단축 코드의 이름을 "subscribe "로 설정했으므로 다음과 같이 대괄호로 호출합니다. [subscribe].

구독 단축 코드

변경 사항을 업데이트하고단축 코드의 출력을 확인하십시오.

구독 유튜브 링크

게시물에 출력이 표시되면 사용자 정의 WordPress 단축 코드가 작동 중임을 의미합니다.

단축 코드와 구텐베르크 블록

Shortcodes 및 Gutenberg 블록은 WordPress에서 사이트의 기능을 향상시키는 데 사용됩니다. 이 섹션에서는 두 가지를 비교하여 주요 차이점을 강조합니다.

단축 코드:

WordPress 페이지 및 게시물에 동적 콘텐츠 삽입 허용
내부에 키워드 또는 함수가 있는 대괄호를 사용하여 생성
기본 코딩 지식이 필요합니다.
WordPress 편집기의 모든 페이지 또는 게시물에 추가할 수 있습니다.
여러 페이지 또는 게시물에서 재사용 가능

구텐베르크 블록:

드래그 앤 드롭 인터페이스로 동적 콘텐츠 생성 가능
숏코드보다 더 많은 옵션과 사용 편의성 제공
복잡한 레이아웃을 쉽게 만들 수 있습니다.
사용자 지정 블록 또는 플러그인으로 확장 가능
단축 코드보다 기술 지식이 덜 필요합니다.

단축 코드는 기본 코딩 지식이 필요할 수 있으며 제한된 시각적 사용자 정의를 제공합니다. 반면에 Gutenberg Blocks는 동적 콘텐츠를 생성하기 위한 확장된 옵션으로 보다 사용자 친화적인 접근 방식을 제공합니다.

구텐베르크 블록을 사용하여 단축 코드를 추가하려면 "단축 코드" 옵션을 선택하고 지정된 필드에 단축 코드 이름을 입력하십시오. 이것은 코딩 지식 없이도 쉽게 수행할 수 있으므로 콘텐츠 생성에 보다 시각적인 접근 방식을 선호하는 사용자에게 편리한 옵션입니다.

요약

WordPress 단축 코드는 동적 콘텐츠를 쉽고 빠르게 만들 수 있는 강력한 도구입니다. 초보자이든 숙련된 사용자이든 WordPress 사이트에 추가하는 방법에는 여러 가지가 있습니다. 이 블로그에서 5가지 쉬운 방법을 다루었습니다. Cloudways의 관리형 WordPress 호스팅을 사용하면 WordPress 웹 사이트에 대한 단축 코드를 쉽게 만들고 관리할 수 있습니다.

일부 제한 사항이 있을 수 있지만 특히 Gutenberg 블록의 사용 용이성과 결합할 때 이점이 단점보다 큽니다.

따라서 간단한 버튼을 표시하든 복잡한 콘텐츠를 표시하든 관계없이 단축 코드는 WordPress 사이트를 향상시키는 환상적인 방법입니다.

그들에게 시도해보고 그들이 어떻게 당신의 콘텐츠를 다음 단계로 끌어올릴 수 있는지 알아보세요!

FAQ

Q. 워드프레스에 단축 코드가 내장되어 있나요?

예, WordPress에는 아래에 나열된 6개의 단축 코드가 내장되어 있습니다.

[ 오디오]
[ 캡션]
[ 퍼가기]
[ 갤러리]
[ 동영상]
[플레이 리스트]

Q. 워드프레스에서 단축 코드는 어디에 있나요?

WordPress 대시보드에서 플러그인 설명서를 확인하여 WordPress 플러그인의 단축 코드를 찾을 수 있습니다.

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

구텐베르크 블록, 클래식 편집기 또는 코드의 세 가지 방법으로 WordPress의 기본 단축 코드를 사용할 수 있습니다.

Q. 워드프레스에서 쇼트코드는 어떤 용도로 사용되나요?

WordPress에서 단축 코드의 목적은 페이지와 게시물에 동적 콘텐츠와 기능을 추가하는 것입니다.