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

WordPress 6.1에 소개 된 새로운 기능은 블록 편집기 및 사이트 편집기 UI에서 그림자를 직접 적용하기위한 제어를 제공하며,이 기사는 특히

파일을 사용하여 WordPress 블록 테마의 버튼을 스타일링하는 방법으로 뛰어들 것입니다.

버튼을 선택하는 이유는 무엇입니까? 이것은 좋은 질문입니다. 여기서 시작합시다. theme.json 다른 유형의 버튼 WordPress 블록 편집기의 맥락에서, 우리는 두 가지 다른 유형의 버튼을 구별해야합니다.

버튼 블록의 서브 블록.

다른 블록 내에 중첩 된 버튼 (예 : 기사 댓글 형태 블록).

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

그러나 그 마크는 매우 다릅니다

우리는 HTML 태그 이름이 다르다는 것을 알 수 있습니다. 두 버튼의 일관된 스타일을 보장하는 공통 클래스 이름 -

및

- 이는 공통 클래스 이름입니다.
1. CSS를 작성하면이 두 클래스를 대상으로합니다. 그러나 우리 모두가 알고 있듯이 WordPress 블록 테마는 다양한 스타일 관리 방법, 즉 파일을 통해 다른 스타일 관리 방법을 가지고 있습니다.
그렇다면 실제 CSS를 쓰지 않고 버튼 스타일을 어떻게 정의합니까? 함께 해보자.
2. 기본 스타일을 만듭니다

는 속성 형태로 작성된 구조화 된 패턴 세트입니다 : 값 쌍. 최상위 속성을 "섹션"이라고하며

섹션을 사용합니다. 이곳은 모든 스타일 지침이있는 곳입니다.

우리는

에 특별한주의를 기울일 것입니다. 이 선택기는 블록간에 공유되는 HTML 요소를 찾습니다. 우리가 사용하는 기본 프레임 워크는 다음과 같습니다

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

우리가해야 할 일은 버튼 요소를 정의하는 것입니다.

.wp-block-button 이 버튼은 프론트 엔드의 버튼 요소를 표시하는 데 사용되는 HTML 요소에 해당합니다. 이 버튼에는 두 가지 버튼 유형 중 하나 인 HTML 태그가 포함되어 있습니다. 독립형 구성 요소 (예 : 버튼 블록) 또는 다른 블록에 중첩 된 구성 요소 (예 : 기사 주석 블록). .wp-element-button 각 개별 블록 스타일을 유지하는 대신 공유 스타일을 만듭니다. 테마의 두 버튼 유형의 기본 배경색과 텍스트 색상을 변경하겠습니다. 색상 객체가 있는데, 그 결과 배경과 텍스트 속성을 지원하며 원하는 값을 설정합니다.

이것은 두 버튼의 색상을 변경합니다.

DevTools를 열고 버튼에 대한 WordPress에서 생성 된 CSS를 보면 theme.json 클래스가

: 에서 정의한 스타일을 추가하는 것을 볼 수 있습니다.

이것들은 우리의 기본 색상입니다! 다음으로 사용자가 버튼과 상호 작용할 때 사용자에게 시각적 피드백을 제공하려고합니다. theme.json 대화식 버튼 스타일을 구현하십시오 이것은 CSS에 관한 사이트이기 때문에 많은 분들이 이미 링크와 버튼의 상호 작용 상태에 익숙하다고 확신합니다. 우리는 마우스 커서를 그들 위로 마우스로 덮고 (), 초점을 맞추기 위해 탭하고 클릭하여 활성을 유지하도록 클릭하십시오 (). 이전에 클릭 한 사용자를 시각적으로 보여주는 상태조차도 있습니다.

이들은 CSS 의사 클래스이며 링크 나 버튼의 상호 작용을 찾는 데 사용합니다.

CSS에서는 다음과 같이

상태를 스타일을 지정할 수 있습니다. :hover :focus in , 우리는이 의사 클래스를 사용하여 기존 버튼 선언을 확장합니다. :active :visited "구조화 된 "속성에 주목하십시오. 우리는 기본적으로 요약을 따릅니다 :

요소

요소 :hover 객체 속성

value

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

theme.json

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

