HTML 사이트를 WordPress 사이트로 변환

게시 됨: 2018-10-05

(웹의) 태초에 모든 웹사이트는 텍스트와 정적 HTML만 사용하여 만들어졌습니다. 하지만 20년이 지난 지금, 웹은 훨씬 다른 곳입니다. 웹사이트는 훨씬 더 복잡합니다. 사이트 제작자와 방문자 모두에게 더 풍부하고 즐거운 경험을 제공합니다.

이것은 WordPress와 같은 오픈 소스 프로젝트 덕분입니다. 지난 10여 년 동안 WordPress 설치와 올바른 테마/플러그인만 있으면 누구나 고급 디자인의 현대적인 웹사이트를 가질 수 있도록 온라인 출판을 민주화하는 핵심 임무(그리고 그 과정에서 더 많은 것)에 성공했습니다. 및 기능. 코딩이 필요하지 않습니다. HTML도 포함되지 않습니다!

이것이 저와 같은 열렬한 WordPress 사용자에게 2018년에도 누군가 테마와 플러그인이 있는 WordPress 웹사이트 대신 정적 HTML 웹사이트를 운영하고 있다는 사실이 거의 믿기지 않는 이유입니다. 그러나 사실은 여전히 상당한 양의 활성 HTML 전용 사이트가 있다는 것입니다. (또는 약간의 CSS가 포함된 HTML.)

물론 이러한 사이트 소유자가 업그레이드 또는 전환하지 않는 데에는 합당한 이유가 있을 수 있습니다. 사이트 콘텐츠가 절대 변경되지 않고 이미 적용된 단순한 형식과 디자인을 사용할 수 있습니까? 아니면 WordPress 사이트를 업데이트하는 것에 대해 걱정하는 것보다 덜 번거롭습니까? 둘 다 유효한 이유입니다(무엇보다도). "깨지지 않은 것을 고치지 말라"의 대표적인 예.

그러나 이것이 일부(아마도 많은)가 도약하지 못한 주된 이유가 아닐 수도 있다는 느낌이 듭니다. 가장 분명한 것은 HTML 사이트를 WordPress 사이트로 변환하는 방법을 모른다는 것입니다. 특히 콘텐츠를 잃지 않고 페이지별로 과도한 서식을 지정할 필요가 없습니다.

고맙게도 WordPress의 경우와 마찬가지로 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 아래에 몇 가지 옵션을 정리했습니다.

YouTube 채널 구독

정적 HTML 사이트를 WordPress 사이트로 변환하는 옵션

정적 HTML 사이트를 WordPress 사이트로 변환하는 방법은 의심할 여지 없이 개인의 선호도, 원하는 시간/금전적 투자, 코드 기술 수준에 따라 달라집니다. 자신에게 가장 적합한 것을 결정해야 하지만 아래 요약을 통해 신속하게 결정하고 특정 상황에 대해 이 게시물에서 가장 관련성이 높은 정보로 바로 건너뛸 수 있어야 합니다.

세 가지 주요 옵션이 있습니다.

1. 현재 정적 HTML 사이트를 기반으로 WordPress 테마를 수동으로 만듭니다.

이렇게 하려면 코드에 들어가야 합니다. FTP를 통해 현재 사이트 디렉토리에 액세스하고 기존 코드를 시작점으로 사용해야 합니다. 거기에서 WordPress 테마에 필요한 파일을 만들고 WordPress 코덱스에서 코드 비트를 복사해야 합니다. HTML, CSS 및 약간의 PHP에 대한 경험이 있는 경우 매우 간단하고 간단합니다.

2. 미리 만들어진 테마를 설치하고 콘텐츠를 마이그레이션하기만 하면 됩니다.

이것은 아마도 단순성과 가치의 교차점에서 최고의 선택일 것입니다. 현재 웹 사이트에 대한 호스팅이 이미 있다고 가정하면 프리미엄 테마를 구매하기로 선택한 경우에만 비용을 지출하면 됩니다. 콘텐츠 가져오기에 사용할 플러그인은 공식 WordPress 플러그인 저장소에서 무료로 사용할 수 있습니다.

3. HTML에서 WordPress로의 변환 서비스를 위해 비용을 지불하여 사이트를 다시 만듭니다.

이것은 많은 작업을 수행할 필요가 없기 때문에 가장 쉬운 솔루션입니다. 그러나 WordPress에 익숙해지는 데별로 도움이되지 않으며 비용은 고용하기로 선택한 사람에 따라 다릅니다. 아래 섹션에서 이 옵션을 다루지 않을 것입니다. 이 경로가 관심 있는 경로라면 간단히 서비스 제공업체를 빠르게 검색하면 나머지는 처리할 것이기 때문입니다.

