![[Java căn bản] Bài 1: Java là gì? Cài đặt và bắt đầu lập trình với ngôn ngữ Java](https://tuandc.com/wp-content/uploads/2017/08/ngon-ngu-lap-trinh-java.jpg)
![[Xử lý văn bản với Microsoft Office Word] Tạo mục lục tự động và các ràng buột](https://tuandc.com/wp-content/uploads/2017/09/mos_2013_word.png)
![[Android căn bản] Bài 13: Xử lý Json trong Android](https://tuandc.com/wp-content/uploads/2017/10/Json-1.png)
![[Series viết theme bán hàng Woocommerce] 2. Thiết đặt theme WordPress](https://tuandc.com/wp-content/uploads/2017/09/woocommerce-tutorial.jpg)
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.phpcontent.phpcontent-none.php404.phparchive.phpsingle.phppage.phpsearch.phpheader.phpfooter.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.htmlvà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.phpvà 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.phpvà 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.phpvà thêm các phần còn lại của trangindex.htmlvà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ụngcategory.phplà 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ạoarchive.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 ở fileheader.phpvà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.htmlvà 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.phpvà 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.phplê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.htmlvà 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.
Tác giả: ĐOÀN CÔNG TUẤN
Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.
