WordPress 사용자 정의 HTML 블록을 사용하는 방법

사용자 정의 HTML 블록을 사용하면 페이지를 보거나 HTML로 게시하지 않고도 HTML 콘텐츠를 추가하고 편집할 수 있습니다. HTML을 포함하고 이를 사용하여 텍스트를 마크업한 다음 원하는 경우 스타일이 지정된 텍스트가 있는 단락 블록으로 변환할 수도 있습니다. 이 블록은 HTML 작업을 선호하는 사용자에게 적합하며 Google 지도와 같은 특정 유형의 코드를 삽입하는 가장 좋은 방법 중 하나입니다.

이 기사에서는 사용자 정의 HTML 블록을 자세히 살펴보겠습니다. 게시물 및 페이지에 추가하는 방법, 설정 및 옵션, 사용 방법에 대한 팁, 자주 묻는 질문(FAQ)을 살펴보겠습니다.

YouTube 채널 구독

게시물 또는 페이지에 사용자 정의 HTML 블록을 추가하는 방법

콘텐츠에 사용자 정의 HTML 블록을 추가하려면 블록을 표시할 위치에 커서를 놓고 삽입 도구를 선택합니다. 검색어를 입력하거나 옵션을 스크롤할 수 있는 검색 상자가 열립니다. html을 검색하고 결과에 표시될 때 블록을 선택합니다.

또는 블록을 표시할 위치에 /html을 입력하고 Enter 키를 누르거나 블록 영역 위의 옵션에서 선택할 수 있습니다.

이제 콘텐츠 내에 HTML을 추가할 수 있는 사용자 정의 HTML 블록이 있습니다. 설정을 진행하면서 코드와 함께 몇 가지 예를 볼 것입니다.

사용자 정의 HTML 블록 설정 및 옵션

대부분의 블록과 달리 사용자 정의 HTML 블록에는 편집기 사이드바에 옵션이 포함되어 있지 않습니다. 도구 모음에서 필요한 모든 옵션을 찾을 수 있습니다.

사용자 정의 HTML 블록 도구 모음

블록 내의 아무 곳이나 클릭하면 해당 도구가 표시됩니다. 모두 표시되지 않으면 새 영역에서 블록 아래를 클릭하면 블록을 다시 선택하면 나머지 도구가 표시됩니다.

각 블록에는 블록에 대한 옵션을 선택할 수 있는 고유한 특정 컨트롤이 있습니다. 도구 모음 위에 있는 작은 블록 옵션 세트를 사용하면 블록 유형을 변경하고, 블록으로 변환하고, 옵션을 열 수 있습니다.

각 설정을 자세히 살펴보겠습니다.

사용자 정의 HTML 변경 블록 또는 스타일

옵션에서 HTML을 선택하면 블록을 다른 유형의 블록으로 변환할 수 있는 드롭다운 상자가 열립니다. 옵션에는 코드, 열 또는 그룹이 있습니다.

코드 – 사용자 정의 HTML 블록을 코드 블록으로 변환하여 다양한 유형의 코드를 표시할 수 있습니다.

기둥 – 기둥 안에 블록을 배치합니다.

그룹 – 단일 블록으로 조정할 수 있도록 블록을 그룹에 추가합니다.

사용자 정의 HTML 블록 드래그 도구

드래그 도구에는 마우스로 잡고 이동할 수 있는 6개의 점이 있습니다.

그런 다음 콘텐츠 내에서 원하는 위치로 블록을 끌어서 놓기만 하면 됩니다. 블록을 드래그할 때 블록이 드롭될 위치를 나타내는 파란색 선이 나타납니다.

블록을 원하는 위치에 파란색 선이 나타나면 마우스 버튼을 놓으면 블록이 새 위치에 배치됩니다.

사용자 정의 HTML 블록 이동

위쪽 및 아래쪽 화살표는 클릭할 때마다 블록을 한 콘텐츠 섹션으로 이동합니다. 블록이 자동으로 새 위치로 이동하면 화면이 스크롤됩니다. 이것은 블록 섹션을 한두 개 이동하는 쉬운 방법입니다.

사용자 정의 HTML 블록 HTML 및 미리보기

HTML 및 미리보기 버튼을 사용하면 편집기에서 블록이 HTML과 함께 작동하는 방식을 선택할 수 있습니다. HTML 버튼은 기본적으로 선택되어 있습니다. 이것은 HTML을 실행하지 않고 코드 형태로 보여줍니다. 이 예는 Google 지도의 HTML을 보여줍니다.

미리보기를 선택하면 HTML이 브라우저 내에서 실행될 때 프런트엔드에서 어떻게 보일지 보여줍니다. HTML을 편집하고 최종 사용자에게 어떻게 보일지 보기 위해 보기 사이를 앞뒤로 쉽게 전환할 수 있습니다. 이것은 편집을 수행하고 결과를 빠르게 볼 수 있는 훌륭한 방법입니다. 이 예는 콘텐츠 내에 표시되는 포함된 Google 지도를 보여줍니다.

또 다른 예로, 다음은 텍스트 줄에 스타일을 추가하는 HTML입니다. HTML을 만들고 편집할 수 있는 HTML 보기입니다.

다음은 프론트 엔드에서 어떻게 보일지 보여주는 미리보기 모드입니다.

사용자 정의 HTML 블록 옵션

도구 모음의 맨 오른쪽에는 세로 스택에 세 개의 점이 있습니다. 이 세 개의 점은 설정 숨기기, 블록으로 변환, 복사, 복제, 앞이나 뒤에 삽입, 이동, 재사용 가능한 블록에 추가, 그룹화 또는 블록 제거를 허용하는 세 부분으로 10가지 옵션 세트를 엽니다.

