Xây dựng chủ đề WordPress riêng có thể là việc gây áp lực và khá phức tạp. Thông thường, quá trình xây dựng chủ đề WordPress tuân theo các bước sau:
- Tìm một ý tưởng cho chủ đề.
- Thiết kế chủ đề.
- Bắt đầu viết mã HTML/CSS.
- Viết CSS.
- Thêm một số tùy chọn cho người dùng để họ có thể tùy chỉnh chủ đề.
Trong bài viết này, tôi sẽ không nói về 4 bước đầu tiên, tôi chỉ tập trung vào bước thứ 5: thêm các tùy chọn cho người dùng.
Có rất nhiều frameworks cho phép bạn tạo một trang quản trị trên WordPress, thêm các tùy chọn và cho phép người dùng thay đổi một số thứ trên chủ đề của bạn. Và sau đó, có WordPress customizer, một giải pháp thuần túy của WordPress cho phép bạn thêm tùy chọn một cách dễ dàng, người dùng có thể xem trước trang web của mình trước khi lưu các lựa chọn của họ.
Kirki nằm ở một nơi giữa: Đây là một framework cho phép bạn thêm các tùy chọn nâng cao vào WordPress customizer (mà không cần trang quản trị) và cung cấp một số tính năng tiên tiến. Nó sẽ giúp bạn thêm các trường tuỳ chỉnh riêng của mình vào customizer một cách nhanh chóng và hiệu quả hơn!
Ví dụ, giả sử bạn đã tạo ra các phần cơ bản của chủ đề và bây giờ bạn muốn thêm một số tùy chọn.
Bạn đã đọc về Kirki và xem tài liệu của nó, và bạn chuẩn bị bắt đầu. Điều đầu tiên bạn phải quyết định là bạn sẽ sử dụng Kirki như thế nào.
Bạn có 2 lựa chọn:
- Sử dụng như một plugin.
- Nhúng vào chủ đề của bạn.
Contents
Sử dụng như một plugin
Nếu bạn muốn sử dụng Kirki như một plugin, bạn có thể yêu cầu nó bằng cách sử dụng thư viện như TGM Plugin Activation. Plugin Kirki có sẵn trên wordpress.org, việc bao gồm nó rất dễ dàng.
Nhúng vào chủ đề của bạn
Nếu bạn muốn gói Kirki vào chủ đề của bạn, bạn có thể làm điều đó khá dễ dàng theo hướng dẫn đơn giản sau:
Bước 1: Tải Kirki về và đặt nó trong chủ đề của bạn.
Bạn có thể tải plugin từ wordpress.org và sau khi giải nén, đặt nó trong chủ đề của bạn, ví dụ như trong thư mục includes/kirki.
Bước 2: Bao gồm tệp plugin chính trong tệp functions.php của chủ đề của bạn.
Việc này rất đơn giản … Chỉ cần thêm dòng này vào file functions.php của chủ đề của bạn:
require_once( get_template_directory() . '/includes/kirki/kirki.php' );
Bước 3: Cấu hình Kirki để sử dụng đường dẫn URL chính xác
Kirki tải một số tệp khi bạn đang sử dụng customizer và do đó cần bạn chỉ rõ chính xác các tệp này được đặt ở đâu. Bạn sẽ cần thêm đoạn mã sau vào file functions.php của chủ đề:
Kirki::add_config( 'kirki_demo', array(
'capability' => 'edit_theme_options',
'option_type' => 'theme_mod',
) );
Tất nhiên, nếu bạn muốn, bạn có thể thêm nhiều tùy chọn cấu hình hơn và tùy chỉnh cách customizer của chủ đề của bạn sẽ trông như thế nào, nhưng điều duy nhất chúng ta cần cho chủ đề cơ bản của chúng tôi là điều trên đây.
Bước 4: Thêm các trường của bạn
Bây giờ bạn có thể bắt đầu thêm các trường và cấu trúc cho các tùy chọn của mình.
Đối với chủ đề của tôi, tôi muốn có những điều sau:
- Một bảng điều khiển “Backgrounds” với 3 phần bên trong: Header Background, Body Background, và Footer Background.
- Một phần về kiểu chữ, nơi người dùng có thể chọn font-family cho phần thân của trang và font-size. Tôi có thể thêm nhiều hơn, nhưng đây chỉ là một ví dụ để giới thiệu với các bạn những gì bạn có thể làm.
Đầu tiên, chúng ta sẽ tạo các bảng điều khiển và phần của Customizer:
Kirki::add_panel( 'backgrounds_panel', array(
'title' => esc_html__( 'Backgrounds', 'textdomain' ),
'description' => esc_html__( 'Panel description', 'textdomain' ),
'priority' => 10,
) );
Kirki::add_section( 'header_background_section', array(
'title' => esc_html__( 'Header Background', 'textdomain' ),
'description' => esc_html__( 'Section description', 'textdomain' ),
'panel' => 'backgrounds_panel',
'priority' => 160,
) );
Kirki::add_section( 'body_background_section', array(
'title' => esc_html__( 'Body Background', 'textdomain' ),
'description' => esc_html__( 'Section description', 'textdomain' ),
'panel' => 'backgrounds_panel',
'priority' => 180,
) );
Kirki::add_section( 'footer_background_section', array(
'title' => esc_html__( 'Footer Background', 'textdomain' ),
'description' => esc_html__( 'Section description', 'textdomain' ),
'panel' => 'backgrounds_panel',
'priority' => 200,
) );
Chúng ta không làm gì đặc biệt ở đây, chúng ta chỉ đang thêm các phần và bảng theo hướng dẫn trong WordPress Codex.
Bây giờ chúng ta đã thêm các phần, chúng ta có thể tiếp tục thêm các trường.
Tất cả các cài đặt của chúng tôi sẽ được đặt trong một hàm, sau đó được nối vào bộ lọc kirki/fields như sau:
function mytheme_kirki_configuration() {
return array(
'background_color' => array(
'type' => 'color',
'settings' => 'background_color',
'label' => esc_html__( 'Background Color', 'textdomain' ),
'description' => esc_html__( 'Choose a background color.', 'textdomain' ),
'section' => 'header_background_section',
'default' => '#ffffff',
'choices' => array(
'alpha' => true,
),
'output' => array(
array(
'element' => '#header',
'property' => 'background-color',
),
),
),
);
}
add_filter( 'kirki/fields', 'mytheme_kirki_configuration' );
Tiếp theo, chúng ta sẽ thêm phần nền của phần thân. Tôi chỉ đơn giản sao chép đoạn mã trên và thay đổi đối số settings và description:
function mytheme_kirki_configuration() {
return array(
'background_color' => array(
'type' => 'color',
'settings' => 'background_color',
'label' => esc_html__( 'Background Color', 'textdomain' ),
'description' => esc_html__( 'Choose a background color.', 'textdomain' ),
'section' => 'body_background_section',
'default' => '#ffffff',
'choices' => array(
'alpha' => true,
),
'output' => array(
array(
'element' => 'body',
'property' => 'background-color',
),
),
),
);
}
add_filter( 'kirki/fields', 'mytheme_kirki_configuration' );
Tiếp theo là phần nền của footer:
function mytheme_kirki_configuration() {
return array(
'background_color' => array(
'type' => 'color',
'settings' => 'background_color',
'label' => esc_html__( 'Background Color', 'textdomain' ),
'description' => esc_html__( 'Choose a background color.', 'textdomain' ),
'section' => 'footer_background_section',
'default' => '#ffffff',
'choices' => array(
'alpha' => true,
),
'output' => array(
array(
'element' => '#footer',
'property' => 'background-color',
),
),
),
);
}
add_filter( 'kirki/fields', 'mytheme_kirki_configuration' );
Chúng ta đã hoàn thành phần nền! Bây giờ chúng ta sẽ tiếp tục với các cài đặt kiểu chữ.
Bắt đầu với font-family:
function mytheme_kirki_configuration() {
return array(
'font_family' => array(
'type' => 'select',
'settings' => 'font_family',
'label' => esc_html__( 'Font Family', 'textdomain' ),
'description' => esc_html__( 'Choose the font family.', 'textdomain' ),
'section' => 'typography_section',
'default' => 'Arial',
'choices' => Kirki_Fonts::get_font_choices(),
'output' => array(
array(
'element' => 'body',
'property' => 'font-family',
),
),
),
);
}
add_filter( 'kirki/fields', 'mytheme_kirki_configuration' );
Tiếp theo là kích thước chữ:
function mytheme_kirki_configuration() {
return array(
'font_size' => array(
'type' => 'slider',
'settings' => 'font_size',
'label' => esc_html__( 'Font Size', 'textdomain' ),
'description' => esc_html__( 'Choose the font size.', 'textdomain' ),
'section' => 'typography_section',
'default' => '16',
'choices' => array(
'min' => '0.7',
'max' => '2',
'step' => '0.01',
),
'output' => array(
array(
'element' => 'body',
'property' => 'font-size',
'units' => 'em',
),
),
),
);
}
add_filter( 'kirki/fields', 'mytheme_kirki_configuration' );
Hàm cuối cùng của chúng ta chứa các định nghĩa cho các trường của chúng ta nên trông như sau:
function mytheme_kirki_configuration() {
return array(
'background_color' => array(
'type' => 'color',
'settings' => 'background_color',
'label' => esc_html__( 'Background Color', 'textdomain' ),
'description' => esc_html__( 'Choose a background color.', 'textdomain' ),
'section' => 'header_background_section',
'default' => '#ffffff',
'choices' => array(
'alpha' => true,
),
'output' => array(
array(
'element' => '#header',
'property' => 'background-color',
),
),
),
'font_family' => array(
'type' => 'select',
'settings' => 'font_family',
'label' => esc_html__( 'Font Family', 'textdomain' ),
'description' => esc_html__( 'Choose the font family.', 'textdomain' ),
'section' => 'typography_section',
'default' => 'Arial',
'choices' => Kirki_Fonts::get_font_choices(),
'output' => array(
array(
'element' => 'body',
'property' => 'font-family',
),
),
),
);
}
add_filter( 'kirki/fields', 'mytheme_kirki_configuration' );
Nó có vẻ không nhiều, nhưng những gì chúng ta đã đạt được trên đây có thể yêu cầu một vài trăm dòng code nữa nếu không sử dụng Kirki:
- Chúng ta sẽ phải tạo các thiết lập theme_mod trước khi thêm các điều khiển.
- Chúng ta sẽ phải tạo ra các điều khiển màu chủ đề tùy chỉnh của riêng chúng tôi có thể xử lý được các giá trị rgba và độ mờ.
- Chúng ta sẽ phải tạo ra điều khiển trượt tùy chỉnh cho customizer có thể xử lý kích thước font, hoặc chúng ta có thể sử dụng một điều khiển văn bản, nhưng điều đó sẽ không hiệu quả hoặc đẹp bằng cách sử dụng trượt tùy chỉnh.
- Chúng ta sẽ phải viết các hàm để tính toán đúng các giá trị nền và áp dụng chúng cho cả 3 khu vực của trang web của chúng ta.
- Chúng ta sẽ phải viết JS cần thiết để postMessage hoạt động.
- Chúng ta sẽ phải viết cài đặt tùy chỉnh riêng cho Google fonts, chưa kể đến tất cả những gì bao gồm (tính toán các fonts chờ load, thêm CSS, v.v.).
Thay vào đó, chúng ta chỉ tạo ra một mảng xác định những gì chúng ta muốn và tất cả đã được giải quyết. 🙂
Ở trên chỉ là một ví dụ cơ bản, tất nhiên có rất nhiều thứ khác bạn có thể làm! Để tìm hiểu thêm về Kirki, bạn có thể xem tài liệu trên trang web kirki.org và đóng góp vào quá trình phát triển trên kho lưu trữ github của nó.