/*
Theme Name: My Theme
Author: LakiGarang
Author URI: https://hostinger.com/tutorials/author/luqman
Description: A development theme, from static HTML to WordPress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

  
  

  
    

  
      

        
        
        

          RACHEL McCOLLIN
        
        
        
Fiction and Technical Writer
      
      
  
      

                
          ☰
          
      
 
    
    

    
  

  
      
  
  
    

  

    
    


      

      
        
Welcome to This Website
    
        

      
          This site is comprised of one static HTML file .
          
You will be able to add more content later via the WordPress admin screens.
            
          
Here's a heading so you can check how it's styled
          And another paragraph underneath .
          And a list :
          
          

            
Item 1
            
Item 2
            
And so on...
          
            
        
        


      


    


    
    
    
  



  

Mở file index.html trong website cũ bạn lên, chúng ta sẽ dùng nó để tạo file WordPress. Ví dụ bên dưới là cách làm của chúng tôi. Bắt đầu là việc tạo file header.php

header.php

Từ đầu cho đến phần nội dung chính của code HTML cũ sẽ cần được đưa vào file này. Tức là đoạn code phía trước tag

.

Hơn nữa, trước element

, copy và dán code này vào . Nó sẽ giúp plugin WordPress hoạt động bình thường, sau khi hoàn tất, lưu lại file. Khi hoàn tất, file header.php sẽ có nội dung như sau:

  
  

  
    

  
      

        
        
        

          RACHEL McCOLLIN
        
        
        
Fiction and Technical Writer
      
      
  
      

                
          ☰
          
      
 
    
    

    
  

  
      
  
  

sidebar.php

Những đoạn code trong khu vực

sẽ cần được đưa vào file sidebar.php này. Khi hoàn tất, lưu lại file đó. Nội dung file sidebar.php cuối cùng sẽ như sau:

footer.php

Giờ, phần còn lại của file HTML cũ set được đưa vào file footer.php .

Ngay trước bracket đóng

, thêm đoạn code này vào , cho WordPress biết đó là file footer. Sau khi lưu lại file footer, kết quả như sau:

Giờ, bạn đã xong với file index.html cũ. Bạn có thể đóng file này lại rồi. Tuy nhiên, khoan đóng header.php và index.php. Chúng ta vẫn cần thao tác tới các file này.

4. Đổi Style Sheet sang WordPress Format

Trong header.php, bạn cần đổi style sheet từ HTML sang WordPress. Tìm đến liên kết cũ trong khu vực . Ở trường hợp của tôi, nó sẽ như sau:

Thay thế nó bằng dòng sau để đổi style sang WordPress format :

Lưu lại và đóng file header.php.

Quay lại file index.php. Nó là file trống vào lúc này, hãy dán các dòng code sau vào:

Code này sẽ gọi phần loại của file WordPress cho bạn. Bạn sẽ thấy khoảng trống giữa header và sidebar. Đó là nơi chúng tôi sẽ thêm Loop vào .
Loop sẽ giải quyết và xử lý cách hiển thị của mỗi bài viết, và định dạng nó tùy vào dữ kiện bên trong tag Loop. Đây là một yếu tố quan trọng để thêm nội dung động vào trong website WordPress .

Để tạo loop, dán đoạn code này vào ngay sau :

  

    

    
      

      Posted on php the_date ( ) ; ? by php the_author ( ) ; ?
      
    
    

      
    
    

      
        Posted under: 
      
    
  

Sau khi hoàn tất, lưu lại file index.php và đóng nó lại. Bạn đã thành công tạo WordPress theme. Giờ, bạn có thể thêm nó vào WordPress site.

5. Upload Theme của bạn vào WordPress

Sau khi hoàn tất tạo theme cơ bản, bạn upload nó vào trong WordPress. Tất cả file đã nằm trong thư mục theme rồi, nên bạn chỉ cần zip nó lại.

Chuyển tới trang quản trị WordPress. Vào trong Appearances -> Themes. Nhấn nút Add New -> Upload Themes.

Sau đó, nhấn nút Install Now, rồi kích hoạt theme bằng cách nhấn nút Activate.

Giờ, giao diện chính của website mới đã giống site HTML cũ của bạn rồi. Mặc dù về cơ bản thì đã giống rồi nhưng bạn còn cần làm nhiều việc hơn để trông đẹp hơn .
Ví dụ, bạn chưa thể sử dụng những tính năng WordPress như là khu vực widget. Bạn cần đổi khác CSS markup để biến nó thành một phần của phong cách thiết kế chính của WordPress nữa .

Quên đi thiết kế cũ và chỉ chuyển nội dung

Nếu bạn đồng ý chấp thuận việc biến hóa phong cách thiết kế, bỏ phong cách thiết kế cũ và giữ lại nội dung. Bạn chỉ việc tìm một theme mới và nhập nội dung vào. Cách này tương đối dễ hơn nhiều .
Đầu tiên bạn hoàn toàn có thể cài và kích hoạt theme bạn thích rồi làm theo những bước sau .

Quan trọng: Luôn backup stie WordPress của bạn trước khi tạo thay đổi.

1. Cài đặt Import Plugin 2

Bạn cần cài đặt  Import Plugin 2. Vào Plugins -> Add New tìm tên này. Bạn cần cuộn xuống xa một tí vì plugin này cũ rồi, nhưng nó vẫn làm tốt được công việc này. Nhấn cài đặt và kích hoạt nó.

2. Chuẩn bị file để import (nhập dữ liệu)

Giờ, bạn chuyển vào mục Settings -> HTML Import. Bạn có thể nhập nhiều trang cùng lúc hoặc từng trang một.

Bạn sẽ nhận ra plugin này chỉ đến đường dẫn cụ thể là html-files-to-import. Có nghĩa là bạn cần upload file HTML lên cùng server/thư mục cài đặt WordPress. Nếu cần thêm thông tin chi tiết, bạn có thể xem hướng dẫn chính thức của plugin này.

Giờ, hãy mở màn thông số kỹ thuật nội dung HTML để chuyển sang WordPress. Chọn HTML tag trên cùng và chọn thông số kỹ thuật 3 trường ..

Sau khi xong, nhấn nút save settings.

3. Nhập nội dung

Nút Import Files sẽ xuất hiện khi bạn lưu cấu hình nhập liệu. Bạn có thể vào lại chỗ này bằng cách chọn Tools -> Import nhấn nút Run Importer bên dưới tùy chọn HTML.

Chọn import một thư mục hay một file, rồi nhấn Submit. Sau khi hoàn tất, toàn bộ nội dung HTML cũ của bạn sẽ được chuyển đến trang WordPress mới.

Sử dụng child theme từ một theme có sẵn tương tự site HTML

Nếu muốn giữ lại một số ít phong cách thiết kế sẵn từ website cũ, nhưng bạn cảm thấy giải pháp đầut iên hơi khó. Vậy sử dụng child theme hoàn toàn có thể đơn thuần hơn .
Child theme được cho phép bạn tận dụng hàng ngàn theme có sẵn ( theme cha ) trên WordPress và dựng site mới dựa trên chúng .
Bạn cũng hoàn toàn có thể tạo đổi khác đáng kể lên site của bạn mà không gây ảnh hưởng tác động tới code chính của theme cha. Bạn không mất những biến hóa này khi theme đó được update .
Chúng tôi có viết bài chi tiết cụ thể cách tạo child theme ở đây để bạn tìm hiểu thêm. Trong bài hướng dẫn này, chúng tôi sử dụng plugin Childify Me để đơn giản hóa hàng loạt quy trình

Quan trọng: Luôn backup site WordPress của bạn trước khi tạo thay đổi.

1. Chọn theme thích hợp

Bạn cần chọn một theme thích hợp làm nền tảng. Tốt nhất là nên chọn theme sao cho phong cách thiết kế gần nhất với website cũ của bạn, để dễ tùy chỉnh, đổi khác phong cách thiết kế hơn .
Tìm trong WordPress theme directory để chọn theme thích hợp nhất. Trong bài hướng dẫn này, chúng tôi sử dụng theme Twenty Seventeen làm ví dụ .

2. Cài đặt Childify Me

Vào Plugins -> Add New tìm Childify Me. Install và activate nó.

Lưu ý: Childify Me plugin sẽ tạo file style.css và function.php. Nếu bạn muốn thêm functions riêng trong file functions.php, hoặc thêm file/folder mới, bạn có thể upload qua FTP client hoặc File Manager nếu nhà cung cấp có hỗ trợ như Hotinger.

3. Tùy chỉnh Parent Theme (theme cha)

Chuyển tới mục Appearance -> Themes. Hãy chắc rằng parent theme đang active. Nhấn nút Customize, để di chuyển tới trang tùy chỉnh.

4. Tạo child theme từ Parent Theme (Childify theme)

Nhấn nút Childify Me, đặt tên child theme. Chúng tôi khuyên bạn nên đặt tên gần giống với theme parent. Và nhấn nút create. Sau đó nhấn nút activate and preview để kích hoạt theme.

5. Chuyển HTML sang WordPress: import nội dụng

GIờ bạn đã có theme mới trông gần giống với site HTML cũ, bạn chỉ cần nhập tài liệu nữa là xong. Hãy vận dụng cách trên để nhập nội dung .
Chỉ vậy thôi. Giờ bạn đã hoàn tất việc chuyển HTML sang WordPress. Chúc mừng nhé !

Lời kết

Phew, thật dài nhỉ. Chúng tôi đã trình diễn những cách cần làm để chuyển HTML sang WordPress .
Tóm lại – bạn hoàn toàn có thể tạo theme WordPress từ site HTML cũ của bạn. Việc tạo theme WordPress sẽ giúp site có nền tảng để đưa nội dung cũ từ HTML site sang. Nó hơi khó nhưng là cách tốt nhất nếu bạn biết code và có thời hạn để góp vốn đầu tư .
Ngoài ra, bạn cũng hoàn toàn có thể sử dụng plugin để đơn giản hóa quy trình quy đổi, nhập hàng loạt nội dung cũ vào trong nhà mới là xong .
Chúng tôi kỳ vọng bài viết chuyển html sang WordPress này có ích với bạn. Hẹn gặp lại bạn ở bài sau nhé !

Tác giả

Hai G .
Hải G. là chuyên viên quản trị, quản lý và vận hành những dịch vụ website. Anh có nhiều năm kinh nghiệm tay nghề về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu quý WordPress và đã dùng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho những bạn trẻ khởi nghiệp .