WordPress nồi hơi tùy biến chủ đề

WordPress nồi hơi tùy biến chủ đề
  1. 1. Giới thiệu về Trình tùy biến chủ đề WordPress
  2. 2. Tương tác với tùy biến chủ đề WordPress
  3. 3. Hiện đang đọc: WordPress nồi hơi tùy biến chủ đề
  4. 4. Mở rộng Trình tùy chỉnh chủ đề WordPress
  5. 5. Nồi hơi tùy biến chủ đề – Tùy chọn có điều kiện, Chủ đề con và Plugin

Cập nhật: Bài viết này đã được chỉnh sửa vào ngày 19 tháng 2 năm 2013, để phản ánh những thay đổi được thực hiện đối với Trình tùy chỉnh chủ đề nồi hơi.


Hy vọng rằng bạn đã đọc và thưởng thức hai bài đăng đầu tiên của loạt Theme Customizer – Giới thiệu về WordPress Customizer và Tương tác với Theme Customizer. Bây giờ, bạn đã có thời gian để chuyển sang khóa học chính và bắt đầu lắp ráp chủ đề Custom Customizer, bạn có thể sử dụng trong các chủ đề của mình. Bài đăng này chứa một vài khối mã dài, vì vậy hãy chú ý đến các bình luận nội tuyến.

Ghi chú: Nếu bạn chỉ sử dụng bản tóm tắt ngay lập tức, bạn có thể tải xuống từ Github và thay đổi các trường trong mảng tùy chọn $ bằng cách móc vào hook bộ lọc ‘thsp_cbp_options_array của.

Những gì chúng tôi đang tạo ra

Theme Customizer Boilerplate cấu trúc thư mục

Theme Customizer Boilerplate cấu trúc thư mục

  • tùy biến.php – Đây là tệp soạn sẵn Theme Customizer chính, là tệp bổ sung các phần, cài đặt và điều khiển bằng dữ liệu từ mảng tùy chọn
  • tùy chỉnh-điều khiển.php – Các lớp điều khiển tùy chỉnh và một hook hành động cho phép bạn thêm các điều khiển tùy chỉnh của riêng bạn
  • người giúp việc.php – Các chức năng trợ giúp, được sử dụng để truy xuất các tùy chọn chủ đề, mặc định tùy chọn, v.v..
  • tùy chọn.php – Tùy chọn mẫu và móc lọc cho phép bạn chỉnh sửa mảng tùy chọn và sử dụng các trường của riêng bạn
  • tùy biến-controls.css – CSS cơ bản cho hình ảnh điều khiển tùy chỉnh radio thay thế

Toàn bộ ý tưởng là có thể sao chép các tệp này vào thư mục con trong thư mục chủ đề của bạn, bao gồm tệp customizer.php từ tệp tin.php của bạn và thay đổi bất cứ điều gì bạn thích, bao gồm và đặc biệt là mảng tùy chọn, bằng cách sử dụng các móc nối của Trình tùy chỉnh chủ đề (giải thích trong Phần 4). Cập nhật: Trước đây, bạn chỉ chỉnh sửa tùy chọn.php, nhưng sử dụng hook giúp mọi thứ sạch sẽ hơn rất nhiều.

Bây giờ, hãy cho phép sử dụng một ví dụ thực tế – chúng tôi sẽ thêm điều khiển văn bản vào phần Tùy biến chủ đề mới. Mảng được đặt trong hàm trợ giúp và có bộ lọc được áp dụng cho nó khi được trả về. Bằng cách này, bạn có thể thêm nhiều tùy chọn từ một chủ đề con hoặc plugin. Đây là:

