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

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>