• Bỏ qua primary navigation
  • Skip to main content
  • Bỏ qua primary sidebar
  • Bỏ qua footer
Thành Thái Blog

Thành Thái Blog

Thủ thuật Wordpress, thủ thuật SEO và chia sẻ mã giảm giá hosting domain

  • WordPress
  • Domain Coupon
    • Namecheap Coupon
    • Godaddy Coupon
    • Domain.com Coupon
  • Hosting Coupon
    • Hostarmada Coupon
    • HawkHost Coupon
    • Stablehost Coupon
    • A2Hosting Coupon
    • Dreamhost Coupon
    • Exabytes Coupon
    • GreenValueHost Coupon
    • Hostgator Coupon
    • inmotion Coupon
    • Siteground Coupon
  • SEO
  • Kiếm tiền Online
Thành Thái Blog  ➢  Thủ thuật Wordpress  ➢  Child Themes là gì? Cách tạo Child Themes trong Worpdre ...

Child Themes là gì? Cách tạo Child Themes trong Worpdress

Thái Dương 29/05/2020 Thủ thuật Wordpress 29 Bình luận

Child theme for wordpress

Trước nay mình đã từng tìm hiểu Child Themes là gì và dùng Child Themes để làm gì trong một thời gian dài, nhưng vẫn chưa có kết quả. Ngày hôm nay mình đã tìm được câu trả lời cho mình và mình cũng muốn chia sẻ nó cho các bạn đang tìm hiểu nó. Đồng thời mình viết bài này để ghi nhớ, khi cần thiết mình sẽ có cái để ngâm cứu lại :D. Kiến thức mình chia sẻ ở bài viết này có thể hiểu là kiến thức wordpress cơ bản, nếu bạn cần tìm hiểu về Child Themes sâu hơn thì bạn có thể đọc bài viết này tại website của wordpress.

Child Themes là gì?Tại sao phải dùng Child Themes?Tạo Child Themes đơn giản

Child Themes là gì?

Child theme for wordpress
Cấu trúc của Child theme
1: Thư mục theme gốc (theme cha)
2: Thư mục child theme

Child theme trong wordpress là theme được kế thừa các chức năng và các thuộc tính của một theme khác và theme khác đó được gọi là theme cha. Child theme cho phép bạn chỉnh sửa hoặc thêm một chức năng nào đó vào theme cha.

Tại sao phải dùng Child Themes?

Nếu bạn chỉnh sửa một theme theo cách thông thường thì khi theme đó được cập nhật, tất cả những chỉnh sửa của bạn sẽ bị mất hết. Chính vì thế bạn cần phải sử dụng một child theme, bạn viết code chỉnh sửa vào child theme và khi theme cha được cập nhật thì những gì bạn đã chỉnh sửa trước đó sẽ không ảnh hưởng gì.

Tạo Child Themes đơn giản

Bước 1: Tạo một thư mục bên trong thư mục chứa theme (mặc định là wp-content/themes) và sẽ sử dụng thư mục này để làm child theme. Bạn đặt tên nó theo ý của bạn. Để khi chỉnh sửa bạn nên đặt tên thư mực với “-child” ở cuối, để biết đây là child theme của theme nào.
Nhìn vào hình ảnh của tôi, bạn sẽ thấy tôi có theme “hueman-child”. Vâng, nó chính là child theme của theme gốc hueman.

Bước 2: Trong thư mục của child theme, bạn tạo một file css với tên style.css. Nội dung file style.css bạn viết theo cấu trúc bên dưới.

/*
 Theme Name:   Hueman Child
 Theme URI:    https://thanhthai.org
 Description:  Theme con của Hueman
 Author:       Thái Dương
 Author URI:   https://thanhthai.org
 Template:     hueman
 Version:      1.0.0
*/
@import url("../hueman/style.css");

/* Bạn viết code css vào bên dưới dòng này
-------------------------------------------------------------- */

Bạn cần chú :

Dòng số 7: Là tên của thư mục theme gốc. Ở ví dụ trên, thư mục theme gốc là hueman.

Dòng số 10 là đường dẫn đến file style.css của theme cha.

Bạn phải viết code css cho website của bạn dưới dòng @import url(“../hueman/style.css”); , nếu viết bên trên thì website của bạn không còn mang tính kế thừa của theme gốc nữa.

Child Theme hoạt động như thế nào?

Bạn active child theme theo cách active theme thông thường: Đăng nhập Administration Panels > Appearance > Themes. Bạn sẽ nhìn thấy child theme vừa tạo. Bấm Activate.

Active child theme wordpress
Active child theme wordpress

Sau khi child theme được active thì nó sẽ gọi và sử dụng các file trong thư mục child theme (nhìn ví dụ trên thì nó sẽ gọi file stye.css trong thư mục hueman-child để sử dụng) Trong quá trình sử dụng, nó nếu trong thư mục child theme không có các file cần thiết (ví dụ như funcitons.php, thư mục images) thì hệ thống wordpress sẽ tự động sử dụng bên thư mục theme gốc (là thư mục hueman). Nói tóm lại là wordpress theme sẽ ưu tiên child theme trước, nếu trong child theme thiếu cái gì thì nó sẽ sử dụng bên theme gốc.

Lưu ý

  • Không được xóa hay đổi tên thư mục theme gốc (theme cha)
  • Muốn tùy chỉnh file nào bạn chỉ cần copy từ bên theme gốc sang thư mục child theme.
  • Khi viết css phải luôn viết dưới dòng @import

Tạo child theme bằng plugin

  • http://wordpress.org/plugins/child-themify/
  • http://wordpress.org/plugins/orbisius-child-theme-creator/

Bài viết liên quan

  • Download WP Smush Pro bản mới nhất – Update Lifetime
  • Xóa liên kết ở footer sau khi cài Seo Ultimate
  • Seri Video tự học WordPress cơ bản
  • Share bài viết tự động lên các mạng xã hội với plugin Social Auto Poster
  • Đưa ảnh lên Pinterest dễ dàng với Jquery pin it button for images

Tags: child theme Wordpress cơ bản

Nói về Thái Dương

Tốt nghiệp chuyên ngành CNTT nhưng bản thân lại thích kinh doanh và kiếm tiền trên internet. Hiện tại mình là Freelancer, ai thuê gì tôi làm đó, chỉ cần hàng ngày kiếm đủ tiền mua bỉm, sữa cho con là đủ :) Follow Facebook - Twitter - Pinterest của tôi để chúng tôi kết nối cùng nhau nhé

Reader Interactions

