HTML 웹사이트를 WordPress 비즈니스 테마로 변환하는 방법

게시 됨: 2021-03-29

@Cloudways 팔로우

많은 기업들이 여전히 온라인 존재를 위해 단순한 HTML 웹사이트에 의존하고 있습니다. 이러한 HTML 웹 사이트는 일반적으로 정적입니다. 즉, 웹 사이트의 사소한 세부 사항이라도 변경하려면 코드를 편집해야 합니다. 그러나 이를 피하기 위해 HTML 웹사이트를 WordPress로 변환할 수 있습니다.

이 튜토리얼에서는 HTML을 WordPress 비즈니스 테마로 변환하는 방법을 알려 드리겠습니다. 이것은 모든 HTML 요소를 그대로 유지하고 WordPress의 유연성을 제공하여 모든 요소를 쉽게 사용자 정의할 수 있습니다.

HTML과 WordPress에 모두 익숙하다면 이 튜토리얼이 도움이 될 것입니다. 초보자인 경우 XAMPP와 같은 로컬 호스트의 더미 웹 사이트로 이 작업을 시도하십시오.

HTML 웹사이트를 워드프레스로 변환
필요한 WordPress 파일
CSS, JavaScript 및 이미지 구성
기능을 추가하기 위해 WordPress 기능 추가

HTML 사이트를 WordPress 테마로 변환

1단계: 전제 조건
2단계: 테마 폴더 만들기
3단계: PHP 파일 생성
4단계: CSS, 이미지 및 JavaScript(JS) 폴더 복사
5단계: 새 WordPress 테마 활성화
6단계: HTML 코드를 머리글, 색인 및 바닥글로 변환
7단계: CSS 구성
8단계: JavaScript 구성
9단계: 이미지 구성
10단계: WordPress에서 사용자 정의 제목 활성화
11단계: WordPress에 WordPress 탐색 메뉴 추가

HTML 사이트를 WordPress 테마로 변환

이 튜토리얼에서는 여기에서 무료 HTML 비즈니스 테마를 선택했습니다. 기술은 비즈니스 테마를 변환하는 동안 동일하게 유지됩니다. 비즈니스 주제에 대해 질문이 있는 경우 댓글이나 이메일을 남겨주세요. 기꺼이 답변해 드리겠습니다.

계속 진행합시다. 먼저 HTML 테마를 살펴보고 머리글, 본문 및 바닥글 요소를 마크다운합니다.

헤더 : 헤더에는 상단 섹션 부분이 포함됩니다.

본문 : 페이지가 길어서 확대해서 찍어봤는데 본문에 가운데 부분 전체가 포함되어 있습니다.

바닥글 : 바닥글 섹션에 하단 부분이 포함됩니다.

보행인

1단계: 전제 조건

XAMPP와 같은 로컬 호스트(즉, 컴퓨터)에 WordPress가 이미 설치되어 있기를 바랍니다. 그렇지 않은 경우 WordPress를 로컬로 설치하고 설정하는 데 도움이 되는 자세한 가이드를 이미 다뤘습니다.

2단계: 테마 폴더 만들기

이 자습서에서는 XAMPP를 사용하고 있으며 내 WordPress 사이트는 htdocs 폴더 아래에 설치되어 있습니다. WordPress 테마를 만들려면 테마 폴더에 액세스하여 새 폴더를 만들어야 합니다.
이제 XAMPP 폴더 > htdocs > WordPress 폴더(내 경우에는 테스트 중임 ) > wp-content > 테마를 엽니다.

Themes 폴더에는 설치된 모든 WordPress 테마가 표시됩니다. 새 폴더를 만들고 테마 이름을 지정합니다.

테마 폴더 생성

3단계: PHP 파일 생성

새로 생성된 테마 폴더는 비어 있으며 작동하려면 몇 가지 파일을 생성해야 합니다. 이를 위해서는 코드 편집기(VS Code)를 실행하고 전체 WordPress 테마 폴더(내 경우에는 farhan-wordpress-theme)를 열어야 합니다.

이제 다음과 같은 필수 WordPress 파일을 만들어 테마를 더 잘 구성하세요.

style.css(테마 세부 정보 및 CSS 파일 포함)
index.php(다른 선택적 파일이 선언되지 않은 경우 주요 콘텐츠 제공)
header.php(테마의 헤더 요소 포함)
footer.php(테마의 바닥글 요소 포함)
functions.php(WordPress 테마에 있는 기능 포함)

워드프레스 파일

4단계: CSS, 이미지 및 JavaScript(JS) 폴더 복사

HTML 테마(위에서 다운로드)에서 자산 폴더(CSS, JS 및 이미지 폴더)를 새 WordPress 테마 폴더로 복사합니다.

