오류 없이 WordPress에 HTML 파일을 업로드하는 6가지 방법

게시 됨: 2022-12-12

WordPress에 HTML 파일을 업로드하는 것은 대부분의 WordPress 사용자에게 일상적인 작업이 아닙니다. WordPress를 사용하면 코드를 수정하지 않고도 콘텐츠를 만들 수 있으므로 사용자 정의 HTML 파일을 업로드할 필요가 없습니다.

그러나 WordPress 사이트를 구축하고 확장하는 동안 때때로 사용자 지정 콘텐츠가 필요할 수 있습니다. 바로 여기에서 HTML 파일과 페이지가 유용합니다. 사이트로 가져오면 처음부터 사용자 지정 요소를 만들고 설정을 구성하는 데 드는 시간을 크게 절약할 수 있습니다.

이 기사에서는 문제와 WordPress에 HTML 파일을 업로드하는 방법에 대해 자세히 설명합니다. 놓치지 마세요!

  • HTML 파일이란 무엇입니까?
  • HTML 템플릿이란 무엇입니까?
  • WordPress에 HTML 파일을 업로드해야 하는 이유는 무엇입니까?
  • #1 WordPress 관리 대시보드를 사용하여 HTML 파일 가져오기
  • #2 FTP 클라이언트로 HTML 파일 업로드
  • #3 cPanel을 통해 HTML 파일을 WordPress에 연결
  • #4 WordPress 변환기 플러그인에 HTML 적용
  • #5 온라인 무료 도구를 사용하여 HTML을 WordPress로 변환
  • #6 Google 인증을 위해 WordPress에 HTML 파일 업로드
  • HTML 파일 및 페이지 보호

HTML 파일이란 무엇입니까?

HTML은 Hypertext Markup Language의 약자로 전자 문서나 웹 페이지를 만들고 구조화하는 데 사용되는 언어입니다. 사실 요즘 인터넷에서 검색하는 대부분의 웹 페이지는 HTML 코드를 사용하여 작성됩니다.

HTML 파일은 텍스트 전용 문서입니다. 여기에는 사이트 콘텐츠와 이미지가 올바르게 형식화되고 표시되는지 확인하는 코드가 포함되어 있습니다. 즉, HTML은 웹 브라우저가 방문자를 위해 사이트 구조를 시각화하는 방법을 이해하는 데 도움이 됩니다.

pda-upload-html-files-to-wordpress-example

HTML은 웹 페이지의 기초를 만듭니다. HTML 파일을 직접 생성하거나 Google 문서도구와 같은 기존 파일을 가져와서 HTML로 변환할 수 있습니다. 약간의 CSS 코드를 삽입하여 일부 맞춤 디자인 요소를 기초에 추가할 수 있습니다. 이러한 방식으로 귀하의 웹사이트는 사이트 방문자에게 완벽하게 보일 것입니다.

HTML 템플릿이란 무엇입니까?

HTML 템플릿은 사이트에 쉽게 업로드하여 사용할 수 있는 미리 디자인된 HTML 파일을 말합니다. 여기에는 텍스트, 이미지, 글꼴 스타일 및 JavaScript가 포함됩니다.

코딩 기반이 없는 분들은 이미 만들어진 HTML 템플릿을 워드프레스에 업로드하는 것이 가장 좋습니다. HTML 템플릿 덕분에 사이트 구조를 망칠 염려 없이 매력적인 웹 페이지를 개발할 수 있습니다.

HTML 템플릿과 WordPress 테마를 사용하기 전에 알아야 할 몇 가지 차이점이 있습니다.

HTML 템플릿 WordPress 테마
체재 독립형 zip 파일. 독립형 zip 파일.
다음에 미치는 영향 웹 사이트에 있는 단일 웹 페이지의 모양과 느낌입니다. 전체 웹사이트의 모양과 느낌.

WordPress에 HTML 파일을 업로드해야 하는 이유는 무엇입니까?

위에서 언급했듯이 WordPress를 사용하면 코딩 없이 웹 페이지를 만들 수 있습니다. 그러나 때때로 HTML 파일을 사용해야 하는 몇 가지 이유가 있습니다.

시간 절약 방법: 이전 웹사이트를 위한 훌륭한 HTML 템플릿을 이미 작성했습니다. 새 웹 사이트를 위해 처음부터 다시 빌드하려면 시간과 노력이 필요합니다. 따라서 모든 것이 완벽하게 보이도록 하면서 시간을 절약하기 위해 기존 템플릿을 재사용하는 것이 좋습니다.

