WordPress 블록 테마의 스타일링 버튼

잠시 뒤, Ganesh Dahal은 CSS-Tricks에 게시물을 작성했습니다. WordPress 블록 및 요소에 CSS 상자 그림자를 추가하는 것에 대해 묻는 트윗에 응답합니다. 블록 편집기 및 사이트 편집기 UI에서 직접 사물에 그림자를 적용하기 위한 컨트롤을 제공하는 WordPress 6.1에 포함된 새로운 기능을 활용하는 훌륭한 기능이 많이 있습니다.

Ganesh는 해당 게시물의 버튼 요소에 대해 간략하게 언급했습니다. 나는 그것을 선택하고 WordPress 블록 테마의 스타일 버튼에 대한 접근 방식에 대해 더 깊이 알고 싶습니다. 구체적으로, 우리는 새로운 theme.json 파일을 만들고 스키마의 버튼 스타일 지정에 대한 다양한 접근 방식을 분석합니다.

왜 버튼입니까? 좋은 질문입니다. 시작하겠습니다.

다양한 유형의 버튼

WordPress 블록 편집기 컨텍스트에서 버튼에 대해 이야기할 때 두 가지 다른 유형을 구분해야 합니다.

1. Buttons 블록 내부의 하위 블록
2. 다른 블록 안에 중첩된 버튼(예: Post Comments Form 블록)

이 두 블록을 모두 템플릿에 추가하면 기본적으로 모양이 동일합니다.

그러나 마크업은 매우 다릅니다.

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

보시다시피 HTML 태그 이름이 다릅니다. 일반적인 수업입니다. .wp-block-button 및 .wp-element-button — 두 버튼 사이의 일관된 스타일을 보장합니다.

우리가 CSS를 작성한다면 이 두 클래스를 목표로 삼을 것입니다. 하지만 아시다시피 WordPress 블록 테마는 스타일을 관리하는 방식이 다릅니다. theme.json 파일. Ganesh는 이것을 아주 자세하게 다루었습니다., 그의 기사를 읽어보는 것이 좋습니다.

그래서 우리는 어떻게 버튼 스타일을 정의합니까? theme.json 실제 CSS를 작성하지 않고? 함께 합시다.

기본 스타일 만들기

theme.json 속성:값 쌍으로 작성된 구조화된 스키마 집합입니다. 최상위 속성은 "섹션"이라고 하며 styles 부분. 이것은 모든 스타일링 지침이 있는 곳입니다.

우리는 특히 다음에 초점을 맞출 것입니다. elements FBI 증오 범죄 보고서 styles. 이 선택기는 블록 간에 공유되는 HTML 요소를 대상으로 합니다. 이것은 우리가 작업하고 있는 기본 셸입니다.

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

그래서 우리가 해야 할 일은 button 요소입니다.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

그 button 프런트 엔드에서 버튼 요소를 마크업하는 데 사용되는 HTML 요소에 해당합니다. 이 버튼에는 독립 실행형 구성 요소(예: 버튼 블록) 또는 다른 블록 내에 중첩된 구성 요소(예: 댓글 게시 블록)의 두 가지 버튼 유형 중 하나일 수 있는 HTML 태그가 포함되어 있습니다.

각 개별 블록의 스타일을 지정하지 않고 공유 스타일을 만듭니다. 계속해서 테마의 두 가지 유형의 버튼에 대한 기본 배경 및 텍스트 색상을 변경해 보겠습니다. 거기에 color 거기에 있는 객체는 차례로 지원합니다. background 및 text 원하는 값을 설정하는 속성:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

이렇게 하면 두 버튼 유형의 색상이 변경됩니다.

DevTools를 열고 WordPress가 버튼에 대해 생성하는 CSS를 살펴보면 .wp-element-button 클래스는 우리가 정의한 스타일을 추가합니다. theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

이것이 우리의 기본 색상입니다! 다음으로 사용자가 버튼과 상호 작용할 때 시각적 피드백을 제공하려고 합니다.

대화형 버튼 스타일 구현

이 사이트는 CSS에 관한 모든 것이므로 많은 분들이 이미 링크와 버튼의 상호작용 상태에 대해 잘 알고 계실 것입니다. 우리는 할 수 있습니다 :hover 그 위에 마우스 커서를 놓고 :focus, 클릭하여 만들 수 있습니다. :active. 도대체 :visited 사용자에게 이전에 이것을 클릭했다는 시각적 표시를 제공합니다.

사람들은 CSS 의사 클래스 및 링크 또는 버튼의 상호 작용을 타겟팅하는 데 사용합니다..

CSS에서 스타일을 지정할 수 있습니다. :hover 다음과 같이 상태:

