Chuyển HTML sang Wordpress theme Woocomerce chi tiết

Để có thể chuyển HTML sang WordPress theme Woocomerce, trước tiên bạn cần phải có kỹ năng nhất định về HTML để hiểu được cấu trúc của template mà bạn đang sử dụng.

Nếu bạn mua template có sẵn trên internet hoặc thuê người khác cắt HTML cho các dự án bạn sẽ thấy là mỗi lập trình viên sẽ tạo nó theo những cách khác nhau. Vì vậy, nếu bạn đã theo hướng sử dụng bootstrap để làm website, hãy luôn lựa chọn bootstrap trong các yêu cầu đặt mua.

1. Chuẩn bị các tệp tin

Mình đã có bài hướng dẫn cơ bản về việc sử dụng Bootstrap để tạo template HTML, bạn có thể xem lại trong bài viết: [Phần 4] Tìm hiểu HTML CSS với Bootstrap 4 và Sublime Text. Tuy chỉ là hướng dẫn cơ bản nhưng sẽ giúp bạn hiểu được giao diện tạo thành từ Bootstrap hoạt động như nào. Từ đây sẽ hiểu các bài hướng dẫn về sau của mình trên nguyenxuanhiep.net hơn.

1.1 Tạo cây thư mục và các tệp tin cần thiết

Tạo một thư mục theo tên dự án bên trong \xampp\htdocs và cài đặt WordPress mới nhất vào đó.

Tiếp theo, bạn cũng cần hiểu về cấu trúc một WordPress theme và mình cũng đã có một bài viết khá chi tiết: [Phần 3] Tìm hiểu cấu trúc theme WordPress: Các thành phần và chức năng cơ bản, bạn hãy đọc nó và tạo các file cần thiết bên trong.

Dưới đây là cấu trúc template HTML và mục tiêu của bạn là chuyển HTML sang WordPress theme Woocommerce.

Chuyển HTML sang WordPress theme Woocomerce — Cấu trúc các files bên trong theme WordPress Woocommerce ban đầu sau khi tạo, bạn cần có các folders và files như trên để có thể làm tiếp các bước bên dưới.

Bạn có một dự án WordPress đang chạy rồi, giờ cài luôn plugin Woocommerce vì bạn đang tạo một theme website bán hàng.

Các bước trên giúp bạn có thể xem trực tiếp theme Woocommerce mà bạn đang tạo trên trình duyệt, giúp bạn có cái nhìn trực quan hơn và sửa các lỗi nếu có.

2.2 Sao chép các tệp template vào thư mục assets

Sao chép các tệp tin HTML vào thư mục assets.
Sao chép các tệp CSS vào thư mục assets/css.
Sao chép các tệp JavaScript vào thư mục assets/js.
Nếu template của bạn có các thư mục khác như lib, email,… thì cứ copy cả folder vào trong thư mục assets.

Nó sẽ trông như này:

Toàn bộ template HTML đã được copy vào thư mục `assets`

2 Cấu hình đường dẫn khi chuyển HTML sang WordPress

Trong quá trình chuyển HTML sang WordPress, cái đầu tiên mà bất kỳ lập trình viên nào cũng phải làm đó là cấu hình lại đường dẫn chuẩn cho các files css, js, fonts, images,… Mở file index.html trong thư mục assets và copy toàn bộ code HTML sang file index.php và lưu lại.

2.1 Khai báo tệp tin css trong thẻ <head>

<head>
    <meta charset="utf-8">
    <title>Webshop - Bootstrap Shop Template</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free HTML Templates" name="keywords">
    <meta content="Free HTML Templates" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
</head>

Nội dung bên trong thẻ head ban đầu của mình như trên, cần sửa lại đường dẫn cho đúng đường dẫn của theme WordPress. Trong Sublime Text, ấn tổ hợp phím ctrl+H và sửa các cụm từ sau:

Thay thế img/ thành wp-content/themes/webshop/assets/img/
Thay thế lib/ thành wp-content/themes/webshop/assets/lib/
Thay thế css/ thành wp-content/themes/webshop/assets/css/