HTML에서 WordPress로의 변환 준비

아래에서 어떤 경로를 선택하든 상관없이 다이빙을 하기 전에 하고 싶은 몇 가지 사항이 있습니다.

첫 번째는 호스팅 계획을 선택하는 것입니다. 당신은 거기에 있는 옵션을 살펴보고 당신의 요구에 가장 잘 맞는 패키지를 결정하기를 원할 것입니다. 아니면 대신 로컬 WordPress 설치를 만들고 싶습니까? 나중에 언제든지 호스팅 서비스로 마이그레이션할 수 있습니다.

선택했으면 WordPress를 설치하고 WP Admin에 로그인해야 합니다. 이것이 우리의 두 가지 가능한 경로가 갈라지는 지점입니다.

정적 HTML 사이트를 WordPress로 수동 변환

목표가 정적 HTML 사이트의 콘텐츠를 WordPress로 가져오는 것뿐만 아니라 현재 디자인을 복제하는 것이라면 사용자 정의 테마를 만들어야 한다는 의미입니다. 고맙게도 처음에는 그렇게 무섭지 않습니다. 몇 개의 폴더와 파일을 만들고 약간의 복사 및 붙여넣기를 수행한 다음 결과를 업로드하는 작업만 포함됩니다.

Sublime 또는 Notepad++와 같은 코드 편집기가 필요하고 HTML 사이트 디렉토리와 새 WordPress 설치 디렉토리에 모두 액세스할 수 있어야 합니다.

1단계: 새 테마 폴더 및 필요한 파일 만들기

바탕 화면에서 테마 파일을 저장할 새 폴더를 만듭니다. 테마의 이름을 지정하고 싶은 대로 이름을 지정합니다.

다음으로, 코드 편집기에서 몇 개의 파일(모두 새 테마 폴더로 이동)을 만듭니다. 아직 그들에게 아무 것도 하지 마십시오. 추가 편집을 위해 열어 두십시오.

스타일.css
인덱스.php
헤더.php
사이드바.php
바닥글.php

2단계: 기존 CSS를 새 스타일시트에 복사

디자인을 복제하려는 경우 저장하려는 CSS가 적어도 일부 있다는 의미일 수 있습니다. 따라서 편집하려는 첫 번째 파일은 Style.css 파일입니다.

시작하려면 파일 맨 위에 다음을 추가하세요.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

이 섹션 다음에 기존 CSS를 아래에 붙여넣기만 하면 됩니다. 파일을 저장하고 닫습니다.

3단계: 현재 HTML 분리

3단계를 시작하기 전에 WordPress 작동 방식에 대해 간략히 설명하겠습니다. WordPress는 PHP를 사용하여 기본 데이터베이스에서 데이터 조각을 호출하고 검색합니다. 이 작은 자습서에서 사용하는 각 파일은 WordPress에 사이트 콘텐츠의 어느 부분을 표시할지, 어디에 표시할지 알려주도록 설계되었습니다.

따라서 기존 HTML을 "잘라낼" 것이라고 말할 때 실제로 수행하는 작업은 기존 코드의 일부를 잘라내어 방금 만든 다른 파일에 붙여넣는 것입니다. 그러면 WordPress에서 표시할 위치를 알 수 있습니다. 그들을.

여기 우리가 간다.

먼저 현재 사이트의 index.html 파일을 엽니다. 파일 맨 위에서 여는 div class=”main” 태그까지 모든 항목을 강조 표시합니다. 이 섹션을 복사하여 header.php 파일에 붙여넣고 저장하고 닫습니다.

둘째, index.html 파일로 돌아갑니다. side class="sidebar" 요소와 그 안에 있는 모든 것을 강조 표시합니다. 이 섹션을 복사하여 sidebar.php 파일에 붙여넣고 저장하고 닫습니다.

셋째, index.html 에서 사이드바 뒤의 모든 항목을 선택하고 복사하여 footer.php 파일에 붙여넣고 저장하고 닫습니다.

마지막으로 index.html 파일에서 남은 모든 항목(주 콘텐츠 섹션이어야 함)을 선택하고 index.php 파일에 붙여넣습니다. 저장하되 아직 닫지 마십시오.

그러나 이제 index.html 파일을 닫고 마지막 단계로 이동할 수 있습니다 . 거의 완료!

4단계: Index.php 파일 마무리

