WordPress에서 단축 코드를 만드는 방법

년부터 파씨 남자 | 워드 프레스 자습서

WordPress에서 단축 코드를 만드는 방법을 배우고 싶습니까?

WordPress에서 단축 코드를 만드는 방법을 배우는 것은 게시물과 페이지를 사용자 정의하는 효과적인 방법이 될 수 있습니다. 그러나 프로세스가 처음인 경우 웹 사이트에서 이러한 기능을 사용하는 방법을 파악하기 어려울 수 있습니다.

그래서 시작하는 데 도움이 되는 가이드를 마련했습니다. 숏코드의 작동 방식과 이를 효과적으로 적용하는 방법을 살펴봄으로써 추가 플러그인 없이도 원하는 대로 콘텐츠를 사용자 정의할 수 있습니다.

이 기사에서는 WordPress 단축 코드가 무엇이고 왜 사용을 고려해야 하는지에 대해 설명합니다. 그럼 직접 만드는 방법을 알려드리겠습니다.

그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

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

WordPress 단축 코드는 게시물이나 페이지에 요소를 빠르게 포함할 수 있는 바로 가기 역할을 합니다. 일반적으로 대괄호로 묶인 한 줄의 코드입니다. 예를 들어 :

[exemplecodehortcode]

이 코드는 웹사이트의 프론트 엔드에 미리 결정된 기능을 표시합니다.

워드프레스(WordPress) 처음 도입된 단축 코드 의 출시와 함께 단축 코드 API. 이를 통해 사용자는 게시물과 페이지에 다음과 같은 매력적인 요소를 쉽게 추가할 수 있습니다. Google지도 또는 Facebook "좋아요" 버튼.

워드프레스에 존재 기본t 여섯 개의 단축 코드  :

  • 표제: 콘텐츠 주위에 캡션 둘러싸기
  • gallery : 이미지 갤러리를 표시합니다.
  • 오디오: 오디오 파일 삽입 및 재생
  • 비디오 : 동영상 파일 삽입 및 재생
  • 재생 목록 : 오디오 또는 비디오 파일 모음을 표시합니다.
  • 포함 : 인라인 요소를 래핑합니다.

또한 두 가지 기본 유형의 단축 코드 서식을 사용할 수 있습니다. self-closing et enclosing.

단축 코드 self-closing 스스로 설 수 있으며 닫는 태그가 필요하지 않습니다.

한편, enclosing 편집하려는 콘텐츠를 둘러싸고 태그를 수동으로 닫으십시오. 예를 들어 태그 사이에 URL을 래핑하여 YouTube 동영상을 삽입할 수 있습니다. embed et /embed :

워드프레스에서 숏코드 만들기

예를 들어 다음과 같은 결과가 생성됩니다.

워드프레스에서 숏코드 만들기

일부 최고의 워드 프레스 플러그인 자체 단축 코드와 함께 제공됩니다. 예를 들어, WP 양식 et 문의 양식 7 빠르게 삽입할 수 있는 단축 코드가 있습니다. 연락처 양식 게시물이나 페이지에서. 다음과 같은 플러그인을 사용할 수도 있습니다. 최대 버튼 웹사이트에서 원하는 위치에 버튼 단축 코드를 추가합니다.

WordPress 단축 코드 사용을 고려해야 하는 이유는 무엇입니까?

WordPress 단축 코드를 사용할 수 있는 데는 여러 가지 이유가 있습니다. 예를 들어, HTML로 긴 코드를 배우고 작성하는 것보다 쉽고 빠릅니다. 또한 콘텐츠를 깨끗하고 액세스 가능한 상태로 유지하는 데 도움이 됩니다.

단축 코드를 사용하여 반복적으로 사용하는 특정 기능을 자동화할 수 있습니다. 예를 들어 버튼을 사용하는 경우 클릭 유도문안(CTA) 각 기사에서 전용 단축 코드를 준비하는 것이 빠르고 편리한 솔루션이 될 수 있습니다.

라고 언급해야 합니다. 구텐베르크 편집자 단축 코드를 사용하여 동일한 방식으로 작동합니다. WordPress 사용자는 블록을 사용하여 여러 대화형 기능을 추가할 수 있습니다.

워드프레스에서 숏코드 만들기

이러한 방법은 UI에 바로 콘텐츠를 추가할 수 있기 때문에 훨씬 더 초보자에게 친숙합니다. 그러나 WordPress 블록 편집기는 여전히 제공하는 것이 제한적입니다. 다행히도 블록이 함께 제공됩니다. 단축 코드, 페이지에 맞춤 콘텐츠를 추가할 수 있습니다.

