HTML 웹사이트를 WordPress 테마로 변환해야 하는 이유

게시 됨: 2021-08-24

아직도 구식 HTML 웹사이트를 사용하고 계십니까? 이제 HTML 웹사이트를 WordPress 웹사이트로 변환하고 이 인기 있는 콘텐츠 관리 시스템이 제공하는 다양한 기능을 활용할 때입니다. WordPress로 전환해야 하는 이유와 이를 달성하는 방법에 중점을 둘 것입니다.

소개

순수한 바닐라 HTML은 오랫동안 웹사이트 개발의 황금 표준이었습니다. 그러나 과거의 웹 사이트는 정교한 종소리와 휘파람이없는 골격이었고 그 사이트에 HTML을 사용하는 것이 그 당시에는 의미가있었습니다.

현재 시장 동향 및 요구 사항에 따라 이제 HTML을 WordPress로 변환하고 콘텐츠 관리 시스템 을 활용하여 코드를 작성하는 대신 웹사이트를 실행할 수 있습니다. WordPress 개발에 대한 더 넓은 이해를 위해 더 읽어보세요.

이유-to-convert-html-websites-to-wordpress

HTML 웹사이트를 WordPress로 업로드하거나 변환하는 이유

다음은 정적 HTML 웹 사이트에서 WordPress 웹 사이트로 이동하는 것이 이상적인 단계인 몇 가지 주요 이유입니다.

  1. WordPress는 웹사이트 디자인을 위한 정적 HTML 템플릿으로는 쉽게 불가능한 독특한 사용자 인터페이스를 만들고 큐레이팅하기 위한 환상적인 도구입니다.
  2. WordPress에는 사이트를 지원하고 신규 이민자의 과거 과제를 안내할 수 있는 강력한 개발자 커뮤니티가 있습니다.
  3. 레이아웃을 빠르게 사용자 정의하려는 경우 일반 HTML 레이아웃으로는 동일한 결과를 얻을 수 없습니다. WordPress의 페이지 빌더 기능을 사용하면 사용자가 이동 중에 웹사이트의 레이아웃과 모양과 느낌을 사용자 정의할 수 있습니다.
  4. 기존 HTML 파일을 사용하지 않으려는 경우 사용 가능한 수천 가지 테마 중에서 선택할 수 있습니다. HTML 모양과 느낌과 매우 유사한 테마를 찾을 가능성이 매우 높습니다. 이렇게 하면 기존 HTML 레이아웃을 WordPress로 변환하고 기성 템플릿을 활용하는 데 드는 비용과 노력을 절약할 수 있습니다.
  5. WordPress는 시간이 지남에 따라 진화했으며 진화하는 동안 WordPress 커뮤니티는 SEO 친화적임을 확인했습니다. 그것은 몇 가지 놀라운 SEO 부스팅 플러그인을 가지고 있습니다. 그러한 플러그인 중 하나는 WordPress의 SEO 관리를 위한 황금 표준인 YOAST SEO입니다. 비즈니스 웹 사이트 구축의 궁극적인 목표인 더 높은 검색 엔진 순위를 달성하는 데 도움이 됩니다.
html-websites-to-wordpress 변환 방법

HTML 웹사이트를 WordPress로 변환하는 다양한 방법

HTML을 WordPress로 변환하는 것이 권장되는 이유에 대해 논의한 후 이를 수행하는 방법에 대해 자세히 알아보겠습니다.

세 가지 옵션을 사용할 수 있습니다

  • 처음부터 모든 것을 구성해야 하는 수동 방법.
  • 자식 테마 방법은 기본 WordPress 테마를 사용하고 사양에 맞게 사용자 지정하는 것으로 구성됩니다.
  • 플러그인 기술.

선택하는 방법은 코딩 지식, 이 프로젝트에 할애할 시간 및 선호도에 따라 다릅니다.

단계-to-convert-html-websites-to-wordpress-using-manual-method

HTML 웹사이트를 WordPress로 수동 변환