2.2 Cấu hình fonts chữ cho theme

Bạn thấy rằng template đang sử dụng fonts từ google và cloudflare, điều này không tốt cho việc load trang. Đặc biệt, nếu website của bạn sử dụng hosting trong nước nhưng cáp quang quốc tế bị đứt sẽ khiến web bạn bị vỡ font (ở VN đứt cáp quang quốc tế là thường xuyên).

Do đó trong quá trình chuyển HTML sang WordPress, bạn cần phải tải tất cả fonts chữ về thư mục assets/fonts và cấu hình lại. Tải toàn bộ font awesome tại đây.

Các loại fonts để tích hợp vào website đều đã được mình tối ưu, lược bỏ các phần không cần thiết nên dung lượng chỉ còn vài MB, rất nhỏ, phù hợp cho việc phát triển các WordPress theme. Nếu bạn tự tải ở nguồn khác thì cũng cần lược bỏ đi như vậy để website được nhẹ hơn, đỡ tốn dung lượng của hosting hoặc server.

Sau khi tải về, giải nén ra bạn được thư mục font-awesome, copy toàn bộ thư mục này vào thư mục assets. Đổi tên nó thành thư mục fonts nếu muốn.

Thay thế đường dẫn font như sau:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

Thành đường dẫn đến thư mục assets/fonts:

<link href="wp-content/themes/webshop/assets/fonts/css/all.min.css" rel="stylesheet">

webshop là tên theme mình đang tạo, bạn đổi thành tên theme của bạn.

Font Poppins mình sẽ bỏ vì không sử dụng được cho trang web tiếng Việt.

2.3 Khai báo các file js

Kéo xuống dưới cùng của file index.php, bên trên thẻ đóng </body> là các đường dẫn đến file js.

<!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Contact Javascript File -->
    <script src="mail/jqBootstrapValidation.min.js"></script>
    <script src="mail/contact.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
</body>

Bạn sử dụn Ctrl + H và thay thế các keywords sau:

Thay thế mail/ thành wp-content/themes/webshop/assets/mail/
Thay thế js/ thành wp-content/themes/webshop/assets/js/
Thư mục lib/ đã được thay thế trong bước trên.

Với 2 file .min.js trên cùng, bạn vào đường dẫn và tải về, cho vào thư mục assets/js, lúc này bạn sẽ có như sau:

<script src="wp-content/themes/webshop/assets/js/jquery-3.4.1.min.js"></script>
<script src="wp-content/themes/webshop/assets/js/bootstrap.bundle.min.js"></script>

3. Tệp tin style.css

Tệp tin style.css có vai trò rất quan trọng trong quá trình chuyển HTML sang WordPress. Từ file này, bạn sẽ khai báo tên theme, tác giả và bản quyền sở hữu,… Mặc định WordPress sẽ chỉ đọc các thông tin này bên trong file style.css nên bạn buộc phải tạo nó.

Bạn thêm các thông tin về theme như sau:

/*
Theme Name: Tên chủ đề của bạn
Theme URI: Đường dẫn đến trang chủ đề của bạn
Description: Mô tả chủ đề của bạn
Version: 1.0
Author: Tên tác giả
Author URI: Đường dẫn đến trang cá nhân của tác giả
License: Giấy phép sử dụng (ví dụ: GNU General Public License)
License URI: Đường dẫn đến giấy phép sử dụng
Tags: Từ khóa liên quan đến chủ đề
*/

Đến bước này là theme WordPress của bạn đã có thể hiển thị trong mục Giao diện của quản trị admin rồi. Bạn hoàn toàn có thể kích hoạt và chạy thử website với tên miền ảo đã tạo. Tôi đặt tên miền ảo của mình là webshop.vn:

Nếu website đã hiển thị giao diện giống như template HTML với các hiệu ứng slide, menu xổ xuống là bạn đã thành công. Nếu không có các hiệu ứng, khi click vào slide, menu bị nhảy dấu # hoặc lỗi hiển thị hình ảnh, bạn cần kiểm tra lại đường dẫn và chỉnh sửa lại cho đúng.

