WordPress 단축 코드 이해

일정 기간 동안 WordPress를 사용해 왔다면 이미 몇 가지 단축 코드를 사용했을 것입니다.

단축 코드는 다른 방법으로는 불가능할 특별한 기능을 콘텐츠에 삽입할 수 있는 편리한 작은 스니펫입니다. 예를 들어, 많은 이미지 갤러리와 슬라이더 플러그인은 적절한 이미지가 표시되도록 원하는 위치에 콘텐츠에 간단히 삽입할 수 있는 단축 코드를 제공합니다. 단축 코드는 일반적으로 다음과 같습니다.

[example shortcode]

즉, 숏코드는 텍스트에 배치되는 모든 곳에서 특별한 일이 발생하도록 합니다.
그러나 미리 정의된 단축 코드에 국한되지 않습니다. 사용자 지정 단축 코드를 정의하여 원하는 작업을 수행할 수 있습니다! 단순하거나 복잡하거나 그 중간일 수 있습니다.

이 시리즈에서는 간단한 단축 코드로 시작하여 좀 더 복잡한(그리고 훨씬 더 유용한!) 예제까지 작업할 것입니다.

참고: 여기서는 특히 테마의 functions.php 파일에서 주로 PHP로 작업할 것입니다. 차일드 테마(또는 업데이트가 변경 사항을 덮어쓸 염려 없이 편집할 수 있는 사용자 지정/스타터 테마)을 사용하지 않는 경우 시작하기 전에 차일드 테마를 생성하는 것이 좋습니다.

또한 참고: 이 게시물을 살펴보는 데 PHP 지식이 필요하지는 않지만 최소한 기본 사항만 알고 있으면 도움이 됩니다. 여기에 포함된 코드는 매우 간단하며 복사 및 사용자 지정이 가능한 한 쉽게 만들려고 노력했습니다. 진행하면서 코드의 각 부분을 설명하겠지만 WordPress 테마 PHP를 완전히 처음 사용하는 경우 functions.php 파일의 잘못된 코드가 사이트를 손상시킬 수 있다는 점에 유의하세요.

유용한 간단한 쇼트코드 예제

다음과 같이 특정 작성자 정보 섹션을 게시물에 삽입하는 단축 코드가 필요하다고 가정해 보겠습니다.

WordPress 비주얼 편집기에서 상자, 이미지 및 텍스트를 생성하고 스타일을 지정하는 대신 간단한 스니펫으로 모든 것을 출력하는 단축 코드를 생성합니다!

(참고: WordPress에는 작성자 프로필을 사용하는 더 나은 방법이 있지만 페이지에 특정 콘텐츠 블록을 배치하기 위해 단축 코드를 사용하는 것이 얼마나 쉬운지 잘 보여주기 때문에 이 예를 고수하고 있습니다.)

1단계: 테마의 functions.php 파일에 단축 코드 추가

add_shortcode 기능을 사용하여 쇼트코드에 이름을 지정하고, 쇼트코드가 사용될 때마다 수행해야 할 작업을 WordPress에 알립니다. 테마의 functions.php 파일에 다음 행을 추가하십시오.

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

functions.php 내부의 위치는 중요하지 않지만 충돌을 피하기 위해 맨 끝에 두는 것이 좋습니다. (그러나 파일이 닫는 ?> 태그로 끝나는 경우에는 그 뒤가 아니라 그 바로 앞에 와야 합니다.)

더 진행하기 전에 이 줄을 조금 분해하여 여기서 실제로 무슨 일이 일어나고 있는지 이해하겠습니다. 괄호 안의 두 비트 텍스트 또는 "인수"는 사실 특별하지 않습니다. 그들은 단지 이름입니다. 각각의 의미를 살펴보겠습니다.

1. 첫 번째 인수: 이 경우 author_bio – 워드프레스에 쇼트코드의 실제 이름을 알려줍니다. 단축 코드를 사용하기 위해 사용자가 대괄호 안에 입력할 수 있는 텍스트입니다. 따라서 이 코드가 작성된 대로 [author_bio] 작성자 약력 상자를 트리거하는 단축 코드가 됩니다.
   이 텍스트는 무엇이든 될 수 있지만 항상 고유하도록 노력하는 것이 가장 좋습니다. 이렇게 하면 설치된 다른 플러그인 또는 테마의 단축 코드 이름이 다른 사람의 단축 코드 이름과 충돌할 위험이 없습니다.
