Làm trang shop đơn giản với WordPress – 02 [NEW]

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

Lý do chúng ta cần tạo một theme con là vì chúng ta sẽ viết mã trực tiếp vào theme này, tuy nhiên theme này được cài đặt từ thư viện WordPress.Org nên trong tương lai họ sẽ tung ra các bản cập nhật nên việc tạo một theme con sẽ giúp ích cho chúng ta. Chúng tôi không mất các chỉnh sửa khi cập nhật vì chúng tôi không can thiệp vào chủ đề chính.

Tham khảo: Chủ đề con là gì và làm thế nào để tạo chủ đề đó?

Tạo chủ đề con

Cụ thể ở đây, chúng tôi sẽ tạo một chủ đề con cho chủ đề Lấp lánh. Đầu tiên, chúng ta tạo thư mục / wp-content / Spark-child và đây sẽ là thư mục của theme con của chúng ta.

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

  • lấp lánh-con /
    • inc /
      • init.php
    • functions.php
    • style.css

Làm trang shop đơn giản với WordPress – 02 [NEW]

Chỉnh sửa style.css

Bây giờ chúng tôi khai báo thông tin chủ đề con này trong tệp /sparkling-child/style.css vừa được tạo:


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

*/

Trong đó, một phần Mẫu là tên thư mục của chủ đề mẹ, tức là lung linh.

Bây giờ bạn có thể kích hoạt chủ đề con này.

shopdongian-childtheme-02

Chỉnh sửa functions.php

Trong tệp này, trước tiên chúng tôi sẽ nhúng tệp /sparkling-child/inc/init.php đi vào. Chúng tôi nhúng nó vì sau này chúng tôi sẽ đưa đoạn mã liên quan đến chức năng trong trang web vào thư mục inc Để dễ quản lý, hãy viết đoạn mã sau trong 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, bạn thêm phần sau để thêm kích thước ảnh thumbnail phù hợp với trang bán hàng:


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

Và như đã kiểm tra trên trang chủ sau khi kích hoạt chủ đề, nó không tải tệp style.css của chủ đề mẹ. Chúng ta có thể sử dụng @import trong style.css của chủ đề con để gọi chủ đề mẹ nhưng nếu chúng ta cần tùy chỉnh bất kỳ thứ gì sau này, chúng ta phải sử dụng !important Nó sẽ không được tốt đẹp và thuận tiện.

Đầu tiên là không hiển thị tệp style.css của chủ đề con vì mặc định nó được chèn vào trang web 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 là ID xử lý của tệp style.css cần được xóa khỏi giao diện.

Trong đó, id được sparkling-style-css sau đó bỏ từ css go là tên xử lý.

Và bây giờ chúng ta sẽ … chèn lại tệp này nhưng sẽ chèn theo cách mà nó tải tệp style.css của chủ đề mẹ như một tệp phụ thuộc, chúng ta có mã 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 thachpham_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’, ‘thachpham_load_theme_style’, 15 );

Bây giờ nó sẽ tải cả tệp style.css của chủ đề mẹ và chủ đề con bên ngoài trang web, nhưng sự khác biệt là khi tùy chỉnh CSS trong chủ đề con, nó sẽ không cần sử dụng. !importantchúng tôi thử thêm 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;
}

Phần kết

Ok, vậy là xong bước tạo theme con hỗ trợ làm trang bán hàng đơn giản trên theme này. Qua bài viết tiếp theo 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 loại bài đăng tùy chỉnh, phân loại cusom và metabox liên quan đến sản phẩm.

5/5 – (2 phiếu bầu)

Tiếp tục đọc trong bộ truyện