Nếu lỗi, khi ấn Ctrl + U và click vào các các đường dẫn css, js hay img để kiểm tra. Nếu sai cấu hình, sẽ được hiểu là tệp tin (hoặc thư mục) không tồn tại, đường link file lập tức sẽ chuyển đến trang 404 và lúc này, bạn hiểu đường dẫn đang bị cấu hình sai.

4. Tệp tin functions.php

File functions.php là nơi bạn có thể thêm các mã PHP để tùy chỉnh chức năng của theme WordPress, như đăng ký các khu vực widget, tùy chỉnh hình ảnh đại diện, hỗ trợ menu và nhiều hơn nữa.

Tuy nhiên trong một dự án thực tế, chẳng có nhà phát triển theme nào lại code tràn lan vào file functions.php cả. Để website bảo mật tốt hơn, bạn cần tạo thư mục inc và tạo luôn file init.php bên trong thư mục này. Sau đó nhúng init.php vào file functions.php.

Hiện giờ, bạn cần đăng ký widget, tạo menu, bật ảnh đại diện cho mục bài viết,… Tất cả các thứ đó được mình tạo trong file class-webshop-default.php của thư mục inc/classes như sau:

<?php
if(!function_exists('webshop_theme_setup')){
	function webshop_theme_setup(){
		// Setting text domain
		$langguage_folder = get_template_directory() . '/languages';
		load_theme_textdomain( 'webshop', $langguage_folder );

		// Auto add link RSS to <head>
		add_theme_support('automatic-feed-links');

		// Enable post thumbnail
		add_theme_support('post-thumbnails'); 

		//Post format
		add_theme_support('post-formats', array(
			'image',
			'video',
			'gallery',
			'quote',
			'link'
		));
		// Meta tag
		add_theme_support('title-tag');

		// Menu
		register_nav_menu( 'primary-menu', __('Primary Menu', "webshop"));
		register_nav_menu( 'topbar-menu', __('Topbar Menu', "webshop"));
		register_nav_menu( 'vertical-menu', __('Vertical Menu', "webshop"));

		// Sidebar Widget
		$sidebar = array(
			'name' 				=> 	__( 'Right Sidebar', 'webshop'),
			'id' 				=> 	'right-sidebar', 
			'description'		=>	__('Default Sidebar on website', 'webshop'), 
			'class'				=>	'right-sidebar', 
			'before_widget'		=>	'<div id="%1$s" class="widget %2$s">',
			'after_widget'		=>	'</div>',
			'before_title'		=>	'<h2 class="widget-title">',
			'after_title'		=>	'</h2>'
		);
		register_sidebar($sidebar);
	}
	add_action( 'init', 'webshop_theme_setup' );
}

Đoạn code trên sẽ kiểm tra xem hàm webshop_theme_setup() đã tồn tại chưa, nếu chưa, thì tạo hàm webshop_theme_setup() với các chức năng được mô tả trong dấu //. Hàm này tạo hoặc kích hoạt các chức năng cơ bản mà một theme WordPress cần phải có.

Bây giờ, bạn mở file init.php lên và nhúng file class-webshop-default.php vào file init.php bằng cách thêm vào đoạn code sau:

<?php
// Setup theme
require get_template_directory() . '/inc/classes/class-webshop-default.php';

Mở file functions.php lên và thêm vào dòng code sau:

<?php 
/**
 * webshop functions and definitions
 *
 * @package webshop
 */

require get_template_directory() . '/inc/init.php';

/**
 * Note: It's not recommended to add any custom code here. Please use a child theme so that your customizations aren't lost during updates.
 * Learn more here: http://codex.wordpress.org/Child_Themes
 */

Các đoạn mô tả trong cặp dấu /*…*/ chỉ là để hướng dẫn người dùng, tại file functions.php bạn chỉ cần một dòng số 8 mà thôi.

