WordPress 사이트에 코드를 쉽게 표시하는 방법

WordPress 블로그 게시물에 코드를 표시 하시겠습니까? 일반 텍스트와 같은 코드를 추가하려고하면 WordPress에서 올바르게 표시되지 않습니다..


WordPress는 게시물을 저장할 때마다 여러 정리 필터를 통해 콘텐츠를 실행합니다. 이 필터는 누군가가 웹 사이트를 해킹하기 위해 게시물 편집기를 통해 코드를 삽입하지 않도록하기 위해 있습니다..

이 기사에서는 WordPress 사이트에 코드를 쉽게 표시하는 올바른 방법을 보여줍니다. 우리는 당신에게 다른 방법을 보여줄 것이며, 당신은 당신의 요구에 가장 적합한 방법을 선택할 수 있습니다.

WordPress 게시물에 코드를 쉽게 표시하는 방법

방법 1. WordPress의 기본 편집기를 사용하여 코드 표시

이 방법은 코드를 자주 표시 할 필요가없는 초보자 및 사용자에게 권장됩니다..

코드를 표시 할 블로그 게시물이나 페이지를 편집하면됩니다. 게시물 편집 화면에서 게시물에 새 코드 블록을 추가하십시오.

WordPress 게시물에 코드 블록 추가

이제 블록의 텍스트 영역에 코드 스 니펫을 입력 할 수 있습니다.

블로그 게시물에 코드 추가

그런 다음 블로그 게시물을 저장하고 미리보고 코드 블록이 실제로 작동하는지 확인할 수 있습니다..

WordPress에 표시된 PHP 코드

워드 프레스 테마에 따라 웹 사이트에서 코드 블록이 다르게 보일 수 있습니다.

방법 2. 플러그인을 사용하여 WordPress에 코드 표시

이 방법에서는 WordPress 플러그인을 사용하여 블로그 게시물에 코드를 표시합니다. 이 방법은 기사에 코드를 자주 표시하는 사용자에게 권장됩니다.

기본 코드 블록에 비해 다음과 같은 장점이 있습니다.

  • 모든 프로그래밍 언어로 모든 코드를 쉽게 표시 할 수 있습니다
  • 구문 강조 및 줄 번호와 함께 코드를 표시합니다.
  • 사용자는 코드를 쉽게 연구하고 복사 할 수 있습니다

먼저 SyntaxHighlighter Evolved 플러그인을 설치하고 활성화해야합니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

활성화되면 코드를 표시 할 블로그 게시물을 편집 할 수 있습니다. 게시물 수정 화면에서 게시물에‘SyntaxHighlighter 코드’블록을 추가하십시오.

구문 강조 코드 블록

이제 포스트 편집기에 코드를 입력 할 수있는 새 코드 블록이 표시됩니다. 코드를 추가 한 후 오른쪽 열에서 블록 설정을 선택해야합니다.

구문 강조 코드 블록 설정

먼저 코드 언어를 선택해야합니다. 그런 다음 줄 번호를 끄고 첫 번째 줄 번호를 제공하고 원하는 줄을 강조 표시 한 다음 링크를 클릭 할 수 있도록 기능을 끄십시오..

완료되면 게시물을 저장하고 미리보기 버튼을 클릭하여 작동하는지 확인하십시오..

구문 강조와 함께 표시되는 코드

플러그인에는 다양한 색 구성표와 테마가 제공됩니다. 색상 테마를 변경하려면 방문해야합니다 설정»SyntaxHighlighter 페이지.

구문 강조 설정

설정 페이지에서 색상 테마를 선택하고 SyntaxHighlighter 설정을 변경할 수 있습니다. 페이지 하단에서 코드 블록의 미리보기를보기 위해 설정을 저장할 수 있습니다.

코드 블록 미리보기

Classic Editor와 함께 SyntaxHighlighter 사용

이전의 고전적인 WordPress 편집기를 계속 사용하는 경우 SyntaxHighlighter 플러그인을 사용하여 WordPress 블로그 게시물에 코드를 추가하는 방법은 다음과 같습니다..

언어 이름으로 대괄호로 코드를 감싸기 만하면됩니다. 예를 들어 PHP 코드를 추가하려는 경우 다음과 같이 추가합니다.

[php]
<?PHP
개인 함수 get_time_tags () {
$ time = get_the_time ( ‘d M, Y’);
$ 시간을 반환;
}
?>
[/ php]

마찬가지로 HTML 코드를 추가하려는 경우 다음과 같이 HTML 단축 코드 주위에 랩핑합니다.

[html]
샘플 링크
[/ html]

방법 3. WordPress에서 코드를 수동으로 표시 (플러그인 또는 차단 없음)

이 방법은 더 많은 작업이 필요하고 항상 의도 한대로 작동하지는 않으므로 고급 사용자를위한 것입니다..

여전히 기존 클래식 편집기를 사용하고 플러그인을 사용하지 않고 코드를 표시하려는 사용자에게 적합합니다..

먼저 온라인 HTML 엔터티 인코더 도구를 통해 코드를 전달해야합니다. 코드 마크 업을 HTML 엔터티로 변경하여 코드를 추가하고 WordPress 정리 필터를 무시할 수 있습니다..

이제 텍스트 편집기에서 코드를 복사하여 붙여 넣은 후 태그를 감싸십시오..

클래식 편집기에서 수동으로 코드 추가

코드는 다음과 같습니다.

이것은 샘플 링크입니다

이제 게시물을 저장하고 작동중인 코드를 미리 볼 수 있습니다. 브라우저가 HTML 엔티티를 변환하고 사용자는 올바른 코드를보고 복사 할 수 있습니다.

WordPress에서 코드를 수동으로 표시

이 기사가 WordPress 사이트에 코드를 쉽게 표시하는 방법을 배우는 데 도움이 되었기를 바랍니다. 가장 원하는 WordPress 팁, 요령 및 해킹 목록을보고 싶을 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map