• 우리는 이제 버튼의 기본 및 대화식 스타일의 완전한 정의를 완료했습니다. 그러나 다른 블록에 중첩 된 일부 버튼을 스타일링하려면 어떻게해야합니까?
  각 블록에 중첩 된 버튼 스타일을 설정하십시오 우리는 모든 버튼이 우리의 기본 스타일을 한 가지 예외로 원한다고 가정 해 봅시다. 기사 주석 양식 블록의 제출 버튼이 파란색이되기를 원합니다. 우리는 그것을 어떻게 달성해야합니까?
  • 이 블록에는 형태, 입력, 설명 텍스트 및 버튼이 더 활성화 된 부분이 포함되어 있기 때문에 버튼 블록보다 더 복잡합니다. 이 블록의 버튼을 찾으려면 버튼 요소와 동일한 JSON 구조를 따라야하지만
    요소에 매핑 된 "기사 주석 양식"블록에 적용해야합니다.
    • 우리는 더 이상 에서 일하지 않습니다. 대신 내에서 작동하며 실제 블록을 구성하는 데 사용됩니다. 대조적으로, 버튼은 독립형 블록으로 사용할 수 있더라도 블록에 중첩 될 수 있기 때문에 전역 요소로 간주됩니다.
      JSON 구조는 요소 내의 요소를 지원합니다. 따라서 기사 댓글 폼 블록에 버튼 요소가 있으면
      • 블록에서 찾을 수 있습니다.
        이 선택기는 특정 블록을 찾을뿐만 아니라 해당 블록에 포함 된 특정 요소를 찾는 것입니다. 이제 주제의 모든 버튼에 적용되는 기본 버튼 스타일 세트와 기사 주석 양식 블록에 포함 된 특정 버튼에 적용되는 스타일 세트가 있습니다.
        • WordPress 생성 CSS는보다 정확한 선택기를 가지고 있습니다.
        "기사 댓글 양식"버튼에 대해 다른 대화식 스타일을 정의하려면 어떻게해야합니까? 이것은 기본 스타일에 대해 우리가했던 것과 같은 방식입니다.이 스타일은
        블록 내에 정의되어 있음을 제외하고는 다음과 같습니다.

        <div>
          <a>Button 1</a>
        </div>
        <p>
          </p>

        블록이 아닌 버튼이 있으면 어떻게해야합니까?

        WordPress는 올바른 클래스를 자동으로 생성하고 적용하여 이러한 버튼 스타일을 출력합니다. 그러나 블록 및 사이트 전체 편집을 지원하지만 "클래식"PHP 템플릿도 포함하는 "하이브리드"WordPress 테마를 사용하는 경우 어떻게해야합니까? 아니면 버튼이있는 오래된 버전의 단축 코드조차도 사용자 정의 블록을 만든 경우 어떻게해야합니까? 이들은 WordPress 스타일 엔진으로 처리되지 않습니다!

        걱정하지 마세요. 이 모든 경우에

        클래스를 템플릿, 블록 또는 단축 코드 태그에 추가합니다. 그런 다음 WordPress가 생성 한 스타일이 적용됩니다.

        경우에 따라 마킹을 제어하지 못할 수도 있습니다. 예를 들어, 일부 블록 플러그인은 너무 임의적이며 자신의 스타일을 마음대로 적용 할 수 있습니다. 이 시점에서 일반적으로 블록 설정 패널의 고급 옵션으로 이동하여 클래스를 적용 할 수 있습니다.

        요약 처음에는 "CSS"를 쓰는 것이 어색하지만, 나는 그것이 제 2의 자연임을 알았습니다. CSS와 마찬가지로 올바른 선택기를 사용하여 제한된 수의 속성을 광범위하거나 정확하게 적용 할 수 있습니다. .wp-element-button 그리고

        세 가지 주요 장점을 사용하는 것을 잊지 마십시오 :
        스타일은 프론트 엔드 뷰 및 블록 편집기의 버튼에 적용됩니다.

        CSS는 향후 WordPress 업데이트와 호환됩니다.

        생성 된 스타일은 블록 테마 및 클래식 테마와 호환됩니다. 별도의 스타일 시트로 복사 할 필요는 없습니다.

        theme.json 프로젝트에서

        스타일을 사용하는 경우 경험과 아이디어를 공유하십시오. 의견과 피드백을 읽기를 기대합니다!

위 내용은 WordPress 블록 테마의 스타일링 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!