WordPress 단축 코드를 만들고 사용하는 방법

게시 됨: 2018-03-28

WordPress 단축 코드는 게시물 및 페이지의 특정 기능을 실행하기 위한 바로 가기로 사용되는 작은 태그입니다. 간단한 단어나 구를 묶는 대괄호로 단축 코드를 인식할 수 있습니다. 그들은 사람들이 기능을 쉽게 실행할 수 있도록 돕기 위해 버전 2.5에 도입되었습니다.

이미 알고 계시겠지만 WordPress는 PHP 프로그래밍 언어를 사용하여 자체적으로 전원을 공급합니다. 따라서 게시물과 페이지에 특정 기능을 직접 추가하려면 텍스트 편집기에서 코드를 작성해야 합니다. 대신 단축 코드를 사용하면 전체 코드 블록을 간단한 용어로 바꾸고 게시물을 게시하는 것만으로 실행할 수 있습니다. 놀랍지 않나요?

더 읽어보기:
Udemy의 WordPress 코스

WordPress 단축 코드를 사용하는 방법

텍스트 및 시각적 편집기의 단축 코드

단축 코드를 사용하기 위해 코딩 방법을 알거나 백엔드에서 작동하는 방식을 이해할 필요가 없습니다. WordPress 자체와 대부분의 WordPress 테마 및 플러그인은 다양한 고급 기능을 사용할 수 있도록 다양한 단축 코드를 사용합니다.

예를 들어, 전체 이미지 갤러리를 표시하려면 WordPress와 함께 제공되는 [갤러리] 단축 코드를 사용하기만 하면 됩니다. 대부분의 단축 코드는 앞의 예와 같이 기본 형태로 사용할 수 있습니다.

게시물이나 페이지를 게시하거나 미리 보는 즉시 단축 코드가 실제 콘텐츠로 대체됩니다.

단축 코드 매개변수

종종 단축 코드에는 추가 매개변수가 있을 수 있습니다 . 추가 정보를 추가하여 출력을 사용자 정의하고 변경할 수 있습니다. 예를 들어 사소한 [갤러리] 단축 코드는 게시물에 첨부된 모든 이미지를 표시하지만 변경할 수 있습니다. 갤러리 단축 코드를 사용하면 ID별로 이미지를 지정할 수 있으므로 특정 사진만 표시하거나 특정 게시물의 일부가 아닌 이미지도 포함할 수 있습니다.

또한 추가 매개변수를 제공하여 갤러리의 크기 및 기타 여러 가지를 정의할 수 있습니다. 다음은 예입니다.

이 예의 갤러리에는 지정된 ID 번호가 있는 이미지만 표시됩니다. 이 경우 크기는 자동으로 중간으로 변경됩니다. 그리고 간단한 단축 코드로 모든 것을 얻을 수 있습니다. 이제 수백 줄은 아니더라도 수십 줄을 포함하는 PHP 코드를 수동으로 추가하려는 경우 전체가 어떻게 보일지 상상해 보십시오. 감사합니다, 단축번호!

시작 및 종료 태그

좀 더 복잡한 단축 코드에는 시작 및 종료 태그가 있을 수 있습니다. 따라서 하나의 단축 코드 대신에 특정 콘텐츠가 포함된 둘을 갖게 됩니다.

예를 들어 Google 지도 플러그인을 사용하면 단축 코드를 통해 지도에 위치를 표시할 수 있습니다. 이러한 플러그인의 대부분에는 시작 및 종료 태그가 있으며 주소는 그 사이에 작성되어야 합니다. 다음은 예입니다.

[[maps]]미국 뉴욕[[/maps]]

예에서 볼 수 있듯이 종료 태그는 항상 슬래시 기호 "/"로 시작합니다. 두 태그를 모두 사용하면 WordPress에서 단축 코드 부분을 더 쉽게 식별할 수 있습니다.

텍스트 편집기에서 작업

워드프레스 단축 코드

그것들은 기능에 대한 바로 가기일 뿐이지만 실제로는 그 자체로 워드프레스 고유의 암호문입니다. 따라서 비주얼 편집기에서 단축 코드를 작성하려고 하면 WordPress는 즉시 해당 단축 코드의 출력(또는 자리 표시자)을 표시합니다. 갤러리 예제를 따라 비주얼 편집기에서 단축 코드를 작성한 경우 WordPress에 즉시 해당 내용이 표시되는 것을 볼 수 있습니다(작동 방식을 보려면 이 게시물의 첫 번째 이미지 참조).

