HƯỚNG DẪN CUSTOMIZER CỦA WORDPRESS – PHẦN 2

function customizerphone($wp_customize)
{
  $wp_customize->add_section(
    'sectionphone',
    [
      'priority'    => 1,
      'title'       => 'Số điện thoại'
    ]
  );
  $wp_customize->add_setting(
    'settingphone',
    [
      'default'   => '0914748166',
      'transport' => 'postMessage',
    ]
  );
  $wp_customize->add_control(
    'controlphone',
    [
      'settings'    => 'settingphone',
      'section'     => 'sectionphone',
      'label'       => 'Số điện thoại',
      'description' => "Số điện thoại hiển thị phần header",
      'type'        => 'text',
    ]
  );
}
add_action('customize_register', 'customizerphone');

<span><?php if(get_theme_mod('settingphone')){echo get_theme_mod('settingphone');} ?></span>

Trong phần 1, bạn đã biết được cách tự tạo một option trong Customizer và cách lôi dữ liệu được chọn trong option ra ngoài theme, điều đó có nghĩa là bạn đã nắm được cách thức hoạt động trong Customizer.

Có thể bạn sẽ hỏi là, làm thế nào để tạo một option in các category trong WordPress ra, làm sao để tạo được một cái color picker,….Và đó chính là những gì mà mình sẽ hướng trong phần 2 này.

Các kiểu option đặc biệt

1. Kiểu checkbox

Kiểu này nghĩa là bạn sẽ có những giá trị thiết lập sẵn, và khi khách chọn vào cái nào thì sẽ chọn giá trị đó.

Đầu tiên ta có code add setting như sau:

$wp_customize->add_setting (
        'option_checkbox'
    );

Và cuối cùng là code thêm control hiển thị trong customizer.

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

Bạn có thể thấy, nó chỉ khác đoạn code thêm control như trong phần 1 ta tìm hiểu là tham số type có giá trị là checkbox thay vì là text. Nghĩa là ta có loại option là checkbox.

Thường thì dùng kiểu này ta sẽ không cho nó hiển thị ra ngoài theme mà sẽ sử dụng nó như một điều kiện rẽ nhánh. Tức là nếu tùy chọn được chọn thì nó sẽ có giá trị bằng 1 mà không được trọn thì nó sẽ có giá trị rỗng. Như vậy ta có như sau:

<?php if ( get_theme_mod('option_checkbox') == '' ) {
     echo "Tùy chọn checkbox chưa được đánh dấu.";
} ?>

2. Kiểu Radio Checkbox

Kiểu radio checkbox nghĩa là sẽ có nhiều tùy chọn và bạn chỉ được chọn 1 tùy chọn duy nhất.

Ví dụ mình muốn hỏi khách có muốn hiển thị Logo không thì mình có code tạo option như sau:

 // Add settings
    $wp_customize->add_setting(
'show_logo',
        array(
            'default' => 'yes',
        )
    );
 
    // Add Control
    $wp_customize->add_control(
        'control_show_logo',
        array(
            'type' => 'radio',
            'label' => 'Bạn có muốn hiển thị logo?',
            'section' => 'section_a',
            'choices' => array(
                'yes' => 'Yes',
                'no' => 'No'
            ),
            'settings' => 'show_logo'
        )
    );

Bạn lưu ý trong phần tạo control, mình có type là radio và có thêm một tham số tên là choices. Trong tham số này, giá trị bên trái là giá trị mà nó sẽ lưu vào database và sẽ được gọi ra bằng get_theme_mod (yes, no), còn bên phải là chữ hiển thị tương ứng với giá trị đó trong Customizer (Yes, No).

3. Kiểu dạng Dropdown List

Kiểu này sẽ có một danh sách với các giá trị có sẵn và chọn một trong các giá trị đó, cách hoạt động tương tự như Radio Checkbox nhưng mà hiển thị gọn gàng hơn.

$wp_customize->add_setting(
    'setting_hosting',
    [
      'default' => 'AAA',
    ]
  );
  $wp_customize->add_control(
    'control_hosting',
    [
      'type'     => 'select',
      'label'    => 'Bạn đang dùng host ở đâu',
      'section'  => 'section_a',
      'settings' => 'setting_hosting',
      'choices'  => [
        '<a href="#" data-wpel-link="internal">a2hosting</a>'  => 'AAA',
        '<a href="#" data-wpel-link="internal">stablehost</a>' => 'BBB',
        '<a href="#" data-wpel-link="internal">wpengine</a>'   => 'CCC',
        'nuclear-energy'                                       => 'Nuclear Energy',
      ],
    ]
  );