HTML 폴더

새 WordPress 테마 폴더로 이동하면 다음과 같이 표시됩니다.

워드프레스 폴더 및 파일

5단계: 새 WordPress 테마 활성화

이제 모든 wp 테마에 필요한 중요한 폴더를 추가했습니다. 그런 다음 브라우저에서 WordPress 사이트를 열고 대시보드에 로그인합니다. 모양 > 테마로 이동하면 이 섹션에 새 테마가 추가된 것을 볼 수 있습니다.

워드프레스 테마 활성화

이 테마는 비어 있습니다. 새로 생성된 테마에 대한 정보 및 배너를 추가하려면 style.css 파일(이전에 생성됨)을 열고 다음 코드를 붙여넣고 저장합니다( ctrl+s ).

 /*

테마 이름: Farhan WordPress 테마

저자: 파르한

설명: HTML을 WordPress 테마로 변환합니다.

버전: 1.0

*/

배너의 경우 새 테마 폴더에 이미지 파일을 추가해야 합니다. 이미지 크기는 800 x 600이어야 하며 이미지 이름은 스크린샷 (png 형식)이어야 합니다.

screnshot png 파일 추가

스크린샷.png 파일을 추가한 후 wp-admin 대시보드를 새로 고치면 이미지 배너가 나타납니다.

워드프레스 테마 이미지

이제 배너를 클릭하면 테마 정보를 볼 수 있습니다.

테마 세부 정보

그런 다음 활성화 를 클릭 합니다 .

6단계: HTML 코드를 머리글, 색인 및 바닥글로 변환

머리글, 바닥글 및 본문은 HTML 주석으로 표시되어 WordPress PHP 파일에 쉽게 추가하고 코드를 변환할 수 있습니다.

이제 다운로드한 테마의 index.html 에서 헤더 코드를 WordPress 테마 폴더에 생성한 header.php 파일로 복사합니다. <!DOCTYPE html> 에서 </header> 까지 복사하여 저장해야 합니다.

헤더 PHP 파일

마찬가지로 index.html의 바닥글 및 본문 요소를 각각 footer.php 및 index.php로 복사합니다.

바닥글의 경우 <footer>(저의 경우 바닥글 태그에 클래스 이름이 정의되어 있으므로 혼동하지 마십시오) 에서 </html> 까지 footer.php 파일에 복사 하여 저장합니다.

바닥글 PHP 파일

다음으로 </header> 태그 뒤와 <footer> 바로 앞의 모든 코드를 index.php에 복사하여 저장합니다.

인덱스 PHP 파일

index.php 파일 상단에 워드프레스 함수 get_header() 를 추가하고 마지막에 get_footer() 를 추가합니다.

get_header() 는 header.php 를 호출하는 내장 함수이고 비슷하게 get_footer() 는 footer.php 를 호출하는 함수입니다.

index.php 파일 상단에 다음 코드를 추가하고 저장합니다.

 <?php get_header(); ?>

인덱스 파일 상단에 들림 추가

바닥글을 호출하려면 index.php 코드 끝에 다음 코드를 삽입하고 저장합니다.

 <?php get_footer(); ?>

인덱스 파일 하단에 바닥글 추가

이제 귀하의 사이트를 방문하면 다음과 같은 것을 볼 수 있습니다.

CSS와 js가 없는 사이트

7단계: CSS 구성

테마가 이상해 보이는 것은 CSS 파일이 테마에 적용되지 않았기 때문입니다.

HTML 테마에서 WordPress 테마 폴더로 CSS 폴더를 이미 복사했습니다. 이제 이러한 CSS 파일을 호출하여 테마 모양을 완성해야 합니다.

CSS 파일의 이름이 다를 수 있다는 점을 염두에 두십시오. 따라서 이 프로세스를 수행하기 전에 다시 한 번 확인하십시오.

header.php 파일에서 CSS 스타일시트를 찾을 수 있으므로 CTRL+f 로 " rel="stylesheet" "를 검색해야 합니다.

헤더 파일의 CSS 스타일시트

그런 다음 Google 글꼴 스타일시트가 필요하지 않으므로 제거합니다. 이제 실제 CSS 스타일시트(예: <link rel=”stylesheet” href=”assets/css/style-starter.css”> )를 등록하기만 하면 됩니다.

WordPress는 일반 CSS 스타일시트 구조를 이해하지 못합니다. 그래서 CSS 스타일시트를 큐에 넣고 등록해야 합니다. functions.php 파일로 이동하여 다음 코드를 추가합니다.

 <?php

함수 add_css()