WordPress에서 단축 코드를 만드는 방법

이미 코딩 지식이 있는 경우 사용자 지정 단축 코드를 만들 수 있습니다. 이를 통해 웹사이트의 모양과 기능을 완전히 제어할 수 있습니다.

사용자 지정 WordPress 단축 코드를 만드는 방법을 살펴보겠습니다. 이 자습서에서는 기사에 대한 소셜 미디어 링크를 예로 추가합니다.

1단계 – 새 테마 파일 만들기

시작하기 전에 다음을 수행하는 것이 좋습니다. WordPress 웹 사이트를 완전히 백업하십시오.. 또한 파일 외부에 사용자 정의 단축 코드에 대한 별도의 파일을 생성해야 합니다.  functions.php 당신의 워드 프레스 테마. 이것은 문제가 발생하는 경우 대체 솔루션을 제공합니다.

클라이언트를 사용할 수 있습니다 FTP (파일 전송 프로토콜) 같은 FileZilla의 웹사이트의 테마 파일에 액세스합니다. 웹사이트에 로그인한 후 다음으로 이동합니다. wp-content> 테마 현재 테마 폴더를 찾습니다. 이 예에서는 올빼미 프레스:

워드프레스에서 숏코드 만들기

폴더 열기 워드 프레스 테마, 그것을 마우스 오른쪽 버튼으로 클릭하고 누르십시오 새 파일 만들기.

새 파일 이름 지정 사용자 정의 단축 코드.php 다음을 클릭합니다 OK. 그런 다음 마우스 오른쪽 버튼을 클릭하고 옵션을 선택하여 편집할 수 있습니다. 보기/편집 :

워드프레스에서 숏코드 만들기

그러면 기본 텍스트 편집기에서 파일이 열립니다. 그런 다음 다음 코드 블록을 추가하기만 하면 됩니다.

<?php ?>

이렇게 하면 새 파일이 WordPress가 구축된 스크립팅 언어인 PHP로 해석됩니다.

그런 다음 변경 사항을 저장하고 파일을 닫을 수 있습니다. 다음 상자를 선택하여 서버에서 업데이트되고 웹사이트에 적용되는지 확인하십시오.

그런 다음 파일을 엽니다. functions.php 동일한 테마 폴더에서 문서 맨 아래에 다음 코드 줄을 추가합니다.

include('shortcodes-personnalises.php');

이것은 시스템에 파일에 대한 모든 변경 사항을 포함하도록 지시합니다. 사용자 정의 단축 코드.php 에 functions.php 당신이 그들을 분리하는 동안. 준비가 되면 변경 사항을 저장하고 파일을 닫습니다.

2단계 - 단축 코드 함수 생성

다음으로 수행할 작업을 지시하는 단축 코드 함수를 생성해야 합니다. 옵션을 다시 선택하십시오 보기/편집 당신의 파일 사용자 정의 단축 코드.php. 다음 코드 스니펫을 사용하여 함수를 후크할 작업을 추가합니다.

function subscribe_link(){
    return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
    }

다음으로 후크 작업이 활성화될 때 실행할 콜백 함수를 추가해야 합니다. 위에서 언급한 코드 바로 뒤에 다음 코드 줄을 추가하면 WordPress에 함수가 단축 코드임을 알릴 것입니다.

add_shortcode('sabonner', 'subscribe_link');

함수를 사용하여 단축 코드를 만들 때 add_shortcode, 단축 코드 태그 " ($tag) " 및 해당 기능 후크 " ($func) 바로 가기가 사용될 때마다 실행됩니다.

즉, shortcode 태그가 [subscribe]인 경우 후크는 '구독_링크' 방문자를 제공된 URL로 리디렉션합니다.

따라서 파일에서 사용하는 전체 코드 shortcodes-personnalises.php 다음과 같이 보일 것입니다:

워드프레스에서 숏코드 만들기

태그 이름을 지정할 때 밑줄을 사용할 수 있지만 소문자만 사용해야 합니다. 또한 중요하다 하이픈 사용을 피하십시오, 다른 단축 코드를 방해할 수 있습니다.

3단계 – 웹사이트에 자동 종료 단축 코드 추가

이제 WordPress 사이트에서 초기 코드를 자동 종료 단축 코드로 테스트할 수 있습니다. WordPress 블록 편집기를 사용하여 [subscribe] 태그를 게시물에 직접 삽입할 수 있습니다.

워드프레스에서 숏코드 만들기

그러면 웹사이트 방문자에게 다음 콘텐츠가 표시됩니다.

이 단축 코드에 만족하면 다른 작업을 수행할 필요가 없습니다. 그러나 사용자 지정하려는 경우 다음 단계로 건너뛸 수 있습니다.

