WordPress에서 HTML을 편집하는 방법

사이트를 사용자 정의하시겠습니까? 웹사이트와 디자인을 개인화할 방법을 찾고 있다면 제대로 찾아오셨습니다. 이 가이드에서는 프리랜서를 고용하지 않고 WordPress에서 HTML 파일을 편집하는 다양한 초보자 친화적인 방법을 보여줍니다.

WordPress에서 HTML 코드를 편집하는 이유는 무엇입니까?

WordPress는 코딩 경험이 필요 없고 사이트를 사용자 정의할 수 있는 수천 가지 테마와 플러그인을 제공하는 즉시 사용 가능한 CMS이지만 HTML 편집을 배우면 많은 유연성을 얻을 수 있습니다.

HTML 코드를 사용자 지정하면 사이트를 더 잘 제어 할 수 있으며 고급 디자인 사용자 지정을 수행하고 테마에 사용자 지정 기능이나 효과를 추가할 수 있습니다 . 또한 관리자 대시보드에 액세스할 수 없는 경우 문제를 해결할 수 있습니다.

HTML 코드를 사용자 정의하여 수행할 수 있는 주요 작업은 다음과 같습니다.

• 텍스트, 이미지 및 비디오 포함
• 기능 또는 기능 추가
• WordPress 사이트에 대한 더 많은 제어권 확보
• WordPress 관리 대시보드에 액세스할 수 없는 경우 문제 해결

대체로 WordPress에서 HTML 코드를 편집하는 방법을 배우면 사이트를 사용자 정의할 수 있는 더 많은 옵션이 제공되고 사이트를 다음 단계로 끌어올릴 수 있습니다.

HTML을 편집하면 안 되는 경우는 언제입니까?

아시다시피 WordPress는 HTML, CSS, PHP 및 JavaScript의 네 가지 주요 언어를 사용합니다. 즉, 일부 변경을 수행하려면 HTML보다 더 많은 것을 알아야 합니다. 그렇기 때문에 HTML 코드를 사용자 정의하는 것이 좋지 않은 경우가 있습니다.

HTML은 웹 페이지를 구성하는 데 사용되므로 사이트 디자인을 변경하고 색상, 글꼴, 줄 높이 등을 편집해야 하는 경우 CSS 코드를 간단히 사용자 정의할 수 있습니다. 또한 동시에 여러 페이지의 레이아웃을 제어하려고 할 때 HTML을 편집하면 안 됩니다.

또한 실제 환경에서 코드를 사용자 지정하지 않는 것이 좋습니다. 잘못된 위치에 하나의 쉼표나 아포스트로피가 있으면 사이트에 심각한 문제가 발생할 수 있으므로 준비 환경에서 모든 것을 테스트하는 것이 훨씬 좋습니다.

WordPress에서 HTML을 편집하는 방법

이 가이드에서는 WordPress에서 HTML 코드를 사용자 지정하는 다양한 방법을 보여줍니다.

1. 워드프레스 클래식 편집기
2. 워드프레스 블록 편집기
3. HTML 소스 코드 편집
4. 플러그인 사용
5. 위젯

각각을 살펴보고 가장 적합한 것을 선택할 수 있습니다.

시작하기 전에…

계속 진행하기 전에 하위 테마를 만드는 것이 좋습니다. 방법을 모르는 경우 이 단계별 가이드를 확인하거나 이러한 플러그인을 사용하십시오. 상위 테마 파일을 수정하면 테마를 업데이트할 때마다 모든 사용자 정의가 손실되기 때문에 이것은 중요합니다.

또한 사이트의 전체 백업을 만들고 안전한 위치에 저장해야 합니다. 이렇게 하면 문제가 발생하는 경우 항상 원래 위치로 돌아가 사이트를 복원할 수 있습니다.

1) 워드프레스 클래식 편집기

Classic Editor는 WordPress의 인기 있는 콘텐츠 편집기입니다. 이 플러그인을 사용하면 사이트의 HTML 파일을 쉽게 편집할 수 있습니다.

먼저 사이트에 Classic Editor 플러그인을 설치하고 활성화합니다. 그런 다음 게시물이나 페이지를 열면 시각 및 텍스트의 두 가지 모드가 표시됩니다.

