Ví dụ làm website bán hàng bằng WordPress - bài 2

Ví dụ làm website bán hàng bằng WordPress - bài 2 là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ làm website bán hàng bằng WordPress - bài 2 sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và Wordpress nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Ở bài trước chúng ta chỉ mới cài theme Sparkling và plugin Piklist vào, nhìn chung chúng ta chưa có đụng gì liên quan tới việc làm shop cả. Tiếp tục trong bài này chúng ta sẽ đi làm một bước nữa đó là tạo child theme cho theme đã cài ở phần trước.

Sở dĩ cần tạo child theme là bởi vì chúng ta sẽ viết code trực tiếp vô theme này, mà theme này lại cài từ thư viện WordPress.Org nên tương lai họ sẽ ra các bản cập nhật, nên tạo child theme sẽ giúp chúng ta không bị mất các chỉnh sửa khi cập nhật vì chúng ta không can thiệp vào theme mẹ.

Tham khảo: Child theme là gì và cách tạo

Tạo child theme

Ở đây cụ thể là chúng ta sẽ tạo child theme cho theme Sparkling. Trước tiên chúng ta tạo thư mục /wp-content/sparkling-child và đây sẽ là thư mục của child theme của mình.

Trong thư mục này các bạn tạo các thư mục và tập tin sau:

  • sparkling-child/
  • inc/
  • init.php
  • functions.php
  • style.css

Sửa style.css

Bây giờ chúng ta khai báo thông tin child theme này tại tập tin /sparkling-child/style.css vừa tạo:

 /**
 Theme Name: Sparkling Child
 Description: Theme for simple shop tutorial
 Author: Thach Pham
 Author URI: https://hoidapcode.com
 Template: sparkling
  

Trong đó, phần Template là tên thư mục của theme mẹ, tức là sparkling.

Bây giờ bạn có thể kích hoạt cái child theme này lên.

Sửa functions.php

Trong tập tin này, đầu tiên là chúng ta sẽ nhúng tập tin /sparkling-child/inc/init.php vào. Chúng ta nhúng là vì sau này chúng ta sẽ cho các code liên quan tới chức năng trong website vào thư mục inc cho dễ quản lý, viết đoạn code sau vào functions.php:

<?php
/**
 * Nhúng tập tin /inc/init.php vào để load một số chức năng trong website
 */
require dirname( __FILE__ ) . '/inc/init.php'; 

Kế đến là cho đoạn sau vào để thêm một size ảnh thumbnail phù hợp với trang bán hàng:

/**
 * Các thiết lập liên quan đến theme
 */
function hoidapcode_theme_setup() {
    add_image_size( 'sanpham_thumb', 370, 300, false );
}
add_action('init', 'hoidapcode_theme_setup', 10); 

Và như kiểm tra ngoài trang chủ sau khi kích hoạt theme, nó không tải tập tin style.css của theme mẹ. Chúng ta có thể dùng @import trong style.css của child-theme để gọi theme mẹ nhưng nếu sau này chúng ta cần tùy biến gì thì phải sử dụng !important sẽ không hay và tiện cho lắm.

Đầu tiên là không cho hiển thị tập tin style.css của child theme vì mặc định nó đã tự chèn vào website khi kích hoạt.

/**
 * Xóa style.css của child-theme.
 */
function remove_default_styles() {
    wp_dequeue_style( 'sparkling-style' );
}
add_action('wp_print_styles', 'remove_default_styles', 10 ); 

Trong đó, sparkling-style chính là handle ID của tập tin style.css cầntháo khỏi giao diện.

Trong đó, cái id là sparkling-style-css thì bỏ chữ css đi là tên handle.

Và bây giờ ta sẽ…chèn lại tập tin này nhưng sẽ chèn theo kiểu nó load luôn tập tin style.css của theme mẹ như một thành phần phụ thuộc, ta có đoạn code sau:

 /**
 * Đăng ký handle cho style.css của theme mẹ
 * Và sử dụng như một thành phần phụ thuộc của style.css theme con
 */
function hoidapcode_load_theme_style() {
    wp_enqueue_style('parent-styles', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-styles', get_stylesheet_directory_uri() . '/style.css', array('parent-styles'));
}
add_action('wp_enqueue_scripts', 'hoidapcode_load_theme_style', 15 ); 

Bây giờ nó sẽ load cả hai tập tin style.css của theme mẹ và theme con ra bên ngoài website, nhưng có điểm khác biệt là khi tùy chỉnh lại CSS trong child-theme thì sẽ không cần sử dụng !important, ta thử thêm đoạn CSS sau vào /sparkling-child/style.css:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Helvetica,Arial,sans-serif;
    font-weight: normal;
} 

Lời kết

Ok vậy là xong bước tạo child theme để hỗ trợ làm một trang bán hàng đơn giản trên theme này. Qua bài kế chúng ta sẽ bắt đầu bước đầu tiên để xây dựng một trang bán hàng đơn giản đó là tạo custom post type, cusom taxonomy và metabox liên quan tới sản phẩm.

Hy vọng với bài viết về Ví dụ làm website bán hàng bằng WordPress - bài 2 đã giải đáp giúp bạn phần nào về kiến thức lập trình Wordpress. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!