CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
Nếu như bài trước trong Seri Học WordPress cơ bản đã Hướng dẫn cách tạo Theme Option cho WordPress thì bài viết này nhằm mục đích giúp chúng ta tạo ra nhiều loại Field option hơn như: textbox, dropdown, media, editor, color picker, textarea, checkbox, multiple checkbox, radio, slider.
Với bộ source chuẩn tạo Theme Options Ws247 này bạn dễ dàng quản lý dưới dạng TAB và thêm các trường Field một cách dễ dàng nhất.
Link tải: https://wpshare247.com/plugin/bo-source-theme-option-wordpress-ws247-day-du-cac-dang-field
Nếu bạn thật sự cần một bộ Source tích hợp Theme Option cho WordPress thì bài viết này là món quà không thể tuyệt vời hơn dành cho bạn. Hãy dành thời gian làm theo từng bước từ trên xuống dưới bạn sẽ làm được thôi.
Let’s Go
1. Bộ Theme Option WordPress của Wpshare247 làm được gì?
Trước khi hướng dẫn bạn tích hợp bộ Source code, mình xin giới thiệu sơ lược qua Theme Option WordPress này làm được những gì?
1.1 Thêm Tab mới dễ dàng
1.2 Chuyển đổi kiểu Tab
Nếu như mục 1.1 quản lý theme option theo kiểu ngang horizontal, bạn vẫn có thể điều chỉnh thành dạng dọc vertical
1.3 Thay đổi vị trí Menu Admin
Cho phép bạn tùy chỉnh vị trí xuất hiện Menu Admin qua thông số position dễ dàng.
1.4 Đầy đủ kiểu Trường option (Option Fields)
Với bộ Source Theme Option này bạn không cần lo lắng về các dạng Field,bởi vì chúng tôi đã hỗ trợ bạn từ các trường đơn giản đến phức tạp của WordPress như: textbox, dropdown, media, editor, color picker, textarea, checkbox, multiple checkbox, radio, slider.
1.5 Khai báo các Field vào Tab dễ dàng đơn giản
Chỉ cần một thao tác rất đơn giản Copy và Paste là có thể tạo mới một Field nhanh chóng. Mọi thao tác cập nhật đã được chúng tôi giải quyết.
1.6 Dễ dàng mở rộng
Nếu như bộ Field cung cấp chưa đủ để bạn sử dụng, bạn có thể tự thêm các kiểu trường khác theo ý mình một cách dễ dàng.
2. Download tải Theme Option WordPress
Trước tiên, bạn cần tải Source WordPress Theme Option tại link => https://wpshare247.com/plugin/bo-source-theme-option-wordpress-ws247-day-du-cac-dang-field
Nhấp vào “Tải Về” sau đó làm theo hướng dẫn bên dưới.
3. Cách cài Theme Option WordPress của Wpshare247
Sau khi đã download code tại bước 2. Hãy làm theo thứ tự các bước từ trên xuống dưới rất dễ dàng thôi.
3.1 Giải nén
Giải nén file Bo-Source-ThemeOption247.zip
Tiếp theo giải nén file wpshare247-options.zip (Đây chính là bộ source theme option wpshare247)
3.2 Nhúng theme option vào theme WordPress
Sau khi giải nén, copy thư mục wpshare247-options vào theme bạn đang sử dụng của code WP.
Nhúng dòng code sau vào file functions.php của theme.
require_once get_parent_theme_file_path( '/wpshare247-options/wpshare247-options_index.php' );
Sau khi cài đặt thành công, đăng nhập vào quản trị Admin bạn sẽ thấy xuất hiện Menu như sau:
Chúc mừng bạn đã cài đặt thành công. Giờ hãy chuyển sang bước bên dưới để biết cách sử dụng.
4. Cách sử dụng Theme Option WordPress
4.1 Tạo Tab và Cấu hình
Để tạo tab cho theme option bạn mở file wpshare247-options/tabs/tab_index.php
Thêm dòng này dưới cùng file vừa mở
require_once ( dirname(__FILE__) .'/tab_option_1.php' );
Bạn có thể đặt tên bất kì thay vì tab_option_1.php như tôi đặt.
Tiếp theo copy file tab_options_sample.php tại thư mục wpshare247-options/tabs/all-fields-demo vào thư mục wpshare247-options/tabs sau đó đổi tên tab_options_sample.php thành tab_option_1.php
Lúc này ta sẽ có file wpshare247-options/tabs/tab_option_1.php
Kiểm tra lại Theme Option bạn sẽ thấy giao diện như sau:
Bạn đã tạo thành công TAB số 1, để tạo tiếp TAB2, 3,…..n bạn chỉ cần nhân bản file tab_option_1.php thành tab_option_2.php, tab_option_3.php…..tab_option_n.php. Sau khi tạo các tab xong bạn nhớ khai báo tại tab_index.php
Để đổi vị trí các tab bạn chỉ cần thay đổi thứ tự require_once như sau:
require_once ( dirname(__FILE__) .'/tab_option_1.php' ); require_once ( dirname(__FILE__) .'/tab_option_3.php' ); require_once ( dirname(__FILE__) .'/tab_option_2.php' ); require_once ( dirname(__FILE__) .'/tab_option_n.php' );
4.2 Thêm Field vào Tab theme Option
Trong ví dụ này tôi sẽ hướng dẫn các bạn thêm tất cả các loại Field vào TAB1, các tab khác các bạn làm tương tự nhé.
Mở file tab_option_1.php
4.2.1 Field TextBox
<?php
$section_id = basename(__FILE__, ".php"); // auto create ID, you can name too
$arr_section[ $section_id ] =
array(
'title' => __( 'Tên tab 1', OPTIONS_TEXTDOMAIN ),
'description' => __( 'Mô tả tab', OPTIONS_TEXTDOMAIN ),
'fields' => array(
//only declare array fields here............./
// TextBox
array( 'id' => 'tab1_text',
'type' => 'text',
'label' => 'Text box',
'default' => '',
'placeholder' => 'Enter your value here',
'note' => 'Your note here......'
),
)
);
Kết quả sau khi thêm 1 field textbox vào tab theme option.
Giải thích:
array( 'id' => 'tab1_text',
'type' => 'text',
'label' => 'Text box',
'default' => '',
'placeholder' => 'Enter your value here',
'note' => 'Your note here......'
),
- id => dùng để lấy dữ liệu ra dùng. Các ID này không được trùng, bạn cần chú ý khi khai báo.
- type => loại field bao gồm ‘text’, ‘select’, ‘image’, ‘editor’, ‘color-picker’, ‘textarea’, ‘checkbox’, ‘checkbox_many’, ‘radio’, ‘slider’. Bạn chỉ khai báo type là 1 trong các kiểu trên.
- label => Có thể thay đổi
- default => Giá trị mặc định khi không nhập
- placeholder => Hướng dẫn người dùng nhập liệu
- note => Ghi chú nâng cao cho các trường
4.2.2 Các loại field khác
Để xem các loại Field khác bạn tham khảo tại file: wpshare247-options/tabs/all-fields-demo/all_fields_demo.php
// Text
array( 'id' => 'demo_text',
'type' => 'text',
'label' => 'Text box',
'default' => '',
'placeholder' => 'Enter your value here',
'note' => 'Your note here......'
),
// Select
array( 'id' => 'demo_select',
'type' => 'select',
'label' => 'Select',
'options' => array('0'=>'--Select--', '1'=>'Val 1', '2'=>'Val 2'),
'default' => '1',
'note' => 'Your note here......'
),
// Textarea
array( 'id' => 'demo_textarea',
'type' => 'textarea',
'rows' => 5,
'label' => 'Textarea',
'default' => 'Your default',
'placeholder' => 'Enter your value here',
'note' => 'Your note here......'
),
// Check Box 1
array( 'id' => 'demo_check_one',
'type' => 'checkbox',
'label' => 'Checkbox',
'default' => '1'
),
// Check Box Many
array( 'id' => 'demo_check_many',
'type' => 'checkbox_many',
'label' => 'Checkbox (Many)',
'options' => array( //'Checkbox 1' => 1, { 1 =>checked ; else 0 }
'Checkbox 1' => 1,
'Checkbox 8' => 1,
'Checkbox 6' => 1,
'Checkbox 22' => 1,
'Checkbox 4' => 0,
'Checkbox 400' => 1,
'Checkbox 100' => 1,
'Checkbox 7' => 0,
'Checkbox 105' => 1,
'Checkbox 9' => 1,
'Checkbox 12' => 0,
'Checkbox 20' => 0,
'Checkbox 5' => 0,
)
),
array( 'id' => 'demo_check_many_2',
'type' => 'checkbox_many',
'label' => 'Do you like country?',
'options' => array( //'Checkbox 1' => 1, { 1 =>checked ; else 0 }
'Việt Nam' => 1,
'Thái Lan' => 0,
'Ấn độ' => 0,
'Hồng Kong' => 1
)
),
// Radio
array( 'id' => 'demo_radio',
'type' => 'radio',
'label' => 'Radio',
'options' => array( 'Việt Nam' => 0,
'Thái Lan' => 0,
'Ấn độ' => 1,
'Hồng Kong' => 0
)
),
// Color Picker
array( 'id' => 'demo_color_picker',
'type' => 'color-picker',
'label' => 'Color Picker',
'default' => '#fff',
'note' => 'Your note here......'
),
// Image: is_multiple = true
array( 'id' => 'demo_image_single',
'type' => 'image',
'is_multiple' => false,
'hide_attribute' => false,
'label' => 'Images (Single)',
'default' => '',
'note' => 'Your note here......',
'btn_text' => 'Chọn hình',
'media_upload_title' => 'Select or Upload Media Of Your Chosen Persuasion',
'media_upload_btn_text' => 'Use this media',
'no_photo_text' => 'No photos. Please click below button to upload photo'
),
// Image: is_multiple = true
array( 'id' => 'demo_image',
'type' => 'image',
'is_multiple' => true,
'hide_attribute' => false,
'label' => 'Images (Multiple)',
'default' => '',
'note' => 'Your note here......',
'btn_text' => 'Chọn hình',
'media_upload_title' => 'Select or Upload Media Of Your Chosen Persuasion',
'media_upload_btn_text' => 'Use this media',
'no_photo_text' => 'No photos. Please click below button to upload photo'
),
array( 'id' => 'demo_slider',
'type' => 'slider',
'attribute_placeholder' => array( 'link'=>'Href http://',
'desciption'=>'Desciption',
'target'=>'Open new tab'
),
'label' => 'Top Slider',
'default' => '',
'note' => '',
'btn_text' => 'Add slide',
'media_upload_title' => 'Select or Upload Media Of Your Chosen Persuasion',
'media_upload_btn_text' => 'Use this media',
'no_photo_text' => 'No photos. Please click below button to upload photo'
),
// Editor
array( 'id' => 'demo_editor',
'type' => 'editor',
'label' => 'Editor',
'height' => '',
'default' => 'Your default content',
'note' => 'Your note here......'
),
Tùy vào mỗi loại dữ liệu mà bạn quyết định chọn loại field nào.
4.3 Các hàm lấy dữ liệu data của Field
4.3.1 Hàm Get
Cách dùng:
<?php echo wpshare247_get_option( 'tab1_hotline' ); // tab1_hotline là id của field; Lấy số hotline từ theme option
4.3.2 Hàm lấy đường dẫn của hình
<img src="<?php echo wpshare247_get_full_src('tab1_img_field'); ?>" alt="Source chuẩn tạo Theme Option cho WordPress dễ hiểu với đầy đủ các Trường - Field" />
4.3.3 Hàm lấy data của hình
Nếu bạn không muốn lấy url của hình hoặc slider để dùng ngay mà muốn sử dụng nâng cao, hãy thử dùng hàm sau:
<?php $arr_data = wpshare247_get_image_data( 'tab1_img_field_id' ); var_dump($arr_data);
4.3.4 Hàm lấy data của Slider
Tương tụ hàm lấy data của hình ảnh.
<?php $arr_data = wpshare247_get_image_data( 'tab1_slider_field_id' ); var_dump($arr_data);
4.3.5 Hàm lấy html slider
Nếu bạn muốn dùng dạng Slider, hàm wpshare247_the_slider_html sẽ giúp bạn tạo 1 đoạn mã html sẵn, tuy nhiên theme option chưa hỗ trợ nhúng thư viện jQuery, bạn cần phải nhúng chúng vào để slider hoạt động.
<?php
$slider_args_1 = array( 'size' => 'thumbnail',
'id' => 'slider_id',
'class' => array('slider' => 'clss1 clss2', 'item' => 'item1 item2', 'a' => 'link1 link2', 'img' => 'img1 img2' ),
'before_slider' => '<div id="wrapper_my_id">',
'after_slider' => '</div>',
'before_item' => '<div class="item-wrapper">',
'after_item' => '</div>',
'before_a' => '<div class="a-wrapper">',
'after_a' => '</div>',
'before_img' => '<div class="img-wrapper">',
'after_img' => '</div>',
'slider_tag' => 'ul',
'item_tag' => 'div',
'desciption_open' => '<span class="desciption">',
'desciption_close' => '</span>',
'desciption_last' => true,
'desciption_hide' => true,
);
wpshare247_the_slider_html('tab1_slider_field_id', $slider_args_1 ); // echo slider html
Bạn hãy thử thay đổi các tham số trong biến $slider_args_1 để thấy sự khác biệt.
4.3.6 Hàm filter content
<?php
wpshare247_the_content_field('tab1_editor_field_id');
Hàm này giúp chúng ta định dạng nội dung hiển thị HTML đẹp hơn, kiểu như dạng rich text. Thường dùng cho type = editor
Link tải: https://wpshare247.com/plugin/bo-source-theme-option-wordpress-ws247-day-du-cac-dang-field
Nếu bạn gặp khó khăn trong việc tạo theme option cho WordPress vui lòng truy cập vào nhóm Zalo Học WordPress Free bên góc phải màn hình, sẽ có người hỗ trợ bạn nhé.
CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%