/ **
* Hàm trợ giúp chứa các tùy chọn chủ đề.
*
* @return mảng $ tùy chọn Mảng tùy chọn chủ đề
* @uses thsp_get_theme_customizer_fields () được xác định trong tùy biến / helpers.php
* /
hàm thsp_get_theme_customizer_fields () {

/ *
* Sử dụng chức năng trợ giúp để có được khả năng yêu cầu mặc định
* /
$ required_capability = thsp_sinstall_page_capability ();

$ tùy chọn = mảng (


// Phần ID
'new_customizer_section' => mảng (

/ *
* Chúng tôi đang kiểm tra xem đây có phải là phần hiện có không
* hoặc một cái mới cần phải được đăng ký
* /
'current_section' => sai,
/ *
* Phần đối số liên quan
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => mảng (
'title' => __ ('Tiêu đề mục mới', 'my_theme lòng địa chỉ'),
'description' => __ ('Mô tả phần mới', 'my_theme lòng địa chỉ'),
'ưu tiên' => 10
),

/ *
Mảng '' trường 'chứa tất cả các trường cần phải là
* được thêm vào phần này
* /
'trường' => mảng (

/ *
* ==========
* ==========
* Trương Văn bản
* ==========
* ==========
* /
// ID trường
'new lòng_field' => mảng (
/ *
* Thiết lập các đối số liên quan
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'settings_args' => mảng (
'mặc định' => __ ('Giá trị văn bản mặc định', 'my_theme nhiệtdomain'),
'loại' => 'tùy chọn',
'khả năng' => $ required_capability,
'vận chuyển' => 'làm mới',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kiểm soát các đối số liên quan
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => mảng (
'nhãn' => __ ('Nhãn kiểm soát văn bản mới', 'my_theme nhiệtdomain'),
'gõ' => 'văn bản', // Điều khiển trường văn bản
'ưu tiên' => 1
)
)

)

),

);

/ *
Móc lọc của bộ lọc * 'thsp_customizer_options' sẽ cho phép bạn
* thêm / xóa một số tùy chọn này khỏi chủ đề con
* /
trả về application_filters ('thsp_customizer_options', $ tùy chọn);

}

Cập nhật: Mảng vẫn giữ nguyên, nhưng bây giờ bạn cũng có thể chuyển mảng tùy chọn vào móc lọc, xem Phần 4 để biết thêm chi tiết.

Nhìn có vẻ phức tạp, tôi biết, nhưng hãy để tôi giải thích.

Các $ tùy chọn mảng bao gồm (các) phần (chỉ một trong trường hợp này – new_customizer_section), mỗi phần có các đối số, trường và giá trị boolean (current_section) để cho biết nếu đó là phần mới hay chúng ta chỉ thêm một số trường vào một trường hiện có một. Mảng đối số giống hệt với những gì bạn đã vượt qua $ wp_customize-> add_section phương pháp. Mảng trường phức tạp hơn một chút.

Cập nhật: mảng lựa chọn trong các đối số điều khiển giờ là mảng đa chiều.

Mỗi trường bao gồm một cài đặt Tùy biến và điều khiển Tùy biến. Đó là lý do tại sao chúng ta có mảng settings_args và control_args. Chúng gần giống hệt như các mảng đối số mà bạn đã vượt qua $ wp_customize-> add_setting$ wp_customize-> add_control phương pháp. Sự khác biệt duy nhất là ‘sự lựa chọn mảng mảng trong các đối số điều khiển, $ wp_customize-> add_control yêu cầu nó phải là một mảng khóa đơn giản => cặp giá trị và thay vào đó chúng tôi sử dụng một mảng đa chiều.

Bằng cách này, bạn có thể truyền nhiều dữ liệu hơn cho mỗi một trong số các lựa chọn, vì vậy, ví dụ, nếu bạn đang tải Google Fonts trong chủ đề của mình, bạn sẽ có thể có các chuỗi cho phép bạn tải phông chữ chính xác trong mảng lựa chọn . Bạn có thể thấy một ví dụ về điều này chủ đề sử dụng nồi hơi tùy biến.

Vì vậy, nếu bạn đã biết về ba phương pháp đó, thì nó rất quen thuộc.

Việc thêm một điều khiển hộp kiểm gần như giống nhau, bạn chỉ cần thay đổi ‘gõ vào thành‘ hộp kiểm tra trong ‘control_args mảng mảng:

/ *
* ==============
* Trường hộp kiểm
* ==============
* /
'new_checkbox_field' => mảng (
'settings_args' => mảng (
'mặc định' => đúng,
'loại' => 'tùy chọn',
'khả năng' => $ required_capability,
'vận chuyển' => 'làm mới',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => mảng (
'nhãn' => __ ('Nhãn điều khiển radio mới', 'my_theme nhiệtdomain'),
'gõ' => 'hộp kiểm', // Kiểm soát trường hộp kiểm
'ưu tiên' => 2
)
),

Điều khiển radio và chọn gần như giống nhau, bạn chỉ cần xác định các lựa chọn đã cho:

/ *
* ===========
* ===========
* Trường phát thanh
* ===========
* ===========
* /
'new_radio_field' => mảng (
'settings_args' => mảng (
'mặc định' => 'tùy chọn-2',
'loại' => 'tùy chọn',
'khả năng' => $ thsp_cbp_capability,
'vận chuyển' => 'làm mới',
),
'control_args' => mảng (
'nhãn' => __ ('Nhãn điều khiển radio mới', 'my_theme nhiệtdomain'),
'loại' => 'radio', // Điều khiển radio
'Lựa chọn' => mảng (
'tùy chọn-1' => mảng (
'nhãn' => __ ('Tùy chọn 1', 'my_theme lòng địa chỉ')
),
'tùy chọn-2' => mảng (
'nhãn' => __ ('Tùy chọn 2', 'my_theme lòng địa chỉ')
),
'tùy chọn-3' => mảng (
'nhãn' => __ ('Tùy chọn 3', 'my_theme lòng địa chỉ')
)
),
'ưu tiên' => 3
)
),

/ *
* ============
* ============
* Chọn trường
* ============
* ============
* /
'new_select_field' => mảng (
'settings_args' => mảng (
'mặc định' => 'tùy chọn-3',
'loại' => 'tùy chọn',
'khả năng' => $ thsp_cbp_capability,
'vận chuyển' => 'làm mới',
),
'control_args' => mảng (
'nhãn' => __ ('Nhãn trường chọn mới', 'my_theme nhiệtdomain'),
'gõ' => 'select', // Chọn điều khiển
'Lựa chọn' => mảng (
'tùy chọn-1' => mảng (
'nhãn' => __ ('Tùy chọn 1', 'my_theme lòng địa chỉ')
),
'tùy chọn-2' => mảng (
'nhãn' => __ ('Tùy chọn 2', 'my_theme lòng địa chỉ')
),
'tùy chọn-3' => mảng (
'nhãn' => __ ('Tùy chọn 3', 'my_theme lòng địa chỉ')
)
),
'ưu tiên' => 4
)
)

Và cuối cùng, hai loại điều khiển phức tạp được tích hợp trong WordPress – tải lên tệp và tải lên hình ảnh:

/ *
* ===========
* ===========
* Tải lên tệp
* ===========
* ===========
* /
'new_file_upload_field' => mảng (
'settings_args' => mảng (
'mặc định' => '',
'loại' => 'tùy chọn',
'khả năng' => $ thsp_cbp_capability,
'vận chuyển' => 'làm mới',
),
'control_args' => mảng (
'nhãn' => __ ('Tải lên tệp', 'my_theme lòng địa chỉ'),
'gõ' => 'tải lên', // Điều khiển trường tải lên tệp
'ưu tiên' => 5
)
),

/ *
* ============
* ============
* Tải lên hình ảnh
* ============
* ============
* /
'new_image_upload_field' => mảng (
'settings_args' => mảng (
'mặc định' => '',
'loại' => 'tùy chọn',
'khả năng' => $ thsp_cbp_capability,
'vận chuyển' => 'làm mới',
),
'control_args' => mảng (
'nhãn' => __ ('Tải lên hình ảnh', 'my_theme lòng địa chỉ'),
'type' => 'image', // Điều khiển trường tải lên hình ảnh
'ưu tiên' => 6
)
)

Lưu ý rằng tôi đã sử dụng Loại quảng cáo => tùy chọn trong việc thiết lập các đối số cho tất cả các trường này. Điều này sẽ cho phép tất cả các giá trị được lưu trữ dưới dạng một giá trị trong cơ sở dữ liệu của bạn. Thay thế là Gõ vào => ‘theme_mod nhưng bây giờ, hãy để dính vào với ‘tùy chọn.

Sử dụng mảng tùy chọn để thêm phần tùy chỉnh, cài đặt và điều khiển

Nếu bạn không chắc chắn làm thế nào để tương tác với Trình tùy chỉnh chủ đề WordPress, hãy đi và kiểm tra, bởi vì đó là những gì chúng tôi sẽ làm bây giờ. Sự khác biệt duy nhất là thay vì thêm các phần, cài đặt và điều khiển từng phần một, chúng tôi sẽ tự động hóa quy trình bằng cách sử dụng mảng nối tiếp mà chúng tôi đã tạo. Hãy để Lôi nhảy vào đó:

hàm thsp_cbp_customize_register ($ wp_customize) {

/ **
* Điều khiển tùy chỉnh
* /
yêu cầu (dirname (__ FILE__). '/custom-controls.php');


/ *
* Nhận tất cả các trường bằng cách sử dụng chức năng trợ giúp
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Nhận tên của mục nhập DB theo đó các tùy chọn sẽ được lưu trữ
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Lặp lại qua mảng và thêm các phần Tùy biến
* /
foreach ($ thsp_sections là $ thsp_section_key => $ thsp_section_value) {

/ **
* Thêm phần Tùy biến, nếu cần
* /
if (! $ thsp_section_value ['current_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Thêm phần
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // kết thúc nếu

/ *
* Lặp lại mảng 'trường' trong mỗi phần
* và thêm cài đặt và điều khiển
* /
$ thsp_section_fields = $ thsp_section_value ['field'];
foreach ($ thsp_section_fields là $ thsp_field_key => $ thsp_field_value) {

/ *
* Kiểm tra xem 'tùy chọn' hoặc 'theme_mod' được sử dụng để lưu trữ tùy chọn
*
* Nếu không có gì được đặt, phương thức $ wp_customize-> add_setting sẽ mặc định là 'theme_mod'
* Nếu 'tùy chọn' được sử dụng làm loại cài đặt, giá trị của nó sẽ được lưu trữ trong một mục trong
* {tiền tố} _options bảng. Tên tùy chọn được xác định bởi hàm thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['settings_args'] ['type']) && 'tùy chọn' == $ thsp_field_value ['settings_args'] ['type']) {
$ settings_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} khác {
$ settings_control_id = $ thsp_field_key;
}

/ *
* Thêm chức năng gọi lại mặc định, nếu không được xác định
* /
if (! [et ($ thsp_field_value ['settings_args'] ['sanitize_cb'])) {
$ thsp_field_value ['settings_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Thêm cài đặt Tùy biến
* /
$ wp_customize-> add_setting (
$ settings_control_id,
$ thsp_field_value ['settings_args']
);

/ **
* Thêm điều khiển Tùy biến
*
Giá trị * 'phần' phải được thêm vào mảng 'control_args'
* để kiểm soát có thể được thêm vào phần hiện tại
* /
$ thsp_field_value ['control_args'] ['phần'] = $ thsp_section_key;

/ *
* $ wp_customize-> phương thức add_control yêu cầu 'sự lựa chọn' là một khóa đơn giản => cặp giá trị
* /
if (isset ($ thsp_field_value ['control_args'] ['tests'])) {
$ thsp_cbp_choices = mảng ();
foreach ($ thsp_field_value ['control_args'] ['tests'] là $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['nhãn'];
}
$ thsp_field_value ['control_args'] ['tests'] = $ thsp_cbp_choices;
}


// Kiểm tra loại điều khiển
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_ustomize_Color_Control mới (
$ wp_customize,
$ settings_control_id,
$ thsp_field_value ['control_args']
)
);
} otherif ('hình ảnh' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_ustomize_Image_Control mới (
$ wp_customize,
$ settings_control_id,
$ thsp_field_value ['control_args']
)
);
} otherif ('tải lên' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_ustomize_Upload_Control mới (
$ wp_customize,
$ settings_control_id,
$ thsp_field_value ['control_args']
)
);
} khác {
$ wp_customize-> add_control (
$ settings_control_id,
$ thsp_field_value ['control_args']
);
}

} // kết thúc thuyết minh

} // kết thúc thuyết minh

}
add_action ('custom_register', 'thsp_cbp_customize_register');

Đi qua tất cả các phần, thêm các phần mà don hiến đã tồn tại, sau đó đi qua tất cả các trường trong mỗi phần, thêm cài đặt và điều khiển cho từng phần. Đó là tất cả những gì mà LỚN diễn ra ở đây.

Hãy nhớ rằng chúng tôi đã sử dụng ‘gõ vào = =‘ tùy chọn cho tất cả các cài đặt? Đó là lý do tại sao bây giờ chúng ta có Tôi my_theme_options [$ thsp_field_key] cho cả cài đặt và phần. Điều này sẽ lưu trữ tất cả các giá trị dưới dạng một mảng được tuần tự hóa mà bạn có thể truy xuất bằng cách sử dụng get_option (‘my_theme_options. Hoặc bạn chỉ có thể sử dụng các hàm trợ giúp được xác định trong người giúp việc.php để lấy cả giá trị hiện tại và giá trị mặc định cho tất cả các trường:

/ **
* Nhận giá trị tùy chọn
*
* Mảng chứa tất cả các giá trị tùy chọn
* Giá trị mặc định của tùy chọn được sử dụng nếu người dùng chưa chỉ định giá trị
*
* @uses thsp_get_theme_customizer_defaults () được xác định trong /customizer/options.php
* @return mảng Giá trị hiện tại cho tất cả các tùy chọn
* @since Theme_Customizer_Boilerplate 1.0
* /
hàm thsp_cbp_get_options_values ​​() {

// Nhận tùy chọn mặc định
$ tùy chọn_defaults = thsp_cbp_get_options_defaults ();

// Phân tích các tùy chọn được lưu trữ với mặc định
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), mảng ()), $ option_defaults);

