Chuyển đổi trang web HTML sang trang web WordPress

Chuyển đổi trang web HTML sang trang web WordPress

Trong thời kỳ đầu (của web), tất cả các trang web đều được tạo ra bằng văn bản và HTML tĩnh. Tuy nhiên bây giờ, hơn 20 năm sau web là một nơi khác rất nhiều, các trang web cũng phức tạp hơn nhiều để cung cấp các trải nghiệm phong phú và thú vị hơn cho người truy cập.

1. Chuẩn bị cho Chuyển đổi HTML sang WordPress

Bước 1: Tạo một thư mục chủ đề mới và các tệp cần thiết

Trên màn hình của bạn, hãy tạo một thư mục mới để chứa các tệp chủ đề của bạn. Tiếp theo, tạo một vài tệp (tất cả đều nằm trong thư mục chủ đề mới) trong trình chỉnh sửa của bạn gồm các file

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php
Bước 2: Sao chép CSS hiện có vào biểu định kiểu mới

Bạn sẽ chỉnh sửa là tệp Style.css và thêm phần sau vào đầu tệp của bạn.

/*
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.
*/
Bước 3: Tách HTML hiện tại của bạn

Chúng ta bắt đầu.

Đầu tiên, hãy mở tệp index.html của trang web hiện tại của bạn  . Đánh dấu từ đầu tệp đến thẻ mở  div class = ”main” . Sao chép và dán phần này vào tệp header.php của bạn  , lưu và đóng.

Thứ hai, quay lại tệp index.html của bạn  . Đánh dấu phần tử  aside class=”sidebar” và mọi thứ bên trong nó. Sao chép và dán phần này vào tệp sidebar.php của bạn  , lưu và đóng.

Thứ ba, trong index.html của bạn,   chọn mọi thứ sau thanh bên của bạn và sao chép và dán nó vào tệp footer.php của bạn  , lưu và đóng.

Cuối cùng, trong tệp index.html của bạn  , chọn mọi thứ còn lại (đây phải là phần nội dung chính) và dán nó vào file index.php của bạn. Lưu lại.

Bước 4: Hoàn thiện tệp Index.php của bạn

Ở đầu tệp index.php của bạn  , hãy đặt dòng sau của php.

 <?php get_header(); ?>
Sau đó, ở cuối tệp index.php của bạn  , hãy đặt các dòng php này.
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Và cuối cùng, chúng ta phải thêm cái gọi là The Loop. Đây là bit php chính mà WordPress sử dụng để hiển thị nội dung bài đăng của bạn cho khách truy cập. Vì vậy, bước cuối cùng trong việc tạo file index.php của chủ đề mới  là thêm mã bên dưới vào phần nội dung.

<?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><!--endpost 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>
    <!--endentry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?></div>
    </div><!--endpost footer-->
    </div><!--endpost-->
<?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><!--endnavigation-->
<?php else: ?>
<?php endif; ?>
Lưu index.php của bạn và đóng.
Bước 5: Tải lên chủ đề mới của bạn

Đặt thư mục chủ đề mới của bạn bên trong  / wp-content / themes /. Sau đó, điều hướng trở lại  WP Admin> Appearance> Themes và chủ đề mới tạo của bạn sẽ xuất hiện ở đó. Và kích hoạt nó!

Sau khi hoàn tất việc này, bạn sẽ có một trang web và chủ đề WordPress mới.  Trong WP Admin, đi tới Plugins> Add New và tìm kiếm plugin có tên HTML Import 2  của Stephanie Leary. Sau khi cài đặt và kích hoạt plugin này, hãy làm theo hướng dẫn sử dụng để nhập toàn bộ thư mục các trang HTML của bạn.

Sau đó, bạn sẽ có tất cả nội dung cũ của mình trên WordPress và được định dạng theo chủ đề mới của bạn. Chúc các bạn thành công