Visual은 프론트엔드에서 보는 것을 보여줍니다. 다양한 제목 크기, 이미지, 굵은 텍스트 등이 표시됩니다.

반면 텍스트 편집기를 사용하면 게시물의 HTML 버전이 표시되므로 여기에서 HTML 코드를 편집할 수 있습니다.

좋은 점은 시각적 모드로 전환하여 아무 것도 게시하지 않고도 프런트엔드에서 변경 사항이 어떻게 보이는지 확인할 수 있다는 것입니다.

HTML 코드를 추가하거나 사용자 정의한 후 게시물을 업데이트하거나 게시하기만 하면 됩니다.

2) 워드프레스 블록 편집기

최신 WordPress 버전에는 Gutenberg라는 새로운 편집기가 함께 제공됩니다. 더 많은 기능을 제공하는 고급 콘텐츠 편집기입니다. Gutenberg를 사용하는 경우 이전과 마찬가지로 HTML 코드를 편집할 수도 있습니다.

게시물이나 페이지 내에 사용자 정의 HTML 섹션을 추가하려면 HTML 블록 을 사용하고 여기에 HTML 코드를 추가하십시오. 그런 다음 게시물을 업데이트하면 됩니다.

때로는 기존 단락이나 이미지를 편집하고 추가 스타일을 추가해야 합니다. Gutenberg를 사용하여 WordPress에서 기존 HTML 코드를 편집하려면 사용자 정의할 요소를 선택하고 추가 옵션 을 누릅니다 .

그런 다음 HTML로 편집 옵션을 선택합니다.

요소의 HTML 모드가 표시되고 사용자 지정할 수 있습니다.

변경 사항에 만족하면 시각적 으로 편집 을 눌러 시각적 편집기로 쉽게 전환할 수 있습니다.

보시다시피 Gutenberg를 사용하여 기존 HTML 코드를 추가하거나 편집하는 것은 빠르고 쉽습니다. 게시하기 전에 항상 미리보기를 확인하여 모든 것이 잘 보이는지 확인하십시오.

3) WordPress에서 HTML 소스 코드 편집

또 다른 대안은 WordPress에서 HTML 소스 코드를 편집하는 것입니다. 이 프로세스는 수행 중인 작업을 모르면 사이트가 손상될 수 있으므로 이전 프로세스보다 위험합니다. 네 가지 다른 방법을 사용하여 HTML 소스 코드를 사용자 정의하는 방법을 살펴보겠습니다.

1. 대시보드 파일 편집기
2. FTP

3.1) 대시보드 파일 편집기

이것은 다른 웹사이트를 방문하거나 추가 도구에 의존하지 않고 소스 코드를 편집하는 가장 간단한 방법입니다.

WordPress 대시보드에서 모양 > 테마 편집기 로 이동합니다.

오른쪽에 모든 테마 파일이 표시됩니다.

오른쪽 상단에는 테마 디렉토리를 변경할 수 있는 옵션도 있습니다.

우리의 경우 Twenty Twenty 테마를 사용하고 있습니다. 올바른 테마를 선택한 후 편집하려는 적절한 폴더와 파일을 선택합니다.

편집할 수 있는 가장 일반적인 파일은 다음과 같습니다.

• index.php
• 헤더.php
• 바닥글.php
• 기능.php
• 스타일.css

테마의 헤더를 편집하고 싶다면 목록에서 header.php 파일을 선택하십시오.

일반적으로 .php 파일에는 PHP뿐 아니라 HTML, JavaScript(때로는), CSS(경우에 따라)와 같은 다른 언어도 포함되어 있습니다. 따라서 거기에서 HTML 파일을 편집할 수 있습니다. 위에서 언급했듯이 하나의 쉼표나 아포스트로피로 웹사이트가 손상될 수 있으므로 주의하여 진행하세요.

3.2) FTP

보다 기술적인 방법을 선호하는 경우 FTP 클라이언트를 사용하여 HTML 코드를 사용자 정의할 수 있습니다. 이를 위해 최고의 안전하고 사용자 친화적인 FTP 클라이언트 중 하나인 FileZilla를 사용할 수 있습니다.