또한 HTML 파일을 통해 콘텐츠를 모두 업로드할 수 있으므로 사람의 실수 위험도 제거됩니다.

사용자 정의 레이아웃: WordPress에 HTML 파일을 업로드하는 또 다른 이점은 고도로 사용자 정의 가능한 레이아웃입니다. 테마 지원 범위를 벗어나 원하는 대로 콘텐츠를 사용자 지정할 수 있습니다. 미리 만들어진 HTML 파일을 사용하거나 직접 작성하여 사이트에 업로드하기만 하면 됩니다.

사이트 확인: 마지막으로 WordPress에 HTML 파일을 업로드하면 웹사이트 확인에 도움이 됩니다. 예를 들어 Google Search Console 도구를 사용하려면 사이트에 HTML 확인 파일을 업로드해야 합니다. 이를 통해 Google은 귀하의 사이트에 올바르게 액세스하고 색인을 생성할 수 있습니다.

WordPress에 HTML 파일을 업로드하는 방법

HTML 파일에 대한 모든 것을 배웠습니다. 이제 WordPress에 HTML 파일을 업로드하는 방법을 살펴보겠습니다.

읽어!

#1 WordPress 관리 대시보드를 사용하여 HTML 파일 가져오기

내장된 WordPress 대시보드를 사용하면 게시물, 페이지 또는 미디어 라이브러리를 통해 HTML 파일을 직접 업로드할 수 있습니다. Gutenberg 편집기를 사용하는 경우 먼저 File 블록을 삽입해야 합니다. 그런 다음 업로드를 선택하여 HTML 파일을 WordPress에 추가합니다.

pda-구텐베르크-파일-블록

또는 Gutenberg 편집기는 사용자 지정 HTML 블록도 제공합니다. 이 블록에 HTML 코드를 수동으로 복사하여 붙여넣을 수 있습니다. 그러나 대용량 파일 업로드의 경우 파일 옵션을 사용하는 것이 더 쉽고 효과적입니다.

pda-custom-html-블록

클래식 편집기를 사용하는 경우 게시물, 페이지 또는 미디어 라이브러리에서 미디어 추가 버튼을 누릅니다. 그런 다음 업로드를 클릭하여 HTML 파일을 업로드합니다.

pda-워드프레스-추가-미디어-버튼

작은 알림: 관리자 대시보드를 사용하여 WordPress에 HTML 파일을 업로드할 때 때때로 오류가 발생할 수 있습니다. 가장 일반적인 문제는 "죄송합니다. 이 파일 형식은 보안상의 이유로 허용되지 않습니다."입니다.

이 문제는 WordPress 사이트가 현재 .html 파일 형식을 지원하지 않기 때문에 발생합니다. WordPress에서 필터링되지 않은 업로드를 허용하려면 가이드에서 자세한 내용을 확인하세요.

#2 FTP 클라이언트로 HTML 파일 업로드

FTP 클라이언트를 사용하여 HTML 파일을 업로드하면 테스트 사이트에서 로컬로 작업하려는 경우에 유용합니다. 웹 사이트가 활성화되기 전에 변경 사항을 테스트하는 데 도움이 됩니다. 또한 무언가 미끄러질 경우 불필요한 다운타임을 방지합니다.

이 섹션에서는 FileZilla를 사용하여 HTML 파일을 WordPress에 업로드하는 방법을 안내합니다. 시작하려면 아래 지침을 따르십시오.

  1. 사이트를 백업하십시오.
  2. 자격 증명을 입력한 후 FileZilla를 열고 Quickconnect를 선택합니다.

pda-upload-html-files-to-wordpress-using-filezilla

3. 웹사이트의 루트 폴더로 이동합니다.

4. 컴퓨터에서 업로드할 HTML 파일을 찾아 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 업로드를 눌러 웹사이트에 추가하세요.

파일을 성공적으로 업로드했으면 웹사이트에 제대로 표시되는지 확인하십시오. 그렇게 하려면 끝에 있는 HTML 파일 이름과 함께 웹사이트 URL을 브라우저에 입력하십시오. 예를 들어, www.pdagold.com/html-file . 작동하면 HTML 파일로 만든 새 웹 페이지로 리디렉션됩니다.

#3 cPanel을 통해 HTML 파일을 WordPress에 연결

마지막으로 공유할 방법은 cPanel을 사용하는 것입니다. 먼저 호스팅 계정의 cPanel에 로그인하고 파일 관리자 도구를 선택합니다.

