Tạo các trường tùy biến cho theme WordPress không cần sử dụng Plugin

Để thuận tiện hơn trong việc thay đổi các thông tin trên giao diện, WordPress đã có một tính năng cho phép bạn có thể tùy biến. Trong bài menu trong wordpress là một kiểu tùy biến theme, mình đã từng viết ở một số bài về menu rồi. Trong bài này mình sẽ hướng dẫn các bạn tạo ra các trường tùy biến như có thể thay đổi số điện thoại, tạo các tùy chọn, hình ảnh quảng cáo vào các vị trí,….Và chắc chắn là sẽ không sử dụng các Plugin.

Tìm hiểu qua chức năng tùy biến theme của WordPress

Bạn hãy vào phần “Tùy chỉnh” trong “Giao diện” ở trang quản trị.

Tại đây các bạn sẽ thấy các phần tùy biến có sẵn như

• Nhận dạng site: Cho phép bạn thay đổi tiêu đề trang, khẩu hiệu, logo,..
• Menu: Cho phép bạn tạo ra các trình đơn ở các vị trí phù hợp.
• CSS bổ sung: cho phép bạn tự định dạng lại giao diện phù hợp.

Ở “nhận dạng site”, bạn có thể sử dụng các thông tin trong này để thay đổi nội dung website nhưng nếu bạn sử dụng plugin SEO thì có thể điều này không cần thiết. Phần “menu” là phần bạn có thể sẽ sử dụng thường xuyên, đa phần là ở website có nhiều menu. “CSS bổ sung” thì hầu như rất ít sử dụng, mình dường như chưa bao giờ sử dụng đến nó.

Bên trên là các phần mặc định mà WP đã có sẵn cho bạn. Giả sử bạn muốn thay đổi giờ làm việc, thay đổi số điện thoại đặt hàng, số tư vấn, thông tin cuối trang,…. thì làm sao. Bạn có thể sử dụng các Plugin nhưng ở đây mình sẽ hướng dẫn bạn cách tạo ra các trường tùy biến mà không cần đến Plugin.

Tạo các trường tùy biến trong WordPress

Hãy mở file functions.php trong theme của bạn và tiến hành code đoạn như sau để tạo một section:

     $wp_customize->add_section (
          'section_a',
                      array(
                            'title' => 'Thông tin website',
                            'description' => 'Thông tin cơ bản của website',
                            'priority' => 25 ));

• Đoạn trên sẽ tạo ra một vùng chứa giống như nhận dạng site, menu, css bổ sung,…. description sẽ hiển thị mô tả của vùng này và priority là chỉ số ưu tiên.

Bây giờ chúng ta thêm cài đặt có ID là Address cho section.

$wp_customize->add_setting ('Address', array('default' => 'giá trị mặc định') );

• Ở đây bạn có thể để bất ID là gì, mình để là Address, và có thể truyền giá trị mặc định hoặc không.

Tiếp theo là add các control cho cài đặt trên

$wp_customize->add_control ('control_Address', array(
                                                     'label' => 'Địa chỉ showroom',
                                                     'section' => 'section_a',
                                                     'type' => 'text',
                                                     'settings' => 'Address'));

• label sẽ là nhãn của control, section là cái nó sẽ móc vào, ở trên là section_a mình đã tạo. Tiếp theo là type (kiểu control). Bạn có thể sử dụng kiểu text, number, password, checkbox, date,…

Cuối cùng là đưa nó vào một functions sau đó sử dụng hook add_action để add nó vào.

  function customizer_a( $wp_customize ) {
     // 3 nội dung ở trên, lần lượt nhé
  }
  add_action( 'customize_register', 'customizer_a' );

Bây giờ vào tùy chỉnh của giao diện bạn sẽ thấy như sau:

Một vùng chứa có tên Thông tin website xuất hiện

Control Địa chỉ showroom với kiểu text cũng xuất hiện

Một vài kiểu trường tùy biến khác trong wp

• Upload hình ảnh. Ví dụ để tải banner, logo,…

