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

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

*/

Sửa 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';

/**

* 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);

/**

* 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 );

/**

* Đă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 );

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

font-family: Helvetica,Arial,sans-serif;

font-weight: normal;

}