a:hover { /* Styles */
}

In theme.json, 이러한 가상 클래스로 기존 버튼 선언을 확장할 것입니다.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

이것의 "구조화된" 특성에 주목하십시오. 우리는 기본적으로 개요를 따르고 있습니다.

이제 버튼의 기본 및 대화식 스타일에 대한 완전한 정의가 있습니다. 하지만 다른 블록에 중첩된 특정 버튼의 스타일을 지정하려면 어떻게 해야 할까요?

개별 블록에 중첩된 스타일링 버튼

한 가지 예외를 제외하고 모든 버튼이 기본 스타일을 갖기를 원한다고 상상해 봅시다. Post Comment Form 블록의 제출 버튼이 파란색이기를 원합니다. 우리는 그것을 어떻게 달성할 것입니까?

이 블록은 양식, 입력, 지침 텍스트 및 버튼과 같은 움직이는 부분이 더 많기 때문에 버튼 블록보다 더 복잡합니다. 이 블록의 버튼을 대상으로 지정하려면 button 요소에 매핑되지만 Post Comment Form 블록에 적용됩니다. core/post-comments-form 요소:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

우리는 더 이상 작업하지 않습니다. elements 더 이상. 대신 내부에서 작업 중입니다. blocks 이는 실제 블록 구성을 위해 예약되어 있습니다. 반대로 버튼은 독립 실행형 블록으로도 사용할 수 있지만 블록에 중첩될 수 있으므로 전역 요소로 간주됩니다.

JSON 구조는 요소 내의 요소를 지원합니다. 따라서 button Post Comment Form 블록의 요소, 우리는 core/post-comments-form 블록 :

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

이 선택기는 특정 블록을 대상으로 할 뿐만 아니라 해당 블록에 포함된 특정 요소를 대상으로 한다는 것을 의미합니다. 이제 테마의 모든 버튼에 적용되는 기본 버튼 스타일 세트와 댓글 게시 양식 블록에 포함된 특정 버튼에 적용되는 스타일 세트가 있습니다.

결과적으로 WordPress에서 생성된 CSS에는 더 정확한 선택기가 있습니다.

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

Post Comment Form 버튼에 대해 서로 다른 대화형 스타일을 정의하려면 어떻게 해야 할까요? 기본 스타일에 대해 수행한 방식과 동일합니다. core/post-comments-form 블록 :

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

블록에 없는 버튼은 어떻습니까?

WordPress는 이러한 버튼 스타일을 출력하기 위해 올바른 클래스를 자동으로 생성하고 적용합니다. 그러나 블록 및 전체 사이트 편집을 지원하지만 "클래식" PHP 템플릿도 포함하는 "하이브리드" WordPress 테마를 사용한다면 어떨까요? 또는 사용자 지정 블록을 만들거나 버튼이 포함된 레거시 단축 코드가 있는 경우에는 어떻게 됩니까? 이 중 어느 것도 에서 처리하지 않습니다. WordPress 스타일 엔진!

걱정 마. 이러한 모든 경우에 다음을 추가합니다. .wp-element-button 템플릿, 블록 또는 쇼트코드 마크업의 클래스. 그런 다음 WordPress에서 생성된 스타일이 해당 인스턴스에 적용됩니다.

마크업을 제어할 수 없는 경우도 있습니다. 예를 들어 일부 블록 플러그인은 너무 독단적이어서 자체 스타일을 자유롭게 적용할 수 있습니다. 여기에서 일반적으로 블록 설정 패널의 "고급" 옵션으로 이동하여 클래스를 적용할 수 있습니다.

최대 포장

"CSS"를 작성하는 동안 theme.json 처음에는 어색하게 느껴질 수 있지만, 그것이 제XNUMX의 천성이 된다는 것을 알게 되었습니다. CSS와 마찬가지로 올바른 선택기를 사용하여 광범위하게 또는 매우 좁게 적용할 수 있는 제한된 수의 속성이 있습니다.

그리고 사용의 세 가지 주요 이점을 잊지 말자 theme.json:

1. 스타일은 프런트 엔드 보기와 블록 편집기 모두의 버튼에 적용됩니다.
2. 귀하의 CSS는 향후 WordPress 업데이트와 호환됩니다.
3. 생성된 스타일은 블록 테마 및 클래식 테마와 동일하게 작동합니다. 별도의 스타일시트에 아무 것도 복제할 필요가 없습니다.

당신이 사용한 적이 있다면 theme.json 당신의 프로젝트 스타일에 대한 당신의 경험과 생각을 공유해주세요. 댓글과 피드백을 기다리겠습니다!

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/