현재 사이트의 HTML 코드는 수동 변환을 위한 참조점이 될 수 있습니다. 전문가들은 이 번역 절차를 시도하기 전에 충분한 코딩 지식이 있어야 한다고 조언합니다. 특히 HTML, CSS 및 PHP에 익숙해야 합니다.

HTML을 WordPress로 수동으로 변환하는 방법은 다음과 같습니다.

1단계: 새 테마 폴더 만들기

테마 파일을 저장할 PC에 새 파일을 만듭니다. 이 범주의 이름은 원하는 대로 지정할 수 있습니다(속성의 이름으로 사용됨). 적절한 파일을 만들고 선호하는 코딩 편집기에서 열어 둡니다.

  1. 스타일.css
  2. 인덱스.php
  3. 헤더.php
  4. 사이드바.php

2단계: CSS 코드를 새 스타일시트에 복사

파일을 만든 후에는 CSS 코드를 다시 복사할 수 있습니다. 사이트를 복제하고 WordPress로 이동하려는 사용자는 이전 위치에서 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 */

3단계: 현재 HTML 코드 분리

시작하려면 index.html 파일을 엽니다.

생성된 WordPress 파일에서 코드를 복사하여 다음 영역에 붙여넣습니다.

  1. Header.php — 이 파일에는 HTML 코드의 소개부터 주요 콘텐츠 영역까지의 모든 내용이 포함되어 있습니다. </head> 섹션 바로 앞에 <?php wp_head();?> 를 복사하여 붙여넣어야 합니다.
  2. Sidebar.php — <aside> 섹션의 모든 코드를 삽입할 위치입니다.
  3. Footer.php — 이 부분은 사이드바 하단에서 파일 상단까지 이어집니다. </body>로 괄호를 끝내기 전에 <?php wp_footer();?>에 대한 호출을 추가하십시오.

4단계: WordPress용 Header.php 및 Index.php 변경

그런 다음 WordPress 형식에 맞게 header.php 및 index.php를 수정합니다.

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--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_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

이렇게 하려면 <head> 섹션에서 다음과 같은 링크를 찾으십시오.

 <link rel=”stylesheet” href=”style.css”>.

이전 URL을 다음 URL로 바꿉니다.

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

지금 header.php 파일을 저장하고 종료하십시오.

웹 브라우저에서 index.php 파일을 엽니다. 비어있다고 합니다.

다음과 같이 빈칸을 정확히 채우십시오.

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

5단계: 새 테마 다운로드

테마 폴더가 완성되면 웹사이트에 업로드하고 HTML에서 WordPress로의 변환을 완료합니다. 그러려면 워드프레스를 다운로드한 위치로 이동하여 새로 생성된 폴더를 /wp-content/theme에 추가합니다.

WP-Admin 페이지, 테마 및 테마의 속성 목록을 확인하여 속성 이름이 있는지 확인하십시오. 이 경우 모든 작업을 올바르게 수행했으며 이제 활성화할 수 있습니다.

단계-to-convert-html-websites-to-wordpress-using-child-theme-method

WordPress 자식 테마를 통해 HTML 웹사이트 변환

1단계: 테마 선택

먼저 적절한 HTML 디자인 테마를 선택합니다. 현재 웹사이트와 유사한 하위 테마를 찾습니다. 포함된 패턴을 찾으면 코딩을 많이 찾지 않을 것입니다.

기본 코드 라인을 기반으로 하기 때문에 시작 기능을 제공해야 합니다.

2단계: 새 테마 폴더 만들기

같은 방법으로 마지막 방법을 수행하고 바탕 화면에 새 폴더를 만듭니다.

폴더의 제목은 상위 스타일과 동일해야 하지만 끝에 "-child"가 추가됩니다. 이름에 공백이 없어야 합니다.

3단계: 새 시트 스타일 만들기

그런 다음 폴더 내에서 style.css 파일을 만들고 추가 코드 줄을 추가합니다.

이것은 단지 예일 뿐입니다. 세부 정보부터 다시 시작해야 합니다. 프로세스가 완료되면 파일을 저장합니다.

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