사용자 정의 HTML 블록 옵션이 수행할 수 있는 작업은 다음과 같습니다.

추가 설정 숨기기 - 오른쪽 사이드바를 숨겨 작업 공간을 확장합니다.

블록으로 변환 – 콘텐츠를 다른 적절한 블록으로 변환합니다. 텍스트는 단락 블록으로, 이미지는 이미지 블록 등으로 변환됩니다. 예제에서 사용한 Google 지도 코드와 같은 포함된 코드는 사용자 정의 HTML 블록으로 유지됩니다. 블록 내의 다른 HTML을 변환할 수 있는 경우 다른 블록에 배치된 블록에서 제거됩니다.

복사 – 블록을 클립보드에 복사하여 편집기 내 아무 곳에나 붙여넣을 수 있습니다.

복제 – 원본 아래에 블록의 복제본을 배치합니다.

앞에 삽입 – 다른 블록을 배치할 수 있도록 사용자 정의 HTML 블록 앞에 블록 영역을 추가합니다.

뒤에 삽입 – 다른 블록을 배치할 수 있는 블록 뒤에 영역을 추가합니다.

이동 - 화살표 키를 사용하여 블록을 위 또는 아래로 이동할 수 있습니다. 파란색 선을 이동합니다. 원하는 위치에 도달하면 Enter 키를 누르면 블록이 즉시 이동합니다.

재사용 가능한 블록 에 추가 – 사용자 정의 HTML 블록을 재사용 가능한 블록에 추가하여 모든 페이지나 게시물에서 다시 사용할 수 있습니다.

그룹 – 블록을 그룹에 추가하여 블록을 단일 단위로 조정할 수 있습니다.

블록 제거 – 블록을 삭제합니다.

사용자 정의 HTML 블록을 효과적으로 사용하기 위한 팁 및 모범 사례

이 블록을 사용하여 텍스트의 스타일을 지정하고 먼저 HTML을 편집한 다음 블록으로 변환 도구를 사용하여 단락 또는 기타 유형의 콘텐츠를 만듭니다. 이렇게 하면 콘텐츠를 더 잘 제어할 수 있으며 HTML 버전을 유지할 필요가 없는 경우 특히 유용합니다. 이동하면서 미리보기를 볼 수 있습니다. 이렇게 하면 사이드바의 WordPress 설정에서 시각적 편집기와 코드 편집기 간에 변경하지 않아도 됩니다.

포함된 지도, 광고, 비디오 등에 이 블록을 사용하십시오. 이렇게 하면 코드 편집기 보기로 변경하고 코드를 단락 블록과 같은 다른 유형의 블록에 추가할 필요가 없습니다.

페이지 및 게시물의 코드 편집기 버전 대신 이 블록을 사용하면 페이지 및 게시물 태그로 작업할 필요가 없습니다. 이것은 사용하기 쉬운 더 깨끗한 작업 환경을 만듭니다.

고유한 HTML을 추가하거나 다른 소스의 코드를 포함할 때 미리보기 기능을 자주 사용하여 HTML이 의도한 대로 실행되는지 확인하십시오.

블록에서 스크립트 태그를 사용하지 마십시오. 제거되면 코드가 작동하지 않을 수 있습니다.

사용자 정의 HTML 블록에 대해 자주 묻는 질문

사용자 정의 HTML 블록은 무엇을 합니까?

HTML을 필드에 입력할 수 있으므로 Visual Editor에서 페이지나 게시물을 유지하면서 작업할 수 있습니다.

사용자 정의 HTML 블록을 어떻게 사용할 수 있습니까?

지원되는 태그가 있는 모든 HTML을 추가할 수 있습니다. 광고, 지도, 비디오, iframe이 있는 모든 것, 표 등에 이 블록을 사용할 수 있습니다. 또한 텍스트를 마크업한 다음 단락 블록으로 변환하는 쉬운 방법이기도 합니다.

마크업을 색상으로 구분합니까?

아니요, 블록의 마크업은 텍스트 편집기처럼 보입니다.

사용자 정의 HTML 블록이 HTML을 실행합니까?

HTML을 프런트 엔드에서 정상적으로 실행합니다. 편집기에서 HTML을 실행하거나 코드를 표시할 수 있습니다. 무엇을 보는지는 귀하에게 달려 있으며, 버튼 클릭 한 번으로 언제든지 두 가지 옵션 중에서 선택할 수 있습니다.

모든 HTML 태그가 지원됩니까?

아니오. WordPress 지원 코드 페이지에서 지원되는 HTML 태그 목록을 볼 수 있습니다.

결론

이것이 Custom HTML Block에 대한 우리의 모습입니다. 이 블록은 개발자만을 위한 것이 아닙니다. 이 블록을 사용하는 주요 이점은 HTML로 작업하기 위해 비주얼 편집기와 코드 편집기 사이를 전환할 필요가 없다는 것입니다. 즉, 정상적으로 표시되는 나머지 콘텐츠로 작업할 수 있습니다. 그런 다음 블록에서 HTML로 작업하고 언제든지 미리 볼 수 있습니다. 사용자 정의 HTML 블록은 블록 편집기에서 HTML로 작업하는 쉬운 방법을 제공합니다.

우리는 당신의 의견을 듣고 싶습니다. 사용자 정의 HTML 블록을 사용합니까? 의견에 귀하의 경험에 대해 알려주십시오.

enterlinedesign/Shutterstock.com을 통한 주요 이미지