Tùy chỉnh chủ đề WordPress hiện có là nhu cầu phổ biến, nhưng việc chỉnh sửa trực tiếp chủ đề có thể gây ra sự cố. 

Nếu chủ đề được cập nhật, những thay đổi của bạn sẽ bị ghi đè! Cách tốt hơn là tạo một chủ đề con kế thừa từ chủ đề gốc. 

Chủ đề con cho phép bạn sửa đổi và mở rộng chủ đề một cách an toàn và bảo mật. 

Trong hướng dẫn chi tiết này, chúng ta sẽ thảo luận về việc tạo chủ đề con trong WordPress. Bạn sẽ tìm hiểu mục đích của các chủ đề con, cách thiết lập một chủ đề con và cách tùy chỉnh nó để thay thế chức năng và thiết kế của chủ đề gốc. 

Với một số phương pháp, bạn có thể xây dựng chủ đề con và bắt đầu áp dụng các thay đổi của mình mà không cần chạm vào tệp chủ đề gốc. 

Vì vậy, không cần phải quảng cáo thêm, chúng ta hãy bắt đầu.

1 Chủ đề trẻ em là gì?

Chủ đề con là một chủ đề WordPress kế thừa chức năng từ chủ đề gốc. Nó cho phép bạn sửa đổi hoặc thêm các tính năng mới mà không cần thay đổi tệp chủ đề gốc. 

Điều này rất hữu ích vì nếu bạn sửa đổi trực tiếp các tệp chủ đề gốc, những thay đổi của bạn sẽ bị mất khi chủ đề được cập nhật. 

Với chủ đề con, bạn có thể thực hiện các thay đổi mà không ảnh hưởng đến chủ đề gốc và nhận các bản cập nhật mà không làm mất các sửa đổi của mình.

Trong phần này, bạn sẽ nhận thấy chúng tôi đã đề cập đến chủ đề gốc, nhưng chính xác thì nó là gì?

2 Chủ đề dành cho phụ huynh là gì?

Chủ đề gốc là một chủ đề được thiết kế sẵn làm nền tảng cho trang web WordPress. Nó cung cấp cấu trúc cơ bản, bố cục và chức năng của trang web. 

Chủ đề gốc có thể được tùy chỉnh để phù hợp với nhu cầu của một trang web cụ thể bằng cách thêm hoặc sửa đổi các tính năng của nó. 

Sử dụng chủ đề gốc có thể tiết kiệm thời gian và công sức khi xây dựng trang web, cung cấp điểm khởi đầu cho thiết kế và chức năng.

Tại thời điểm này, chúng ta có thể nói tất cả các chủ đề WordPress đều là chủ đề gốc về mặt kỹ thuật trừ khi được thiết kế đặc biệt để trở thành chủ đề con.

Đây là một điểm quan trọng cần nhớ: Một chủ đề gốc có thể tồn tại và hoạt động độc lập, trong khi một chủ đề con luôn dựa vào một chủ đề gốc để cung cấp các chức năng và tính năng cốt lõi.

3 Tại sao nên sử dụng chủ đề trẻ em?

Có một số lý do chính để sử dụng chủ đề con thay vì sửa đổi trực tiếp chủ đề:

• Việc tạo một chủ đề con sẽ bảo vệ các sửa đổi của bạn khỏi bị ghi đè khi chủ đề gốc được cập nhật.
• Nó giữ các tập tin chủ đề cha và con riêng biệt. Điều này giúp tránh nhầm lẫn vì các tập tin được sắp xếp.
• Nhiều chủ đề con có thể được sử dụng cho các mục đích khác nhau, chẳng hạn như thay đổi kiểu dáng hoặc chức năng. Nhưng lưu ý rằng một trang web chỉ có thể có một chủ đề hoạt động tại một thời điểm.
• Đó cũng là một cách tuyệt vời để bắt đầu phát triển một chủ đề WordPress đầy đủ mới.

Lưu ý: Các tùy chỉnh mở rộng trong chủ đề con có thể dẫn đến các vấn đề về quản lý. Đối với các dự án lớn hơn, việc tạo một chủ đề gốc/đầy đủ dựa trên chủ đề gốc thường tốt hơn việc tiếp tục sửa đổi chủ đề con.