4단계: Functions.php 생성

그런 다음 하위 테마의 경우 functions.php 파일을 작성하고 상위 스타일을 복사합니다.

이를 수행하려면 functions.php라는 새 파일을 만드십시오. 시작하려면 <?php. 꼬리표.

이제 상자에 다음 코드를 입력합니다.

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

이 코드는 WordPress에 상위 테마로 이동하여 거기에 지정된 하위 테마의 스타일을 사용하도록 지시합니다.

5단계: 아이의 주제 활성화

마지막으로 테마를 구성해야 합니다. 폴더를 WordPress에 제출하기 전에 모양 메뉴, 테마, "새로 추가"를 사용하여 압축을 풉니다. 거기에서 zip 파일을 검색할 수 있습니다. 다른 옵션으로 wp-content / theme 폴더를 살펴보십시오.

단계-to-convert-html-websites-to-wordpress-using-plugin-technique

플러그인을 사용하여 HTML 웹사이트에서 WordPress로 콘텐츠 가져오기

1단계: 새 사이트 설정

새 사이트에서 선호하는 WordPress 테마를 다운로드하십시오. 원하는 템플릿이고 빠르게 변경할 수 있는지 확인하세요. 신원에 맞게 모양을 업데이트해야 합니다.

2단계: 플러그인 설치

첫 번째 단계는 HTML Import 2 플러그인을 다운로드하여 설치하는 것입니다. (WordPress 플러그인은 사용하기에 안전한가요? 자세히 알아보려면 계속 읽어보세요). 가장 간단한 방법은 플러그인 > 새로 추가로 이동하여 WordPress 관리자 패널에 플러그인 이름을 입력하는 것입니다. 화면에서 찾으면 지금 설치를 클릭합니다(하단에 가까울 수 있음). 완료되면 실행하십시오.

3단계: 페이지 업로드

플러그인이 설치되면 WordPress 설치와 동일한 서버에 페이지를 게시하십시오.

작성해야 하는 정보:

  • 가져올 디렉토리
  • 이전 사이트 URL
  • 기본 파일
  • 포함할 파일 확장자
  • 제외할 디렉터리
  • 파일 이름 유지

그런 다음 콘텐츠 탭으로 이동하여 사이트 콘텐츠를 전달하는 HTML 요소를 구성합니다.

두 번째 단계는 이전 URL에서 새 URL로의 리디렉션을 설정하는 것입니다. 이 방법으로 기존 SEO 값을 잃지 않습니다.

옵션을 저장하고 각 탭을 살펴본 후 파일 가져오기를 클릭합니다.

결론

오늘날과 같이 끊임없이 변화하는 경쟁 시장에서 유연한 WordPress 웹 사이트를 갖는 것은 회사가 개발하는 가장 효과적인 방법이 될 수 있습니다.

WordPress 웹 사이트의 속도를 향상시키는 편리한 트릭과 높은 트래픽을 위해 WordPress 웹 사이트를 확장하는 방법을 통해 WordPress는 크든 작든 비즈니스와 함께 발전할 수 있습니다.

HTML-WordPress 변환기 플러그인이 실행 가능한 솔루션으로 보일 수 있지만 특히 HTML 웹 사이트를 WordPress 테마로 변환할 때 휴먼 코딩을 통해 얻은 결과와 비교할 수 없습니다.

정적 HTML 사이트에서 WordPress 플랫폼과 같이 기능이 확립된 보다 효과적인 콘텐츠 관리 시스템으로 이전하는 것은 특히 Wix와 같은 다른 유사한 플랫폼과 비교할 때 하나의 기능이 있는 경우 좋은 옵션입니다. HTML을 WordPress로 변환하면 WordPress 테마와 사용자 친화적인 WordPress 기능으로 인해 사이트를 더 쉽게 관리하고 관리할 수 있습니다. 수많은 다른 서비스 중에서 맞춤형 WordPress 솔루션에 대해 문의하고 Creole Studios로 아이디어를 현실로 만드십시오!