Từ giờ, nếu muốn thêm một chức năng nào đó, bạn lặp lại các bước trên bằng cách tạo ra các thư mục và file code riêng như thư mục post để viết các hàm chức năng cho bài viết, woocommerce để viết chức năng cho plugin woocommerce,… nhúng các file code vào init.php và không cần động đến functions.php nữa.

Kiểm tra các chức năng Thêm ảnh đại diện cho bài viết, thêm sidebar đã hiển thị trong quản trị chưa?

Thời điểm 9-10 năm về trước khi tìm hiểu về WordPress trên internet, mình luôn copy tất cả các code về file functions.php như trong các bài hướng dẫn. Nó vẫn chạy tuy nhiên độ bảo mật và tính chuyên nghiệp gần như không có. Sau này khi mua các theme nước ngoài về để tìm hiểu, mình mới thấy cái hay của việc chia nhỏ từng phần code và đã học theo cách làm của họ. Trong một dự án thực tế, bạn hãy luôn chia code ra các files riêng để dễ quản lý, bảo mật và chuyên nghiệp hơn.
(Thời điểm đó mình xây dựng web bằng asp.net và sau này là Asp MVC nên chưa hiểu lắm về cấu trúc chuẩn của WordPress theme).

Đến đây mới chỉ là bước đầu chuyển HTML sang WordPress theme thôi, toàn bộ mã HTML đang ở file index.php và bạn cần phải chia cắt nó ra thành các phần nhỏ trong phần 5.

5. Chia cắt các phần của theme WordPress

Làm việc với theme WordPress, bạn sẽ sử dụng template-part để chia nhỏ các thành phần của trang web vào các file php riêng biệt để thuận tiện code, sửa đổi và quản lý. Ví dụ phần mã HTML cho header, footer, slide, sản phẩm,… sẽ được đặt trong các files php riêng để code chức năng.

Khi chuyển HTML sang WordPress theme thì bạn luôn phải thực hiện bước này. Trải qua một vài dự án thì tốc độ chia cắt các phần của bạn sẽ ngày một nhanh. Thông thường chỉ mất khoảng 15-30 phút để tạo xong một theme đã được chia cắt HTML.

Trong thư mục gốc của theme, bạn tạo thư mục template-parts để chứa các thành phần. Bên trong thư mục này, bạn tạo tiếp các thư mục theo chức năng hoặc vị trí hiển thị. Ví dụ thư mục home được mình tạo để chứa các template part của trang chủ (category, product,…), thư mục header để chứa các template part của phần header (topbar menu, logo, primary menu, cart info, …).

Phần header trong mã HTML sẽ được đưa vào header.php của theme, tương tự là footer.php, sidebar.php và các phần giao diện khác như bài viết mới nhất, đối tác, sản phẩm,… Ví dụ với tệp header.php, chúng ta sẽ xử lý như sau:

Copy HTML của phần header vào file header.php và lưu lại. Bạn cần xem video mình làm bên dưới để hiểu đoạn này nếu như bạn chưa thành thạo ngôn ngữ HTML.

Tiếp tục chia tách các thành phần của html header bằng cách tạo thư mục header trong thư mục template-parts. Trong thư mục header này, bạn tạo các files thành phần như cart info, logo, menu, search, … như trong hình trên.

Nhúng các files vào file header như sau:

<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <?php wp_head(); ?>
    
</head>

<body>
    <!-- Topbar Start -->
    <div class="container-fluid">
        <div class="row bg-secondary py-2 px-xl-5">

            <?php webshop_topbar_menu("topbar-menu") ?>

            <?php get_template_part( 'template-parts/header/header-social' ) ?>

        </div>
        <div class="row align-items-center py-3 px-xl-5">
            
            <?php get_template_part( 'template-parts/header/header-logo' ) ?>
            
            <?php get_template_part( 'template-parts/header/header-search' ) ?>

            <?php get_template_part( 'template-parts/header/header-cart-info' ) ?>

        </div>
    </div>
    <!-- Topbar End -->