pda-cpanel-file-manager-upload-html-files-to-wordpress

이제 두 가지 옵션이 있습니다.

  • HTML 파일을 루트 폴더에 직접 업로드하십시오.
  • 새 폴더를 만들고 여기에 HTML 파일을 업로드합니다.

첫 번째 기술을 사용하면 저장한 HTML 파일의 압축을 풀어야 합니다. 그런 다음 index.html 폴더를 새로운 폴더로 변경하십시오. 마지막으로 파일을 다시 압축하여 WordPress에 계속 업로드합니다. 이 단계를 엄격히 따르지 않으면 HTML 템플릿이 사이트의 홈페이지보다 우선 적용됩니다.

웹 사이트를 망치지 않도록 두 번째 기술을 적극 권장합니다.

  1. 사이트의 public_html 폴더로 이동합니다.

pda-upload-html-files-wordpress-public-html-folder

2. 새 폴더를 선택합니다.

pda-create-new-folder-upload-html-file-to-wordpress-cpanel

3. 새 폴더에 이름을 지정하고 새 폴더 만들기를 클릭합니다.

4. 방금 만든 폴더를 두 번 클릭하고 업로드를 선택하여 HTML 파일을 선택합니다.

pda-upload-html-files-to-wordpress-cpanel

5. 압축된 HTML 파일이 폴더에 나타납니다. 마우스 오른쪽 버튼을 클릭하고 추출을 선택하여 HTML 파일의 압축을 풉니다.

pda-추출-html-파일-cpanel

6. 파일 압축 해제를 선택하여 파일 압축 해제 프로세스를 완료하십시오.

7. 2번 방법에 따라 파일이 성공적으로 업로드 되었는지 확인합니다.

404 오류가 발생하면 서버가 index.php 리디렉션을 지원하지 않을 가능성이 있습니다. 이 경우 파일 관리자 로 돌아가서 .htaccess 파일에 액세스하십시오. 그런 다음 다음 코드를 삽입하고 변경 사항을 저장합니다.

 RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

이 코드는 index.php 파일을 리디렉션하고 브라우저에 로드하는 데 도움이 됩니다. 결과적으로 404 오류가 사라집니다.

#4 WordPress 변환기 플러그인에 HTML 적용

이 방법은 코딩 기술이 필요하지 않기 때문에 초보자에게 적합합니다. 귀하의 임무는 선택한 플러그인을 활성화하는 것이며 나머지는 귀하를 위해 처리됩니다.

사용 가능한 수많은 플러그인을 사용하면 코드를 건드리지 않고 HTML을 WordPress 콘텐츠로 업로드하고 변환할 수 있습니다. 더 이상 코딩에 대해 걱정할 필요가 없습니다. 귀하의 편의를 위해 목록을 7개의 최고의 플러그인으로 좁혔습니다.

그것들을 살펴봅시다!

플러그인 권장 사항

HTML 스니펫 삽입: HTML, CSS 및 JavaScript 코드를 단축 코드로 변환하고 스니펫을 WordPress 페이지 및 위젯에 통합합니다.

간단한 사이트맵: 반응형 HTML 사이트맵을 만들고 복잡한 단축 코드 없이 편집기 내에서 직접 미리 봅니다.

원시 HTML: 게시물에서 원시 HTML 또는 기타 코드를 활성화하고 둥근 따옴표 및 자동 서식을 비활성화합니다.

WP 코드: PHP 코드 스니펫, 머리글 및 바닥글 스크립트, 광고 픽셀 코드를 조건부 논리를 사용하여 WordPress에 삽입합니다.

WP Coder: 웹 페이지에 사용자 지정 CSS, HTML 및 JavaScript를 추가합니다.

범주 설명에 HTML 허용: 선택한 WordPress 필터를 비활성화하여 범주 설명에 필터링되지 않은 HTML을 적용할 수 있습니다.

코드 포함: 게시물 및 페이지에 JavaScript 및 HTML과 같은 코드를 포함하는 간단하고 효율적인 방법을 제공합니다.

플러그인 지침

이 자습서에서는 WP Coder 플러그인을 사용하여 사용자 지정 HTML 코드 및 파일을 삽입하는 방법을 안내합니다.

pda-wp-coder-upload-html-to-wordpress