{

   wp_register_style('첫 번째', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style( '첫 번째');

}

add_action('wp_enqueue_scripts', 'add_css');

CSS 파일 등록

wp_register_style 은 CSS 스타일시트를 등록하는 데 도움이 됩니다.

get_template_directory_uri() . '/href' 는 현재 템플릿 디렉토리 경로를 가져오는 데 사용됩니다. 현재 경로를 해당 파일과 연결합니다. 따라서 여기에서 CSS 파일(href)의 위치를 정의해야 합니다. 해당 CSS 파일의 경로를 정의한 방법을 볼 수 있습니다: get_template_directory_uri() . '/ 자산/css/style-starter.css '.

이제 header.php 파일에서 CSS 스타일시트 링크를 제거하고 다음 코드로 교체하고 파일을 저장할 수 있습니다.

 <?php wp_head(); ?>

wp_head()는 header.php의 <head> </head> 섹션에 정의된 필수 WordPress 후크입니다.

워드프레스 헤더 후크

WordPress 사이트를 방문하면 CSS 파일이 실제로 새 WordPress 테마에 대기열에 추가되지만 여전히 디자인이 순서대로 되어 있지 않다는 것을 알 수 있습니다. 아직 JS 스크립트를 구성하지 않았기 때문입니다.

CSS 파일을 추가한 후

header.php에 CSS 스타일시트가 하나 있는데 functions.php에만 등록했습니다. 하지만 여러 스타일시트가 있는 경우에는 어떻게 될까요? 이 경우 각 스타일시트에 대해 wp_register_style()을 정의해야 합니다. 걱정하지 마세요! 여러 JS 스크립트가 있는 다음 단계에서 예를 들어볼 수 있습니다. 프로세스는 동일하므로 쿼리를 지우고 해당 작업을 수행하는 방법을 이해하는 데 도움이 됩니다.

8단계: JavaScript 구성

작업 중인 HTML 테마는 JavaScript를 사용하고 있으며 footer.php 파일에는 JavaScript 파일이 이미 HTML 형식으로 호출되고 있습니다. 이러한 JS 파일을 실행하려면 이전 단계에서 수행한 것과 동일한 작업을 수행하기만 하면 됩니다.

footer.php 파일을 열고 " CTRL+f "로 " <script src= "를 검색합니다. 이것은 당신이 가지고 있는 모든 JS 파일을 찾는 데 도움이 될 것입니다. 제 경우에는 5개가 있는데 여기에서 모두 등록하고 대기열에 넣어야 합니다.

js 파일 검색

다음으로 functions.php 파일을 열고 다음 코드를 붙여넣어야 합니다.

 함수 add_script()

{

   wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', 배열( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'js 스크립트');

   wp_register_script('변경', get_template_directory_uri() .'/assets/js/theme-change.js', 배열( 'jquery' ), 1.1, true);

   wp_enqueue_script( '변경');

   wp_register_script('팝업', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', 배열( 'jquery' ), 1.1, true);

   wp_enqueue_script( '팝업');

   wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', 배열( 'jquery' ), 1.1, true);

   wp_enqueue_script( '캐러셀');

   wp_register_script('부트스트랩', get_template_directory_uri() . '/assets/js/bootstrap.min.js', 배열( 'jquery' ), 1.1, true);

   wp_enqueue_script( '부트스트랩');

}

add_action('wp_enqueue_scripts', 'add_script');

코드 구조는 앞서 CSS 구성 부분에서 했던 것과 동일하다는 것을 알 수 있습니다. 그러나 여기서는 스타일 대신 wp_register_script를 사용합니다. 동일한 기능에서 각 JS 파일을 등록하고 대기열에 추가합니다.

js 스크립트를 대기열에 추가

이제 footer.php 파일에서 모든 JS 스크립트 링크(저는 5개)를 제거하고 코드 끝(</body> 태그 위)에 다음 코드 줄을 붙여넣고 파일을 저장할 수 있습니다.

 <?php wp_footer(); ?>

워드프레스 바닥글 후크

이제 브라우저에서 사이트를 열면 새 WordPress 테마가 제대로 작동하지만 여전히 몇 가지 누락된 이미지가 있음을 알 수 있습니다.

js와 css 이후의 테마

9단계: 이미지 구성

이 프로세스는 간단하며 여기에서 이미지의 경로를 정의해야 합니다.

먼저 index.php 파일을 열고 " CTRL+f "로 "< img src= "를 검색합니다. 이것은 당신이 가지고 있는 모든 이미지 파일을 찾는 데 도움이 될 것입니다. 제 경우에는 8개가 있고 여기에는 모두에 대한 경로가 필요합니다.

이미지 파일 검색

이미지에 대한 경로를 제공하려면 src 태그 안에 다음 PHP 코드를 추가하고 파일을 저장합니다.

 <img src="<?php 에코 get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-유체 반경-이미지" />

<img src="<?php 에코 get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-유체 반경-이미지" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-유체 반경-이미지" />

<img src="<?php 에코 get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-유체 반경-이미지" />

<img src="<?php 에코 get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-유체 반경-이미지" />

<img src="<?php 에코 get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-유체 반경-이미지" />

워드프레스에서 이미지 불러오기

이제 테마가 HTML 테마와 유사하게 보이고 모든 이미지를 가져옵니다.

워드프레스 이미지 파일

그러나 사이트 제목 및 WordPress 탐색 메뉴 변경과 같은 WordPress 기능이 부족합니다.

10단계: WordPress에서 사용자 정의 제목 활성화

WordPress 관리자 패널로 이동하여 웹사이트 제목을 변경해도 사이트 제목에는 영향을 미치지 않습니다. 이 기능을 활성화하려면 header.php 파일의 제목 태그 사이에 매개변수 " name "과 함께 WordPress 내장 함수 bloginfo()를 사용하고 파일을 저장할 수 있습니다.

 <?php 블로그 정보( '이름' ); ?>

워드프레스 제목

그리고 마찬가지로 header.php 파일의 h1 태그 사이에 " name " 매개변수를 사용하여 WordPress 내장 함수 bloginfo()를 사용하여 파일을 저장해야 합니다.

 <?php 블로그 정보( '이름' ); ?>

h2 제목

이제 테마는 WP-admin 패널 내의 설정 -> 일반-> 사이트 제목 에서 설정 한 제목을 선택합니다.

워드프레스 사이트 제목

11단계: WordPress에 WordPress 탐색 메뉴 추가

사이트의 WordPress 관리자를 방문하여 모양으로 이동하면 메뉴 옵션이 표시되지 않습니다.

functions.php 파일에 다음 코드 줄을 추가하여 먼저 메뉴를 활성화해야 합니다.

 add_theme_support( '메뉴' );

테마 메뉴 추가

이렇게 하면 테마에서 메뉴 기능이 활성화되지만 WP 대시보드에서 메뉴를 관리하려면 몇 가지 구성이 필요합니다.

워드프레스 메뉴 섹션

먼저 HTML 테마 탐색 메뉴가 있는 위치를 찾은 다음 WordPress 내장 함수 wp_nav_menu()를 사용하여 대체합니다 . 이 기능에 대한 자세한 내용은 여기에서 읽을 수 있습니다.

이 테마에서 header.php 는 탐색 메뉴를 포함합니다.

다음 코드 줄을 찾습니다.

 <ul class="navbar-nav mx-lg-auto">

<li class="nav-item 활성">

<a class="nav-link" href="index.html">홈 <span class="sr-only">(현재)</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">정보</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">연락처</a>

</li>

</ul>

wp 메뉴 코드

위 줄을 다음으로 교체하십시오.

 <?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', '컨테이너' => 'ul', )); ?>

이제 WordPress 메뉴가 테마에 표시되고 WordPress 비즈니스 테마에 유연성을 추가합니다.

마무리!

이 기사가 HTML 템플릿이나 사이트를 WordPress 테마로 변환하는 방법을 이해하는 데 도움이 되었기를 바랍니다. 이것은 프로세스를 설명하기 위해 11단계를 다룬 자세한 자습서입니다.

질문이나 질문이 있으시면 언제든지 아래의 댓글 섹션에 질문해 주십시오.

자주 묻는 질문

Q. HTML을 WordPress로 변환할 수 있습니까?

HTML을 WordPress로 변환하는 프로세스에는 다음 단계가 포함됩니다.

1) 테마에 대한 새 폴더 만들기
2) styles.css 파일의 CSS 코드를 복사합니다.
3) HTML 코드를 header.php, sidebar.php, footer.php 파일로 분리합니다.
4) header.php 및 footer.php 파일을 필요한 WordPress 형식으로 변환합니다.
5) 스크린샷 생성(테마 미리보기로 사용됨)
6) 폴더를 압축하여 워드프레스 웹사이트에 업로드합니다.

Q. WordPress에 HTML을 어떻게 추가합니까?

WordPress 페이지 또는 게시물에 HTML을 추가하려면 페이지/게시물로 이동하여 HTML 코드를 텍스트 탭에 추가하세요.

Q. WordPress에서 HTML 파일을 열려면 어떻게 해야 합니까?

압축된 HTML 파일을 서버에 업로드하여 HTML 파일을 연 다음 서버의 파일 관리자에서 열 수 있습니다.

Q. 워드프레스는 HTML을 사용합니까?

WordPress는 HTML을 광범위하게 사용하여 다양한 페이지와 게시물의 정보를 렌더링하고 형식을 지정합니다.