Bạn sử dụng hàm get_template_part() để nhúng các files đã phân tách vào file header.php. Tham số truyền vào của hàm là đường dẫn đến thư mục chứa file và bỏ đuôi .php đi. Bạn có thể tìm hiểu thêm về hàm này tại đây.

Bạn làm tương tự với các thành phần khác của trang web như footer.php, products, …

6. Thêm các hàm WordPress vào tệp tin theme

WordPress có một loạt các hàm và tag dùng để hiển thị nội dung động và hỗ trợ các tính năng như menu, widget và phân trang. Bạn cần thêm các hàm và tag này vào tệp tin theme của bạn để chủ đề hoạt động đúng.

Như trong đoạn code trên, mình đã sử dụng hàm wp_head() để cấu hình đường dẫn các files css, thẻ meta,… chỉ bằng cách gọi hàm ra. Các files CSS sẽ được cấu hình lại như sau:

function webshop_styles(){
	wp_enqueue_style( 'font-awesome', get_stylesheet_directory() . "/assets/font-awesome/css/all.min.css", 'all' );
	wp_enqueue_style( 'owl-carousel', get_stylesheet_directory() . "/assets/lib/owlcarousel/assets/owl.carousel.min.css", 'all' );
	wp_enqueue_style( 'webshop-style', get_stylesheet_directory() . "/assets/css/style.css", 'all' );
}
add_action('wp_enqueue_scripts', 'webshop_styles');

Bạn làm tương tự với các tệp .js dưới chân trang. Thêm đoạn lệnh sau vào hàm trên:

wp_enqueue_script('main',  get_stylesheet_directory() . '/assets/js/main.js', array('jquery'), false, true);

Đoạn lệnh trên khai báo tệp main.js dưới chân trang, bạn chú ý 2 tham số false và true truyền vào, trong đó false là không hiển thị ở header, true là hiển thị khai báo này dưới chân trang thông qua hàm wp_footer().

Nếu bạn không truyền vào 2 tham số này, mặc định file main.js sẽ được khai báo trên <head> thông qua hàm wp_header().

7. Thêm thư mục Woocommerce vào theme WordPress

Để hoàn thiện chuyển HTML sang WordPress theme, bạn cần phải cài đặt plugins Woocommerce trong quản trị. Sau khi cài đặt xong, bạn vào thư mục htdocs\ten_du_an\wp-content\plugins\woocommerce.

Tại đây, bạn sẽ thấy một thư mục là templates, copy toàn bộ thư mục này vào thư mục gốc của theme bạn đang xây dựng và đổi tên nó thành woocommerce.

Đến đây, bạn vừa hoàn thiện quá trình chuyển HTML sang WordPress theme Woocommerce rồi, việc tiếp theo là code hiển thị các chức năng trong từng template-part tạo ở trên.

8. Đăng tải chủ đề

Nếu bạn chưa kích họat chủ đề (theme) của bạn thì bước này mình sẽ hướng dẫn bạn kích hoạt theme trong quản trị admin như sau:

Nén thư mục chủ đề của bạn thành một tệp tin .zip.
Trong trang quản trị WordPress, điều hướng đến “Appearance” (Giao diện) và chọn “Themes” (Chủ đề).
Nhấp vào nút “Add New” (Thêm mới) và sau đó chọn “Upload Theme” (Tải lên chủ đề).
Chọn tệp tin .zip chứa chủ đề của bạn và nhấp vào nút “Install Now” (Cài đặt ngay).
Khi quá trình cài đặt hoàn tất, kích hoạt chủ đề của bạn.

Sau khi hoàn tất tất cả các bước trên, chủ đề của bạn đã được chuyển từ template HTML sang WordPress. Bạn có thể tùy chỉnh chủ đề theo ý muốn và sử dụng các tính năng WordPress để thêm các chức năng động và quản lý nội dung dễ dàng.

Bạn có thể tham khảo chuyên mục Lập trình WordPress của mình để đọc lại các bài viết trước đây. Cảm ơn bạn và hẹn gặp lại trong các bài viết tiếp theo.

Đăng ký nhận tin từ Hiệp IT

Chuyển HTML sang WordPress theme Woocommerce