Làm trang shop đơn giản với WordPress 02 – Học wordpress

Ở bài trước Làm trang shop đơn giản với WordPress 01 chúng ta đã cài theme và plugin. Nhìn chung chúng ta chưa làm việc gì liên quan đến shop. Trong bài này chúng ta sẽ tạo child theme cho theme mình đã cài trước đó.

Tạo child theme là vì chúng ta sẽ viết code trực tiếp vô theme này luôn. Mà theme này lại cài từ WordPress.Org tương lai họ sẽ ra các bản cập nhật nên ta 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 do chúng ta không can thiệt trực tiếp vào theme mẹ.

Tạo child theme để làm trang shop

Để thiết kế web wordpress bây giờ chúng ta sẽ tạo child theme cho theme chúng ta đã cài là theme Sparkling. Đầu tiên chúng ta vào thư mục /wp-content/sparkling-child thư mục child theme của mình là đây. Trong thư mục này các bạn tạo các tập tin và thư mục tương tự như sau:

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

Làm trang shop đơn giản với WordPress

Sửa style.css

Bây giờ tiếp theo chúng ta khai báo thông tin chidl theme ở tập tin /sparkling-child/style.css đã tạo:

/**
Theme Name: Sparkling Child
Description: Theme for simple shop tutorial
Author: Thach Pham
Author URI: https://webdaitin.com
Template: sparkling
*/
Trong đó, tên thư mục của theme mẹ ở phần Template là sparkling.
Để chuẩn bị cho làm trang shop. Bây giờ bạn có thể bắt đầu kích hoạt child theme vừa tạo lên .

Sửa functions.php

Đầu tiên trong tập tin này chúng ta sẽ nhúng tập tin /sparkling-child/inc/init.php vào. Nhúng là do sau này chúng ta sẽ cho những code liên quan tới chức năng trong website vào thư mục inc cho dễ dàng quản lý. Cho đoạn code sao 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';
Tiếp theo cho đoạn sau vào dùng để thêm một size ảnh thumbnail tương ứng với trang shop:
/**
* Các thiết lập liên quan đến theme
*/
function webdaitin_theme_setup() {
add_image_size( 'sanpham_thumb', 370, 300, false );
}
add_action('init', 'webdaitin_theme_setup', 10);
Kiểm tra xem ngoài trang chủ sau khi kích hoạt theme nó sẽ không tải tập tin style.css của theme mẹ. Trong style.css của child-theme chúng ta có thể dùng @import 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 tiện cho lắm và cũng không hay nữa.
Không cho hiển thị tập tin style.css của child theme là do mặc định nó đã tự chèn vào website khi kích hoạt rồi.
/**
* 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 là handle ID của style.css cần tháo khỏi giao diện. id là sparkling-style-css bỏ chữ css đi là tên handle.
Chúng ta sẽ chèn lại tập tin này nhưng sẽ chèn theo kiểu nó load luôn style.css của theme mẹ như một thành phần phụ thuộc. Ta sẽ chèn đoạn code sau vào:
/**
* Đă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 webdaitin_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', 'webdaitin_load_theme_style', 15 );
Bây giờ sẽ load cả style của cả theme mẹ và theme con ra bên ngoài website. Ta thử thêm đoạn code CSS sau vào /sparkling-child/style.css sẽ có điểm khác biệt là khi tùy chỉnh lại CSS trong child-theme thì dĩ nhiên không cần dùng !important.
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: Helvetica,Arial,sans-serif;
font-weight: normal;
}
Tạo child theme xem như đã xong để hỗ trợ làm một trang shop đơn giản với wordpress. Qua bài tiếp theo chúng ta sẽ 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 đến sản phẩm trong website.
Làm trang shop đơn giản với WordPress 02 – Học wordpress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Zalo
0987.353.298