WordPress에서 코드 블록을 사용하는 방법
WordPress 는 인터넷에 있는 모든 웹사이트의 절반 이상을 지원하는 강력한 콘텐츠 관리 시스템입니다. 내장된 CRM을 사용하면 이전에 컴퓨터 프로그램을 작성한 적이 없더라도 웹 사이트를 쉽게 만들 수 있습니다. WordPress 웹사이트에 일반 텍스트 블록을 표시하는 것은 매우 쉽지만 컴퓨터 코드에 대해서도 마찬가지입니다. 시청자가 코드를 분석하고 이해할 수 있도록 코드 조각이 적절하게 표시되어야 합니다. 그리고 그것이 WordPress 코드 블록이 들어오는 곳입니다.
WordPress에서 코드 블록을 사용하는 방법을 알고 싶다면 잘 찾아오셨습니다. 이 문서에서는 독자와 코드 스니펫을 공유할 수 있도록 전체 프로세스를 안내합니다. 자세한 내용을 보려면 계속 읽으십시오.
WordPress에서 코드 블록을 사용하는 방법
컴퓨터 프로그램을 일반 웹 페이지 텍스트로 표시하는 것은 재앙이 될 수 있습니다. 많은 사용자가 시각화하고 이해하기 어렵다는 것을 알게 될 것입니다. 다행스럽게도 많은 WordPress 편집기에는 컴퓨터 프로그램을 코드 형식으로 표시할 수 있는 코드 블록 기능이 있습니다.
다행스럽게도 코드 블록을 사용하여 컴퓨터 코드를 표시하는 것은 비교적 쉽습니다. 일부 텍스트 플러그인에는 기능이 없을 수 있으므로 시작하려면 기본 WordPress 편집기로 전환해야 합니다. 그런 다음 다음 단계에 따라 웹 사이트 페이지에 코드 블록을 추가하십시오.
- “새로 만들기” 버튼을 클릭하여 코드 블록을 추가하려는 웹 페이지를 엽니다.
- “/code”를 입력하고 “Enter”를 누르십시오.
- 표시하려는 코드를 입력하거나 붙여넣고 “Enter” 키를 누릅니다.
- 코드 블록 도구 모음을 추가로 사용하여 방금 작성한 코드의 모양을 사용자 지정할 수 있습니다. 예를 들어 “B” 버튼을 사용하여 선을 굵게 만들거나 “i” 버튼을 사용하여 기울임꼴로 만들 수 있습니다.
- 웹페이지 작성을 완료한 후 “미리보기” 버튼을 클릭하여 라이브 버전에서 코드 블록이 어떻게 보이는지 확인하십시오.
- 최종 결과에 만족하면 다른 사람들도 코드 블록을 볼 수 있도록 “업데이트” 버튼을 누르십시오.
코드 블록의 타이포그래피를 변경하는 방법
타이포그래피는 많은 것을 말하며 코드 블록뿐만 아니라 전체 웹 페이지의 미학을 만들거나 깨뜨릴 수 있습니다. 코드 블록의 서체를 변경하려면 다음 단계를 따르십시오.
- 변경하려는 타이포그래피가 있는 코드 블록을 강조 표시합니다.
- 화면 오른쪽 상단 모서리에 있는 “설정” 아이콘을 클릭합니다.
- “타이포그래피” 섹션에서 선호하는 타이포그래피를 지정합니다.
- “업데이트” 버튼을 클릭하여 변경 사항을 저장하십시오.
색상, 배경, 줄 간격 문자 간격을 변경하여 블록의 미학을 추가로 사용자 정의할 수 있습니다.
예를 들어, 어두운 테마의 웹 사이트가 있는 경우 코드 블록의 배경이 다를 수도 있습니다.
WordPress에서 코드 블록을 삭제하는 방법
코드 블록은 영구적이지 않으며 WordPress 웹 페이지의 다른 요소와 마찬가지로 삭제할 수 있습니다. 프로세스를 진행하는 방법은 다음과 같습니다.
- 삭제하려는 코드 블록이 있는 웹 페이지 또는 게시물을 엽니다.
- 삭제하려는 코드 블록을 클릭하여 강조 표시합니다.
- 코드 블록의 맨 위에 팝업되는 위젯에서 세 개의 점을 클릭합니다.
- 옵션에서 “코드 제거”를 선택합니다.
위 작업은 웹 페이지에서 전체 코드 블록을 삭제해야 합니다. 또는 블록을 선택하고 “Delete” 키를 누르기만 하면 됩니다. “Ctrl” + “Shift” + “Z” 키를 동시에 눌러도 동일한 결과를 얻을 수 있습니다.
이미 게시된 코드 블록을 편집하는 방법
때때로, 당신은 오류를 만들 수 밖에 없습니다. 코드를 통해 아이디어를 실행하는 더 나은 방법을 우연히 발견할 수도 있습니다. WordPress를 사용하면 아래 지침에 따라 기존 코드 블록을 편집할 수 있습니다.
- 편집하려는 코드 블록이 있는 페이지를 엽니다.
- “편집”을 클릭합니다.
- 코드 편집을 활성화하려면 코드 블록을 클릭하십시오.
- 변경을 마치면 “업데이트” 버튼을 클릭하십시오.
플러그인을 사용하여 WordPress 웹사이트에 코드 블록을 추가하는 방법
웹 사이트에 코드 스니펫을 자주 추가하는 경우 더 강력한 플러그인을 사용하는 것이 가장 좋습니다. 인기 있는 강력하고 우수한 코드 블록 중 하나는 SyntaxHighlighter Evolved 플러그인입니다.
이 플러그인은 다음과 같은 이유로 기본 WordPress Editor보다 이점이 있습니다.
- 코드 조각의 줄 수를 강조 표시합니다.
- 그것은 여러 프로그래밍 언어를 지원합니다
- 시청자가 표시된 코드를 복사하여 붙여넣을 수 있습니다.
플러그인을 사용하여 웹사이트에서 코드 스니펫을 더 잘 관리하는 방법은 다음과 같습니다.
- SyntaxHighlighter Evolved 플러그인 을 설치하고 활성화합니다 .
- 코드 블록을 추가하려면 페이지나 게시물을 여세요.
- 편집을 활성화하고 더하기 버튼을 클릭합니다.
- “SyntaxHighLighter Evolved”를 검색하고 나타나는 첫 번째 결과를 엽니다.
- 사용 가능한 코드 블록에 코드를 붙여넣거나 작성합니다.
- 화면 오른쪽 상단 모서리에 있는 설정 아이콘을 클릭하고 “차단” 탭으로 이동합니다.
- 번호 매기기를 표시할 방법과 강조 표시할 코드 줄을 지정합니다.
- 코드를 클릭할 수 있도록 하려면 ‘URL을 클릭할 수 있게 만들기’를 켤 수도 있습니다.
코드 블록의 색상 및 서식 구성표를 변경하려면 다음 단계를 따르세요.
- “설정”으로 이동하여 “SyntaxHighlighter” 섹션으로 이동합니다.
- 블록의 테마를 변경합니다.
- 라이브 모드에서 변경 사항이 어떻게 표시되는지 미리 보려면 “미리보기”를 “저장”하십시오.
추가 FAQ
코드 블록을 클릭 가능한 링크로 만드는 방법은 무엇입니까?
WordPress 편집기를 사용하여 코드 블록을 링크로 만들려면 다음 단계를 따르십시오.
1. 링크로 사용할 코드 줄을 선택합니다.
2. 팝업 위젯에서 링크 아이콘을 선택합니다. 또는 키보드에서 “Ctrl” + “K” 키를 누를 수 있습니다.
3. 코드를 링크할 URL을 입력하고 “Enter” 키를 누르십시오.
WordPress 편집기에서 제공하는 코드 블록 편집기를 사용하여 코드를 강조 표시할 수 있습니까?
아니요, 기본 WordPress 편집기에서 제공하는 코드 블록은 사용자가 코드를 복사하여 붙여넣는 것을 허용하지 않습니다. 그렇게 하려면 “SyntaxHighligher Evolved” 플러그인과 같은 고급 코드 블록 편집 플러그인의 도움이 필요합니다.
Elementor에 코드 블록 기능이 있습니까?
Elementor는 WordPress 웹 사이트를 구축하는 데 사용되는 인기 있는 끌어서 놓기 플러그인입니다. 안타깝게도 플러그인을 사용하여 웹사이트를 만드는 경우 웹사이트에서 컴퓨터 프로그램을 포맷할 수 있는 블록을 찾을 수 없습니다. 따라서 작업을 완료하려면 기존 WordPress 편집기로 전환해야 합니다.
귀하의 웹 사이트를 시작하고 실행하십시오
프로그래밍 블로그를 운영하든 단순히 웹사이트에서 코드 스니펫을 공유하든, WordPress에서 코드 블록을 사용하는 방법을 아는 것은 매우 중요합니다. 코드 블록은 독자에게 쉬운 시간을 제공하고 웹 사이트의 사용자 경험을 전반적으로 향상시킵니다. 보시다시피 코드 블록 삽입은 특히 기본 WordPress 편집기를 사용하는 경우 상대적으로 쉬운 프로세스입니다.
WordPress에서 제공하는 코드 블록을 사용해 보셨습니까? SyntaxHighlighter Evolved 플러그인은 어떻습니까? 아래 의견 섹션에서 귀하의 경험을 공유하십시오.
답글 남기기