단축 코드를 편집하고 해당 매개변수로 작업하려면 주어진 단축 코드의 구조를 볼 수 있는 텍스트 편집기로 전환하십시오.

기본 WordPress 단축 코드

단축 코드는 일반적으로 테마와 플러그인으로 관리됩니다. 각 개발자는 자체적으로 단축 코드를 등록하게 되므로 각각 다릅니다. 숏코드가 하는 일, 매개변수 및 기능은 무엇이며 사용 중인 특정 플러그인과 테마에 따라 다릅니다.

예를 들어, Google 지도에 위치를 표시하는 데 도움이 되는 플러그인에는 [[map]] 단축 코드가 있을 수 있으며, 구독 양식을 표시하는 플러그인에는 [[form]] 등이 사용됩니다.

제품마다 다르므로 테마 및 플러그인에 대한 설명과 설명서를 확인하여 특정 사용법에 대해 자세히 알아보세요.

그러나 WordPress에는 추가 확장을 설치하지 않고도 사용할 수 있는 기본 단축 코드 세트가 함께 제공됩니다. 기본적으로 다음은 작업할 수 있는 단축 코드입니다.

  • [오디오] – 오디오 파일 포함
  • [캡션] – 콘텐츠 주위에 캡션을 감쌉니다.
  • [갤러리] – 이미지 갤러리 표시
  • [재생 목록] – 오디오 및 비디오 파일 모음 표시
  • [비디오] – 비디오 파일 포함

단축 코드 이스케이프(짧은 코드의 텍스트를 실행하지 않고 표시)

경우에 따라 단축 코드를 실행하는 대신 표시하는 텍스트를 표시할 수 있습니다. 텍스트 편집기와 시각적 편집기 모두에 단축 코드를 추가하려고 하면 두 경우 모두 실행되었음을 알 수 있습니다.

단축 코드의 텍스트를 표시하려면 이중 대괄호를 사용하십시오. [[shortcode]]

시작 및 종료 태그가 있는 단축 코드를 표시하려면 첫 번째와 마지막 이중 괄호만 사용하세요. [[maps]New York, USA[/maps]]

