Chia sẻ bộ Field Widget giúp bạn Thiết Kế Website WordPress nhanh hơn

[Có Update Mới]

Chỉ với bộ Source các Widget này đảm bảo các bạn có thể làm mọi Website trong thời gian ngắn nhất và có thể giống Web Mẫu 99%. Bộ tiện ích này sẽ chia thành 2 loại: Các trường widget Cơ bản và Nâng cao. Link Download ở cuối bài viết này

Các bạn chỉ cần copy và sửa lại key của các trường là có thể sử dụng lại trong các Widget WordPress. Nếu chưa biết cách tạo Widget như thế nào, bạn có thể xem lại bài này nhé https://wpshare247.com/huong-dan-cach-tao-moi-widget-don-gian-trong-wordpress

Xem Video Hướng Dẫn

1. Bộ field Widget cơ bản WordPress (Basic Fields)

1.1 Trường text – Text Field

<!-- text field -->
<p>
    <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Text', 'wpshare247'); ?></label>
    <input class="widefat" type="text" value="<?php echo esc_attr($instance['title']); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" id="<?php echo esc_attr($this->get_field_id('title')); ?>" />
</p>

1.2 Trường textarea – Textarea Field

<!-- textarea field -->
<p>
    <label for="<?php echo esc_attr($this->get_field_id('description')); ?>"><?php esc_html_e('Textarea', 'wpshare247'); ?></label>
    <textarea name="<?php echo esc_attr($this->get_field_name('description')); ?>" id="<?php echo esc_attr($this->get_field_id('description')); ?>" class="widefat"><?php echo esc_attr($instance['description']); ?></textarea>
</p>

1.3 Trường select box – Dropdown Field

<!-- select field -->
<p>
    <label for="<?php echo esc_attr($this->get_field_id('select_field')); ?>"><?php esc_html_e('Select box', 'wpshare247'); ?></label>
    <select id="<?php echo esc_attr($this->get_field_id('select_field')); ?>" class="widefat" name="<?php echo esc_attr($this->get_field_name('select_field')); ?>">
        <option value="" <?php selected("", $instance['select_field']); ?>><?php esc_html_e('--Chọn--', 'wpshare247'); ?></option>
        <option value="asc" <?php selected("asc", $instance['select_field']); ?>><?php esc_html_e('Tăng', 'wpshare247'); ?></option>
        <option value="desc" <?php selected("desc", $instance['select_field']); ?>><?php esc_html_e('Giảm', 'wpshare247'); ?></option>
    </select>
</p>

1.4 Trường checkbox – Checkbox Field

<!-- Checkbox field -->
<p>
    <input class="checkbox" type="checkbox" <?php checked( $instance[ 'ws247_checkbox_field' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>" name="<?php echo $this->get_field_name( 'ws247_checkbox_field' ); ?>" /> 
    <label for="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>"><?php esc_html_e('Checkbox'); ?></label>
</p>

1.5 Trường checkbox chọn nhiều – Multiple Checkbox Field

<!-- Checkbox field -->
<p>
    <input class="checkbox" type="checkbox" <?php checked( $instance[ 'ws247_checkbox_field' ], 'on' ); ?> id="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>" name="<?php echo $this->get_field_name( 'ws247_checkbox_field' ); ?>" /> 
    <label for="<?php echo $this->get_field_id( 'ws247_checkbox_field' ); ?>"><?php esc_html_e('Checkbox'); ?></label>
</p>

<!-- Checkbox list field -->
<?php $arr_checkbox_list = array('vn' => 'Checkbox 1', 'tl' => 'Checkbox 2', 'ml' => 'Checkbox 3', 'id' => 'Checkbox 4'); ?>
<p>
    <label for="<?php echo esc_attr($this->get_field_id('checkbox_list')); ?>"><?php esc_html_e('Checkbox List', 'wpshare247'); ?></label>
    <ul>
    <?php 
        $arr_checkbox_list_data = ($instance["checkbox_list"]) ? $instance["checkbox_list"] : array();
        if($arr_checkbox_list):
            foreach($arr_checkbox_list as $key => $val): 
            ?>
                <li>
                    <input class="checkbox" id="<?php echo $this->get_field_id("checkbox_list") . $key; ?>" name="<?php echo $this->get_field_name("checkbox_list"); ?>[]" type="checkbox" value="<?php echo $key; ?>" <?php checked("1", in_array($key, $arr_checkbox_list_data)); ?> /> 		
                    <label for="<?php echo $this->get_field_id("checkbox_list") . $key; ?>"><?php echo $val; ?></label>
                </li>
    <?php
            endforeach;
        endif;
    ?>
    </ul>
</p>

1.6 Trường radio – Radio Field

<!-- Radio field -->
 <p>
    <label for="<?php echo esc_attr($this->get_field_id('ws247_radio_field')); ?>"><?php esc_html_e('Radio', 'wpshare247'); ?></label>
    <ul>
        <li>
            <input class="checkbox" type="radio" id="<?php echo $this->get_field_id( 'ws247_radio_field' ); ?>" name="<?php echo $this->get_field_name( 'ws247_radio_field' ); ?>" value="nam" <?php checked( $instance[ 'ws247_radio_field' ], 'nam' ); ?> /> 
            <label for="<?php echo $this->get_field_id( 'ws247_radio_field' ); ?>"><?php esc_html_e('Nam'); ?></label>
        </li>
        <li>
            <input class="checkbox" type="radio" id="<?php echo $this->get_field_id( 'ws247_radio_field_2' ); ?>" name="<?php echo $this->get_field_name( 'ws247_radio_field' ); ?>" value="nu" <?php checked( $instance[ 'ws247_radio_field' ], 'nu' ); ?> /> 
            <label for="<?php echo $this->get_field_id( 'ws247_radio_field_2' ); ?>"><?php esc_html_e('Nữ'); ?></label>
        </li>
    </ul>
</p>

Bạn có thể tải Widget mẫu chứa các field cơ bản tại đây

? wpshare247_basic_fields.php

2. Bộ field Widget nâng cao WordPress

Giới thiệu sơ lược các Field nâng cao của Widget giúp bạn Thiết Kế Web nhanh hơn.

2.1 Trường lặp lại, sắp xếp – Sortable Repeater Field

2.2 Trường hình – Image Field Upload

2.3 Trường chọn màu sắc – Color Picker Field

2.4 Trường chọn Form liên hệ – Contact Form 7 Field

2.5 Trường chọn Trang, Bài viết, Sản Phẩm – Page id, Post id, Product id Field

2.6 Trường chọn Menu – Navigation Menu Field

Update trường mới Version 2

2.7 Trường chọn Datepicker Field chọn ngày tháng năm

2.8 Trường Thư viện hình Photo Gallery Field

2.9 Trường Autocomplete Field

Để sử dụng được các field Widget nâng cao này, bạn vui lòng download tại đây nhé:

? Bộ Source Widget Ws247