WordPress 단축 코드에 대한 모든 것

WordPress 테마로 작업한 적이 있다면 아마도 WordPress 단축 코드를 발견했을 것입니다. 다음과 약간 비슷합니다.

 [button type="twitter"]

단축 코드가 무엇인지, 그리고 어떻게 작동하는지 이해했는지 여부는 다른 문제입니다! 테마 작성자는 단축 코드를 광범위하게 사용하지만 때로는 사용자가 실제로는 매우 혼란스러울 때 자신이 무엇을 알고 어떻게 작동하는지 알 것이라고 '가정'합니다!

좋은 소식은 단축 코드가 이해하기 쉽고 사용하기 쉽다는 것입니다. 이 기사에서는 단축 코드를 살펴보고 자신만의 단축 코드를 구축하는 방법을 살펴보기 전에 단축 코드를 최대한 활용하는 방법을 알아보겠습니다!

뛰어 들어가자!

WordPress 단축 코드는 무엇입니까?

워드프레스는 2008년 워드프레스 v2.5를 출시했을 때 단축 코드를 도입했으며 그 이후로 대부분의 테마와 플러그인에서 광범위하게 사용되었습니다.

그렇다면 단축 코드는 정확히 무엇입니까? 간단히 말해서(죄송합니다. 거부할 수 없습니다), 단축 코드는 기능이나 기능을 삽입하기 위해 웹사이트의 거의 모든 곳에서 사용할 수 있는 약간의 코드입니다. 따라서 HTML을 사용하여 소셜 미디어 아이콘을 힘들게 코딩하는 대신 특정 단축 코드를 삽입할 때마다 WordPress에 소셜 미디어 아이콘을 삽입하도록 '알려주는' 단축 코드를 삽입할 수 있습니다. (이 예에서) 소셜 미디어 아이콘의 스타일과 기능은 테마 개발자가 미리 정의하므로 프로그래밍 관점에서 모든 무거운 작업이 수행되었습니다.

따라서 블로그 게시물 하단에 Facebook 아이콘을 추가하고 싶을 수 있습니다. 이것을 수동으로 삽입하는 대신, 하이퍼링크를 추가하고, 아이콘 크기를 업데이트하는 등의 작업을 수행하는 대신 다음과 같이 보일 수 있는 테마 작성자가 '사전 프로그래밍'한 단축 코드를 입력하기만 하면 됩니다.

 social icon="facebook"]

이 시점에서 자신이 고안한 단축 코드를 추가하고 작동할 것으로 기대할 수 없다는 점을 반복하는 것이 중요합니다. 테마에 옵션으로 추가해야 합니다. 일반적으로 테마에는 미리 만들어진 많은 단축 코드가 함께 제공되며 테마 지침에는 선택할 수 있는 사용 가능한 단축 코드 목록이 포함됩니다.

단축 코드는 개발자가 아닌 사람들이 코드를 작성하지 않고도 다양한 유형의 콘텐츠를 표시할 수 있는 훌륭한 단축키이자 개발자에게도 시간을 절약할 수 있는 도구입니다.

WordPress 단축 코드로 무엇을 할 수 있습니까?

단축 코드는 클릭 유도문안(CTA) 버튼, 동적 광고 상자, 문의 양식, 이미지 갤러리, 슬라이더 등 다양한 콘텐츠를 삽입하는 데 사용됩니다. 그러나 위에서 언급한 대로 단축 코드 옵션은 무엇입니까? 사용 가능한 테마 및 플러그인에 따라 다릅니다.

Contact Form 7 플러그인을 사용한 단축 코드 예

단축 코드를 사용하는 것은 테마뿐만이 아닙니다. 오늘날 사용 가능한 가장 인기 있는 Contact Form 플러그인 중 하나인 Contact Form 7은 단축 코드를 사용하여 사용자가 원하는 위치에 빠르고 쉽게 연락처 양식을 포함할 수 있도록 합니다.

이렇게 하려면 Contact Form 7을 설치한 후 웹사이트의 페이지나 게시물에 양식을 추가하기 위해 다음과 같이 하기만 하면 됩니다.

1단계:

메뉴 연락처 > 문의 양식으로 이동하여 새 양식을 만들거나 플러그인과 함께 제공되는 기존 양식을 사용하십시오.

양식에 해당하는 [contact-form-7 title="Contact form 1"] 단축 코드를 복사합니다.

2단계:

아래와 같이 양식을 표시할 위치에 단축 코드를 붙여넣습니다.

페이지를 저장하면 다음과 같이 표시됩니다.

그리고 그게 다야! 단축 코드를 사용하여 웹사이트에 연락처 양식을 삽입하는 데 성공했습니다. 보시다시피 단축 코드는 사용하기가 매우 쉽고 복잡하고 시간이 많이 소요될 수 있는 작업의 속도를 높일 수 있습니다.

기본 WordPress 단축 코드 사용

아마도 사용하게 될 대부분의 단축 코드는 테마나 플러그인을 설치한 결과로 도입될 것입니다. 그러나 WordPress 자체에는 사용할 수 있는 소수의 '기본' 단축 코드가 있습니다. 여기에는 다음이 포함됩니다.

• 오디오
• 표제
• 포함시키다
• 갤러리
• 재생 목록
• 동영상