4 Điều kiện tiên quyết để tạo chủ đề con

Trước khi tạo một chủ đề con, điều quan trọng là phải có một số yêu cầu. 

Trước tiên, bạn cần có bản cài đặt WordPress đang hoạt động và chủ đề gốc mà bạn muốn tạo chủ đề con. 

Việc hiểu HTML, CSS và PHP cũng rất hữu ích vì bạn sẽ thay đổi mã để tùy chỉnh chủ đề con. 

Ngoài ra, bạn có thể sao chép và dán đoạn mã từ các nguồn khác. 

Bạn nên thực hành trong môi trường phát triển cục bộ bằng cách sử dụng nội dung giả hoặc di chuyển trang WordPress trực tiếp sang máy chủ cục bộ cho mục đích thử nghiệm. Điều này cho phép bạn kiểm tra chủ đề con của mình trước khi triển khai nó trên một trang web trực tiếp.

Cuối cùng, điều quan trọng là phải có một sao lưu trang web phòng trường hợp có vấn đề gì xảy ra trong quá trình thực hiện.

Vì vậy, khi bạn đã đặt ra tất cả các yêu cầu này, bạn có thể tạo một chủ đề con. Tất cả những gì bạn cần làm là tuân theo quy trình thiết lập chủ đề con được nêu trong hướng dẫn này.

Nhưng đối với hướng dẫn này, chúng tôi sẽ sử dụng chủ đề WordPress mặc định Twenty Twenty-four.

5 Tạo một chủ đề con trong WordPress

Bây giờ bạn đã hiểu khái niệm về chủ đề con, hãy đi sâu vào việc tạo chủ đề con trong WordPress. 

Chúng ta sẽ khám phá hai phương pháp phổ biến để bạn lựa chọn, đáp ứng các mức độ thoải mái khác nhau:

5.1 Tạo chủ đề con bằng mã

Trước tiên, hãy truy cập cài đặt WordPress của bạn qua FTP hoặc trình quản lý tệp được cung cấp bởi bảng điều khiển lưu trữ của bạn. Điều hướng đến wp-content/themes thư mục và tạo một thư mục mới với tên duy nhất cho chủ đề con của bạn. 

Đối với hướng dẫn này, chúng tôi sẽ sử dụng tên “mtschild” cho thư mục chủ đề con.

Thư mục này hoạt động như không gian lưu trữ chính cho các thành phần chủ đề con của bạn.

Trong thư mục chủ đề con, tạo một tệp mới có tiêu đề style.css. Tệp này sẽ chứa các chi tiết cần thiết để nhận dạng và kích hoạt chủ đề con của bạn. Mở tệp style.css và chèn mã sau:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Mã này thông báo cho WordPress rằng chủ đề con của bạn mở rộng chủ đề gốc được chỉ định. Thay thế “Chủ đề con MTS” bằng tên chủ đề con ưa thích của bạn và trường mẫu bằng tên thư mục của chủ đề gốc.

Bước tiếp theo liên quan đến việc đảm bảo rằng chủ đề con của bạn kế thừa các phong cách từ chủ đề gốc. Để đạt được điều này, bạn phải đưa biểu định kiểu của chủ đề gốc vào hàng đợi.

Để thực hiện việc này, hãy truy cập tệp tin.php trong thư mục chủ đề con của bạn (tạo một tệp nếu nó không có) và triển khai một trong các mã sau.

Nếu chủ đề gốc của bạn không tải bất kỳ biểu định kiểu nào, hãy sử dụng đoạn mã sau để tải style.css qua hàm.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Mã này cũng có thể hoạt động nếu chủ đề gốc chỉ tải biểu định kiểu của nó. 

Tuy nhiên, nếu chủ đề gốc chỉ tải biểu định kiểu của chủ đề đang hoạt động, bạn phải thêm biểu định kiểu của chủ đề gốc vào hàng đợi thông qua functions.php sử dụng mã dưới đây:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Đối với chủ đề Twenty-Four được sử dụng trong hướng dẫn này, chúng tôi sẽ áp dụng mã đầu tiên vì chủ đề này hoàn toàn không tải bất kỳ biểu định kiểu nào. 

Hãy nhớ bắt đầu với <?php gắn thẻ khi thêm mã. Sửa đổi các mã này theo yêu cầu của bạn, đặc biệt là nơi tên chủ đề mts_child_theme được sử dụng.