4. Kiểu Color Picker

Kiểu này sẽ hiển thị ra một bảng tùy chọn mã màu và xuất ra giá trị là mã màu được chọn.

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

5. Kiểu chọn danh sách Pages

Kiểu này tương tự như kiểu Dropdown List nhưng giá trị của nó là các Pages đang có trong website của bạn và xuất ra giá trị là slug của page đó.

/* Page List */
  $wp_customize->add_setting(
    'setting_page'
  );

  $wp_customize->add_control(
    'control_page',
    [
      'type'    => 'dropdown-pages',
      'label'   => 'Chọn Page:',
      'section' => 'section_a',
      'settings' => 'setting_page',
    ]
  );

6. Kiểu upload ảnh

Nó sẽ tạo một form upload ảnh trong Customizer để người dùng có thể upload bất cứ cái gì lên, giá trị sẽ xuất ra là đường dẫn của file được upload lên.

Toàn bộ code trong bài

// wp customize
function customizer_a($wp_customize)
{
  $wp_customize->add_section(
    'section_a',
    [
      'priority'    => 1,
      'title'       => 'Title Section A',
      'description' => 'Description Section A',
    ]
  );
  $wp_customize->add_setting(
    'setting_a',
    [
      'default'   => 'Giá trị mặc định',
      'transport' => 'postMessage',
    ]
  );
  $wp_customize->add_control(
    'control_a',
    [
      'settings'    => 'setting_a',
      'section'     => 'section_a',
      'label'       => 'Khu vực A',
      'description' => "Description khu vực A",
      'type'        => 'text',
    ]
  );
  $wp_customize->add_setting(
    'setting_checkbox'
  );
  $wp_customize->add_control(
    'control_checkbox',
    [
      'type'     => 'checkbox',
      'label'    => 'Yes',
      'section'  => 'section_a',
      'settings' => 'setting_checkbox',
    ]
  );
  $wp_customize->add_setting(
    'show_logo',
    [
      'default' => 'yes',
    ]
  );
  $wp_customize->add_control(
    'control_show_logo',
    [
      'type'     => 'radio',
      'label'    => 'Bạn có muốn hiển thị logo?',
      'section'  => 'section_a',
      'choices'  => [
        'yes' => 'Yes',
        'no'  => 'No',
      ],
      'settings' => 'show_logo',
    ]
  );
  $wp_customize->add_setting(
    'setting_hosting',
    [
      'default' => 'AAA',
    ]
  );
  $wp_customize->add_control(
    'control_hosting',
    [
      'type'     => 'select',
      'label'    => 'Bạn đang dùng host ở đâu',
      'section'  => 'section_a',
      'settings' => 'setting_hosting',
      'choices'  => [
        '<a href="#" data-wpel-link="internal">a2hosting</a>'  => 'AAA',
        '<a href="#" data-wpel-link="internal">stablehost</a>' => 'BBB',
        '<a href="#" data-wpel-link="internal">wpengine</a>'   => 'CCC',
        'nuclear-energy'                                       => 'Nuclear Energy',
      ],
    ]
  );
  /* Color Picker */
  $wp_customize->add_setting(
    'setting_color',
    [
      'default' => '#000000',
    ]
  );
  $wp_customize->add_control(
    new WP_Customize_Color_Control(
      $wp_customize,
      'control_color',
      [
        'label'    => 'Màu nền',
        'section'  => 'section_a',
        'settings' => 'setting_color',
      ]
    )
  );
  /* Page List */
  $wp_customize->add_setting(
    'setting_page'
  );

  $wp_customize->add_control(
    'control_page',
    [
      'type'     => 'dropdown-pages',
      'label'    => 'Chọn Page:',
      'section'  => 'section_a',
      'settings' => 'setting_page',
    ]
  );
  /* Image Upload */
  $wp_customize->add_setting(
    'setting_upload'
  );

  $wp_customize->add_control(
    new WP_Customize_Image_Control(
      $wp_customize,
      'control_img',
      [
        'label'    => 'Ảnh nền',
        'section'  => 'section_a',
        'settings' => 'setting_upload',
      ]
    )
  );
}
add_action('customize_register', 'customizer_a');

LỜI KẾT

Trong phần này bạn có thể đã hiểu được thêm một vài loại option khác nữa nhằm sử dụng trong nhiều mục đích khác nhau. Nếu bạn vẫn chưa thỏa mãn được những gì mà WordPress hỗ trợ sẵn, thì trong phần sau mình sẽ hướng dẫn bạn cách tự làm một form option của riêng mình.

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