4단계 - 단축 코드에 매개변수 추가

단축 코드를 조정할 수 있습니다 "구독하다" 다른 소셜 미디어 링크를 표시하는 추가 기능. 매개변수를 추가하여 URL을 수정하면 됩니다.

붓다 관리 속성 추가, 파일을 열어야 합니다. 사용자 정의 단축 코드.php 다음 코드를 추가하십시오.

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');

이렇게 하면 단축 코드 태그의 링크를 사용자 지정하여 Gutenberg 편집기에 추가할 수 있습니다. 파일의 이전 코드 위에 붙여넣을 수 있습니다. 사용자 정의 단축 코드.php. 다음과 같이 표시되어야 합니다.

워드프레스에서 숏코드 만들기

추가 shortcode_atts() 함수 사용자 속성을 알려진 모든 속성과 결합하고 누락된 데이터는 기본값으로 대체됩니다. 준비가 되면 변경 사항을 저장하고 파일을 닫습니다.

5단계 - 설정 테스트

이제 WordPress 블록 편집기에서 업데이트된 단축 코드를 테스트할 수 있습니다. 이 예에서는 다음 단축 코드를 사용하여 Twitter 및 Facebook 링크를 테스트하고 있습니다.

[구독링크='https://www.facebook.com/live.blogpascher']페이스북[/구독]

[구독링크='https://twitter.com/BlogPasCher']트위터[/구독]

워드프레스에서 숏코드 만들기

그러면 프런트 엔드에서 다음과 같은 결과가 생성됩니다.

이 자동 닫힘 단축 코드는 방문자에게 소셜 프로필의 직접 URL을 표시합니다. 그러나 이 기능이 약간 세련되게 보이기를 원할 수 있습니다.

예를 들어 사용자가 클릭하려고 할 때 표시되는 앵커 텍스트를 완전히 사용자 지정할 수 있는 첨부된 버전을 만들 수 있습니다. 다음 단계에서 이를 수행하는 방법을 보여드리겠습니다.

6단계 – 둘러싸는 단축 코드 생성

둘러싸는 단축 코드는 이전 자동 닫기 예제와 동일한 형식으로 지정됩니다. 그러나 함수에 대한 추가 매개변수가 포함됩니다.

먼저 다음을 추가해야 합니다. $content = null, 이 기능을 둘러싸는 단축 코드로 식별합니다. 그런 다음 추가할 수 있습니다. do_shortcode WordPress에서 콘텐츠를 검색하여 단축 코드를 찾습니다.

파일에서 사용자 정의 단축 코드.php, 둘러싸는 새 단축 코드를 추가하십시오.

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);
    return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');

준비가 되면 파일 사용자 정의 단축 코드.php 다음과 같이 보여야 합니다.

워드프레스에서 숏코드 만들기

이전 코드에는 속성이 있습니다. " 스타일 " 추가로 앵커 텍스트를 파란색으로 변경합니다. 완료되면 변경 사항을 저장하는 것을 잊지 마십시오.

7단계 – 웹사이트에 포함하는 단축 코드 추가

이제 WordPress 블록 편집기에 단축 코드를 삽입하여 최종 결과를 볼 수 있습니다.

알다시피 이 래퍼 단축 코드를 사용하여 방문자에게 표시되는 앵커 텍스트와 소셜 미디어 페이지 URL을 쉽게 변경할 수 있습니다. 이 경우 우리가 선택한 "페이스북" et "트위터" :

워드프레스에서 숏코드 만들기

거기 ! 이제 페이지와 게시물의 구독 링크에 대한 사용자 정의 단축 코드를 만들었습니다. 위에서 언급한 모든 단계는 WordPress 기능을 사용하여 모든 종류의 다른 요소를 생성하도록 수정할 수 있습니다. 단축 코드.

단축 코드를 사용하면 WordPress 웹 사이트에 추가 기능을 훨씬 쉽게 추가할 수 있습니다. 이를 사용하여 기존 콘텐츠를 개인화하고 연락처 양식, 이미지 갤러리 또는 구독 링크와 같은 대화형 기능을 추가할 수 있습니다.

다른 추천 자료

또한 귀하의 웹 사이트 및 블로그에 대한 이해와 통제를 위해 아래 자료를 참조하십시오.

결론

이 기사에서는 WordPress에서 자신의 단축 코드를 만드는 방법을 배웠습니다. 우려 사항이나 제안 사항이 있으면 commentaires.

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

욕실 교환, 이 기사를 다른 소셜 네트워크에서 공유하십시오.   

...  

포스터 르 논평

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.