Khi bạn đã hoàn thành các bước trên, hãy đăng nhập lại vào bảng điều khiển WordPress của bạn và tiến hành Giao diện → Chủ đề. Di chuột qua chủ đề con và nhấp vào Kích hoạt .

Vì bạn chưa thực hiện bất kỳ thay đổi nào đối với chủ đề con nên trang web của bạn sẽ duy trì chức năng và giao diện của chủ đề gốc. 

Tuy nhiên, chúng tôi sẽ hướng dẫn bạn tùy chỉnh chủ đề con để chuẩn bị cho bạn những sửa đổi tiếp theo.

Đây là quy trình thủ công để tạo chủ đề con bằng mã trong WordPress. Nếu phương pháp này có vẻ phức tạp, bạn có thể khám phá cách tiếp cận plugin mà chúng tôi sẽ đề cập trong phần tiếp theo.

5.2 Tạo chủ đề con bằng plugin

Tạo một chủ đề con bằng plugin rất đơn giản và dễ dàng. Đầu tiên bạn cần cài đặt và kích hoạt Trình cấu hình chủ đề con cắm vào. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về làm thế nào để cài đặt một plugin WordPress.

Khi plugin được kích hoạt, hãy truy cập bảng điều khiển WordPress và điều hướng đến Công cụ → Chủ đề con.

trên Chọn tab Chủ đề gốc, chọn chủ đề gốc từ menu thả xuống để tạo chủ đề con. Thông thường, chủ đề đang hoạt động trên trang web của bạn đã được chọn trước.

Tiếp theo, bấm vào Phân tích cái nút. Plugin sẽ xem xét kỹ lưỡng chủ đề gốc đã chọn để xác định xem nó có thể tạo chủ đề con hay không và liệu nó có cần tệp style.css để xuất hiện hay không.

Tiếp theo, gán tên cho chủ đề con của bạn. Bạn có thể điều chỉnh biểu định kiểu, chức năng và các cấu hình khác theo ý thích của mình. 

Tuy nhiên, đừng thay đổi cài đặt cho đến khi bạn đến phần 7.

Trong phần 7, nhấp vào nút có nhãn Nhấp để chỉnh sửa thuộc tính chủ đề con.

Từ đó, bạn có thể nhập chi tiết về chủ đề con của mình.

Khi tạo chủ đề con theo cách thủ công, bạn có thể mất các menu và tiện ích của chủ đề gốc. 

Tuy nhiên, plugin Trình cấu hình chủ đề con có thể chuyển chúng từ chủ đề gốc sang chủ đề con. 

Nếu bạn muốn tiếp tục việc này, hãy đánh dấu vào hộp kiểm ở Phần 8. Cuối cùng, nhấp vào nút Tạo chủ đề con mới để tạo chủ đề con.

Sau khi hoàn thành, plugin sẽ tạo một thư mục cho chủ đề con của bạn chứa các tệp style.css và hàm.php cần thiết để tùy chỉnh trong tương lai.

Trước khi kích hoạt chủ đề, hãy xem trước chủ đề đó bằng cách nhấp vào liên kết “Xem trước chủ đề con bạn” ở đầu màn hình để xác minh diện mạo của nó và đảm bảo nó không ảnh hưởng xấu đến trang web của bạn.

Sau khi xác minh mọi thứ đều hoạt động chính xác, hãy nhấp vào Kích hoạt & Xuất bản cái nút. Điều này sẽ làm cho chủ đề con của bạn xuất hiện trực tiếp trên trang web của bạn.

Khi bạn đã kích hoạt chủ đề con trên trang web của mình, đã đến lúc bắt đầu tùy chỉnh nó. Chúng tôi sẽ đề cập đến điều này trong phần tiếp theo.

6 Cách tùy chỉnh chủ đề con bạn

Trước khi đi sâu vào tùy chỉnh, hãy xác định các thành phần của trang web mà bạn muốn sửa đổi, chẳng hạn như kiểu, mẫu, chức năng, khu vực tiện ích hoặc mẫu trang tùy chỉnh. 

Có tầm nhìn rõ ràng về mục tiêu của bạn sẽ hợp lý hóa quá trình tùy chỉnh. Có nhiều phương pháp khác nhau để tùy chỉnh chủ đề con của bạn, bao gồm:

6.1 Tùy chỉnh kiểu bằng CSS

Tệp style.css của chủ đề con bạn đóng vai trò là nền tảng để điều chỉnh giao diện trang web của bạn. Tại đây, bạn có thể chèn các quy tắc CSS tùy chỉnh để thay đổi hoặc nâng cao phong cách của chủ đề gốc.

Trước khi tiếp tục, cần có hiểu biết cơ bản về HTML và CSS. 

Bạn có thể sử dụng hiệu quả công cụ Kiểm tra của trình duyệt hoặc sao chép trực tiếp kiểu từ tệp style.css của chủ đề gốc.

Để truy cập mã CSS của trang web bằng trình duyệt của bạn, chỉ cần nhấp chuột phải vào trang và chọn Thanh tra từ các tùy chọn xuất hiện. Công cụ này hiển thị mã kiểu CSS, cho phép bạn xác định chính xác các thành phần bạn muốn sửa đổi.

Khi bạn nhấp chuột phải và chọn “Kiểm tra”, màn hình trình duyệt của bạn sẽ chia đôi, hiển thị HTML và CSS cho trang. 

Tùy thuộc vào cài đặt trình duyệt của bạn, chi tiết HTML và CSS có thể xuất hiện ở bên phải hoặc cuối màn hình.

Khi bạn di chuột qua các dòng HTML khác nhau, trình kiểm tra Chrome sẽ đánh dấu chúng trong tab Thành phần và hiển thị các quy tắc CSS tương ứng liên quan đến thành phần được đánh dấu.

Bạn có thể thử nghiệm bằng cách chỉnh sửa CSS trực tiếp để xem trước nó sẽ xuất hiện như thế nào. Ví dụ: nếu bạn muốn thay đổi màu nền của trang chủ mặc định của chủ đề Twenty-Four từ #f9f9f9 thành #6841ea.

Sau khi bạn điều chỉnh màu nền trong trình kiểm tra trình duyệt, sự thay đổi chỉ là tạm thời. Để biến nó thành vĩnh viễn, bạn phải chuyển quy tắc CSS này sang tệp style.css của chủ đề con bạn:

body {
background-color: #6841ea;
}

Sau khi chèn mã, hãy nhớ lưu các sửa đổi của bạn. Bạn có thể sao chép quy trình này cho bất kỳ thành phần trang web nào khác mà bạn muốn tùy chỉnh.

Ví dụ: giả sử bạn muốn sửa đổi màu sắc trên trang web của mình. Chúng tôi có thể cung cấp cho bạn một số mã CSS cho phép bạn làm như vậy.

Để thay đổi màu văn bản thành màu xám đậm, hãy thêm đoạn mã sau vào tệp CSS của bạn:

body { color: #3b3b3b; } 

Để thay đổi màu tiêu đề thành màu xanh lam, hãy sử dụng đoạn mã sau:

h1, h2, h3 { color: #007bff; }

Đối với màu nền của tiêu đề, hãy sử dụng mã sau:

#header { background-color: #f5f5f5; } /* Light grey background for header */

Và đối với vùng nội dung, hãy sử dụng mã này để đặt màu nền thành màu trắng:

.site-container { background-color: #fff; } 

Bạn có thể sao chép các kiểu CSS này vào tệp style.css của chủ đề con thông qua thư mục chủ đề con của trang web hoặc từ bảng điều khiển WordPress của bạn.

Khi bạn thêm mã CSS, nó sẽ giống định dạng sau:

Sau khi lưu các thay đổi, hãy thử làm mới trang web của bạn. Nếu thay đổi không xuất hiện, hãy xóa bộ nhớ đệm của trình duyệt để đảm bảo bạn đang xem phiên bản CSS mới nhất.

6.2 Ghi đè tệp mẫu

Trong khi tùy chỉnh CSS kiểm soát giao diện trang web của bạn, các chủ đề con cung cấp một tính năng mạnh mẽ hơn: ghi đè các tệp mẫu.

Khả năng nâng cao này cho phép bạn định hình lại bố cục và cấu trúc các trang trên trang web của bạn và các phần tử. Tuy nhiên, hãy thận trọng vì nó đòi hỏi sự hiểu biết sâu sắc hơn về khuôn mẫu WordPress, HTML và PHP.

Để ghi đè mẫu, hãy sao chép tệp .php gốc từ thư mục chủ đề gốc vào chủ đề con của bạn, giữ nguyên tên tệp chính xác. 

Ví dụ: để ghi đè header.php, bạn cần sao chép tệp header.php từ thư mục /parent-theme/ và dán nó dưới dạng header.php trong thư mục /child-theme/.

Bây giờ bạn có thể chỉnh sửa header.php trong chủ đề con của mình.

Một số mẫu phổ biến cần ghi đè:

• header.php – Chứa thẻ và xây dựng thương hiệu trang web, điều hướng, v.v.
• footer.php – Phần kết thúc thẻ và đánh dấu.
• page.php – Mẫu mặc định cho các trang.
• single.php – Mẫu được sử dụng cho các bài viết đơn lẻ.
• index.php – Mẫu trang chủ.

Ví dụ: bạn có thể sửa đổi footer.php bằng cách hiển thị bản quyền tùy chỉnh cho trang web của mình:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Mở rộng chức năng

Sản phẩm functions.php tệp trong chủ đề con cho phép bạn giới thiệu các hàm, hook, bộ lọc và mã PHP mới để mở rộng dựa trên các tính năng mặc định của chủ đề gốc.

Tính linh hoạt này cho phép bạn đăng ký các loại bài đăng tùy chỉnh, kết hợp các tiện ích tùy chỉnh, tạo mã ngắn mới, xếp hàng các tập lệnh bổ sung, v.v.

Ví dụ: nếu bạn muốn có một phần dành riêng trên trang web WordPress của mình cho các tiện ích tùy chỉnh, hãy sử dụng đoạn mã sau để thiết lập khu vực tiện ích có tên “Khu vực tiện ích tùy chỉnh”:

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Sau khi lưu mã này vào tệp tin.php của chủ đề con bạn, hãy điều hướng quay lại trang WordPress của bạn và truy cập Giao diện → Tiện ích. Bạn sẽ nhận thấy tiện ích “Khu vực tiện ích tùy chỉnh” có sẵn để sử dụng.

7 Những câu hỏi thường gặp

8 Kết luận

Tạo chủ đề con trong WordPress là một kỹ năng có giá trị có thể giúp bạn tùy chỉnh trang web của mình mà không có nguy cơ mất các thay đổi trong quá trình cập nhật chủ đề. Mặc dù ban đầu việc này có vẻ khó khăn nhưng đừng bỏ cuộc quá nhanh nếu bạn mắc sai lầm. 

Các lỗi phổ biến nhất bạn có thể gặp phải là lỗi cú pháp do thiếu nội dung nào đó trong mã. Nếu có sự cố xảy ra, bạn luôn có thể bắt đầu lại. 

Ví dụ: nếu bạn vô tình xóa nội dung nào đó mà chủ đề gốc yêu cầu, bạn chỉ cần xóa tệp khỏi chủ đề con và bắt đầu lại. 

Hãy nhớ rằng, với một chút kiên trì, việc tạo chủ đề con có thể mang lại cho bạn sự linh hoạt để tạo giao diện độc đáo cho trang web của mình trong khi vẫn duy trì sự ổn định và bảo mật của chủ đề gốc.

Vì vậy, hãy dùng thử và xem sự khác biệt mà nó có thể mang lại cho trang web WordPress của bạn.

Chúng tôi hy vọng hướng dẫn này đã giúp bạn tạo chủ đề con cho trang web của mình. Nếu vậy, hãy cho chúng tôi biết bằng cách Đang tweet @rankmathseo.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• PlatoData.Network Vertical Generative Ai. Trao quyền cho chính mình. Truy cập Tại đây.
• PlatoAiStream. Thông minh Web3. Kiến thức khuếch đại. Truy cập Tại đây.
• Trung tâmESG. Than đá, công nghệ sạch, Năng lượng, Môi trường Hệ mặt trời, Quản lý chất thải. Truy cập Tại đây.
• PlatoSức khỏe. Tình báo thử nghiệm lâm sàng và công nghệ sinh học. Truy cập Tại đây.
• nguồn: https://rankmath.com/blog/wordpress-child-theme/