텍스트 편집기에서 작업할 때 대괄호를 해당 코드로 바꿀 수도 있습니다. 따라서 "["대신 "["를 사용하고 "]"대신 "]"를 사용할 수 있습니다. 예: [단축코드&#93 ; 실행하지 않고 단축 코드도 표시합니다.

간단한 단축 코드를 만드는 방법

매일 워드프레스에 글을 쓰다보면 스스로를 되풀이하게 될 때도 있고, 무언가를 계속해서 입력해야 할 때도 있습니다. 그것이 웹사이트 URL이든, 긴 문장이든, 아니면 처음부터 계속해서 작성하는 HTML 코드이든 상관없습니다. 이에 대한 단축 코드 작성을 고려해야 합니다.

그리고 이 간단한 기능을 사용하면 프로그래머가 될 필요도 없고 간단한 작업을 위해 프로그래머를 고용할 필요도 없습니다. 다음 몇 단계에 따라 사용자 정의 단축 코드를 만드십시오.

  1. Appearance -> Editor 메뉴에서 function.php 파일을 엽니다.
  2. 파일 끝에 다음 코드를 배치합니다.
 함수 fsg_shortURL() {
반환 'http://www.firstsiteguide.com';
}
add_shortcode('fsg', 'fsg_shortURL');
  1. 텍스트 편집기로 이동하여 [fsg] 를 입력하여 단축 코드 대신 URL을 가져옵니다.

그렇게 어렵지는 않았죠?

고급 예: 이미지 단축 코드 추가

functions.php에 다음 코드를 배치하여 사용자 정의 너비 및 높이 속성을 가진 이미지를 배치하기 위한 단축 코드를 생성할 수 있습니다.

  1. functions.php 파일로 이동
  2. 다음 코드를 붙여넣습니다.
 함수 img_shortcode( $atts , $content = null ) {

	추출( shortcode_atts(
		정렬(
			'너비' => '',
			'높이' => '',
		), $atts )
	);
반품 '';
}
add_shortcode( 'img', 'img_shortcode' );
  1. 텍스트 편집기 열기:

여기서 [img width='x' height='y'] http://… [/img] 단축 코드를 사용할 수 있습니다. 여기서 "x"와 "y"는 너비와 높이를 픽셀 단위로 나타내는 숫자입니다.

필요한 경우 다른 이미지 속성을 쉽게 추가할 수 있습니다. W3 Schools의 모든 이미지 속성 목록을 확인하십시오.

텍스트 위젯에서 단축 코드를 사용하는 방법

2017년 11월 15일에 출시된 WordPress 버전 4.9에서는 단축 코드가 텍스트 위젯에서 자동으로 작동합니다. 그러나 여전히 이전 버전의 WordPress를 사용하고 있다면 튜토리얼의 이 부분이 결과를 얻는 데 도움이 될 것입니다.

단축 코드에는 WordPress 웹 사이트에 추가할 수 있는 다양한 기능이 포함될 수 있습니다. 직접 만들거나 테마 또는 방금 설치한 플러그인과 함께 제공되었는지 여부에 관계없이 아마도 항상 단축 코드를 사용하게 될 것입니다. 실제로 시간을 절약하고 이점을 얻을 수 있으므로 단축 코드를 사용하지 않을 이유가 없습니다.

WordPress 웹 사이트 구축을 막 시작했다면 포스트 편집기에서만 단축 코드를 사용했을 수 있습니다. 그러나 사실은 거의 모든 곳에서 단축 코드를 사용할 수 있습니다 .

예를 들어 5sec Google Maps PRO 플러그인을 사용하여 번호가 없는 핀이 있는 지도를 쉽게 만들 수 있는 경우 단축 코드를 통해 텍스트 위젯에 직접 지도를 삽입하고 단일 위치 대신 사이드바에 위치를 표시할 수 있습니다. 우편. 그러나 테마가 위젯의 단축 코드를 지원하지 않는 경우 이 기능을 직접 활성화해야 하며 이것이 이 기사에서 보여드릴 것입니다.

PHP 파일에서 단축 코드를 사용해야 하는 경우(예: header.php 파일에서 코드를 실행하고 헤더가 있는 곳에서 단축 코드를 실행하려는 경우) 코드를 둘러싸면 쉽게 수행할 수 있습니다. . 그러나 위에서 언급한 예와 같이 텍스트 위젯에서 단축 코드를 사용하려고 시도했다면, 그것이 작동하지 않고 위젯이 컨텐츠 대신 단축 코드를 표시했기 때문에 실망하게 되었습니다. 테마에 이미 기능이 등록되어 있지 않다면 직접 활성화해야 합니다.

따라서 텍스트 위젯에 단축 코드를 넣고 실행하려면 걱정하지 마십시오. 몇 초 만에 완료할 수 있습니다.

  1. 함수.php를 엽니다.
  2. 다음 두 줄을 복사하여 붙여넣습니다.
 add_filter( 'widget_text', 'shortcode_unautop');
add_filter( 'widget_text', 'do_shortcode');
  1. 변경 사항을 저장하다

실제로는 단축 코드가 작동하도록 하는 두 번째 줄만 사용하는 것으로 충분하지만, 위젯의 텍스트 형식을 지정하여 무의식적으로 줄 바꿈을 만드는 WordPress의 단락 및 구분 태그 자동 삽입을 피하기 위해 첫 번째 줄을 원할 것입니다. . 별도의 줄에 단축 코드를 입력하는 경우를 대비하여 unautop 은 해당 단락 태그를 제거하고 단축 코드는 매력처럼 작동합니다.

이제 모양 -> 위젯으로 이동하여 원하는 위치로 텍스트 위젯을 드래그할 수 있습니다. 이 모든 후에 텍스트 위젯(물론 사이트에 등록되어 있음)에 직접 단축 코드를 작성하면 포스트 편집기에 입력한 것처럼 실행됩니다.

마찬가지로 텍스트 위젯에서 PHP 코드를 실행할 수 있습니다. 충분히 쉬웠죠? 단축 코드를 즐기십시오.

숏코드는 어디에나 있다

WordPress 블로그를 막 시작하는 경우 단축 코드가 중복되어 이해하기 어려울 수 있습니다. 대부분의 경우 플러그인에서 제공하는 사용자 친화적인 인터페이스를 사용하여 단축 코드를 피할 수 있습니다. 그러나 블로그에 더 많이 참여하고 더 많은 플러그인을 사용하기 시작하면 단축 코드의 진정한 힘을 이해하게 될 것입니다.

그것들을 사용하는 것은 일상이 될 것이며, 당신이 만드는 모든 새로운 포스트에 대괄호를 쓰는 것에 금세 익숙해질 것입니다. 따라서 몇 분 정도 시간을 내어 이 문서를 사용하여 기본 사항을 배우십시오.