// IMG 
 $wp_customize->add_setting( 'logo' );
 // Tao IMG
 $wp_customize->add_control(
                        new WP_Customize_Image_Control(  $wp_customize,  'logo', array(
                                                                       'label' => 'Logo website',
                                                                       'section' => 'section_a',
                                                                       'settings' => 'logo'))
                                                );

Kết quả khi xuất ra là đường link đến hình ảnh. Bạn dùng code sau để hiển thị đoạn này

<img src ="<?php echo get_theme_mod( 'logo' ); ?>" />

Một ví dụ demo về việc sử dụng hình ảnh

• Tạo hộp thoại checkbox

Bạn có thể sử dụng cách này để đánh dấu các tùy chọn có thể xuất hiện nay không. Giả sử mình cho phép người dùng có thể lựa chọn việc xuất hiện hay không một phần nào đó trong theme.

//Checkbox
  $wp_customize->add_setting ( 'option_checkbox');

  $wp_customize->add_control('control_checkbox',array(
                              'type' => 'checkbox',
                              'label' => 'Yes',
                              'section' => 'section_a',
                              'settings' => 'option_checkbox')
                               );

Kết quả khi bạn sử dụng hộp này đó là nó sẽ hiện số 1 nếu được check và không có gì nếu không được check.

Ví dụ về Checkbox

• Tạo tùy chọn Radio button

Bạn có thể tạo ra nhiều tùy chọn bằng cách sử dụng các radio button.

 // Radio
 $wp_customize->add_setting('text_size',array('default' => 'yes'));
 
 // Add Control
 $wp_customize->add_control('control_text_size',array(
             'type' => 'radio',
             'label' => 'Kích thước chữ',
             'section' => 'section_a',
             'choices' => array(
                     '15' => 'Size 15',
                     '18' => 'Size 18',
                     '20' => 'Size 20'),

             'settings' => 'text_size')
 );

Ví dụ về Radio button

• Tạo list danh sách lựa chọn

Bạn có thể sử dụng control này tương tự như radio button. Nhưng với cách này bạn có thể dùng để lưu các giá trị dài tốt hơn là radio.

 /* Dropdown List Option */
 $wp_customize->add_setting('hosting_option', array('default' => 'Host A',));
 
 $wp_customize->add_control('hosting_option', array(
                                            'type' => 'select',
                                            'label' => 'Bạn đang dùng host ở đâu',
                                            'section' => 'section_a',
                                            'choices' => array(
                                                  '<a href="#">Bạn đã chọn host A</a>' => 'Host A',
                                                  '<a href="#">Bạn đã chọn host B</a>' => 'Host B',
                                                  '<a href="#">Bạn đã chọn host C</a>' => 'Host C',),)
                             );

Ví dụ về tạo Dropdown List

• Tùy chỉnh màu sắc cho website

Đây là một thành phần cực kỳ hấp dẫn cho 1 theme custome. Nếu bạn thiết kế theme để bán, bạn chắc chắn nên cho người dùng tự thay đổi màu sắc họ yêu thích.

/* Color Picker */
 $wp_customize->add_setting('color_option', array('default' => '#000000',));
 
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_option', array(
                                                                'label' => 'Màu nền',
                                                                'section' => 'section_a',
                                                                'settings' => 'color_option',))
                                                );

Ví dụ về thay đổi màu sắc cho theme

Sử dụng các trường tùy biến cho theme

Nhưng vậy là bạn đã tạo được một trường custome cơ bản cho theme của mình, và để add và theme thì sao. Hãy xem đoạn code sau:

<?php echo get_theme_mod( 'Address' ); ?>

Bạn đặt đoạn này vào chỗ nào của theme thì nó sẽ xuất hiện các dòng chữ mà bạn nhập và lưu lại trong các control.

Bài chia sẽ trên sẽ giúp bạn có thể tạo ra các tùy biến linh hoạt hơn trong theme mà không cần phải đụng chạm vào code sau này.

Nếu bạn thấy hay đừng quên chia sẻ nhé. Nếu bạn cần thêm hoặc chưa rõ chỗ nào có thể comment bên dưới mình sẽ trả lời nếu thấy.