워드프레스 강좌 / 블록 에디터 / 코드 입력하는 방법

워드프레스에서 글 작성할 때 코드를 붙여넣으면, 들여쓰기가 제대로 표현되지 않거나 코드를 실행해버리는 등 원하는 모양으로 나오지 않는 경우가 있습니다. 그럴 경우 그대로 붙여넣지 말고 코드 블록으로 붙여넣습니다.

  • + 아이콘을 클릭하고 [포맷]의 [코드]를 클릭합니다.

  • 그리고 코드를 붙여넣습니다.

같은 카테고리의 다른 글
워드프레스 강좌 / 설치하기

워드프레스 강좌 / 설치하기

시스템 요구사항 워드프레스를 설치하려면 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 ...

워드프레스 강좌 / 플러그인 / Search Exclude / 글 또는 페이지를 검색에서 제외시키는 플러그인

워드프레스 강좌 / 플러그인 / Search Exclude / 글 또는 페이지를 검색에서 제외시키는 플러그인

워드프레스는 검색 기능을 갖고 있습니다. 글이나 페이지를 검색할 수 있는 기능인데, 대부분의 테마는 검색 기능을 사용할 수 있게 해놓았습니다. 워드프레스 공식 테마 중의 하나인 Twenty Twenty라면, 상단 오른쪽의 돋보기 아이콘을 클릭하여 검색할 수 있습니다. 흔한 경우는 아니지만, 특정 글이나 페이지가 검색에서 노출되지 않도록 해야할 때가 있습니다. URL을 정확히 아는 사람만 내용을 볼 ...

워드프레스 강좌 / 플러그인 / Advanced Custom Fields / 사용자 정의 필드 만드는 플러그인

워드프레스 강좌 / 플러그인 / Advanced Custom Fields / 사용자 정의 필드 만드는 플러그인

워드프레스의 사용자 정의 필드 기능으로 글이나 페이지에 추가적인 정보를 넣을 수 있습니다. 하지만, 단순한 형태로 되어 있어서 많은 정보를 추가할 때 불편함이 있습니다. 이를 보완해주는 사용자 정의 필드 관련 플러그인이 여럿 있는데, 그 중 널리 사용되는 것이 Advanced Custom Fields입니다. 텍스트, 범위, 체크박스, 라디오 버튼, 파일, 이미지, 달력 등 다양한 형식으로 값을 입력할 수 ...

워드프레스 / 플러그인 / KBoard / 일대일(1:1) 상담 게시판 만드는 방법

워드프레스 / 플러그인 / KBoard / 일대일(1:1) 상담 게시판 만드는 방법

인터넷 쇼핑몰이나 서비스에 일대일 상담 기능이 있습니다. 질문자 입장에서는 나의 문의나 정보가 다른 사람에게 공개되지 않고, 판매자 입장에서는 제품 또는 서비스의 문제점이나 오류가 알려지는 것을 방지할 수 있다는 장점이 있습니다. 워드프레스에 일대일 상담 기능을 제공하는 플러그인이 여러 가지가 있는데, KBoard를 이용해서 구현할 수도 있습니다. 무료이기도 하고, 이미 KBoard로 게시판을 운영하고 있다면 ...

워드프레스 강좌 / 플러그인 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인

워드프레스 강좌 / 플러그인 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인

기업 홈페이지에 가면 파트너 또는 고객사 로고가 가로 방향으로 흘러가는 것을 볼 수 있습니다. 이를 보통 로고 슬라이더라고 합니다. 로고 슬라이더는 직접 코딩하거나 공개된 오픈 소스를 이용하여 만들 수 있는데, 워드프레스라면 플러그인으로 쉽게 구현할 수 있습니다. 플러그인 추가 화면에서 logo slider로 검색하면 상당히 많은 플러그인이 나오는데, 사용법은 비슷합니다. 가장 먼저 나오는 ...

워드프레스 강좌 / 플러그인 / Content Cards / 링크를 네이버나 페이스북처럼 만들어주는 플러그인

