Tạo một chủ đề con tùy chỉnh trong WordPress

Khi bạn bắt đầu một trang web WordPress mới, một trong những điều đầu tiên bạn muốn làm là chọn một chủ đề. Ngay sau đó, có thể bạn sẽ muốn bắt đầu thực hiện các thay đổi đối với chủ đề để phù hợp với trang web của mình. Để làm điều này, bạn cần tạo một chủ đề con tùy chỉnh. Nó khá dễ làm và nó đáng để làm đúng.

Làm theo hướng dẫn nhanh này để tạo chủ đề con tùy chỉnh của riêng bạn cho trang web WordPress của bạn…

Chủ đề WordPress là gì?

Nói một cách đơn giản, một chủ đề WordPress chỉ là một tập hợp các tệp. Một số tệp này là tùy chọn, nhưng bạn sẽ cần tạo các tệp cốt lõi cần thiết. Một chủ đề con tùy chỉnh rất đơn giản có thể trông giống như thế này.

Tệp bạn cần hoàn toàn chính xác là style.css , vì đây là những gì WordPress sẽ tìm kiếm để tìm ra chủ đề của bạn được gọi là gì và nó sẽ xử lý như thế nào với chủ đề của bạn.

Bạn cũng nên có một tệp functions.php , nhưng nó có thể trống khi bạn bắt đầu mọi thứ.

Ảnh chụp màn hình.png là tùy chọn và nó chỉ là một hình ảnh thu nhỏ về chủ đề của bạn có thể trông như thế nào. Nó chỉ có thể là một cái gì đó thực sự đơn giản. Bạn có thể nhấp chuột phải và “lưu dưới dạng…” hình ảnh này, nếu bạn cần thứ gì đó để bắt đầu chủ đề mới của mình.

Chọn chủ đề dành cho cha mẹ của bạn

Khi bạn bắt đầu trang web mới sáng bóng của mình, có thể bạn sẽ thực hiện một số hành động tiêu chuẩn:
  1. Đảm bảo rằng WordPress đã được cài đặt và cập nhật đầy đủ.
    • Bit này thực sự quan trọng - hãy luôn cập nhật WordPress!
  2. Cài đặt một số plug-in hữu ích tiêu chuẩn:
  3. Chọn một chủ đề cơ sở / mẹ cho trang web của bạn. Các chủ đề cơ sở tốt bao gồm:
    • Astra
      • Một chủ đề tuyệt vời, hiện đại, toàn diện có tốc độ tải trang nhanh. Tuyệt vời cho các nhà phát triển và nhà thiết kế.
    • OnePress
      • Chủ đề dễ sử dụng với trang đầu có tác động cao. Tuyệt vời cho các trang web và blog đơn giản hơn và nó cũng có thể được sử dụng cho các trang web cửa hàng WooCommerce .
    • Mặt tiền cửa hàng
      • Một chủ đề chính thức cho các trang web cửa hàng dựa trên WooCommerce. Đầy đủ tính năng và dễ dàng mở rộng. Được hỗ trợ tốt trên web với nhiều hướng dẫn cách thực hiện.
  4. Tạo và kích hoạt một chủ đề con cho trang web của bạn, chủ đề này dựa trên chủ đề cơ sở của bạn.
    • Đây là nơi bạn có thể đặt các sửa đổi của mình và những thứ làm cho trang web của bạn khác với chủ đề cơ sở.
    • Đây là những gì chúng ta sẽ đề cập tiếp theo.

Cài đặt chủ đề cơ sở

Chúng tôi sẽ sử dụng Astra làm chủ đề cơ sở của mình, nhưng các hướng dẫn vẫn giống nhau cho dù bạn chọn chủ đề cơ sở nào. Trong khu vực quản trị trang web của bạn, hãy chuyển đến menu Giao diện và chọn Chủ đề.

Bạn sẽ thấy nút “Thêm mới” ở đầu trang… Nhấp vào Thêm mới , tìm chủ đề bạn muốn sử dụng làm chủ đề cơ sở và nhấp vào nút Cài đặt . Bạn không cần phải kích hoạt chủ đề, bởi vì chúng tôi sẽ chỉ sử dụng chủ đề này làm chủ đề cơ sở của mình. Chúng tôi sẽ tạo chủ đề con tùy chỉnh của riêng mình kế thừa từ chủ đề cơ sở này.

Tạo một chủ đề con tùy chỉnh

Trước hết, chúng ta cần tạo một vài tệp và đưa chúng vào một tệp zip. Sau đó, chúng tôi có thể tải tệp zip lên trang web của mình dưới dạng một chủ đề mới.

