Bạn có muốn tạo theme con trong WordPress không?
Child theme là theme WordPress kế thừa chức năng của theme WordPress khác. Nhiều người dùng tạo child theme cho theme hiện tại của họ để họ có thể custom thiết kế website của mình một cách an toàn mà không bị mất các thay đổi khi developer theme phát hành bản cập nhật.
Trong bài viết này, MuaHosting.com sẽ chỉ cho bạn cách tạo theme con cho website WordPress của bạn.
Chủ đề con hoạt động như thế nào và tại sao bạn cần nó?
Một child theme kế thừa tất cả các tính năng, chức năng và kiểu dáng của một theme WordPress khác. Khi bạn tạo một child theme, theme gốc được gọi là parent theme.
Kế thừa bao gồm file style.css của theme cha, file này định nghĩa kiểu chính của theme. Chủ đề con có thể ghi đè hoặc mở rộng các thuộc tính được kế thừa bằng cách thêm các file của riêng nó hoặc bằng cách sửa đổi các file hiện có.
Mặc dù bạn có thể custom theme WordPress mà không cần cài đặt theme con, nhưng vẫn có một số lý do khiến bạn cần có theme con:
- Chủ đề con bảo vệ các custom của bạn trong quá trình cập nhật theme, giữ chúng an toàn khỏi bị ghi đè. Nếu bạn sửa đổi theme cha trực tiếp, thì những tinh chỉnh đó có thể biến mất khi bạn cập nhật.
- Chủ đề con cho phép bạn dùng thử các thiết kế hoặc tính năng mới một cách an toàn mà không làm hỏng theme gốc của website, tương tự như môi trường dàn dựng.
- Nếu bạn biết cách lập trình, thì child theme có thể giúp quá trình phát triển hiệu quả hơn. Các file của child theme đơn giản hơn nhiều so với parent theme. Bạn có thể tập trung vào việc chỉ sửa đổi các phần của parent theme mà bạn muốn thay đổi hoặc mở rộng.
Những việc cần làm trước khi tạo một theme con WordPress
Chúng tôi đã thấy rất nhiều người dùng WordPress hào hứng tìm hiểu về kỹ thuật, chỉ để rồi nản lòng khi lỗi xuất hiện. Chúng tôi hiểu. Đó là lý do tại sao điều quan trọng là phải biết mình đang làm gì trước khi tạo theme con.
Sau đây là một số điều MuaHosting.com khuyên bạn nên làm trước khi tiếp tục với hướng dẫn từng bước này:
- Hãy lưu ý rằng bạn sẽ làm việc với code. Ít nhất, bạn sẽ cần hiểu biết cơ bản về HTML, CSS, PHP và option là JavaScript để hiểu những thay đổi bạn cần thực hiện. Bạn có thể đọc thêm về điều này trong Sổ tay theme WordPress.
- Chọn một theme cha có thiết kế và tính năng website mong muốn của bạn. Nếu có thể, hãy tìm một theme mà bạn chỉ cần thực hiện một vài thay đổi.
- Sử dụng website cục bộ hoặc website tạm thời để phát triển theme. Bạn không muốn tạo ra lỗi không mong muốn trên website trực tiếp của mình.
- Trước tiên hãy backup website của bạn.
Có một số cách để tạo theme con từ theme hiện tại của bạn. Một là sử dụng code thủ công, trong khi những cách khác yêu cầu plugin, tối ưu hơn nhiều với người mới bắt đầu.
Phương pháp đầu tiên có vẻ đáng sợ nếu bạn thiếu kinh nghiệm kỹ thuật. Tuy nhiên, ngay cả khi bạn chọn một trong các phương pháp plugin, MuaHosting.com vẫn khuyên bạn nên đọc qua phương pháp thủ công để làm quen với quy trình và các file liên quan.
Mẹo chuyên nghiệp: Bạn muốn custom theme của mình mà không cần tạo theme con? Sử dụng Mã WP để kích hoạt các tính năng mới một cách an toàn với đoạn code custom mà không làm hỏng website của bạn.
Với tất cả những điều đó, chúng ta hãy cùng tìm hiểu cách tạo child theme trong WordPress. Bạn có thể chuyển đến phương pháp bạn thích bằng cách sử dụng các link bên dưới:
Phương pháp 1: Tạo theme WordPress con theo cách thủ công
Đầu tiên, bạn cần phải mở /wp-content/themes/ trong folder cài đặt WordPress của bạn.
Bạn có thể thực hiện việc này bằng cách sử dụng trình quản lý file hosting WordPress hoặc máy khách FTP. Chúng tôi thấy option đầu tiên dễ hơn nhiều, vì vậy MuaHosting.com sẽ sử dụng option đó.
Nếu bạn là khách hàng của Bluehost, bạn có thể đăng nhập vào dashboard tài khoản lưu trữ của mình và điều hướng đến tab ‘Trang web’. Sau đó, nhấp vào ‘Cài đặt’.
Trong tab Tổng quan, cuộn xuống phần ‘Liên kết nhanh’.
Sau đó, chọn ‘Trình quản lý file’.
Ở giai đoạn này, bạn cần vào folder public_html của website và mở /wp-content/themes/ con đường.
Tại đây, chỉ cần nhấp vào nút ‘+ Thư mục’ ở góc trên bên trái để tạo folder mới cho theme con của bạn.
Bạn có thể đặt tên folder theo bất cứ tên nào bạn muốn.
Đối với hướng dẫn này, chúng ta sẽ chỉ sử dụng tên folder là twentytwentyone-child vì chúng ta sẽ sử dụng Twenty Twenty-One làm theme gốc. Khi hoàn tất, chỉ cần nhấp vào ‘Create New Folder’.
Tiếp theo, bạn phải mở folder vừa tạo và nhấp vào ‘+ Tệp’ để tạo file đầu tiên cho theme con của bạn.
Nếu bạn sử dụng chương trình FTP, bạn có thể sử dụng trình soạn thảo văn bản như Notepad và tải file lên sau.
Tiếp tục đặt tên cho file này là ‘style.css’ vì đây là bảng định kiểu chính của con bạn và sẽ chứa thông tin về theme con.
Sau đó, nhấp vào ‘Tạo file mới’.
Bây giờ, chỉ cần nhấp chuột phải vào file style.css.
Sau đó, nhấp vào ‘Chỉnh sửa’ để mở một tab mới như trong ảnh chụp màn hình bên dưới.
Trong tab mới này, bạn có thể dán văn bản sau và điều chỉnh theo nhu cầu của mình:
/*
Theme Name: Twenty Twenty-One Child
Theme URI:
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI:
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
Khi hoàn tất, chỉ cần nhấp vào ‘Lưu thay đổi’.
Việc tiếp theo bạn cần làm là tạo một file thứ hai và đặt tên là functions.php. Tệp này sẽ nhập hoặc xếp hàng các bảng định kiểu từ các file của theme gốc.
Sau khi tạo xong tài liệu, hãy thêm code wp_enqueue sau:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle="twenty-twenty-one-style"; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
Khi hoàn tất, chỉ cần lưu file như ở bước trước.
Ghi chú: Đối với phương pháp này, MuaHosting.com khuyên bạn nên đọc tài liệu chính thức Chủ đề con Và Bao gồm Tài sản tài liệu để đảm bảo các bảng định kiểu của theme con của bạn được tải đúng cách.
Bây giờ bạn đã tạo một theme con rất cơ bản. Khi bạn đi đến Giao diện » Chủ đề trong bảng quản trị WordPress của bạn, bạn sẽ thấy option Twenty Twenty-One Child.
Nhấp vào nút ‘Kích hoạt’ để bắt đầu sử dụng theme con trên website của bạn.
Phương pháp 2: Tạo một theme Child Classic bằng một plugin
Phương pháp tiếp theo này sử dụng Trình cấu hình theme con plugin. Plugin WordPress dễ sử dụng này cho phép bạn tạo và custom theme con WordPress nhanh chóng mà không cần sử dụng code, nhưng nó chỉ hoạt động tốt với theme cổ điển (không chặn).
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WordPress. Khi kích hoạt, bạn cần điều hướng đến Công cụ » Chủ đề con trong dashboard WordPress của bạn.
Trong tab Parent/Child, bạn sẽ được yêu cầu chọn một hành động. Chỉ cần chọn ‘CREATE a new Child Theme’ để bắt đầu.
Sau đó, chọn theme cha từ dropdown menu. Chúng ta sẽ chọn theme Hestia.
Sau đó, chỉ cần nhấp vào nút ‘Phân tích’ để đảm bảo theme phù hợp để sử dụng làm theme gốc.
Tiếp theo, bạn sẽ được yêu cầu đặt tên cho folder lưu theme con. Bạn có thể sử dụng bất kỳ tên folder nào bạn muốn.
Bên dưới, bạn cần chọn nơi lưu kiểu mới: trong bảng kiểu chính hay một bảng kiểu riêng biệt.
Bảng định kiểu chính là bảng định kiểu mặc định đi kèm với theme con của bạn. Khi bạn lưu các kiểu custom mới vào file này, bạn đang trực tiếp sửa đổi các kiểu chính của theme con. Mỗi lần sửa đổi sẽ ghi đè lên kiểu của theme gốc.
Tùy chọn riêng biệt cho phép bạn lưu kiểu custom mới vào file bảng kiểu riêng biệt. Điều này hữu ích nếu bạn muốn giữ nguyên kiểu của theme gốc và không ghi đè lên.
Để trình diễn, MuaHosting.com sẽ chọn option đầu tiên. Nhưng khi bạn sáng tạo hơn với các custom theme con của mình, bạn luôn có thể lặp lại quy trình này và chọn option thứ hai.
Di chuyển xuống dưới, bạn phải chọn cách truy cập bảng định kiểu của theme gốc.
Chúng ta sẽ chỉ sử dụng option mặc định ‘Sử dụng hàng đợi kiểu WordPress’ vì nó sẽ cho phép plugin tự động xác định các hành động phù hợp.
Khi đến bước 7, bạn sẽ cần nhấp vào nút có nhãn ‘Nhấp để chỉnh sửa thuộc tính theme con’.
Sau đó, bạn có thể điền thông tin chi tiết cho theme con của mình.
Khi bạn tạo theme con theo cách thủ công, bạn sẽ mất các menu và tiện ích của theme cha. Child Theme Configurator có thể sao chép chúng từ theme cha sang theme con. Đánh dấu vào ô ở bước 8 nếu bạn muốn thực hiện việc này.
Cuối cùng, nhấp vào nút ‘Tạo theme con mới’ để tạo theme con mới của bạn.
Plugin sẽ tạo một folder cho theme con của bạn và thêm các file style.css và functions.php mà bạn sẽ sử dụng để custom theme sau này.
Trước khi kích hoạt theme, bạn nên nhấp vào link gần đầu màn hình để xem trước và đảm bảo rằng nó trông đẹp và không làm hỏng website của bạn.
Nếu mọi thứ có vẻ ổn, hãy nhấp vào nút ‘Kích hoạt & Xuất bản’.
Bây giờ, theme con của bạn sẽ hoạt động.
Ở giai đoạn này, theme con sẽ trông và hoạt động giống hệt theme cha.
Phương pháp 3: Tạo theme block con bằng plugin
Nếu bạn sử dụng theme block, thì WordPress cung cấp một cách dễ dàng để tạo theme con với Tạo theme block plugin.
Đầu tiên, bạn sẽ cần cài đặt và kích hoạt plugin WordPress. Sau đó, hãy vào Giao diện » Tạo theme block.
Ở đây, chỉ cần chọn ‘Tạo con của [theme name].’ Chúng tôi sử dụng Twenty Twenty-Four trong ví dụ này.
Sau khi chọn option đó, hãy điền thông tin theme của bạn.
Bên dưới, bạn có thể thực hiện nhiều thao tác hơn như tải ảnh chụp màn hình cho theme để phân biệt với các theme khác, thêm thông tin hình ảnh, link đến các plugin WordPress cần có, thêm tag theme, v.v.
Sau khi hoàn tất việc cấu hình cài đặt, bạn chỉ cần cuộn xuống hết và nhấn nút ‘Tạo’.
Bây giờ, plugin sẽ tạo và download file zip theme con mới vào máy tính của bạn.
Khi bạn mở nó ra, bạn sẽ thấy ba file: readme, style.css và theme.json.
Tệp theme.json định nghĩa nhiều khía cạnh khác nhau của một theme block, bao gồm màu sắc, kiểu chữ, layout, v.v. Theo mặc định, plugin tạo file này để bạn có thể ghi đè hoặc mở rộng kiểu của theme cha trong theme con sau này.
Ở giai đoạn này, tất cả những gì bạn cần làm tiếp theo là đi đến Giao diện » Chủ đề.
Sau đó, nhấp vào ‘Thêm theme mới’.
Tiếp theo, chọn ‘Tải theme lên’.
Sau đó, chọn file zip và nhấp vào ‘Cài đặt ngay’ để cài đặt theme WordPress.
Mẹo thưởng: Tìm hiểu xem theme của bạn có Trình tạo theme con không
Nếu bạn may mắn, thì theme WordPress của bạn có thể đã có sẵn tính năng tạo theme con.
Ví dụ, nếu bạn sử dụng Astra, thì bạn có thể đi đến Trình tạo theme con Astra website. Sau đó, chỉ cần điền tên theme con của bạn và nhấp vào nút ‘Tạo’.
Sau đó, trình duyệt của bạn sẽ tự động tải theme con xuống máy tính của bạn, sau đó bạn có thể tự cài đặt trên WordPress.
Chúng tôi cũng tìm thấy một số theme WordPress phổ biến khác có trình tạo theme con:
Cách custom theme con cổ điển của bạn
Ghi chú: Phần này dành cho người dùng theme WordPress cổ điển. Nếu bạn sử dụng theme block, hãy bỏ qua phần tiếp theo.
Về mặt kỹ thuật, bạn có thể custom theme con của mình mà không cần code bằng cách sử dụng Theme Customizer. Những thay đổi bạn thực hiện ở đó sẽ không ảnh hưởng đến theme cha của bạn. Nếu bạn chưa thoải mái với việc code hóa, hãy thoải mái sử dụng Customizer.
Tuy nhiên, MuaHosting.com cũng khuyên bạn nên custom theme con bằng code.
Bên cạnh việc tìm hiểu thêm về phát triển theme WordPress, việc custom code còn cho phép ghi lại những thay đổi trong các file theme con, giúp theo dõi chúng dễ dàng hơn.
Bây giờ, cách cơ bản nhất để custom một child theme là thêm CSS custom vào file style.css. Để làm được điều đó, bạn cần biết code nào bạn cần custom.
Bạn có thể đơn giản hóa quy trình bằng cách sao chép và sửa đổi code hiện có từ theme gốc. Bạn có thể tìm code đó bằng cách sử dụng công cụ Kiểm tra của Chrome hoặc Firefox hoặc bằng cách sao chép trực tiếp từ file CSS của theme gốc.
Phương pháp 1: Sao chép code từ Chrome hoặc Firefox Inspector
Cách dễ nhất để khám phá code CSS bạn cần sửa đổi là sử dụng công cụ kiểm tra đi kèm với Google Chrome và Firefox. Các công cụ này cho phép bạn xem HTML và CSS đằng sau bất kỳ thành phần nào của website.
Bạn có thể đọc thêm về công cụ kiểm tra trong hướng dẫn của MuaHosting.com về những điều cơ bản của inspect element: custom WordPress cho người dùng tự làm.
Khi bạn nhấp chuột phải vào website và sử dụng phần tử kiểm tra, bạn sẽ thấy HTML và CSS cho trang đó.
Khi bạn di chuyển chuột qua các dòng HTML khác nhau, trình kiểm tra sẽ làm nổi bật chúng trong cửa sổ trên cùng. Nó cũng sẽ hiển thị cho bạn các quy tắc CSS liên quan đến phần tử được tô sáng, như sau:
Bạn có thể thử chỉnh sửa CSS ngay tại đó để xem nó trông như thế nào. Ví dụ, hãy thử thay đổi màu nền của phần thân theme thành #fdf8ef. Tìm dòng code có content body { và bên trong nó, code nói rằng color: .
Chỉ cần nhấp vào icon chọn màu bên cạnh color: và dán code HEX vào trường thích hợp, như sau:
Bây giờ, bạn đã biết cách thay đổi màu nền bằng CSS. Để thay đổi vĩnh viễn, bạn có thể mở file style.css trong folder theme con (sử dụng trình quản lý file hoặc FTP).
Sau đó, dán đoạn code sau vào bên dưới thông tin theme con, như sau:
/*
Theme Name: Twenty Twenty-One Child
Theme URI:
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI:
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
body {
background-color: #fdf8ef
}
Đây là giao diện sẽ trông như thế nào nếu bạn vào trang quản trị WordPress và mở Vẻ bề ngoài » Trình biên tập tập tin theme:
Nếu bạn là người mới bắt đầu và muốn thực hiện các thay đổi khác, thì MuaHosting.com khuyên bạn nên làm quen với HTML và CSS để bạn biết chính xác phần tử nào mà mỗi code đang tham chiếu đến. Có nhiều bảng hướng dẫn HTML và CSS trực tuyến mà bạn có thể tham khảo.
Đây là bảng định kiểu hoàn chỉnh mà MuaHosting.com đã tạo cho theme con. Hãy thoải mái thử nghiệm và sửa đổi nó:
/*
Theme Name: Twenty Twenty-One Child
Theme URI:
Description: Twenty Twenty-One child theme
Author: WordPress.org
Author URI:
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}
Phương pháp 2: Sao chép code từ file style.css của theme gốc
Có thể có nhiều thứ trong child theme mà bạn muốn custom. Trong trường hợp đó, có thể nhanh hơn khi sao chép trực tiếp một số code từ file style.css của parent theme, dán vào file CSS của child theme, rồi sửa đổi.
Phần khó khăn là file stylesheet của theme có thể trông rất dài và khó hiểu đối với người mới bắt đầu. Tuy nhiên, khi bạn đã hiểu những điều cơ bản, thì thực ra nó không khó đến vậy.
Hãy sử dụng một ví dụ thực tế từ bảng định dạng của theme gốc Twenty Twenty-One. Bạn cần điều hướng đến /wp-content/themes/twentytwentyone trong folder cài đặt WordPress của bạn, sau đó mở file style.css trong trình quản lý file, FTP hoặc Trình chỉnh sửa file theme.
Bạn sẽ thấy những dòng code sau:
:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}
Dòng 3 đến 15 kiểm soát loại màu (như vàng, xanh lá cây, tím) mà toàn bộ theme sẽ sử dụng trong code HEX cụ thể của chúng. Và sau đó, đối với các dòng như ‘global-color-primary’ hoặc ‘global-color-secondary’, điều đó có nghĩa là đó là các màu chính và màu phụ của theme đó.
Bạn có thể sao chép những dòng code này vào bảng định kiểu của theme con và sau đó thay đổi code HEX để tạo ra bảng màu hoàn hảo.
Khi bạn cuộn xuống trong bảng kiểu của theme gốc, bạn sẽ nhận thấy rằng các biến khác cũng có thể có các biến màu này, như ở đây:
/* Buttons */
--button--color-text: var(--global--color-background);
Về cơ bản, điều này có nghĩa là tất cả các văn bản nút sẽ sử dụng cùng một màu như đã khai báo trong --global--color-background:có màu xanh bạc hà (--global--color-green: #d1e4dd). Nếu bạn thay đổi HEX trong --global--color-green:thì văn bản trên nút cũng sẽ trông khác.
Ghi chú: Nếu bạn sử dụng theme con Twenty Twenty-One và không thấy bất kỳ thay đổi nào, thì bạn có thể cần cập nhật phần ‘Phiên bản’ của thông tin file theme (ví dụ: từ 1.0 lên 2.0) mỗi khi bạn cập nhật file style.css.
Bạn cũng có thể làm theo các hướng dẫn sau để thử nghiệm custom theme con của mình:
Cách custom theme con block của bạn
Nếu bạn sử dụng theme block con, thì hầu hết các custom của bạn sẽ được thực hiện trên file theme.json chứ không phải style.css.
Tuy nhiên, trong quá trình thử nghiệm, MuaHosting.com thấy quy trình này khá phức tạp. Không giống như các theme con cổ điển, có một khoảng trống kiến thức lớn hơn mà bạn cần phải lấp đầy (đặc biệt là về JSON và cách xử lý CSS ở đó) nếu bạn mới tham gia phát triển theme WordPress.
Nói như vậy, MuaHosting.com đã tìm ra một giải pháp thay thế dễ dàng hơn nhiều bằng cách sử dụng Tạo theme block plugin. Công cụ này có thể ghi lại mọi thay đổi được thực hiện trong WordPress Full Site Editor trong file child theme.json của bạn. Vì vậy, bạn sẽ không phải động đến bất kỳ code nào vì plugin sẽ xử lý thay bạn.
Chúng tôi sẽ cho bạn xem một ví dụ. Đầu tiên, hãy mở WordPress Full Site Editor bằng cách vào Vẻ bề ngoài » Biên tập viên.
Bạn sẽ thấy một số menu để lựa chọn.
Ở đây, chỉ cần chọn ‘Kiểu’.
Ở trang tiếp theo, bạn sẽ thấy một số kiểu kết hợp có sẵn để lựa chọn.
Đối với mục đích của MuaHosting.com, bạn có thể bỏ qua tất cả những điều đó và chỉ cần nhấp vào icon bút chì.
Bây giờ, hãy thử thay đổi một số phần của theme con, như font chữ.
Đối với ví dụ này, hãy nhấp vào ‘Kiểu chữ’ ở sidebar phải.
Tiếp theo, bạn sẽ thấy một số option để thay đổi font chữ chung của theme cho văn bản, link, tiêu đề, chú thích và nút.
Chúng ta hãy nhấp vào ‘Tiêu đề’ để xem minh họa.
Trong dropdown menu Phông chữ, hãy thay đổi lựa chọn ban đầu thành bất kỳ font chữ nào có sẵn.
Bạn có thể thoải mái thay đổi giao diện, độ cao dòng, khoảng cách giữa các chữ cái và chữ hoa nếu cần.
Khi hoàn tất, chỉ cần nhấp vào “Lưu”. Sau đó, bạn có thể nhấp vào nút Tạo theme block (icon cờ lê) bên cạnh “Lưu”.
Sau đó, nhấp vào ‘Lưu thay đổi’. Thao tác này sẽ lưu tất cả các thay đổi của bạn vào file child theme.json.
Nếu bạn mở file theme.json, bạn sẽ thấy những thay đổi được phản ánh trong code.
Đây là những gì MuaHosting.com thấy sau khi cập nhật theme con:
Như bạn có thể thấy, bây giờ file bao gồm code cho biết tag tiêu đề sẽ sử dụng font chữ Inter với kiểu chữ hơi đậm, chiều cao dòng 1,2, khoảng cách dòng 1 pixel và chữ thường.
Vì vậy, bất cứ khi nào bạn chỉnh sửa theme block con, hãy nhớ nhấp vào icon cờ lê và lưu các thay đổi để chúng được ghi chép đầy đủ.
Cách chỉnh sửa các file mẫu của theme con
Hầu hết các theme WordPress đều có mẫu, là các file theme kiểm soát thiết kế và layout của một khu vực cụ thể bên trong theme. Ví dụ, footer trang thường được xử lý bởi file footer.php và phần tiêu đề được xử lý bởi file header.php.
Mỗi theme WordPress cũng có một layout khác nhau. Ví dụ, theme Twenty Twenty-One có header, content loop, footer widget area và footer.
Nếu bạn muốn sửa đổi một mẫu, thì bạn phải tìm file trong folder theme cha và sao chép nó vào folder theme con. Sau đó, bạn nên mở file và thực hiện các sửa đổi bạn muốn.
Ví dụ, nếu bạn sử dụng Bluehost và theme gốc của bạn là Twenty Twenty-One, thì bạn có thể đi tới /wp-content/themes/twentytwentyone trong trình quản lý file của bạn. Sau đó, nhấp chuột phải vào file mẫu như footer.php và chọn ‘Sao chép’.
Sau đó, nhập đường dẫn file của theme con của bạn.
Khi hoàn tất, chỉ cần nhấp vào ‘Sao chép file’.
Sau đó bạn sẽ được chuyển hướng đến đường dẫn file.
Để chỉnh sửa file footer.php, chỉ cần nhấp chuột phải vào file đó và chọn ‘Chỉnh sửa’.
Ví dụ, MuaHosting.com sẽ xóa link ‘Proudly powered by WordPress’ khỏi footer trang và thêm thông báo bản quyền tại đó.
Để làm điều đó, bạn nên xóa mọi thứ giữa
Then you need to paste in the code you find below those tags in the example below:
© Copyright . All rights reserved.
Here’s what you should now have in the text editor:
Hãy tiếp tục và lưu file để chính thức áp dụng những thay đổi.
Sau đó, hãy truy cập website của bạn để xem thông báo bản quyền mới.
Cách Thêm Chức Năng Mới Vào Chủ Đề Con Của Bạn
Tệp functions.php trong một theme sử dụng code PHP để thêm các tính năng hoặc thay đổi các tính năng mặc định trên website WordPress. Nó hoạt động như một plugin cho website WordPress của bạn được tự động kích hoạt với theme hiện tại của bạn.
Bạn sẽ thấy nhiều hướng dẫn WordPress yêu cầu bạn sao chép và dán đoạn code vào functions.php. Nhưng nếu bạn thêm các sửa đổi của mình vào theme gốc, thì chúng sẽ bị ghi đè bất cứ khi nào bạn cài đặt bản cập nhật mới cho theme.
Đó là lý do tại sao MuaHosting.com khuyên bạn nên sử dụng child theme khi thêm đoạn code custom. Trong hướng dẫn này, MuaHosting.com sẽ thêm một khu vực tiện ích mới vào theme của mình.
Chúng ta có thể thực hiện điều đó bằng cách thêm đoạn code này vào file functions.php của theme con. Để quá trình này an toàn hơn, MuaHosting.com khuyên bạn nên sử dụng Mã WP plugin để bạn không phải chỉnh sửa trực tiếp file functions.php, giảm nguy cơ xảy ra lỗi.
Bạn có thể đọc hướng dẫn của MuaHosting.com về cách thêm đoạn code custom để biết thêm thông tin.
Sau đây là code bạn cần để thêm vào file functions.php:
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '',
'after_title' => '
',
'before_widget' => '',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
Sau khi bạn lưu file, bạn có thể truy cập Giao diện » Tiện ích trang quản lý WordPress của bạn.
Tại đây, bạn sẽ thấy khu vực tiện ích custom mới mà bạn có thể thêm tiện ích vào.
Có rất nhiều tính năng khác mà bạn có thể thêm vào theme của mình bằng cách sử dụng đoạn code custom. Hãy xem những thủ thuật cực kỳ hữu ích này cho file WordPress functions.php và đoạn code WordPress hữu ích dành cho người mới bắt đầu.
Cách khắc phục sự cố theme con WordPress của bạn
Nếu bạn chưa từng tạo theme con trước đây, thì có khả năng cao là bạn sẽ mắc một số lỗi và điều đó là bình thường. Đây là lý do tại sao MuaHosting.com khuyên bạn nên sử dụng plugin backup và tạo website cục bộ hoặc môi trường dàn dựng để ngăn ngừa lỗi nghiêm trọng.
Nói như vậy, đừng bỏ cuộc quá nhanh. Cộng đồng WordPress rất tháo vát, vì vậy bất kể bạn đang gặp vấn đề gì, có lẽ đã có giải pháp rồi.
Để bắt đầu, bạn có thể xem qua những lỗi WordPress phổ biến nhất để tìm giải pháp.
Các lỗi phổ biến nhất mà bạn có thể thấy là lỗi cú pháp do bạn bỏ sót điều gì đó trong code. Bạn sẽ tìm thấy trợ giúp để giải quyết các vấn đề này trong hướng dẫn nhanh của MuaHosting.com về cách tìm và sửa lỗi cú pháp trong WordPress.
Ngoài ra, bạn luôn có thể bắt đầu lại nếu có điều gì đó không ổn. Ví dụ, nếu bạn vô tình xóa thứ gì đó mà theme gốc của bạn yêu cầu, thì bạn chỉ cần xóa file khỏi theme con và bắt đầu lại.
Chúng tôi hy vọng bài viết này giúp bạn biết cách tạo theme con WordPress. Bạn cũng có thể muốn xem hướng dẫn tối ưu của MuaHosting.com để tăng tốc độ và hiệu suất WordPress và lựa chọn chuyên gia của MuaHosting.com về các page builder kéo và thả tốt nhất để dễ dàng thiết kế website của bạn.
Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi MuaHosting.com Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy MuaHosting.com trên Twitter Và Facebook.
Tiết lộ: Nội dung của MuaHosting.com được người đọc hỗ trợ. Điều này có nghĩa là nếu bạn nhấp vào một số link của MuaHosting.com, thì MuaHosting.com có thể kiếm được hoa hồng. Xem cách MuaHosting.com được tài trợ, lý do tại sao nó quan trọng và cách bạn có thể hỗ trợ MuaHosting.com. Đây là quy trình biên tập của MuaHosting.com.