워드프레스 강좌 / 플러그인 / Content Cards / 링크를 네이버나 페이스북처럼 만들어주는 플러그인

Content Cards 네이버 블로그에서 링크를 추가하면, 썸네일과 요약글이 있는 링크가 만들어집니다. 페이스북에도 비슷한 기능이 있습니다. 워드프레스 자체에는 이 기능이 없지만, Content Cards 플러그인을 이용하면 비슷한 효과를 낼 수 있습니다. 설치 WordPress.ORG에서 공유되는 플러그인이므로 워드프레스 관리자에서 설치할 수 있습니다. 링크 삽입하기 플러그인을 활성화하면 에디터에 아이콘이 하나 생깁니다. 그 아이콘을 클릭하여 링크를 추가합니다. 링크가 가리키는 문서에서 이미지와 제목, 글의 일부를 ...

워드프레스 강좌 / Smush / 이미지 압축, 최적화 플러그인

워드프레스 강좌 / Smush / 이미지 압축, 최적화 플러그인

워드프레스에 이미지를 업로드하면 썸네일을 만듭니다. 예를 들어 image.png를 업로드하면 image-150x150.png 같은 파일이 만들어지는 것이죠. 문제는 한 개만 만드는 것이 아니라는 것입니다. 워드프레스 미디어 설정에 있는 세 가지 썸네일은 기본으로 만들고, 테마에서 요구하는 썸네일, 플러그인에서 요구하는 썸네일 등을 잔뜩 만듭니다. 따라서 이미지를 한 개 업로드해도 여러 개의 썸네일 때문에 디스크 용량을 ...

워드프레스 강좌 / 플러그인 / DW Question & Answer / 질문과 답변 게시판 플러그인

워드프레스 강좌 / 플러그인 / DW Question & Answer / 질문과 답변 게시판 플러그인

게시판 형식은 여러 가지가 있습니다. 그 중 하나가 Q&A 형식의 게시판입니다. 질문을 남기면 답변을 달고, 질문자는 여러 답변에서 원다는 답을 채택하는 시스템입니다. Stack Overflow, 네이버 지식인과 비슷하다고 할 수 있습니다. 워드프레스에도 그런 형식의 게시판을 만들 수 있는 플러그인들이 있습니다. 그 중 하나가 DW Question & Answer입니다. 설치하고 사용하는 방법을 알아보겠습니다. 설치와 설정 워드프레스 ...

워드프레스 강좌 / Shortcode로 애드센스 광고 본문에 삽입하는 방법

워드프레스로 만든 사이트에 애드센스 광고를 다는 방법은 여러 가지입니다. 사이드바에 넣고 싶다면 위젯 설정에서 사용자 정의 HTML을 이용하면 됩니다. 본문 상단이나 하단에 넣고 싶다면 플러그인을 사용하는 게 편합니다. 만약 본문 중간 원하는 위치에 광고를 넣고 싶다면 어떻게 할까요? 그 때는 쇼트코드(Shortcode)를 이용하는 게 편합니다. 테마의 functions.php에 다음 코드를 추가합니다. 애드센스 광고 ...

워드프레스 강좌 / 플러그인 / Table of Contents Plus / 포스트, 페이지에 차례(목차) 만드는 플러그인

워드프레스 강좌 / 플러그인 / Table of Contents Plus / 포스트, 페이지에 차례(목차) 만드는 플러그인

긴 글을 읽을 때 차례(목차)가 있으면 좋습니다. 예를 들어 위키백과는 문서 상단에 목차가 있습니다. 목차가 있으면 문서가 어떤 내용을 담고 있는지 파악하기 쉽고 링크가 걸려 있어 원하는 내용으로 이동하기 편하다는 장점이 있습니다. Table of Contents Plus 목차를 영어로 Table of Contents, 줄여서 TOC라고 합니다. TOC로 검색하면 꽤 많은 플러그인이 나오는데, 가장 사용자가 많은 플러그인이 Table of ...