Tạo một thư mục trên máy tính của bạn với tên của chủ đề mới của bạn. Đảm bảo chỉ sử dụng các chữ cái thường và không sử dụng bất kỳ khoảng trắng nào. Tạo 2 tệp ở đây có tên là functions.php và style.css. Lưu tệp screenshot.png ở trên vào thư mục mới của bạn, vì vậy nó sẽ giống như thế này.

Để đảm bảo rằng WordPress biết cách xử lý chủ đề của bạn, chúng tôi cần đưa một số nội dung vào style.css . Chỉnh sửa style.css và dán đoạn mã sau vào đó.

/*
 Theme Name:   My Website Theme
 Theme URI:    https://wp-tutorials.tech/
 Description:  My website's custom theme.
 Author:       WP Tutorials
 Author URI:   https://wp-tutorials.tech/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mywebsitetheme
*/
/* Your CSS goes here... */
/* ... */
/* ... */

Định dạng này khá đơn giản và bạn có thể thay đổi bất cứ thứ gì bạn muốn tại đây. Đây là những điều quan trọng…

Key Value
Theme Name Important: The regular name of your theme.
Description Just a description of your theme. Not really important if it’s a one-off child theme for a specific site.
Text Domain Used when you use the __() function for translatable strings. Not important if your theme is only for a single-language site.
Định cấu hình style.css trong một chủ đề con tùy chỉnh. Bạn cũng nên tạo một tệp functions.php cơ bản , như sau:
/**
 * Custom functions for my child theme.
 *
 * https://wp-tutorials.tech/add-functionality/create-a-wordpress-child-theme/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
// Uncomment this if you want to use a settings.php file.
// require_once 'settings.php';
// Other functions files can go here...
// require_once 'functions-shortcodes.php';
// require_once 'functions-rest-api.php';
// ...
function custom_enqueue_scripts() {
   $theme_version = wp_get_theme()->get('Version');
   $base_uri = get_stylesheet_directory_uri();
   wp_enqueue_style('child-style', $base_uri . '/style.css', false, $theme_version);
   // You can add additional JavaScript CSS files here...
   // wp_enqueue_style('my-post-styles', $base_uri . '/post.css', array('child-style'), $theme_version);
   // wp_enqueue_style('my-shop-styles', $base_uri . '/shop.css', array('child-style'), $theme_version);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
Ở đây chỉ có đủ để thiết lập và chạy chủ đề con bạn. Nó sẽ tải tệp style.css của chủ đề con của bạn và bạn có thể thấy các chức năng và tệp CSS / JavaScript khác ở đâu.

Tải lên và cài đặt Chủ đề con tùy chỉnh của bạn

Tất cả những gì chúng ta cần làm bây giờ là nén nó, tải nó lên và kích hoạt nó… Khi bạn tạo một tệp zip của chủ đề con tùy chỉnh của mình, hãy đảm bảo rằng bạn nén chính thư mục đó. Bởi vì thư mục của chủ đề của chúng tôi được gọi là “mywebsitetheme”, tệp zip của chúng tôi sẽ được gọi là “ mywebbsitetheme.zip “.

Trong khu vực quản trị WordPress của trang web của bạn, hãy chuyển đến khu vực Giao diện> Chủ đề và nhấn nút “ Thêm mới ” ở trên cùng. Bây giờ, thay vì tìm kiếm và duyệt qua thư viện chủ đề trực tuyến có sẵn, hãy nhấn nút “ Tải lên chủ đề ”. Chọn tệp zip của chủ đề của bạn và nhấn “ Cài đặt ngay bây giờ

Sau khi bạn đã tải lên chủ đề con tùy chỉnh của mình, bạn sẽ cần phải Kích hoạt chủ đề đó để nó “bắt đầu”.

Khi bạn hoàn thành, khu vực Giao diện> Chủ đề của bạn sẽ trông giống như sau:

Khi bạn muốn thêm các kiểu tùy chỉnh vào style.css của chủ đề hoặc các chức năng mới vào functions.php của mình, tất cả những gì bạn cần làm là cho chúng tôi Trình chỉnh sửa chủ đề tích hợp sẵn . Trong khu vực quản trị WordPress, chỉ cần đi tới Giao diện> Trình chỉnh sửa chủ đề. Có một trình soạn thảo PHP tích hợp sẵn, nơi bạn có thể dán mã vào tệp functions.php của mình. Bạn cũng có thể thực hiện bổ sung kiểu CSS trực tiếp trong style.css của theme, nếu bạn không muốn sử dụng WordPress Customizer.

Đây là bạn có nó. Bạn đã tạo một chủ đề con tùy chỉnh cho trang web WordPress mới của mình.