2. 두 번째 인수: 이 경우 create_author_bio – WordPress가 이 단축 코드를 사용할 때마다 실행해야 하는 실제 PHP 함수를 가리킵니다. 다음 단계에서 해당 함수를 생성합니다. 지금 당장은 WordPress에 이름이 무엇인지 알려주는 것입니다. (이 이름은 충돌을 피하기 위해 고유해야 합니다.)

따라서 도움이 된다면 다음과 같은 코드를 생각해 볼 수 있습니다.

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

보다 핵심적인 세부 사항에 관심이 있다면 add_shortcode Codex 항목을 확인하세요.

2단계: 단축 코드를 처리하는 함수 생성

이제 방금 명명한 함수를 실제로 만들어야 합니다!

마지막 단계에서 WordPress에 함수 이름이 create_author_bio라고 말했으므로 새 함수를 추가하면 코드가 다음과 같아야 합니다.

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

이 함수는 실제로 아직 아무 것도 수행하지 않는다는 것을 알 수 있습니다. 그 안에 있는 모든 것은 주석입니다. 다음 단계에서 처리하겠습니다. 지금은 여기에 실제로 두 부분만 있다는 점을 지적하고 싶습니다. 단축 코드 등록과 사용될 때마다 발생하는 기능입니다. WordPress PHP는 위협적으로 보일 수 있지만 정말 간단합니다!

참고: create_author_bio 함수가 add_shortcode 함수 뒤에 오는지 앞에 오는지는 중요하지 않습니다. 이 경우 순서는 중요하지 않습니다.

3단계: 함수가 어떤 일을 하도록 만들기

이제 남은 것은 함수가 원하는 대로 작동하도록 만드는 것입니다!

이와 같은 함수는 무엇이든 할 수 있지만, 무엇이든 결국에는 단일 값(예: 텍스트 문자열 또는 숫자)을 반환 해야 합니다. 그 값은 어떤 길이나 복잡도일 수 있지만, 함수가 반환하는 것이 무엇이든 단축 코드가 사용될 때마다 나타납니다.

우리의 목적을 위해 이것은 단순한 HTML일 것입니다. 다음은 사용자 정의 클래스가 있는 <aside> 요소 내부에 저자 이미지와 약력을 추가하는 마크업입니다(그러나 아직 아무데도 넣지 마십시오. 잠시 동안 미리 보기로 보고 있을 뿐입니다).

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

결국 우리는 첫 번째 줄에 있는 author-bio-box 클래스를 사용하여 CSS로 바이오 스타일을 지정합니다. (여러 작성자가 작성한 콘텐츠에 대해 둘 이상의 작성자 단축 코드를 추가하려는 경우를 대비하여 ID 대신 클래스를 사용합니다.) 하지만 이것은 우리가 페이지에 넣고 싶은 모든 것이 될 수 있음을 기억하십시오!

이제 우리가 해야 할 일은 단축 코드의 함수가 위의 HTML을 반환하도록 하는 것입니다!

functions.php 파일에는 PHP 함수(및 깔끔함을 위해)만 포함되어야 하므로 방금 살펴본 HTML 요소 사이의 줄 바꿈과 공백을 제거하고 문자열(작은따옴표 내부)에 넣었습니다. . 그러나 기능적으로는 위에서 본 HTML 스니펫과 동일하며 최종 PHP 코드는 다음과 같습니다.

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

우리는 PHP로 끝났습니다! 위의 최종 코드가 포함된 functions.php 파일을 저장하면 모든 작성자가 페이지나 게시물에 [author_bio] 입력하기만 하면 위의 HTML이 단축 코드 위치에 나타납니다!

또한 정말 멋진 점은 약력을 업데이트해야 하는 경우 나타나는 모든 위치를 편집할 필요가 없다는 것입니다! 대신 functions.php 파일의 코드를 편집하기만 하면 모든 곳에서 한 번에 업데이트됩니다. 깔끔하죠?

그러나 이를 최대한 활용하기 위해 바이오 상자에 특별한 스타일을 추가하고 싶을 것입니다.

4단계: 일부 CSS 추가

