워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인
Crayon Syntax Highlighter
프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다. 코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다. 워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다.
Crayon Syntax Highlighter는 꽤 오랫동안 업데이트가 되지 않고 있어서 환경에 따라 제대로 작동하지 않을 수 있습니다. 대체할 수 있는 플러그인으로 Enlighter가 있습니다.
사용법
- 플러그인을 설치하고 활성화하면 에디터에 <> 모양 아이콘이 생깁니다. 그 아이콘을 클릭하면 코드 입력 창이 생깁니다.
- 언어를 선택하고 코드를 입력한 후 [추가]를 클릭합니다.
- 글을 저장하면 다음처럼 줄번호와 함께 예쁘게 코드가 출력됩니다.
- 코드 위에 마우스를 올리면 복사 등의 작업을 할 수 있는 툴바가 나옵니다.
설정
기본 설정만으로도 충분히 예쁘지만, 설정을 편집하여 원하는 모양으로 바꿀 수 있습니다.
테마가 수십개 있고, 글꼴, 크기, 줄간격, 툴바를 무조건 보이기, 줄바꿈 처리 등 다양한 옵션이 있습니다.
<pre> 태그에 class만 붙이는 형식이기에 플러그인을 비활성화해도 고정폭 글꼴로 표현된다는 것도 장점입니다.
HTML 코드가 깨진다면
Crayon Syntax Highlighter 플러그인 사용시, 기존에 <pre> 태그로 입력했던 HTML 코드가 깨지는 문제가 발생할 수 있습니다.
이 문제를 해결하려면 [설정 - Crayon]에서 [Decode HTML entities in code]에 체크하고 저장합니다.
워드프레스 강좌 / Crayon Syntax Highlighter / 글 목록에서 코드 제거하는 방법
Crayon Syntax Highlighter은 워드프레스에서 사용하는 코드 하이라이트 플러그인입니다. 최근엔 업데이트가 별로 없지만, 사용에는 문제가 없습니다. Crayon Syntax Highlighter를 사용하면 한 가지 문제가 발생합니다. 글 시작 부분에 코드가 있으면 글 목록에서 그 코드가 나온다는 것입니다. 글 목록에 텍스트만 출력되는 상황이라면 그리 보기 싫지는 않지만, 썸네일이 들어가거나 2열로 배열한다면 모양이 이상해질 수 있습니다. CSS로 ...
워드프레스 강좌 / 플러그인 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인
기업 홈페이지에 가면 파트너 또는 고객사 로고가 가로 방향으로 흘러가는 것을 볼 수 있습니다. 이를 보통 로고 슬라이더라고 합니다. 로고 슬라이더는 직접 코딩하거나 공개된 오픈 소스를 이용하여 만들 수 있는데, 워드프레스라면 플러그인으로 쉽게 구현할 수 있습니다. 플러그인 추가 화면에서 logo slider로 검색하면 상당히 많은 플러그인이 나오는데, 사용법은 비슷합니다. 가장 먼저 나오는 ...
워드프레스 강좌 / 플러그인 / Enlighter / 코드 하이라이터(Code Highlighter) 플러그인
Enlighter 워드프레스 코드 하이라이트 플러그인으로 널리 사용되는 것은 Crayon Syntax Highlighter입니다. 그런데 개발이 중단된지 꽤 되었습니다. 그래서 찾은 다른 플러그인이 Enlighter입니다. 어떻게 사용하는지 간단히 알아보겠습니다. 설치와 설정 설치는 워드프레스 관리자 페이지에서 할 수 있습니다. highlighter로 검색 후 설치합니다. 설정은 Enlighter에서 합니다. 다양한 메뉴가 있는데, 기본 설정 그대로 사용해도 큰 불편은 없습니다. 사용법 - 블록 편집기 Enlighter를 ...
시스템 요구사항 워드프레스를 설치하려면 PHP를 사용할 수 있는 웹서버와 데이터베이스 서버가 필요합니다. 웹서버는 어떤 것이든 상관없지만, 권장되는 것는 Apache와 NginX입니다. 데이터베이스 서버는 MySQL 또는 MariaDB가 필요합니다. We recommend servers running version 7.3 or greater of PHP and MySQL version 5.6 OR MariaDB version 10.0 or greater. We also recommend either Apache or Nginx as ...
워드프레스는 페이지, 글, 카테고리, 태그, 사용자 정의 링크 등으로 메뉴를 만들 수 있습니다. 그리고 그 메뉴는 테마가 제공하는 위치에 배치를 합니다. 하나의 메뉴를 여러 곳에 배치할 수도 있고, 위젯에 추가하는 것도 가능합니다. 메뉴 생성과 관리는 에서 합니다. 화면 옵션 메뉴에 추가할 수 있는 아이템은 여러 가지가 있습니다. 그리고 테마나 플러그인으로 ...
워드프레스 강좌 / 블록 에디터 / 코드 입력하는 방법
워드프레스에서 글 작성할 때 코드를 붙여넣으면, 들여쓰기가 제대로 표현되지 않거나 코드를 실행해버리는 등 원하는 모양으로 나오지 않는 경우가 있습니다. 그럴 경우 그대로 붙여넣지 말고 코드 블록으로 붙여넣습니다. + 아이콘을 클릭하고 를 클릭합니다. 그리고 코드를 붙여넣습니다.
워드프레스 강좌 / 플러그인 / Loco Translate / 번역 파일을 수정하거나 새로 만드는 플러그인
번역 워드프레스, 플러그인, 테마는 번역 파일을 이용해서 각 나라의 언어로 표현될 수 있도록 만들어집니다. 번역 파일은 보통 자동으로 설치되고, 다운로드 받아서 사용할 수도 있습니다. 하지만, 번역 파일이 존재하지 않는 플러그인이나 테마가 있을 수도 있고, 번역 파일이 있어도 번역이 마음에 들지 않을 수도 있습니다. 그럴 땐 직접 번역 파일을 만들거나 수정하여 사용할 수 있습니다. Loco Translate Loco ...
플러그인을 설치하는 방법 플러그인을 설치하는 방법은 세 가지가 있습니다. 웹에서 바로 설치하기 ZIP 파일 업로드하여 설치하기 FTP로 업로드하여 설치하기 WordPress.ORG에서 공유되는 플러그인은 보통 1번 방식으로 설치합니다. WordPress.ORG에서 공유되지 않는 플러그인은 2번 또는 3번 방식으로 설치합니다. 웹에서 바로 설치하기 에서 설치하려는 플러그인을 찾습니다. 추천, 인기 등에서 널리 쓰이는 플러그인을 볼 수 있고, 검색을 통해서 원하는 ...
워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인
Pixabay 픽사베이(Pixabay)는 개인은 물론 상업적 용도로도 사용할 수 있는 이미지를 공유하는 사이트입니다.(대부분 CC0 Creative Commons이나, 간혹 상업적 이용이 곤란한 것도 있으니 다운로드 받기 전에 라이센스를 확인하는 것이 좋습니다.) 현재 백만 개가 넘는 사진, 일러스트, 벡터 이미지, 동영상이 있으며, 일정 수준의 품질을 만족해야 공유 가능하므로 좋은 자료가 많습니다. 한글로 번역이 잘 되어 있는 편이어서 한국 ...
워드프레스 강좌 / 플러그인 / Schema / 구조화된 데이터 만들어주는 플러그인
구조화된 데이터 SEO와 관련해서 해야 할 것 중의 하나가 구조화된 데이터를 만드는 것입니다. 구조화된 데이터는 콘텐츠에 관련된 정보를 검색 엔진에 알려주는 역할을 합니다. 만약 구조화된 데이터가 없으면 구글 웹마스터도구에서 다음과 같은 메시지를 보여줍니다. 사이트에 구조화된 데이터가 없습니다. 구조화된 데이터은(는) Google에서 사이트의 콘텐츠를 파악하여 검색결과에 리치 스니펫을 표시하는 데 도움을 줍니다. 구조화된 데이터는 HTML 마크업을 ...