청중이 활용할 수 있도록 코드를 온라인에 지속적으로 게시하는 블로거와 콘텐츠 제작자에게는 WordPress에서 코드를 효과적으로 보여주는 기술을 습득하는 것이 가장 중요합니다. 의도한 대로 컴퓨터 코드는 실제 코드 스니펫 내에 있는 태그, 슬래시 및 대괄호와 구별되는 웹사이트의 프런트 엔드에 새로운 시각적 출력을 생성합니다.
그러나 이것은 버튼 생성이나 단락 블록에 스타일 적용과 같은 의도된 기능을 실행하지 않고 코드를 적절하게 표시하는 수단이 필요하기 때문에 개발 및 디자인에 대해 글을 쓰는 개인에게 곤경을 초래합니다.
간단히 말해서 코드 스니펫을 예제로 포함하는 블로그 게시물을 작성할 때 코드가 실행되지 않도록 하는 것이 필수적입니다. 이 접근 방식을 통해 독자는 코드를 원래 형식으로 인식하고 올바른 형식의 블록 내에서 볼 수 있으며 자신의 개발 노력을 위해 내용을 복사할 수도 있습니다.
이 가이드는 선택한 WordPress 테마에 관계없이 WordPress에서 코드를 표시하는 다양한 방법을 보여 주는 것을 목표로 합니다. 또한 특정 작업 흐름에 가장 적합한 방법을 결정하는 데 도움이 됩니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작WordPress?에 일반 코드를 추가하면 어떻게 됩니까?
특정 조치를 취하지 않고 WordPress 게시물 또는 페이지에 일반 코드를 직접 추가하면 코드가 의도하지 않은 결과를 초래할 수 있습니다. WordPress에는 보안 및 적절한 기능을 보장하기 위해 콘텐츠를 자동으로 처리하고 삭제하는 기본 제공 메커니즘이 있습니다. 결과적으로 일반 코드가 추가되면 WordPress에서 수정하거나 완전히 제거할 수 있습니다.
다음은 WordPress에 일반 코드를 추가할 때 발생할 수 있는 몇 가지 사항입니다.
- 코드 변경: WordPress는 잠재적인 보안 위험 또는 플랫폼 기능과의 충돌을 방지하기 위해 특정 요소를 제거하거나 수정하여 코드를 변경할 수 있습니다. 이로 인해 코드가 의도한 대로 실행되지 않거나 오류가 발생할 수 있습니다.
- 코드 스트리핑: WordPress에는 안전하지 않거나 불필요한 것으로 간주되는 특정 유형의 코드를 제거할 수 있는 필터 및 보안 조치가 있습니다. 이로 인해 중요한 코드 스니펫 또는 전체 코드 블록 자체가 제거될 수 있습니다.
- 시각적 왜곡: 일반적으로 코드에는 WordPress 콘텐츠의 시각적 표시를 방해할 수 있는 특수 문자, 기호 및 서식이 포함되어 있습니다. 형식 문제, 정렬 불량 또는 코드가 코드로 렌더링되지 않고 일반 텍스트로 표시될 수 있습니다.
- 코드 실행: 경우에 따라 코드가 적절하게 삭제되거나 처리되지 않으면 의도한 기능을 실행하고 수행할 수 있습니다. 이로 인해 버튼 생성, 콘텐츠 모양 변경 또는 웹 사이트의 전반적인 기능에 영향을 미치는 등의 의도하지 않은 결과가 발생할 수 있습니다.
이러한 문제를 극복하고 WordPress에서 코드를 안전하게 표시하려면 코드 스니펫을 보여주기 위해 특별히 설계된 적절한 방법이나 플러그인을 사용하는 것이 좋습니다. 이러한 방법은 코드가 원치 않는 수정이나 실행 없이 적절하게 형식화, 보존 및 표시되도록 합니다.
여기서 스니펫에 다음 HTML 코드를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
이 특정 코드 발췌는 HTML 스타일 요소를 사용하여 헤더와 단락이 포함된 녹색으로 장식된 세 개의 콘텐츠 블록을 생성합니다.
그럼에도 불구하고 우리의 의도는 처리되지 않은 코드를 주어진 블록에서 렌더링하는 것이 아니라 블로그 게시물 내에 표시하는 것입니다.
코드를 WordPress Gutenberg 블록 편집기에 직접 붙여 넣으면 다음과 같은 결과를 볼 수 있습니다.
앞서 언급한 내용을 볼 때 WordPress가 콘텐츠 생성이라는 기본 기능에 코드를 사용하려고 노력하고 있음이 분명합니다. 그러나 코드에서 스타일을 제거하므로 독자에게 원하는 결과를 제공하지 못합니다.
이러한 상황을 피하기 위해 코드 표시 목적으로 아래에 열거된 방법 중 하나를 사용할 것을 강력히 권장합니다.
WordPress에 코드를 표시하는 4가지 방법
다음 기술은 난이도가 높은 순서대로 정렬되어 있으며 WordPress를 사용하는 대신 Markdown 편집기 내에서 코드 및 콘텐츠를 구성하여 만족감을 얻는 개인에 맞는 특정 접근 방식을 제공합니다.
방법 1: Gutenberg 블록 편집기 사용
Gutenberg 편집기에는 코드를 실행하지 않고 형식을 유지하면서 코드 스니펫의 표시를 용이하게 하는 기존 코드 블록이 포함되어 있습니다.
시작하려면 WordPress의 게시물 또는 페이지에 액세스하고 블록 추가 버튼 중 하나를 선택하십시오.
계속하려면 "블록 추가" 버튼 중 하나를 선택하십시오.
그렇게 함으로써 사용 가능한 블록의 구색이 공개됩니다. "코드" 블록을 검색하거나 검색 창에 "코드"와 같은 키워드를 입력할 수 있습니다.
대괄호 아이콘으로 식별할 수 있는 코드 블록을 찾으면 코드 섹션을 게시물에 삽입하기 위해 클릭하십시오.
현재 "Compose code…" 큐가 있는 영역을 관찰할 수 있어야 합니다.
WordPress Gutenberg 편집기는 편집기 내에서 슬래시(/) 다음에 "C" 또는 "Code"를 입력하여 코드 블록을 검색하고 삽입할 수 있는 마크다운 지원을 제공합니다. 이후 WordPress는 모든 관련 블록을 표시하여 보다 신속한 삽입 프로세스를 촉진합니다.
코드 블록과 사용자 지정 HTML 블록 사이의 차이점에 유의하는 것이 중요합니다. 사용자 지정 HTML 블록은 프런트엔드에 렌더링할 사용자 지정 HTML 코드를 포함하기 위한 것이지만 코드 블록은 표시 목적으로 원시 코드를 추가하기 위해 특별히 설계되었습니다.
현재 원하는 코드를 복제하고 "Write Code..."라는 레이블이 지정된 지정된 영역에 삽입할 적절한 순간입니다.
제공한 코드는 이제 지정된 코드 블록 내에 포함됩니다.
코드 블록의 유리한 측면은 원래 코드 스니펫 내의 공백 및 탭 형식을 준수한다는 것입니다. 결과적으로 표시된 코드는 복사된 소스와 시각적 일관성을 유지해야 합니다.
WordPress 게시물 또는 페이지에 코드를 표시하려면 "게시" 버튼을 클릭하여 절차를 마칩니다. 또한 "미리보기"를 선택하여 게시하기 전에 모양을 시각적으로 표현할 수 있는 옵션이 있습니다.
"게시" 버튼을 클릭한 후 게시물의 라이브 버전에 액세스하여 코드 스니펫이 원시 코드로 표시되는지 확인하십시오.
관찰한 바와 같이 코드 블록은 단순함이 특징이지만 블로그 게시물 내에서 코드를 표시할 때 형식을 유지하는 중요한 목적을 수행합니다.
아래 제공된 스크린샷을 참조하십시오. 이 특정 예에서 원본 코드 스니펫은 변경되지 않은 상태로 유지됩니다. 회색 상자 안의 프런트 엔드에 표시될 뿐입니다.
코드 블록의 중요성을 높이려면 기본 모양을 수정하는 것이 좋습니다.
블록에 사용할 수 있는 스타일 선택 항목에 액세스하려면 코드 블록을 선택하고 설정(톱니바퀴 아이콘) 버튼을 클릭하십시오. 이 작업은 선택한 블록, 즉 이 경우 코드 블록에 적용할 수 있는 블록 설정만 표시하는 블록 탭을 엽니다.
하나는 텍스트 및 배경 색상과 같은 측면을 수정하는 옵션을 포함하여 개인 기본 설정에 따라 코드 블록을 사용자 정의할 수 있는 기능이 있습니다.
방법 2: 플러그인 사용
선호하는 플러그인 설치 방법을 활용하여 Enlighter – Customizable Syntax Highlighter 플러그인을 WordPress 사이트에 통합하십시오.
플러그인이 활성화되면 플러그인이 완벽하게 작동하며 Gutenberg 블록 또는 클래식 편집기 삽입 버튼을 통해 모든 게시물/페이지에 코드를 삽입할 수 있습니다.
WordPress Gutenberg 블록 편집기를 사용하는 경우 코드를 표시하려는 게시물에 액세스하십시오. 블록 추가 버튼("+" 기호로 식별됨) 중 하나를 선택하여 사용 가능한 블록 모음을 표시합니다.
Enlighten Sourcecode 블록과 관련된 키워드를 숙독하거나 입력하십시오. 게시물 내에 통합하려면 해당 블록을 클릭하십시오.
Enlighter Highlighter 블록은 "Generic Highlighting"이라는 지정된 제목과 "Insert Sourcecode..."라는 텍스트 입력 필드가 있는 블록 편집기 인터페이스 내에 나타납니다.
WordPress에 표시할 원하는 코드를 지정된 "소스 코드 삽입..." 텍스트 필드에 입력하거나 복사하여 붙여넣으십시오.
플러그인은 구문 강조 표시 기능으로 모든 서식 기본 설정과 표를 유지합니다. 결과가 만족스러우면 "게시" 버튼을 선택하십시오.
이 기능을 활용하면 사이트 방문자와 동일한 콘텐츠를 관찰하기 위해 게시물의 사용자 인터페이스에 액세스할 수 있습니다.
Enlighter 플러그인은 구조화 및 참조 프로세스를 지원하는 줄 번호와 함께 코드 표시를 위한 단순한 기본 테마를 제공합니다.
앞서 언급했듯이 플러그인을 사용하여 WordPress 플랫폼에서 코드를 표시하면 다른 방법과 비교할 때 뚜렷한 이점이 있습니다. 이러한 장점의 실례가 되는 예는 Enlighter 구문 플러그인에서 제공하는 프런트엔드 기능으로, 사용자가 콘텐츠를 스크롤할 때 코드 줄이 동적으로 강조 표시됩니다.
또한 오른쪽 상단 모서리에 있는 코드 상자에는 사용자 경험을 향상시키는 여러 버튼이 있습니다. 특히 이 버튼 중 하나는 줄 번호가 없는 일반 텍스트 형식으로 코드를 표시할 수 있도록 합니다.
"Copy To Clipboard"라고 표시된 두 번째 버튼은 코드 상자 내의 모든 내용을 즉시 복사하여 사용자가 코드를 원하는 프로그램에 편리하게 전송하고 붙여넣을 수 있도록 합니다.
마지막으로 세 번째 버튼은 새 창에서 코드를 열어 일반 텍스트 형식의 브라우저 창에 코드를 표시합니다.
Enlighter 플러그인은 기본 설정에 따라 코드 상자의 모양을 조정할 수 있는 다양한 테마와 강력한 사용자 지정 도구를 제공합니다. 기본 테마를 사용하지 않으려면 WordPress 내 게시물로 돌아가서 현재 활성화된 Enlighter 소스 코드 블록을 선택할 수 있습니다.
이 작업은 WordPress 내에서 차단 사이드바를 공개합니다. 즉시 나타나지 않는 경우 WordPress 창의 오른쪽 상단에 있는 설정(톱니바퀴 아이콘) 버튼을 클릭하십시오.
고려해야 할 초기 사용자 정의 옵션은 적절한 형식 지정 및 강조 표시 기능을 활성화하여 표시할 코드 언어를 플러그인에 지시하는 언어 필드입니다.
고려해야 할 코딩 언어가 상당히 많으므로 목록을 자세히 살펴보고 가장 적합한 언어를 선택하십시오.
Speciallines 기능은 사용자가 쉼표로 구분된 줄 번호를 입력할 수 있도록 하여 지정된 줄을 강조합니다.
결과적으로 지정한 지정된 라인은 사이트에 액세스하는 모든 개인에게 시각적으로 강조됩니다.
Lineoffset 매개변수는 특정 줄 번호에서 코딩 스니펫을 시작하는 방법을 제공하여 더 큰 줄 집합에서 코드 하위 집합을 표시할 때 유리합니다.
분명히 Lineoffset 필드에 값 "10"을 입력하면 코드 상자 전체가 라인 번호 10에서 시작됩니다.
방법 3: 인코더 도구 사용
W3Docs HTML 인코더 웹사이트를 방문하십시오. 페이지에서 두 개의 인접한 상자 필드를 찾을 수 있습니다. 왼쪽은 코드를 붙여넣기 위한 것이고 오른쪽은 WordPress에 복사하여 붙여넣을 수 있는 인코딩된 버전을 표시합니다.
진행하기 전에 원하는 코드 보존 유형을 지정해야 합니다.
- JavaScript 요소가 포함된 코드를 붙여넣으려면 JavaScript 유니코드를 선택하십시오.
- HTML로 작업하는 경우 HTML 기호를 선택하십시오.
워드프레스에 표시하고자 하는 코드를 왼쪽의 지정된 필드에 입력하세요. 그런 다음 오른쪽 위에 있는 인코딩 버튼을 찾아 선택합니다.
최종 결과는 당혹스럽게 보일 수 있습니다. 그러나 기본적으로 삽입된 코드 전체를 보존하는 동시에 프런트엔드에서 의도하지 않은 활성화 또는 대체 콘텐츠 표시를 방지하는 것을 목표로 하는 HTML 요소의 통합입니다.
"복사" 버튼을 눌러주세요.
WordPress로 돌아가 원하는 게시물 또는 페이지에 액세스합니다. 오른쪽 상단 모서리에 있는 옵션(3개의 세로 점으로 표시됨) 메뉴를 선택합니다. 그런 다음 코드 편집기 기능을 선택하십시오.
현재 인터페이스는 시각적 블록 편집기 대신 코드 편집기를 표시합니다. 코드 표시를 위해 원하는 섹션을 찾고 인코딩된 HTML을 편집기에 삽입합니다.
클래식 WordPress 편집기를 사용하는 경우 Gutenberg 블록 편집기의 코드 편집기에 해당하는 텍스트 탭으로 이동해야 합니다.
"업데이트" 또는 "게시" 옵션을 선택하여 게시물을 완료하고 게시물의 프런트 엔드로 이동하여 시각적 프레젠테이션을 관찰하십시오.
HTML 인코딩 요소를 포함하기 전에 처음에 인코더에 삽입된 변경되지 않은 코드를 관찰할 수 있습니다. 인코더는 스타일링 기능을 제공하지 않으므로 이 접근 방식은 깔끔하고 미니멀한 미학을 달성하는 데 이상적입니다.
방법 4: 사용자 지정 단축 코드 사용
사용자 지정 단축 코드를 생성하면 수동으로 복사하여 붙여넣을 필요 없이 재사용 가능한 코드 블록을 삽입하는 작업을 수행할 수 있습니다. 이것이 바로 맞춤 단축 코드가 WordPress 플랫폼에서 코드를 표시할 강력한 기회를 제공하는 이유입니다.
코드 프레젠테이션에 사용자 지정 단축 코드를 사용하면 다음과 같은 이점이 있습니다.
- 사용자 지정 단축 코드를 사용하면 나중에 재사용할 수 있도록 복잡한 코드 섹션을 저장할 수 있으므로 긴 코드 스니펫을 반복해서 입력할 필요가 없습니다.
- 코드 하이라이터 및 컨테이너에 대해 개인화된 CSS 스타일을 정의할 수 있습니다.
- 단축 코드는 모든 사용자가 사용할 수 있으므로 다른 기여자가 간단한 클릭으로 코드 하이라이터 및 블록을 손쉽게 활용할 수 있습니다.
사용자 지정 쇼트코드를 생성하려면 WordPress 테마 파일 수정, PHP 코드 작업 및 잠재적으로 WordPress 플러그인 개발에 능숙해야 합니다. 결과적으로 WordPress에 대한 사용자 정의 단축 코드를 만드는 것은 PHP를 처음 사용하는 개인에게 어려움을 초래할 수 있습니다.
그럼에도 불구하고 최종 결과는 WordPress 플랫폼에 코드를 표시하는 훨씬 간단한 접근 방식을 제공합니다.
다양한 프로그래밍 언어를 수용하기 위해 맞춤형 단축 코드에 대해 원하는 이름을 자유롭게 선택하고 [html] [/html] 및 [css] [/css]와 같은 다양한 대안을 설정할 수 있습니다.
구문 강조를 최적화하려면 WordPress Gutenberg 블록 편집기로 작업할 때 텍스트 편집기(WordPress Classic에서) 또는 사용자 지정 HTML 상자와 함께 사용자 지정 단축 코드를 활용하는 것이 좋습니다.
목표는 사용자가 단축 코드의 여는 태그와 닫는 태그의 구분된 경계 내에서 코드를 입력하거나 삽입할 수 있는 맞춤형 단축 코드를 구성하는 것입니다.
목표는 사용자가 단축 코드의 지정된 시작 및 종료 태그 내에 코드를 입력하거나 삽입할 수 있는 맞춤형 단축 코드를 개발하는 것입니다.
마무리
WordPress에 코드를 표시하는 것은 프로그래밍 개념을 공유하고 정확성을 보장하며 미학을 개선하고 협업을 촉진하는 데 매우 중요합니다. 이를 통해 개발자는 청중을 교육하고 구체적인 증거를 제공하며 사용자 경험을 향상하고 커뮤니티 참여를 장려할 수 있습니다. 쇼케이스 코드 스니펫은 투명성, 신뢰 및 신뢰할 수 있는 정보를 촉진합니다. 사용자 지정 단축 코드 또는 플러그인은 시각적으로 매력적이고 잘 구성된 코드 표시를 보장할 수 있습니다. 코드 공유는 토론, 피드백 및 혁신을 촉진합니다. 전반적으로 WordPress의 효과적인 코드 표시는 지식 보급, 품질 보증 및 WordPress 개발 커뮤니티의 성장에 필수적입니다.