작동 방식은 다음과 같습니다.

  1. 플러그인을 설치하고 활성화합니다.
  2. WordPress 관리자 대시보드에서 Wow Plugins → WP Coder 로 이동합니다.
  3. 새 HTML 코드를 추가하려면 새 탭 추가 아래의 HTML 코드 섹션에 복사하여 붙여넣으십시오.

pda-wp-coder-html-코드

또는 파일 포함 메뉴로 이동할 수 있습니다. 미디어 라이브러리에 업로드한 HTML 파일의 URL을 파일 URL 상자에 복사하여 붙여넣습니다. 그런 다음 새로 추가를 클릭하여 완료합니다.

pda-wp-coder-plugin-upload-html-file-to-wordpress

4. 저장 버튼을 누르고 게시 섹션에서 생성된 단축 코드를 복사합니다.

pda-wp-coder-copy-단축 코드

5. 페이지의 원하는 위치에 단축 코드를 붙여넣고 결과를 즐기십시오.

#5 온라인 무료 도구를 사용하여 HTML을 WordPress로 변환

온라인 도구를 사용하여 HTML을 WordPress로 변환하려면:

  1. htmltowordpress 웹사이트로 이동합니다.
  2. 웹사이트의 HTML zip 파일을 상자에 업로드합니다.

pda-upload-html-file-to-wordpress-online-tool

3. WordPress 웹사이트를 미리 볼 수 있습니다. 페이지 상단의 사용자 지정 버튼을 누릅니다.

pda-워드프레스-테마-미리보기

4. 원하는 대로 웹사이트를 수정합니다.

5. 저장 및 게시를 눌러 완료합니다.

#6 Google 인증을 위해 WordPress에 HTML 파일 업로드

WordPress에 HTML 확인 파일을 업로드하는 방법을 보여드리겠습니다. 경로는 다음과 같습니다.

  1. Google Search Console로 이동하여 지금 시작 을 클릭합니다.
  2. Gmail 계정의 사용자 이름과 비밀번호를 입력하십시오.
  3. 도메인 이름 또는 URL 접두사를 사용하여 웹사이트를 확인합니다. 도메인 옵션은 DNS 확인만 지원합니다. HTML 파일 업로드의 경우 URL 접두어를 선택하십시오. 웹사이트의 URL을 입력하고 계속을 누르십시오.

pda-google-search-console

4. HTML 파일 섹션에서 파일 다운로드를 요청하는 버튼을 선택합니다.

pda-google-search-console-upload-html-verification-file

5. HTML 파일을 로컬 컴퓨터에 다운로드했으면 WordPress 웹사이트에 파일을 업로드합니다.

HTML 파일 및 페이지 보호

HTML 파일을 보호해야 하는 경우가 있습니다. 예를 들어 관리자 또는 특정 사용자 역할만 파일에 액세스하려는 경우입니다. 그러한 상황에서 PDA Gold는 귀하의 요구를 충족시킬 것입니다.

pda-업로드-html-워드프레스

플러그인을 사용하면 WordPress 루트 디렉터리 아래의 폴더에 업로드된 HTML 파일을 보호할 수 있습니다. 일단 보호되면 무단 방문자가 파일에 액세스하려고 하면 오류 페이지로 리디렉션됩니다.

가장 멋진 점은 iFrame 태그를 사용하여 보호된 HTML 파일을 콘텐츠에 삽입할 수 있다는 것입니다. 이러한 방식으로 방문자는 iFrame을 통해 HTML을 볼 수 있지만 동시에 파일에 직접 액세스할 수는 없습니다.

자세한 단계는 iFrame 내부에 표시되는 WordPress HTML 파일을 보호하는 방법에 대한 가이드를 확인하십시오.

지금 HTML 파일을 최대한 활용하세요!

이것이 WordPress에 HTML 파일을 업로드하는 방법에 대해 알아야 할 모든 것입니다. 마무리하기 위해 HTML 파일은 사용자 정의 페이지 레이아웃이 필요할 때 유용합니다. 이전 사이트를 새 사이트로 마이그레이션하는 경우에도 훌륭한 옵션입니다.

가장 좋은 점은 WordPress에서 HTML 파일을 업로드하고 사용하는 것이 어려운 작업이 아니라는 것입니다. 몇 가지 간단한 단계만으로 아름다운 웹 페이지를 만들 수 있습니다. 그러니 기다리지 마세요. 지금 HTML 파일로 시작하세요!

WordPress의 HTML 편집에 대한 자세한 내용은 기사를 참조하십시오.

마지막으로 더 유용한 지침을 받으려면 웹 사이트를 구독하는 것을 잊지 마십시오!