// Trả về mảng đã phân tích cú pháp
trả lại $ thsp_cbp_options;

}


/ **
* Nhận mặc định tùy chọn
*
* Trả về một mảng chứa các giá trị mặc định cho tất cả các tùy chọn
*
* @uses thsp_get_theme_customizer_fields () được xác định trong /customizer/options.php
* @return mảng $ thsp_option_defaults Giá trị mặc định cho tất cả các tùy chọn
* @since Theme_Customizer_Boilerplate 1.0
* /
hàm thsp_cbp_get_options_defaults () {

// Lấy mảng chứa tất cả các trường tùy chọn chủ đề
$ thsp_sections = thsp_cbp_get_fields ();

// Khởi tạo mảng để giữ các giá trị mặc định cho tất cả các tùy chọn chủ đề
$ thsp_option_defaults = mảng ();

// Lặp qua mảng tham số tùy chọn
foreach ($ thsp_sections là $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['trường'];

foreach ($ thsp_section_fields là $ thsp_field_key => $ thsp_field_value) {

// Thêm khóa mảng kết hợp vào mảng mặc định cho từng tùy chọn trong mảng tham số
if (isset ($ thsp_field_value ['settings_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['settings_args'] ['default'];
} khác {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Trả về mảng mặc định
trả về $ thsp_option_defaults;

}

Có một điều nữa tôi nên đề cập đến – chức năng gọi lại vệ sinh mà chúng tôi đã chỉ định trong mảng ‘settings_args. Hàm được định nghĩa trong extend.php và chỉ đơn giản là chạy dữ liệu thông qua wp_kses_post chức năng:

/ **
* Chức năng gọi lại vệ sinh tùy biến chủ đề
* /
hàm thsp_sanitize_cb ($ input) {

trả về wp_kses_post ($ đầu vào);

}

Từ đâu đến đây?

Hiện tại, bạn có thể sử dụng Trình tùy chỉnh chủ đề này trong các chủ đề của mình, tất cả những gì bạn cần làm là tải xuống từ Github, sao chép vào thư mục chủ đề của bạn và bao gồm tệp chính từ hàm.php, có chức năng 100% và đủ tốt cho hầu hết chủ đề.

Vì chủ đề của bạn không phải là giống như hầu hết các chủ đề, nên tuần tới chúng tôi sẽ xem cách mở rộng bản tóm tắt bằng cách sử dụng bộ lọc và móc hành động của nó.

Tôi rất thích nghe làm thế nào bạn nghĩ rằng cái nồi hơi này có thể được cải thiện hoặc mở rộng, vì vậy xin vui lòng bỏ qua trong các ý kiến.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map