[Series viết theme bán hàng Woocommerce] 2. Thiết đặt theme WordPress

Cập nhật lần cuối: 05 Tháng Mười 2023

WordPress

2,867 Lượt xem

Bài trước mình đã hướng dẫn bạn cách cài đặt và thiết lập plugin woocommerce. Trong bài viết hôm nay mình sẽ hướng dẫn bạn cách tạo ra một theme riêng biệt sử dụng HTML có sẵn và tích hợp vào theme.

Tạo theme WordPress

Đầu tiên chúng ta cần thiết lập một theme wordpress trước, cái này mình đã từng hướng dẫn ở bài :>Hướng dẫn viết theme wordpress căn bản bạn tìm lại đọc cho kỹ nhé, ở đây mình sẽ làm nhanh thôi.

Bây giờ thì có thể bạn đã tạo được một thư mục theme trong wordpress và copy toàn bộ mã html của bạn và bỏ vào đây nhé.

Mình khuyên bạn nên sử dụng notepad++ để dễ dàng quản lý mọi thứ hơn.

Cái foldel as workspace trong notepad nó không cho phép tạo file hoặc thư mục nên bạn chịu khó vào thư mục chính và tạo ra các file sau:

index.php
content.php
content-none.php
404.php
archive.php
single.php
page.php
search.php
header.php
footer.php

Mình sẽ bắt đầu cắt HTML và gán vào từng file trên nhé.

1.Tạo trang chủ.

Đầu tiên là file index.php, file này sẽ không chứa HTML nhưng sẽ có đoạn code sau:

<?php get_header();

if ( have_posts() ) :
 get_template_part( 'content');
 else :
 get_template_part( 'content', 'none' );
 endif;

get_footer(); ?>

Tiếp theo là bạn mở file index.html để xác định các nội dung cố định và nội dung thay đổi. Mẹo là bạn hãy mở hai trang HTML như là index.html và blog.html, chuyển qua lại bạn sẽ thấy vùng không thay đổi (thường là nằm phía trên và dưới cùng.
Sau khi tìm ra các phần chung mình khoanh vùng các vùng đỏ cố định như sau

Phần đầu trang chủ

Phần đầu trang blog

Cả hai trang đều có phần menu trở lên tương tự nhau, vì thế nên mình sẽ lấy phần này vào file header.php.

Phần đuôi trang chủ

Phần đuôi trang Blog

Vùng chân trang chung được xác định ở ô khoanh màu đỏ, nên mình sẽ cắt phần này và đưa vào file footer.php.
Một lưu ý nhỏ là các theme được thiết kế chuẩn HTML5 như theme này thường có đặt điểm là nó được phân ra rất rõ ràng như thẻ <header> định danh phần đầu, thẻ <section> định danh các đoạn nội dung và thẻ <footer> định danh phần cuối trang. Vì mẫu mình đang dùng được thiết kế theo chuẩn như thế nên mình sẽ dựa vào đó để copy sang các file php nhé.
Nội dung file header.php như sau:

Lưu ý là bạn phải copy cả phần <head> (1) nhé. phần (2) sẽ bao gồm một thẻ mở <body> và toàn bộ nội dung của thẻ <header>.
Tiếp theo bạn mở file footer.php và thêm đoạn bắt đầu từ thẻ <footer> đến hết file.
Bây giờ bạn quay trở lại file header.php và tiến hành thêm đoạn này vào phần <head>.

<?php $baseURL = esc_url( get_template_directory_uri());?> 
<base href="<?php echo $baseURL.'/';?>" target="_blank">

Bây giờ bạn thêm vào thư mục theme một file có tên “style.css” và thêm vào file nội dung sau:

/*
Theme Name: TUANDC SHOP
Theme URI: https://tuandc.com
Author: Tuan DC
Author URI: https://tuandc.com
Description: Theme for shop.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuandc
Tags: shop, shopping cart, archive.
*/

Bạn cũng có thể thêm một tấm hình có tên “screenshot.png” để nhận dạng theme trong. Bây giờ bạn vào phần “Giao diện” và “kích hoạt” theme mới của mình.

Sau khi kích hoạt theme, Woocommerce nó sẽ báo theme của bạn không hỗ trợ, cũng không cần quá lo lắng vì mình chưa tích hợp woo mà.
Bây giờ các bạn ra trang chủ sẽ thấy giao diện như thế này.

Tiếp theo các bạn mở file content.php và thêm các phần còn lại của trang index.html vào. Kết quả là bạn sẽ có một trang chủ hoàn chỉnh.
Bây giờ công việc tạo theme sẽ trở nên dễ dàng hơn. Bước tiếp theo chúng ta sẽ làm nhanh để tích hợp các phần còn lại.

2.Tạo trang danh mục tin tức

Đầu tiên bạn mở file archive.php, mình không sử dụng category.php là vì mình không tách ra các phần riêng biệt như tag, category,… mà mình muốn chung trong một file nên mình chỉ tạo archive.php.
Sau đó bạn thêm nội dung như sau:

<?php get_header();?>
//HTML của blog vào đây
<?php get_footer();?>

Hai đoạn get_header() và get_footer() là dùng để lấy nội dung ở file header.php và footer.php. đó là lý do vì sao mình lại lấy các HTML cố định vào 2 file đó.
Tiếp theo hãy mở file blog.html và tìm đến các nội dung thay đổi, bật mí luôn là mình hay dùng cách này nè.

Sao chép phần số hai và bỏ vào phần chú thích ở file archive.php và truy cập đến một danh mục bạn sẽ thấy kết quả. Tuy nhiên nó chỉ là nội dung cố định, nếu bạn muốn lấy ra các nội dung thì các bạn chịu khó quay lại đọc bài >Hướng dẫn viết theme wordpress căn bản mục 4 nhé.

3.Tạo trang tin tức

Tương tự bạn mở file single.php lên và thêm vào nội dung sau:

<?php get_header();?>
//HTML thay đổi của blog-single.html
<?php get_footer();?>

Tiếp theo bạn mở file blog-single.html và tìm đến phần nội dung thay đổi, sao chép và thay vào chú thích trên.
Mở một bài viết lên bạn sẽ thấy kết quả, và cũng chỉ là kết quả tĩnh bạn xem lại bài >Hướng dẫn viết theme wordpress căn bản mục 4 nhé.

4.Trang 404, page

Hai trang này cũng rất cần thiết và thực hiện tương tự các trang trên nhé, đối với trang Page, bạn có thể sử dụng nội dung của file contact-us.html, loại bỏ đi các nội dung trong đó là được.

Như vậy là mình đã xong theme wordpress. trong bài sau mình sẽ hướng dẫn tạo ra các trang tích hợp woocommerce.