WordPress 코드 블록을 사용하는 방법

WordPress 페이지 및 게시물에 코드를 표시하는 것은 까다로울 수 있습니다. 콘텐츠 내에 코드를 게시하는 것만으로도 흥미로운 결과를 얻을 수 있습니다. 특히 WordPress가 코드를 잘못 표시하거나 보안이 악의적인 활동에 대해 차단하는 경우에 그렇습니다. 다행히 WordPress 코드 블록을 사용하면 코드 조각을 쉽게 표시할 수 있습니다. 이 블록을 사용하는 방법을 알면 웹사이트와 독자 모두에게 가장 좋은 방법으로 콘텐츠 내의 코드를 표시하는 데 도움이 됩니다.

이 기사에서는 WordPress 코드 블록을 살펴보고 그 기능을 살펴보겠습니다. 게시물과 페이지에 추가하는 방법과 설정 및 옵션을 살펴보겠습니다. 사용 방법에 대한 팁과 모범 사례를 확인하고 자주 묻는 질문을 확인하려면 끝까지 기다리십시오.

YouTube 채널 구독

게시물 또는 페이지에 코드 블록을 추가하는 방법

페이지 및 게시물에 코드 블록을 추가하려면 블록을 배치할 콘텐츠 영역 옆에 있는 블록 삽입 도구를 선택하거나 페이지의 왼쪽 상단 모서리에 있는 삽입기를 선택합니다. 블록 이름을 입력하고 블록이 나타나면 선택하거나 블록을 스크롤하여 블록이 무엇인지 확인하십시오.

원하는 경우 블록을 표시할 영역에 /code 를 입력할 수 있습니다. 그런 다음 Enter 키를 누르거나 표시되는 옵션에서 블록을 선택하십시오.

이제 콘텐츠 내에 표시하려는 모든 유형의 코드를 추가할 수 있는 코드 블록이 있습니다. 코드는 자동으로 코드 태그로 표시되므로 코드로 올바르게 표시됩니다. 이것은 독자가 자신의 프로젝트에서 배우거나 사용할 예제를 제공하는 데 도움이 됩니다. 이 예에서는 (왜냐하면) lazy.level = advanced가 있는 WordPress 지원 페이지의 의사 코드를 사용하고 있습니다.

코드 블록 설정 및 옵션

코드 블록에는 설정과 옵션을 찾을 수 있는 두 곳이 있습니다. 첫 번째는 블록 위의 코드 도구 모음입니다. 두 번째는 오른쪽 사이드바의 옵션입니다. 둘 다 살펴보겠습니다.

코드 블록 도구 모음

블록의 아무 곳이나 클릭하면 해당 도구 모음이 표시됩니다. 모든 도구가 표시되지 않으면 새 블록 위치의 블록 아래에 마우스를 놓고 블록을 클릭합니다. 모든 설정이 나타납니다.

코드 블록 유형 또는 스타일 변경

첫 번째 설정은 왼쪽 및 오른쪽 화살표를 사용합니다. 이렇게 하면 블록이 사용자 정의 HTML 블록, 미리 형식이 지정된 블록으로 변경되고 열이 변경되며 그룹을 생성하여 배경색을 조정하고 테두리를 선택하고 기타 옵션을 조정할 수 있습니다. 마우스를 가져가면 각각이 어떻게 보이는지 미리 볼 수 있습니다. 사용자 정의 HTML 옵션 위로 마우스를 가져갑니다.

견인

드래그 도구에는 6개의 점이 있습니다. 이 점을 잡고 블록을 원하는 곳으로 드래그하십시오. 다른 영역 위로 마우스를 가져가면 가능한 모든 위치에 파란색 선이 표시됩니다.

블록을 놓으면 블록이 새 위치에 배치됩니다.

이동하다

위쪽 및 아래쪽 이동 화살표는 콘텐츠 블록을 클릭할 때마다 콘텐츠 블록 내에서 블록을 한 블록 위 또는 아래로 이동합니다.

굵게 및 기울임꼴

굵게 및 기울임꼴 설정은 강조 표시한 코드에 적용됩니다. 함께 또는 개별적으로 사용할 수 있습니다. 이 예제에서는 함께 사용하거나 독립적으로 사용하고 있습니다. 코드의 특정 행이나 명령에 주의를 집중시키는 좋은 방법입니다.

링크

링크를 사용하면 모든 코드를 클릭 가능한 링크로 만들 수 있습니다. 강조표시한 코드 부분의 URL을 검색하거나 입력할 수 있습니다. 이것은 각각의 명령, 다른 예제, 코드의 출처 등에 대한 자습서로 연결하려는 경우에 좋습니다. 동일한 탭이나 새 탭에서 링크를 열 수 있습니다.

자세한 설정

코드 블록의 추가 설정은 여러 옵션이 있는 드롭다운 상자를 엽니다. 이 예에서 각 옵션을 적용했습니다.

인라인 코드 – 코드 형식의 텍스트를 표시합니다. 자체적으로 한 줄에 텍스트를 배치합니다. 모든 것이 코드로 형식이 지정되어 있으므로 글꼴이 동일하게 보입니다.

인라인 이미지 – 마우스를 위치시킨 텍스트 내에 이미지를 배치합니다. 이미지를 선택할 수 있는 미디어 라이브러리가 열립니다. 이미지를 클릭하면 너비를 변경할 수 있는 드롭다운 상자가 표시됩니다.

키보드 입력 – 선택한 코드에 키보드 태그를 추가합니다. 코드는 브라우저의 기본 고정 폭 글꼴로 표시됩니다.

취소선 – 강조 표시한 코드에 줄을 추가합니다.

아래 첨자 – 코드를 아래 첨자로 형식화합니다.