먼저 FileZilla를 다운로드하고 계정을 만드십시오. 대부분의 WordPress 호스팅 회사는 cPanel을 통해 무료 FTP 계정 액세스를 제공합니다. 호스트 이름, 사용자 이름 및 암호를 생성했으면 서버에 연결합니다.

테마 파일을 편집하려면 wp-content > 테마 폴더로 이동하세요.

위의 스크린샷에서 볼 수 있듯이 사이트에는 GeneratePress, Twenty Nineteen, Twenty Twenty 및 Twenty Twenty One의 네 가지 테마가 있습니다.

GeneratePress 파일을 편집하기 위해 테마 폴더를 엽니다.

파일을 편집하려면 파일을 마우스 오른쪽 버튼으로 클릭하고 보기/편집 옵션을 선택합니다. 예를 들어 바닥글을 수정하려면 footer.php 파일을 수정해야 합니다.

FileZilla는 아래와 같이 텍스트 편집기에서 파일을 엽니다.

그런 다음 변경하고 파일을 저장한 다음 서버에 다시 업로드할 수 있습니다.

3.3) c패널

대부분의 호스팅 회사는 클라이언트에 대한 cPanel(제어판) 액세스를 제공하므로 WordPress에서 HTML 코드를 편집하는 또 다른 훌륭한 방법입니다.

이렇게 하려면 웹 호스팅 계정에 로그인하고 cPanel에 액세스합니다. 그런 다음 파일 관리자 를 엽니다.

그런 다음 wp-content > 테마 로 이동합니다.

사용자 정의하려는 테마를 연 다음 변경하려는 파일을 마우스 오른쪽 버튼으로 클릭하고 편집 을 누릅니다.

그러면 사용자 정의할 수 있는 텍스트 편집기에서 파일이 열립니다. 변경한 후에는 파일을 저장하는 것을 잊지 마십시오.

4) 플러그인

WordPress에서 HTML 코드를 편집하는 또 다른 방법은 플러그인을 사용하는 것입니다. WP 파일 관리자는 대시보드에 FTP 기능을 제공하는 훌륭한 무료 도구입니다. 그것을 사용하는 방법을 보자.

먼저 WordPress 사이트에 로그인하고 플러그인 > 새로 추가 로 이동합니다. 파일 관리자를 검색하여 설치하고 활성화합니다.

그런 다음 사이드바에서 WP 파일 관리자 옵션을 선택합니다.

이제 wp-content 디렉토리를 엽니다.

그런 다음 테마 폴더를 열고 수정할 폴더를 선택합니다. 우리의 경우 Astra 테마 파일을 편집합니다.

폴더를 열면 사용 가능한 모든 파일이 표시됩니다. 편집할 항목을 찾으면 해당 항목을 마우스 오른쪽 버튼으로 클릭하고 코드 편집기 옵션을 선택합니다.

대부분의 FTP 프로그램과 마찬가지로 이 플러그인을 사용하려면 랩톱에 텍스트 편집기 소프트웨어를 설치할 필요가 없습니다. 이 경우 플러그인은 코드를 편집할 수 있는 웹 기반 텍스트 편집기에서 파일을 엽니다.

파일 수정이 끝나면 저장하면 됩니다.

5) 위젯

이제 위젯 영역에 HTML 코드를 추가하는 방법을 살펴보겠습니다.

먼저 모양 > 위젯 으로 이동합니다.

거기에 모든 위젯 영역이 표시됩니다.

이제 모든 위젯 영역에 HTML 위젯을 추가하십시오. 이 자습서에서는 사이드바를 선택합니다.

코드에 제목을 추가하고 거기에 사용자 정의 HTML 코드를 포함할 수 있습니다.

코드를 추가했으면 위젯을 저장하면 됩니다.

보너스: WordPress에서 CSS 및 PHP 편집

워드프레스는 4가지 주요 언어를 사용합니다:

• PHP
• HTML
• CSS
• 자바스크립트