숏코드는 약간의 스타일링 없이는 좋지 않으니 추가해 봅시다! 사이트의 글꼴(위 이미지의 글꼴은 Fanwood Text임)과 이미 적용된 CSS 규칙에 따라 일부 값을 약간 조정해야 할 수도 있습니다. 아니면 다른 것을 시도하고 싶을 수도 있습니다!

이 CSS는 (하위) 테마의 style.css 파일에 복사할 수 있습니다. 또는 WordPress 4.7 이상(반드시 그래야 합니다!)을 실행 중인 경우 이 CSS를 사용자 지정 메뉴의 "추가 CSS" 상자에 붙여넣기만 하면 됩니다. 화면:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

이제 상황이 훨씬 좋아 보일 것입니다. 그러나 자유롭게 CSS를 사용하여 작성자 상자를 자신의 것으로 만들고 사이트에서 집처럼 느껴지도록 하십시오!

권장 사항: 기능을 "플러그 가능"하게 만드십시오.

이것은 숏코드에만 국한된 것이 아니며 코드가 작동하는 데 꼭 필요한 것은 아니지만 모범 사례이며 언급하기에 좋은 시기입니다.

먼저, PHP 작동 방식에 대한 약간의 배경 지식 :

create_author_bio 함수의 이름을 어떻게 지었는지 기억하시나요? 음, create_author_bio; 우리는 함수 이름을 우리가 원하는 대로 쉽게 지정할 수 있습니다(하지만 함수 이름이 무엇을 하는지에 대한 최소한의 힌트를 제공하는 것이 가장 좋습니다. 이것이 우리가 create_author_bio 선택한 이유입니다).

그러나 여기에 문제가 있습니다. 두 개의 PHP 함수 이름이 같은 경우 PHP는 어떤 함수가 올바른지 전혀 모르기 때문에 사이트가 로드되지 않는 치명적인 오류가 발생합니다 . PHP는 추측하지 않으므로 그냥 멈춥니다.

그리고 우리가 걱정해야 할 것은 코드만이 아닙니다. WordPress 사이트는 설치된 플러그인 및 테마에 따라 수십 또는 수백 명의 서로 다른 개발자의 코드를 사용할 수 있습니다. 같은 함수 이름을 두 번 사용하면 모든 것이 망가집니다!

그것은 나쁘고 분명히 우리는 그런 일이 절대 일어나지 않기를 원합니다.

우리는 기능을 "플러그 가능"하게 만듦으로써 그렇게 할 수 있습니다. 즉, 동일한 이름의 다른 함수가 이미 존재하는 경우 WordPress에 함수를 생성하지 말라고 지시합니다. 우아하게 단순합니다. 이 쉬운 조건문 안에 기존 코드를 래핑하기만 하면 됩니다.

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

그 조건부 if 표현식은 create_author_bio 라는 함수가 이미 존재하지 않는지 확인하기만 합니다. 지금까지 사용한 모든 PHP 코드는 { } 중괄호 사이의 해당 문 내부로 이동할 수 있습니다.

그래도 가능한 고유하게 함수 이름을 지정하는 것이 가장 좋습니다! 우리 함수를 플러그 가능하게 만드는 것은 치명적인 오류만 방지합니다. 따라서 이름 충돌이 있는 경우 단축 코드는 여전히 작동하지 않지만 적어도 사이트는 여전히 작동하고 다른 것은 손상되지 않습니다.

결론

그게 다야! 사용자 지정 작성자 약력 단축 코드를 만드는 것이 즐거웠기를 바랍니다! 따라했다면 페이지나 게시물의 아무 곳에나 [author_bio] 입력하기만 하면 코드가 나타납니다!

이 단축 코드는 페이지에 무엇이든 출력하도록 쉽게 조정할 수 있습니다. gif, HTML 및/또는 JavaScript의 사용자 지정 블록, 이미지 또는 비디오… 원하는 모든 것!

그러나이 예제는 페이지 어딘가에 단일 정적 값을 출력 해야 하는 경우에 유용 하지만 그다지 유연 하지 않습니다. 항상 정확히 같은 것을 매번 반환하며, 우리는 종종 그것보다 더 적응하기 쉽도록 단축 코드가 필요합니다.

희소식: 우리는 단축 코드의 기본 사항만 다루었으며 단축 코드는 훨씬 더 많은 기능을 수행할 수 있습니다!