이러한 단축 코드는 사이트 전체에서 오디오 플레이어와 같은 콘텐츠 범위를 추가하는 데 사용할 수 있습니다. 아래 이미지에서 Footer 위젯에서 사용된 것을 보여줍니다.

이러한 단축 코드를 더 자세히 사용하는 방법을 알아보려면 이에 대한 WordPress 지원 문서를 확인하세요.

그렇다면 WordPress 또는 사용 중인 테마/플러그인이 특정 목적에 필요한 단축 코드를 제공하지 않을 때 어떻게 하시겠습니까? 쉽게... 나만의 것을 만드세요!

나만의 WordPress 단축 코드 만들기

WordPress에는 자신의 단축 코드를 비교적 쉽게 개발하는 데 활용할 수 있는 단축 코드 API가 있습니다. 이제 자신의 단축 코드를 만드는 데 필요한 기본 단계를 실행해 보겠습니다.

1단계:

이 예에서는 독자가 클릭하여 문의 양식으로 리디렉션할 수 있는 CTA(행동 유도) 버튼을 만들 것입니다.

정리를 돕기 위해 모든 단축 코드를 별도의 파일에 보관하는 것이 좋습니다(기존 파일에 코드를 추가하는 것보다). 이렇게 하려면 테마의 functions.php 파일과 같은 폴더 아래에 비어 있는 새 파일을 만들고 이름을 my-shortcodes.php 와 같이 지정합니다. 그런 다음 이 파일을 다음과 같이 functions.php 파일에 포함합니다.

 include('my-shortcodes.php');

방금 말했듯이 단축 코드를 별도의 파일에 생성하는 것이 좋지만 이 기사의 목적을 위해 바로 진행하여 예제를 유지하는 데 도움이 되도록 새 코드를 functions.php 파일에 직접 추가할 것입니다. 최대한 명확하게.

wp-includes/shortcodes.php 파일에 도입된 add_shortcode 함수를 사용할 것입니다. 이 함수에는 단축 코드 태그와 콜백 함수라는 두 개의 매개변수가 필요합니다.

 add_shortcode( string $tag, callable $callback )

2단계:

다음은 functions.php 파일에 넣을 수 있는 코드입니다.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

태그 및 함수 이름에는 소문자와 밑줄만 포함됩니다.

'THE_CONTACT_FORM_URL'을 사용자를 리디렉션하려는 연락처 양식의 URL로 바꾸는 것을 잊지 마십시오.

또한 선택적으로 style.css 파일에서 이 CSS 코드를 사용하여 버튼을 시각적으로 더 매력적으로 보이게 할 수 있습니다.

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

3단계:

웹사이트 콘텐츠에 단축 코드를 표시하는 것은 다른 단축 코드와 마찬가지로 수행됩니다. 이 예에서 단축 코드는 [my_cta_button] 입니다. 이것을 게시물 또는 페이지에 추가하면 페이지를 볼 때 다음과 같은 내용이 표시되어야 합니다.

이 예제는 우리가 제공한 PHP 코드에 미리 정의된 콘텐츠를 출력합니다. 필요한 경우 관리자가 단축 코드 출력을 사용자 지정하도록 허용하는 방법을 살펴보겠습니다.

사용자 속성을 허용하는 단축 코드

사용자가 편집할 수 있는 속성이 있는 단축 코드를 만들려면 사용자가 콜백 함수 내에서 변경할 수 있도록 허용하려는 속성의 배열을 정의해야 합니다. 예를 들어 버튼의 기본 제목과 URL을 변경하는 기능을 원할 수 있습니다.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

위의 코드에서 우리는 사용자 정의 속성을 알려진 속성과 결합하기 위해 shortcode_atts 함수를 사용했습니다. 이렇게 하면 필요한 모든 CTA 버튼에 대해 다른 단축 코드 기능을 만들어야 하지만 사용자가 매번 지정하는 곳으로 리디렉션되는 기능만 만들어야 합니다.

이 코드의 사용은 다음과 같이 지정해야 합니다. [my_cta_button title='My Custom Title' url='MY_URL']

템플릿 파일에 단축 코드 추가

개발자의 관점에서 해당 템플릿 파일에서 호출하여 웹사이트의 미리 정의된 위치에 단축 코드를 강제로 포함하는 빠른 방법도 있습니다. 예를 들어 CTA 버튼이 모든 단일 게시물 또는 페이지의 하단 섹션에 표시되도록 하려면 단일 템플릿을 편집하고 do_shortcode 함수를 사용할 수 있습니다. Twenty Twenty 테마에서 singular.php 파일을 편집하고 메인 div 컨테이너를 닫을 때 다음 라인을 삽입했습니다.

 <?php echo do_shortcode('[my_cta_button]'); ?>

결과는 게시물 콘텐츠 아래 및 바닥글 위젯 앞에 표시됩니다.

결론

이 기사를 마무리하기 전에 테마 또는 플러그인에서 제공하는 단축 코드를 사용하고 나중에 해당 테마/플러그인을 비활성화하면 해당 단축 코드가 작동을 멈춥니다. 웹사이트의 프론트 엔드).

그 작은 주의 사항으로 단축 코드는 웹 사이트 구축에 있어 정말 유용한 기능입니다. 그것들은 WordPress에서 널리 사용되며 아직 사용하지 않았다면 지금이 단축 코드를 다시 살펴볼 때입니다!