지금까지 WordPress에서 HTML 코드를 편집하는 방법을 배웠습니다. 이 섹션에서는 사이트의 CSS 및 PHP 코드를 사용자 정의하고 사용자 정의 스크립트를 추가하는 방법을 보여줍니다.

CSS 코드 편집 및 추가

위에서 언급한 방법 외에도 WordPress 사용자 지정 프로그램을 사용하여 사이트에 사용자 지정 CSS 코드를 추가할 수 있습니다. 이를 위해 WordPress 대시보드 에서 모양 > 사용자 정의 로 이동합니다.

사용자 지정 도구에 들어가면 추가 CSS 로 이동합니다.

거기에 CSS 코드를 입력하기만 하면 됩니다.

가장 좋은 점은 실시간 미리보기 모드에서 모든 변경 사항을 볼 수 있다는 것입니다.

변경 사항에 만족하면 게시물 또는 페이지를 업데이트/게시하십시오.

이것은 웹사이트에 CSS 코드를 추가하는 가장 쉬운 방법 중 하나입니다. 이 코드는 테마의 style.css 파일 위에 계층화됩니다.

참고: Divi 또는 Avada와 같은 일부 WordPress 테마에는 CSS 코드를 추가하는 기능이 내장되어 있으므로 사용자 지정 도구를 사용하는 대신 테마 패널을 사용하여 CSS 코드를 포함할 수 있습니다.

PHP 코드 편집/추가

PHP는 워드프레스의 핵심 언어입니다. HTML 편집과 유사하게 기존 PHP 코드를 사용자 정의하는 것은 쉽습니다. 테마 편집기 또는 위에서 설명한 모든 방법을 사용하여 이를 수행할 수 있습니다. 이 섹션에서는 코드 조각이라는 플러그인을 사용하여 PHP 조각을 추가하는 방법을 보여줍니다.

먼저 사이트에 코드 조각을 설치하고 활성화합니다.

그런 다음 플러그인 설정으로 이동하고 새로 추가 를 클릭하여 사이트에 새 스니펫을 포함합니다.

추가할 내용을 기억할 수 있도록 스니펫에 이름을 지정하고 PHP 코드를 붙여넣고 스니펫을 저장합니다.

이 자습서에서는 사이트에 사용자 지정 이미지 크기를 추가하는 간단한 스니펫을 사용했습니다. 그런 다음 저장을 누르면 완료됩니다!

이렇게 하면 WordPress 사이트에 무제한 PHP 코드를 추가하고 원하는 만큼 사용자 지정할 수 있습니다.

결론

대체로 HTML 코드를 사용자 정의하면 기능 을 추가하고 문제를 해결할 뿐만 아니라 사이트를 더 잘 제어할 수 있습니다. 가장 좋은 점은 WordPress에서 HTML 코드를 쉽게 편집하고 사이트를 개인화할 수 있다는 것입니다.

이 가이드에서는 다양한 방법을 살펴보았습니다.

1. 워드프레스 클래식 편집기 사용
2. 블록 편집기 사용
3. HTML 소스 코드 편집
4. 플러그인 사용
5. 위젯에 HTML 추가

HTML 코드를 사용자 정의하는 가장 간단한 방법은 WordPress 테마 편집기를 사용하는 것입니다. 고급 솔루션을 찾고 있다면 FileZilla와 같은 FTP 클라이언트를 사용하여 HTML 소스 코드를 편집할 수 있습니다. 컴퓨터에 소프트웨어를 설치하지 않으려면 cPanel 방법을 사용할 수 있습니다.

반면에 플러그인을 선호하는 경우 WP 파일 관리자를 사용하여 다른 FTP 소프트웨어나 텍스트 편집기에 의존하지 않고 HTML 코드를 포함하거나 편집할 수 있습니다.

마지막으로 WordPress Customizer 또는 Code Snippets 플러그인을 모두 사용하여 CSS 또는 PHP를 포함하고 편집할 수도 있습니다.

이 문서가 도움이 되고 사이트를 사용자 정의하는 데 도움이 되었기를 바랍니다. WordPress에서 HTML 파일을 편집하는 다른 방법을 알고 있습니까? 어느 것을 사용합니까? 아래 의견 섹션에서 알려주십시오!