위 첨자 – 코드를 위 첨자로 형식화합니다. 아래 첨자와 위 첨자를 함께 사용할 수 있습니다. 이렇게 하면 글꼴 크기가 줄어들고 코드가 가로로 가운데에 맞춰집니다.

텍스트 색상 – 강조 표시한 코드의 색상을 변경합니다. 미리 만들어진 색상에서 선택하거나 색상 선택 도구에서 색상을 선택하거나 값을 HEX, RBG 또는 HSL로 입력합니다.

옵션

코드 블록 옵션은 도구 모음의 맨 오른쪽에 있는 세 개의 점 안에 있습니다. 옵션에는 다음이 포함됩니다.

기타 설정 숨기기 – 오른쪽 사이드바를 숨겨 깨끗하고 넓은 작업 공간을 제공합니다.

복사 – 블록을 복사 하여 콘텐츠 영역 내의 아무 곳에나 붙여넣을 수 있습니다.

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

앞에 삽입 – 코드 블록 위에 콘텐츠 영역을 추가합니다.

뒤에 삽입 – 코드 블록 아래에 콘텐츠 영역을 추가합니다.

이동 - 화살표 키로 위 또는 아래로 이동할 수 있는 파란색 선을 배치하여 블록을 이동할 수 있습니다. 원하는 위치에 선을 가져오면 Enter 키를 누르기만 하면 됩니다.

HTML로 편집 – 코드를 HTML로 편집할 수 있는 블록의 코드 편집기를 변경합니다. 시각적으로 편집을 선택하여 블록을 다시 시각적 모드로 변경합니다.

재사용 가능한 블록에 추가 – 모든 페이지나 게시물에서 재사용할 수 있도록 블록을 재사용 가능한 블록에 추가합니다.

그룹 – 단일 단위로 변경할 수 있도록 블록을 그룹에 추가합니다.

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

코드 블록 설정

코드 블록 설정은 오른쪽 사이드바에 있습니다. 여기에는 타이포그래피 및 고급 설정이 포함됩니다. 블록을 선택하면 설정이 표시됩니다. 사이드바가 표시되지 않으면 오른쪽 상단 모서리에 있는 톱니바퀴 아이콘을 클릭합니다.

타이포그래피

타이포그래피를 사용하면 전체 블록의 글꼴 크기를 선택할 수 있습니다. 7가지 크기가 있는 드롭다운 상자에서 글꼴 크기를 선택하거나 필드에 사용자 정의 크기를 입력합니다. 재설정을 클릭하여 기본 글꼴 크기로 다시 변경합니다.

고급의

고급 설정에는 HTML 앵커와 추가 CSS 클래스에 대한 필드가 포함됩니다. 앵커는 이 블록에 대한 URL이므로 직접 링크할 수 있습니다. 추가 CSS 클래스 필드를 사용하면 사용자 정의 CSS 클래스를 추가하여 블록의 스타일을 지정할 수 있습니다.

코드 블록을 효과적으로 사용하기 위한 팁 및 모범 사례

콘텐츠에 코드를 표시하려면 이 블록을 사용하세요. 코드 자체는 블록에 영향을 미치지 않습니다.

텍스트 편집기로 코드를 생성할 때와 마찬가지로 공백을 사용하여 코드 형식을 지정합니다. 굵게 및 기울임꼴 설정을 사용하여 코드 내의 특정 스니펫에 주의를 집중시키십시오.

다른 코드와 마찬가지로 이해하기 쉽도록 레이블을 잘 지정합니다. 코드에 주석을 달거나 블록 내에 메모를 추가할 수 있지만 누군가 코드를 복사하려는 경우를 대비하여 코드 요소 내에 있지 않은지 확인하세요.

코드 블록에 대해 자주 묻는 질문

WordPress 코드 블록의 목적은 무엇입니까?

다른 사람들이 보고 사용할 수 있도록 코드를 표시합니다. 간격을 유지하는 깔끔한 레이아웃으로 코드를 표시합니다.

코드 블록이 코드를 실행합니까?

아니요. 독자가 보고 사용할 수 있도록 형식이 지정된 코드를 표시합니다. 코드는 HTML 코드 태그로 자동으로 래핑됩니다.

어떤 종류의 코드를 표시할 수 있습니까?

모든 프로그래밍 또는 스크립팅 언어의 코드를 표시합니다. 언어는 아무런 차이가 없습니다.

코드의 형식을 지정합니까?

아니요. 코드 편집기로 작동하지 않으므로 간격, 색상, 숫자 추가 등을 변경하지 않습니다. 코드를 입력하는 방식으로 표시할 뿐입니다.

코드 블록은 HTML 블록과 어떻게 다릅니까?

HTML 블록을 사용하면 페이지의 코드 편집기 보기로 변경하지 않고도 HTML을 작성할 수 있습니다. 프런트 엔드에서 HTML을 실행합니다. 백엔드에서 결과를 미리 볼 수 있습니다. HTML을 실행하지 않으려면 코드 블록을 사용하여 HTML을 표시할 수 있습니다.

미리 포맷된 블록과 어떻게 다릅니까?

미리 포맷된 블록은 공백이 있는 텍스트를 고정 폭 글꼴로 표시합니다. 사이드바 옵션에 글꼴과 배경색을 추가합니다.

결론

이것이 WordPress Code Block에 대한 우리의 모습입니다. 블록은 간단하고 사용하기 쉽습니다. 코드를 실행하지 않기 때문에 언어 자체는 중요하지 않습니다. 이 블록은 독자가 복사하거나 배울 수 있도록 모든 유형의 코드를 표시하는 좋은 방법을 제공합니다.

우리는 당신의 의견을 듣고 싶습니다. WordPress 코드 블록을 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

Danielala/Shutterstock.com을 통한 추천 이미지