WordPress에서 HTML 편집기를 사용하여 사용자 정의 HTML을 추가하는 방법

HTML(HyperText Markup Language)은 웹 사이트를 만드는 데 널리 사용되는 언어 중 하나입니다. HTML은 개발자만을 위한 것 같지만, 비기술 웹사이트 소유자도 HTML 편집기를 사용하여 HTML을 WordPress 사이트에 추가하는 방법을 알아야 많은 경우에 도움이 됩니다.

특히 표 만들기, 글꼴 스타일 또는 글꼴 크기 변경, 사용자 지정 테두리 추가 등과 같은 일부 작업을 처리해야 하지만 WordPress는 이러한 사용자 지정을 지원하지 않으므로 HTML 편집기를 사용해야 합니다. 게시물/페이지 편집기 및 위젯에서 HTML 코드를 추가하고 편집할 수 있습니다. 하지만 우선 WordPress 웹사이트에 HTML 코드를 추가할 때 염두에 두어야 할 몇 가지 사항이 있습니다.

참고 웹사이트에 HTML 편집기를 사용할 때

WordPress 사이트에서 HTML 코드가 원하는 대로 제대로 표시되도록 하려면 Notepad++와 같은 코드 편집기를 사용하여 구문이 올바른지 여부를 확인해야 합니다. 잘못된 구문은 웹 사이트 표시에 오류를 일으킬 수 있습니다.

둘째, HTML 편집기에서 사용하는 HTML 코드에 <script> 태그를 작성하면 안 됩니다. 태그가 삭제되면 콘텐츠가 예상대로 표시되지 않을 수 있기 때문입니다.

이제 HTML 편집기를 사용하여 다음 코드를 추가하여 간단한 테이블을 만드는 방법을 보여 드리겠습니다. 이것은 단지 나의 예일 뿐이며 자신의 코드로 시도해 볼 수 있습니다.

 <table style = "background-color: # 87ceeb;">

  <tbody>

    <tr>

      <td> Books </td>

      <td> Authors </td>

    </tr>

    <tr>

      <td> The magical power of emotional appeals </td>

      <td> Roy Garn </td>

    </tr>

    <tr>

      <td> How to win friends and influence people </td>

      <td> Dale Carnegie </td>

    </tr>

  </tbody>

</table>

페이지 또는 게시물에서 HTML 편집기 사용

WordPress 편집기를 사용하여 게시물이나 페이지에 HTML을 추가할 수 있습니다. 조작은 write and add a post on WordPress 때처럼 간단합니다. Classic 및 Gutenberg 편집기 모두에서 지원됩니다.

구텐베르크 편집기 사용

게시물/페이지 편집기에서 더하기(+) 기호를 클릭하여 새 블록을 추가하고 사용자 지정 HTML 블록을 선택합니다. 검색창을 이용하시면 빠르게 찾으실 수 있습니다.



그런 다음 선택한 블록에 HTML 코드를 삽입합니다.



HTML 코드가 프런트 엔드에 어떻게 표시되는지 보려면 미리보기를 클릭하십시오.

클래식 편집기 사용

많은 사람들이 WordPress의 새로운 Gutenberg 편집기에 익숙하지 않으므로 switch from Gutenberg to Classic . 클래식 편집기에 HTML 코드를 삽입하는 것은 Gutenberg를 사용하는 것보다 더 간단합니다. 게시물 편집기를 열고 텍스트 탭을 클릭한 다음 원하는 위치에 코드를 추가하기만 하면 됩니다.



시각적 탭을 클릭하여 결과를 확인합니다.

저장 및 결과 확인

완료한 후에는 저장 또는 업데이트를 클릭하여 콘텐츠를 저장해야 합니다. 이제 프런트 엔드에 원하는 대로 테이블이 표시됩니다.

위젯에서 HTML 편집기 사용

위젯은 WordPress theme 에 따라 사이드바, 바닥글, 슬라이드 아웃 메뉴 등과 같은 위젯 영역에 추가할 수 있는 미디어, 텍스트, 링크, 목록 등과 같은 콘텐츠 블록입니다. 사용자 정의 프로그램 또는 관리 대시보드에서 위젯에 HTML을 추가할 수 있습니다.

사용자 정의 프로그램에서 HTML 편집기 사용

사용자 정의 HTML 위젯을 위젯 영역에 추가해야 합니다. 기본적으로 Customizer로 다른 위젯을 추가하는 것과 유사합니다. 아직 Customizer를 사용하는 방법을 명확하게 알지 못하는 경우 매우 자세한 지침here을 확인하십시오.

사용자 지정 > 위젯으로 이동하여 위젯 영역을 선택하고 새로 추가 버튼을 클릭합니다.



사용자 지정 HTML 위젯의 콘텐츠 상자에 HTML 코드를 추가하면 아래와 같이 사이드바에 테이블이 표시됩니다. 게시를 클릭하여 저장하는 것을 잊지 마십시오. 그리고 그게 다야!

관리 대시보드에서 HTML 편집기 사용

Admin Dashboard > 모양 > 위젯에서 사용자 지정 HTML을 선택하고(1) 표시할 위치를 선택한 다음(2) 위젯 추가를 클릭합니다(3). 그런 다음 Custom HTML 위젯(4)의 콘텐츠 상자에 코드를 추가하고 저장을 눌러 완료합니다.



그런 다음 프론트 엔드로 이동하여 결과를 확인하십시오. 테이블이 바닥글에 표시됩니다.



보시다시피 Dashboard의 HTML 편집기를 사용하는 것은 첫 페이지에서 라이브 미리보기를 볼 수 없기 때문에 약간 불편하므로 Customizer를 선호합니다.

마지막 말

HTML 편집기를 사용하여 웹사이트에 코드를 추가하는 방법을 알면 웹사이트를 발전시키고 콘텐츠와 이미지를 크게 개선하는 데 도움이 될 수 있습니다. 그런 다음 이 작업의 나머지 부분은 콘텐츠를 추가하고 사용자 지정하는 코딩 기술에 따라 달라집니다.

GretaThemes의 간행물입니다.