VietNam- English
VietNamEnglishBạn đang sở hữu một website HTML tĩnh nhưng muốn chuyển đổi sang WordPress để tận dụng các tính năng mạnh mẽ và linh hoạt của nền tảng này? Trong bài viết dưới đây, CloudFly sẽ hướng dẫn bạn cách chuyển HTML sang WordPress một cách chi tiết. Hãy theo dõi ngay để bắt đầu hành trình biến website của bạn trở nên chuyên nghiệp hơn nhé.
Phương pháp này giúp bạn chuyển đổi HTML sang WordPress, giữ nguyên thiết kế từ trang HTML hiện tại. Bạn có thể thực hiện theo các bước dưới đây:
B1: Đầu tiên, bạn tạo một thư mục cho theme trên máy tính và đặt tên, chẳng hạn như my-theme.
B2: Sau đó, bạn mở trình soạn thảo code và tạo các file sau: style.css, index.php, functions.php, header.php, footer.php, archive.php, single.php.
Bạn mở file style.css và dán đoạn mã sau vào đầu file:
/*
Theme Name: My Theme
Author: CloudFly
Author URI: https://cloudfly.vn/
Description: A basic theme, from 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
Text Domain: cloudfly
*/
Đoạn mã này cần được đặt ở đầu file style.css để WordPress nhận diện đây là stylesheet chính của theme. Bạn có thể tùy chỉnh thông tin như tên theme, tác giả, URL, mô tả, phiên bản và Text Domain theo ý muốn. Sau đó, bạn có thể viết thêm các CSS bổ sung cho theme bên dưới phần thông tin này.
Website thường có phần header và footer, tương ứng với đầu trang và chân trang, sẽ xuất hiện trên tất cả các trang của website. Vì vậy, bạn cần tách phần header và footer từ website HTML cũ và gắn vào đúng file trong theme. Điều này giúp WordPress nhận diện được nội dung của hai phần này.
B1: Bạn sao chép toàn bộ mã HTML từ đầu đến hết thẻ đóng của header (</header>) và dán vào file header.php trong theme.
B2: Trong phần mã vừa dán, bạn thêm dòng mã <?php wp_head(); ?> ngay trước thẻ đóng </head> để WordPress nhận biết đây là phần header của theme.
B3: Tiếp theo, bạn thêm dòng mã <?php wp_body_open(); ?> ngay sau thẻ mở <body>.
Các dòng mã này sẽ hữu ích khi bạn tích hợp plugin vào website.
B1: Bạn sao chép toàn bộ mã HTML từ thẻ mở <footer> cho đến thẻ đóng và dán vào file footer.php trong theme.
B2: Trong phần mã vừa dán, trước thẻ đóng </body>, bạn thêm dòng mã <?php wp_footer(); ?> để WordPress nhận diện đây là phần footer của theme.
Trang chủ là một phần quan trọng mà gần như website nào cũng có. Để chuyển mã HTML sang WordPress cho Trang chủ, bạn làm theo các bước như sau:
B1: Bạn sao chép toàn bộ mã còn lại của Trang chủ nằm giữa phần header và footer. Rồi dán vào file index.php mà bạn đã tạo.
B2: Tiếp theo, bạn thêm dòng mã <?php get_header(); ?> vào đầu file và dòng mã <?php get_footer(); ?> vào cuối file.
Điều này giúp WordPress lấy nội dung header và footer từ các file tương ứng mà bạn đã gắn vào trước đó, hiển thị chúng trên Trang Chủ.
Nếu website của bạn có các trang danh sách bài viết, bạn sẽ làm tương tự như với Trang Chủ.
B1: Bạn sao chép và dán mã nằm giữa phần header và footer vào file archive.php.
B2: Sau đó, bạn thêm dòng mã <?php get_header(); ?> vào đầu file và <?php get_footer(); ?> vào cuối file để WordPress tự động lấy nội dung header và footer từ các file tương ứng.
B3: Tiếp theo, bạn cần thêm mã để WordPress tự động lấy tên danh mục và các bài viết trong danh mục đó. Bạn thay thế tên danh mục cũ bằng đoạn mã <?php the_archive_title(); ?> trong file archive.php.
B4: Sau đó, bạn tìm phần mã HTML của danh sách bài viết trong file archive.php và cấu trúc của từng bài viết. Bạn thay thế mã HTML này bằng vòng lặp PHP để lấy các bài viết từ WordPress và hiển thị chúng.
Lưu ý bạn cần giữ lại cấu trúc HTML cũ, do đó, bạn có thể sao lưu lại mã HTML các bài viết vào một file khác.
Tương tự, để gắn code cho trang bài viết, bạn thực hiện như sau:
B1: Bạn sao chép và dán mã nằm giữa phần header và footer của trang bài viết trong website HTML cũ vào file single.php mới tạo.
B2: Sau đó, bạn thêm dòng mã <?php get_header(); ?> vào đầu file và <?php get_footer(); ?> vào cuối file.
B3: Tiếp theo, để hiển thị nội dung bài viết, bạn cần chèn mã PHP để tự động lấy nội dung từ các bài viết đã được viết và quản lý trong phần Admin của website. Bạn thay thế tiêu đề bài viết trong mã HTML cũ bằng đoạn mã sau: <?php the_title(); ?>, để WordPress hiển thị tiêu đề bài viết đang được xem.
B4: Sau đó, bạn tìm thẻ chứa nội dung chính của bài viết và thay thế nó bằng <?php the_content(); ?>.
Hàm này sẽ tự động lấy nội dung bài viết đang xem và hiển thị cho người dùng.
B5: Ngoài ra, nếu cần thiết, bạn có thể thêm các hàm WordPress sau để hiển thị thêm thông tin quan trọng:
File functions.php là nơi bạn khai báo các styles, scripts, và chức năng cho theme. Để bắt đầu, bạn có thể thêm đoạn mã sau vào file này:
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'my-theme-style', get_stylesheet_directory_uri() . '/style.css', [], null, 'all' );
} );
add_action( 'after_setup_theme', function () {
add_theme_support( 'post-thumbnails' );
} );
?>
Trong đó, dòng wp_enqueue_style dùng để khai báo file style.css cho theme. Còn dòng add_theme_support sẽ kích hoạt các chức năng hỗ trợ cho theme, ở đây là chức năng 'post-thumbnails' (hiển thị ảnh đại diện cho bài viết).
Bên cạnh đó, bạn cũng có thể sử dụng thêm một số hàm trong file này để cấu hình các chức năng khác cho theme như sau:
Khi tất cả các file dữ liệu đã được lưu trong thư mục theme, bạn chỉ cần nén chúng thành một file zip và thực hiện các bước sau:
B1: Đầu tiên, bạn đăng nhập vào trang quản trị WordPress.
B2: Bạn vào mục Appearances, chọn Themes.
B3: Tiếp theo, bạn nhấn vào nút Add New, chọn Upload Theme.
B4: Bạn nhấn vào Install Now và kích hoạt theme bằng cách nhấn Activate.
B5: Sau khi cài đặt, giao diện trang web của bạn sẽ giống với trang HTML cũ. Tuy nhiên, bạn vẫn có thể tiếp tục tùy chỉnh để làm giao diện đẹp và hoàn thiện hơn.
Bạn có thể chuyển HTML sang WordPress bằng cách dùng child theme từ theme sẵn có giống với site HTML cũ. Việc này giúp bạn giữ lại một số thiết kế cũ một cách hiệu quả. Bạn có thể thực hiện như sau:
Bước 1: Trong thư viện theme của WordPress, bạn chọn theme có thiết kế gần giống với trang web cũ để dễ dàng điều chỉnh.
Bước 2: Tiếp theo, bạn vào Plugins, chọn Add New. Rồi tìm kiếm plugin Childify Me và cài đặt, kích hoạt.
Plugin này sẽ tạo file style.css và functions.php cho child theme. Nếu cần thêm chức năng riêng hoặc thêm thư mục, bạn có thể tải lên qua FTP hoặc File Manager.
Bước 3: Bạn truy cập vào Appearance, chọn Themes để kiểm tra theme cha đang kích hoạt. Sau đó nhấn Customize để bắt đầu tùy chỉnh.
Bước 4: Bạn nhấn vào Childify Me và đặt tên cho child theme. Rồi nhấn Create, chọn Preview and Activate để kích hoạt.
Bước 5: Cuối cùng, bạn đã có theme mới tương đồng với trang HTML cũ. Bây giờ, bạn chỉ cần nhập dữ liệu vào là hoàn tất.
>>> Xem thêm:
Hy vọng bài viết trên trên đã giúp bạn hiểu rõ hơn về hướng dẫn cách chuyển HTML sang WordPress. Nếu còn thắc mắc hay muốn đăng ký Cloud Hosting tại CloudFly, hãy liên hệ ngay với chúng tôi qua thông tin bên dưới để được tư vấn và hỗ trợ chi tiết. Đội ngũ kỹ thuật có chuyên môn cao luôn sẵn sàng 24/7 để giải quyết mọi vấn đề của bạn.
THÔNG TIN LIÊN HỆ:
