• 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
    • Hostarmada 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

  • Tối ưu Contact Form 7 để tăng tốc website wordpress của bạn
  • Download WP Smush Pro bản mới nhất – Update Lifetime
  • Share bài viết tự động lên các mạng xã hội với plugin Social Auto Poster
  • Seri Video tự học WordPress cơ bản
  • Bảo mật cho WordPress bằng cách đổi tên thư mục wp-content

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é

Subscribe
Login
Notify of
guest
Nhập tên của bạn
Địa chỉ email của bạn
Website của bạn là gì?
guest
Nhập tên của bạn
Địa chỉ email của bạn
Website của bạn là gì?
29 Comments
Inline Feedbacks
View all comments

hong
hong
6 years ago

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 ạ.

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  hong

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.

Reply
Cho Hỏi
Cho Hỏi
6 years ago

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ỉ?

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  Cho Hỏi

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

Reply
Cho Hỏi
Cho Hỏi
6 years ago
Reply to  Thái Dương

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

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  Cho Hỏi

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é

Reply
Cho Hỏi
Cho Hỏi
6 years ago
Reply to  Thái Dương

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ế

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  Cho Hỏi

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

Reply
Cho Hỏi
Cho Hỏi
6 years ago
Reply to  Cho Hỏi

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

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  Cho Hỏi

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

Reply
Cho Hỏi
Cho Hỏi
6 years ago
Reply to  Thái Dương

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

Reply
Cho Hỏi
Cho Hỏi
6 years ago

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

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  Cho Hỏi

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.

Reply
Cho Hỏi
Cho Hỏi
6 years ago
Reply to  Thái Dương

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

Reply
Cho Hỏi
Cho Hỏi
6 years ago

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 😀

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  Cho Hỏi

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

Reply
Cho Hỏi
Cho Hỏi
6 years ago
Reply to  Thái Dương

Cho xin code bạn 😀

Reply
Cho Hỏi
Cho Hỏi
6 years ago

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

Reply
gemq
gemq
6 years ago

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

Reply
Thái Dương
Author
Thái Dương
6 years ago
Reply to  gemq

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

Reply
Minh Nhựt
Minh Nhựt
6 years ago

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.

Reply
Balotot.com
Balotot.com
6 years ago

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ả 🙂

Reply
Kiên
Kiên
5 years ago

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

Reply
hieu
hieu
5 years ago

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

Reply
Thái Dương
Author
Thái Dương
5 years ago
Reply to  hieu

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

Reply
Sachdoanhnhan
Sachdoanhnhan
4 years ago

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

Reply
Tuvanseoweb
Tuvanseoweb
4 years ago

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

Reply
tichluy
tichluy
2 years ago

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

Reply
wpdiscuz   wpDiscuz

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

Đánh giá Hostarmada Hosting giá rẻ chất lượng

Đánh giá HostArmada, Hosting giá rẻ chất lượng

Top 5 game được yêu thích nhất hiện nay

Làm thế nào để truy cập Oppa888 khi bị chặn?

Fshare sale tưng bừng: Fshare thả ga lưu trữ, thanh toán tiết kiệm cùng ví Moca

Hosting nên dùng cho Wordpress

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

Đối tác

Xem phim không cần download

Footer

Liên kết hữu ích

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

Bình luận mới

  • Ngo thi trong Get Envato Elements miễn phí – Download Free Elements Envato
  • Thái Dương trong Dịch vụ Get Themeforest giá rẻ, mua theme WordPress giá rẻ
  • Thái Dương trong Get Envato Elements miễn phí – Download Free Elements Envato
  • Nguyễn Nam trong Dịch vụ Get Themeforest giá rẻ, mua theme WordPress giá rẻ
  • Hiếu Nguyễn trong Get Envato Elements miễn phí – Download Free Elements Envato

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
  • Blog Tin Học
  • Tiền Minh Vy – tienminhvy.com

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

  • Giới thiệu
  • Liên hệ
  • Thanh toán
  • Policy
wpDiscuz