Bình luận

  1. tichluy viết

    25/08/2018 lúc 09:31

    Bạn có biết tích hợp wordpress vào website asp.net ko, bên mình đáng loay hoay vụ này mãi mà chưa biết làm sao

    Bình luận
  2. Tuvanseoweb viết

    12/09/2016 lúc 19:52

    Mình vẫn băn khoăn về tính bảo mật của child themes

    Bình luận
  3. Sachdoanhnhan viết

    02/08/2016 lúc 22:17

    Chia sẻ của bạn hay quá. Tks nhiều nhé

    Bình luận
  4. hieu viết

    09/12/2015 lúc 00:05

    cho mình hỏi cod để click là nó copy coupon và hiện popup cho mình copy nhỉ hàm prompt() có làm đc ko

    Bình luận
    • Thái Dương viết

      09/12/2015 lúc 16:51

      Đây là code nút button của mình. Kết hợp plugin my shortcodes

      Bình luận
  5. Kiên viết

    04/02/2015 lúc 00:29

    Chào bạn có thể huớng dẫn mình làm menu mobile như của bạn không, nó rất đẹp cảm ơn bạn truớc nha

    Bình luận
  6. Balotot.com viết

    31/10/2014 lúc 20:45

    thank tác giả đã chia sẻ. mình cũng đang nghiên cứu làm cái Framework cho riêng mình chứ mỗi lần thiết kế lại web kiểu này vất vả quả 🙂

    Bình luận
  7. Minh Nhựt viết

    12/09/2014 lúc 22:43

    Hay lắm bác. Mình chưa từng làm child theme. Sử dụng thì từng dùng qua. Từ lúc dùng WordPress đến giờ mình dùng Framework Hybrid, mình toàn phát triển từ Base theme lên.

    Mình xin bổ sung một tí lưu ý, theme ban đầu phải cung cấp các hook thì child theme mới dễ dàng tùy biến. Tùy theme mới có thể làm child theme được. Không thì làm child theme rất khó khăn.

    Bình luận
  8. gemq viết

    30/08/2014 lúc 09:16

    Thank nhé . bài viết rất hay ^^

    Bình luận
    • Thái Dương viết

      30/08/2014 lúc 15:23

      Vừa ngó qua site bạn, ghê gớm. Hết băng thông mới kinh :). Site 18+ à 😀

      Bình luận
  9. Cho Hỏi viết

    26/08/2014 lúc 04:11

    Cảm ơn bạn nhiều ^^

    Bình luận
  10. Cho Hỏi viết

    22/08/2014 lúc 14:22

    Hỏi thêm cái nữa, làm sao để tạo ra button nhấn vào là hiện ra coupon như bạn vậy 😀

    Bình luận
    • Thái Dương viết

      24/08/2014 lúc 15:06

      Đơn giản lắm, sử dụng code html 😀

      Bình luận
      • Cho Hỏi viết

        25/08/2014 lúc 01:57

        Cho xin code bạn 😀

        Bình luận
  11. Cho Hỏi viết

    22/08/2014 lúc 13:57

    Biết cách bỏ cái tìm kiếm trên top menu ko bạn

    Bình luận
    • Thái Dương viết

      24/08/2014 lúc 15:04

      Có thể trong options của theme sẽ có, nhưng mình chưa xem qua :D.
      Cách đơn giản nhất là bạn mở file header.php ra, xóa từ dòng 27 đến dòng 36 là xong :D.

      Bình luận
      • Cho Hỏi viết

        25/08/2014 lúc 02:01

        Cảm ơn, dc rồi bạn

        Bình luận
  12. Cho Hỏi viết

    22/08/2014 lúc 13:53

    Cho hỏi làm form đăng ký nhận bản tin qua email trong theme hueman như bạn làm sao nhỉ?

    Bình luận
    • Thái Dương viết

      24/08/2014 lúc 15:06

      Bạn sử dụng dịch vụ feedburner.google.com của google nhé 🙂

      Bình luận
      • Cho Hỏi viết

        25/08/2014 lúc 01:56

        Ý mình là tạo cái skin viền xanh xanh với cái nút subcride như bạn ấy

        Bình luận
        • Thái Dương viết

          26/08/2014 lúc 01:37

          Dùng code luôn 🙂 Code đây nhé.
          <form onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Thaidt’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow” method=”post” action=”http://feedburner.google.com/fb/a/mailverify” id=”femail”><p>Enter your email address:</p><p><input type=”text” name=”email” id=”nhapemail”></p><input type=”hidden” name=”uri” value=”Thaidt”><input type=”hidden” value=”en_US” name=”loc”><input type=”submit” value=”Subscribe” id=”xacnhan”></form>

          ĐÂy là CSS.
          form#femail {
          background: none repeat scroll 0 0 #357212;
          color: #ffffff;
          font-weight: bold;
          padding: 10px;
          text-align: center;
          }
          Thay id bằng id fedd của bạn nhé

          Bình luận
          • Cho Hỏi viết

            26/08/2014 lúc 04:21

            Mình lấy cái trên bỏ vào thì nó bị ra mấy khung nhập chứ ko ra như bạn, còn cái css để làm gì thế

          • Thái Dương viết

            26/08/2014 lúc 04:26

            Bạn bỏ nó vào đâu?
            CSS để trang trí cho cái khung nhập đó :D. Nhờ nó mà bạn mới có đc cái giao diện màu xanh giống của mình

    • Cho Hỏi viết

      26/08/2014 lúc 13:06

      Mình bỏ nó vào text widget ấy, cái css bạn bỏ ở đâu

      Bình luận
      • Thái Dương viết

        26/08/2014 lúc 17:41

        CSS bạn bỏ vào file style.css nhé.

        Bình luận
        • Cho Hỏi viết

          27/08/2014 lúc 15:07

          Cảm ơn bạn, ok rùi 😀

          Bình luận
  13. hong viết

    15/05/2014 lúc 14:45

    sau khi tạo child theme thành công thì file style.css ở thư mục gốc hoạt động, giờ muốn ghi đè các file *.css ở trong thư mục childthem/css/ thì làm sao ạ.

    Bình luận
    • Thái Dương viết

      16/05/2014 lúc 02:12

      Vậy nghĩa là trong file style.css của child theme bạn ko tùy chỉnh gì sao? Nếu vậy thì ko cần tạo child theme :p.
      Như mình đã nói ở trên, trong thư mục child theme có những file nào thì nó sẽ được ưu tiên sử dụng trong child theme trước, thiếu file nào thì nó sẽ lấy bên theme gốc (theme cha) để dùng. Ý bạn là ko muốn các file child-theme/*.css hoạt động, vậy thì bạn chỉ cần không copy các file *.css bên thư mục theme gốc sang là đc.

      Bình luận

Để lại một bình luận Hủy

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 *

Sidebar chính

Bài viết mới

get envato elements mien phi – chia se free elements envato

Get Envato Elements miễn phí – Download Free Elements Envato

GIẢM 25% Dịch vụ Cloud VPS, Hosting hoặc NHÂN ĐÔI RAM, Tặng đến 12 tháng sử dụng

Tự động resize ảnh nền theo thẻ div, sử dụng CSS

HostingViet giảm 50% các dịch vụ cho Black Friday 2021

Tiêu chí lựa chọn nhà cái uy tín

Tên miền miễn phí tại 1and1

[Kèo ngon] Hướng dẫn đăng ký tên miền + hosting miễn phí 1 năm

Hosting nên dùng cho Wordpress

HELLO2017
VPS giá rẻ
Hosting quốc tế giá rẻ

Footer

Liên kết hữu ích

  • Get themeforest giá rẻ
  • Đối tác
  • Download
  • Review
  • Kinh nghiệm
  • Hosting Việt

Bình luận mới

  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Nguyễn Lộc trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • James trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ
  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ❤️Mua theme WordPress bản quyền giá rẻ

Bạn bè

  • NamLee Blog
  • Thắng Đặng Blog
  • Mua theme WordPress giá rẻ
  • Diễn đàn học tập
  • Trường THPT Mỹ Đức A
  • Món ngon mỗi ngày
  • Tuấn.dev
  • Thiết kế Web An Tâm

Copyright © 2014 by Thành Thái Blog - Sử dụng Hawkhost kết hợp dịch vụ Mua theme Wordpress bản quyền