Trang chủ »  WP Theme »  Hướng dẫn tạo child theme trong wordpress

Hướng dẫn tạo child theme trong wordpress

25/09/2021  -   99 views

Chào các bạn, hôm nay mình hướng dẫn đến các bạn một bài viết củng khá quan trọng trong wordpress. Như các bạn đã biết trong wordpress theme thì nó chỉ có một theme chính thôi, nhưng bạn muốn tùy biến giao diện hay viết css cho những thứ bạn muốn, thì các bạn phải viết đè lên lên theme chính đó luôn. Việc viết đè trực tiếp lên theme chính đó thì nhanh nhưng không thực sự hiệu quả và lở sau này bạn muốn cập nhật version của theme lên bản mới nhất thì những đoạn code css hay những phần mà bạn tùy biến sẽ mất hết toàn bộ. Nên hôm nay bài viết này ra đời đó là Tạo child theme trong wordpress. Let go…….)))

  • Viết tính năng tính số lượt xem bài đăng trong WordPress
  • Tạo custom post type và taxonomy trong wordpress
  • Hướng dẫn tạo child theme trong wordpress
  • Share giao diện form đăng nhập/đăng ký tuyệt đẹp
  • Tổng hợp các đoạn code về woocommerce
  • Hướng dẫn cách tạo menu trong WordPress
  • Khi bạn sử dụng child theme thì các file trong thư mục childt heme sẽ thực thi, nếu nhưng ở child theme không có các file đó thì nó sẽ thực thi ở theme mẹ( parent theme ).

    Hôm nay mình sẽ lấy ví dụ về theme Divi , đây là theme mẹ và bạn muốn tạo child theme để kế thừa lại các file của theme cha thì bạn sẽ tạo như sau:

    Childtheme đầy đủ cần có hai file quan trọng đó là file style.cssfunctions.php. Nếu bạn không biết hai file này như thế nào thì có thể tìm hiểu bài này nha.

    1. Tạo file style.css

     

    /*
    Theme Name: Divi Child
    Theme URI: http://www.elegantthemes.com/gallery/divi/
    Template: Divi
    Author: Elegant Themes
    Author URI: http://www.elegantthemes.com
    Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
    Tags: responsive-layout,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-background,custom-colors,featured-images,full-width-template,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready
    Version: 1.0
    */

    Mình sẽ giải thích sơ qua các phần:

    • Theme Name: Là tên mình muốn đặt cho Child theme, bạn đặt tên gì củng được miễn nó giống với theme mẹ cho đẹp và thêm phái sau chữ Child.
    • Theme Uri: Là url của theme, có củng được, không có củng không sao.
    • Template: Cực kì quan trọng, bạn phải gõ đúng tên theme mẹ.
    • Author: Tên tác giả của theme
    • Description: Mô tả cho theme
    • Tags: Mô tả các thẻ cho theme
    • Version: Phiên bản đầu tiên tạo, mình sẽ để bản đầu tiên là 1.0.0

     

    Sau khi khai báo các mục trong file style.css xong thì bạn tạo cho mình file functions.php nha. Tiếp đến bạn đăng nhập vào admin wordpress, domain/wp-admin -> Giao diện rồi Active child theme lên.

     

     

    Sau khi Active theme xong thì bạn có thể tùy biến tùy ý rồi. Và sau này có update theme chính thì củng không sợ mất code của bạn.

    2. Tạo file functions.php

    Tiếp theo bạn tạo file functions.php để khi báo các phần cần thiết.

     

    define('ROOT_CHILD_URI', get_stylesheet_directory_uri());
    define('ROOT_CHILD_DIR', get_stylesheet_directory());

    Bạn khai báo hai hàm này vào. Tiếp bạn khai báo hàm này để nó nhận css từ theme mẹ nha.

     

    <?php
     add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles');
      function enqueue_child_theme_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
      }
    ?>
    

    Vậy là nó đã hoàn chỉnh về việc tạo child theme trong wordpress rồi. Từ đó bạn có thể tạo thêm các file bạn càn giải quyết cho website của mình ví dụ như bạn muốn sửa file single.php thì bạn chỉ cần tạo file single.php ở child theme thì bạn có thể tùy biến thoải mái rồi nha.

    3. Những điêu lưu ý khi tạo child theme

    • Không được xóa thư mục mẹ
    • Mún sửa file nào thì copy file đó ở theme mẹ rồi bỏ qua theme con để sửa.

     

    4. Tổng kết

    Hi vọng qua bài viết này các bạn có thể hiểu và tạo cho mình được child theme để dể dàng tùy biến, chúc các bạn thành công. Good luck !!!

    Hãy tham gia group của mình để cùng xây dựng cộng đồng mạnh mẽ và follow các bài viết mới nhất về wordpress của mình nhé. Tvcdev WordPress Community 

    5 2 đánh giá
    Article Rating
    Theo dõi
    Thông báo của
    guest
    0 Comments
    Phản hồi nội tuyến
    Xem tất cả bình luận

    Bài viết liên quan

    Mẹo - thủ thuật 20/07/2021

    Hướng dẫn tạo chức năng search autocomplete trong wordpress

    Hôm nay mình sẽ hướng dẫn đến các bạn một bài viết liên quan về ajax củng như mẹo và thủ (...)

    WP Theme 04/06/2021

    Cấu trúc theme của wordpress

    Chào cả nhà, hôm nay mình viết bài về cách tìm hiểu cấu trúc theme cho wordpress. Để hiểu rõ cá(...)

    Mẹo - thủ thuật 03/06/2021

    Chuyển hướng trang lỗi 404 về trang chủ

    Hôm nay mình giới thiệu đến các bạn về thủ thuật điều hướng trang 404 về trang chủ hay 1 tra(...)

    Mẹo - thủ thuật 02/06/2021

    Tạo custom post type và taxonomy trong wordpress

    Xin chào cả nhà !. Chúc các bạn 1 ngày mới vui vẽ Hôm nay mình xin hướng dẫn các bạn cách tạo (...)

    0
    Rất thích suy nghĩ của bạn, hãy bình luận.x