새 테마의 index.php 파일을 완성하기 위해 생성한 다른 파일에 있는 다른 섹션(주 콘텐츠 외에)을 불러올 수 있는지 확인해야 합니다. 다른 말로 하면, 방금 "잘라낸" 요소를 다시 합칩니다.

index.php 파일의 맨 위에 다음 php 행을 배치하십시오.

<?php get_header(); ?>

그런 다음 index.php 파일의 맨 아래에 다음 php 행을 배치하십시오.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

그리고 마지막으로 Loop라는 것을 추가해야 합니다. 이것은 WordPress가 방문자에게 게시물 콘텐츠를 표시하는 데 사용하는 PHP의 기본 비트입니다. 따라서 새 테마의 index.php 파일을 만드는 마지막 단계는 콘텐츠 섹션에 아래 코드를 추가하는 것입니다.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

index.php를 저장하고 닫습니다. 당신의 테마는 이제 끝났습니다! 남은 것은 WordPress 웹 사이트에 업로드하는 것입니다.

5단계: 새 테마 업로드

테마 파일을 만들고 모두 새 테마 폴더에 저장했으므로 새 WordPress 설치 디렉터리에 액세스해야 합니다.

/wp-content/themes/ 안에 새 테마 폴더를 배치합니다. 그런 다음 WP Admin > Appearance > Themes로 다시 이동하면 새로 만든 테마가 표시됩니다. 계속해서 활성화하십시오!

이 시점에서 할 일은 새 WordPress 웹사이트를 이전 사이트의 콘텐츠로 채우는 것뿐입니다. 아래 섹션(사전 제작된 테마 사용에 대한 부분 건너뛰기)을 따라 수행하는 방법을 확인하십시오.

미리 만들어진 WordPress 테마 사용 및 HTML 콘텐츠 가져오기

위의 단계가 너무 집중적이거나 시간이 많이 소요되는 것 같으면 안심하셔도 됩니다. 다른 방법이 있습니다. 현재 작업 중인 디자인을 WordPress 테마로 변환하는 대신 더 넓은 WordPress 시장에서 사용할 수 있는 수천 가지 테마 중 하나를 활용할 수 있습니다.

무료 테마와 프리미엄 테마가 있습니다. 귀하에게 가장 적합한 것을 결정하기 전에 귀하의 요구 사항을 충족하도록 설계된 테마를 읽고 여기 우아한 테마 및 다른 곳에서 테마 범주별로 탐색할 수 있습니다.

원하는 테마를 선택하고 압축 파일 패키지를 다운로드하면 WP 관리 > 모양 > 테마 > 새로 추가로 돌아가서 새 WordPress 테마를 설치/활성화합니다.

이 작업이 완료되면 새로운 WordPress 웹 사이트와 테마가 생성되지만 그 외에는 거의 없습니다. 사이트를 미리 볼 때 콘텐츠가 비어 있고 아마도 지루해 보일 것입니다. 괜찮습니다. 다음에는 이전 사이트의 콘텐츠를 가져올 것이기 때문입니다.

WP Admin에서 플러그인 > 새로 추가 로 이동하고 Stephanie Leary의 HTML Import 2라는 플러그인을 검색합니다. 이 플러그인이 설치되고 활성화되면 편리한 사용자 가이드에 따라 HTML 페이지의 전체 디렉토리를 가져옵니다. 이미지로 완성!

그 후에는 WordPress에 있는 모든 이전 콘텐츠를 갖게 되며 새 테마로 형식이 지정됩니다. 또는 위에서 자신만의 테마를 만든 경우 사이트는 WordPress에서 실행하기 전과 거의 비슷해야 합니다.

결론적으로

이 게시물을 웹사이트를 WordPress로 마이그레이션하기 위한 가이드로 사용했다면 이제 막 세계에서 가장 큰 오픈 소스 커뮤니티 중 하나에 가입한 것입니다. 어서 오십시오! 많은 개발자, 디자이너, 블로거, DIYer 등이 WordPress 및 WordPress 테마/플러그인을 사용하여 구축, 재생 및 생성하는 재미있는 장소입니다.

"WordPress 버그를 포착"했다면 공식 WordPress.org 웹사이트는 유용한 테마, 플러그인 및 기타 리소스로 가득 차 있습니다. 테마 파일을 추가로 조정하려면 Codex에서 끝없는 팁, 트릭 및 변형을 탐색하십시오.

물론 아래 댓글에서 계속 채팅을 하고 앞으로 더 많은 블로그 게시물을 구독하기를 바랍니다.

Max Griboedov/Shutterstock.com을 통한 기사 축소판