Hôm nay mình sẽ hướng dẫn cách sử dụng nút media trong quản trị wordpress để upload hình ảnh.

Cốt lỏi của vấn đề là sử dụng đối tượng meta_image_frame trong thư viện wordpress. Mình sẽ tiến hành từng bước để các bạn nắm rõ:

Bước 1: Tạo layout dạng HTML vu vơ và có các nút Media button

<div class="wrap" id="theme_option">
   
    <div class="container-fluid">
        <div class="Logo">
            <div class="box-title" data-toggle="collapse" href="#logo" aria-expanded="false" aria-controls="logo">Logo <span class="dashicons dashicons-arrow-right-alt2 navbar-right"></span></div>
            <div id="logo" aria-expanded="false" class="collapse in">
                <div id="images-container" class="form-group">
                    <div class="input-group">
                        <input type="text" name="wp_theme_logo_image" id="logo-image" class="form-control" value="">
                        <div class="input-group-addon">
                            <input type="button" class="logo-image-button btn btn-primary " value="Chọn hình">
                            <input type="button" class="remove-logo btn btn-primary" value="Xóa">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div><!-- end images container -->
            </div>
        </div>
    </div>
</div>

Bước 2: Khai báo thư viện Media và Script để gọi

function wp_artisans_theme_back_end()
{
    wp_enqueue_media();
    wp_enqueue_script('custom', WP_PLUGIN_URL . '/Tester/bootstrap/js/admin_custom.js', array(),'',true );
}
add_action( 'admin_enqueue_scripts2', 'wp_artisans_theme_back_end' );

File Script

jQuery(document).ready(function($){
  // add image uploader functionality
        var meta_image_frame;
      $('.logo-image-button').live('click', function(e){
            e.preventDefault();

            if( meta_image_frame ){
             meta_image_frame.open();
                return;
            }

            meta_image_frame = wp.media.frames.file_frame = wp.media({
                title: 'Add Images',
                button: {text: 'Add to Images'},
                library: { type: 'image'}
            });

            meta_image_frame.on('select', function(){
                var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

                   var url = '';

                $('#logo-image').val(media_attachment.url);
            });

            meta_image_frame.open();

      });
$('.remove-logo').click(function(){
$('#logo-image').val('');   
})
    
})

Lưu ý:

Bạn cần gọi hook admin_enqueue_scripts2  

Đến đây là xong !

Chúc các bạn may mắn.

The post Sử dụng media của wordpress để tải hình ảnh appeared first on Hi You, I am Tade.

Đối với bản version 2.1 mình có nâng cấp, thêm mới 1 số chức năng so với bản trước đây và cũng lược bỏ 1 số thành phần. Các bạn có thể xem bản củ Plugin lấy tin ở đây.

Đầu tiên mình sẽ trình bày về những phần được mình nâng cấp và bổ sung nhe.

1.Giao diện plugin

_ Được mình tối ưu đơn giản hết mức có thể. Gồm 2 phần chính là Test Site và Show Post

_ Test Site: Kiểm tra site mới và kiểm tra tin lấy về. Phần Test site này là phần mình bổ sung mới so với bản trước đây, bạn có thể test theo danh sách và theo trang single.

_ Show Post: Phần này thì mình chỉ thay đổi giao diện một chút và gôm lại 2 phần là lưu tin theo danh sách và lưu từng tin lại thành một.

2.Quản lý và cài đặt

_ Mình đã thay đổi phần quản lý và cài đặt thành quản lý của wordpress. Các bạn có thể cấu hình và cà đặt dễ hơn như trong post.

3.Tính năng mới và tốc độ.

_ So với bản trước đây thì version 2.1 có thể lấy được 1 lúc nhiều link trong 1 site. Và đặc biệt hơn là có thể lấy nhiều site cùng 1 lúc.

_ Tốc độ cũng được mình cải thiện lên khá nhiều nếu không nói là nhanh hơn.

_ Chắc các bạn đang thắc mắc tại sao version này lại không có phần edit link lỗi. Câu trả lời là mình đã auto fix cho các bạn luôn rồi. Khi các  bạn lấy link về thì sẽ được plugin tự động chỉnh sửa link không phải sửa thủ công như version củ nữa.(Cám ơn mình đi)

Bên cạnh những phần bổ sung thì cung có những phần mình lược bỏ.

_ Mình bỏ phần set trạng thái bài viết, danh mục bài viết.(Phần này mình thấy trong quan lý post cũng có và cũng khá tiện nên mình lược bỏ luôn)

_ Phần lưu trữ link lấy về.(Phần này do mình lấy tin về thấy tốc độ nhanh quá nên bỏ luôn =))  )

Đánh giá chung:

*Ưu điểm

_ Dĩ nhiên bản nâng cấp nó phải ok hơn cái củ rồi, mình tập trung chủ yếu vào 2 phần là lấy nhiều tin hơn và làm cho tốc độ lấy nhanh hơn.

_ Giao diện thì nhìn cũng thoáng hơn và dễ sử dựng hơn trước.(Mình tự đánh giá nhé)

*Nhược điểm

_ Mình chưa nghỉ ra =)) đùa đó. Nó vẫn còn thiếu nhiều thứ như trạng thái, danh mục , Tag, Slug.

_ Nhưng trên cơ bản thì mình cũng khá hài long rồi vì nó đúng tiêu chí ban đầu trước khi mình nâng cấp.

*Video hướng dẫn

https://www.youtube.com/watch?v=CMabgiBQWqM

Chúc các bạn một ngày vui vẻ.

The post Plugin lấy tin tự động version 2.1 appeared first on Hi You, I am Tade.

Các loại template các bạn dùng custom post, archive và page.

Các hook được sử dụng: single_template, archive_template và page_template

Tiến hành code.

1.Custom post

Đối với custom post ta dung hook single_template. ‘ YOUR_CUSTOM_POST ‘ là tên custom post của bạn dùng. 

function get_custom_post_type_single($single_template) {
    global $post;
    if ($post->post_type == 'YOUR_CUSTOM_POST') {
        $single_template = dirname( __FILE__ ) . '/single-YOUR_CUSTOM_POST.php';
    }
    return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_single' );

2.Archive

Đối với trang archive ta dung hook archive_template. ‘ YOUR_TAXONOMY ‘ là tên taxonomy của bạn dùng.

function get_custom_archive($archive_template){
    global $wpdb;
    $archive =$wpdb->last_result;
    if ( $archive[0]->taxonomy==  'YOUR_TAXONOMY' ) {
        $archive_template = dirname( __FILE__ ) . '/archive-YOUR_TAXONOMY.php';
    }
    return $archive_template;
}
add_filter( "archive_template", "get_custom_archive" ) ;

3.Page Template

Đối với page bạn phải chọn slug chính xác thì template mới được sử dụng.

add_filter( 'page_template', 'wpa_page_template' );
function wpa_page_template( $page_template )
{
if ( is_page( YOUR_SLUG ) ) {
$page_template = dirname( __FILE__ ) . '/templates/template-YOUR_SLUG.php';
}
return $page_template;
}

Chúc các bạn thành công !

The post Tạo template trong plugin wordpress appeared first on Hi You, I am Tade.

Phần 2 mình sẽ hướng dẫn về cách ẩn slug trên taxonomy custom post khi show bài viết. Các bạn nào chưa xem phần 1 hướng dẫn về cách ẩn slug trên custom post.

Phần này mình sẽ hướng dẫn theo 2 cách , thứ nhất là dung hook trong code wordpress, hai là dùng plugin wordpress. Cách 2 có thể dùng dễ dàng cho các bạn không rành về code wordpress.

1.Dùng hook request để ẩn slug taxonomy

add_filter('request', 'rudr_change_term_request', 1, 1 );

function rudr_change_term_request($query){

$tax_name = 'report_category';
if( $query['attachment'] ) :
$include_children = true;
$name = $query['attachment'];
else:
$include_children = false;
$name = $query['name'];
endif;
$term = get_term_by('slug', $name, $tax_name);

if (isset($name) && $term && !is_wp_error($term)):

if( $include_children ) {
unset($query['attachment']);
$parent = $term->parent;
while( $parent ) {
$parent_term = get_term( $parent, $tax_name);
$name = $parent_term->slug . '/' . $name;
$parent = $parent_term->parent;
}
} else {
unset($query['name']);
}

switch( $tax_name ):
case 'category':{
$query['category_name'] = $name; // for categories
break;
}
case 'post_tag':{
$query['tag'] = $name; // for post tags
break;
}
default:{
$query[$tax_name] = $name; // for another taxonomies
break;
}
endswitch;

endif;

return $query;

}

Note* Trong phần này mình dùng hàm rudr_change_term_request để filter hook request

2. Dùng plugin wp htaccess control

Các bạn vào setting >> htaccess control

Chọn Remove Taxonomies and author base sau đó tắt các slug taxonomy mà bạn muốn.

Sau đó save lại. nếu vẫn chưa hoạt động các bạn vào setting >> permalink bấm  save lại.

Chúc các bạn thành công !

The post Xóa slug trên custom post và custom taxonomy: Phần 2 appeared first on Hi You, I am Tade.

Đầu tiên về custom post (nếu bạn nào chưa biết về custom post có thể xem bài viết trước của mình).

1.Xóa slug trên custom post trong trang single:

Link custom post single ban đầu: https://hoangthuc.com/report/bao-cao-thu-chi/

Link custom post single cần thay thành: https://hoangthuc.com/bao-cao-thu-chi/

Custom post type mình làm ở đây là “report” nếu làm bạn có thể tùy biến custom post này. Các bạn vào file fucntions.php và thêm đoạn code có định dạng bên dưới.

// remove slug custom_post type
function na_remove_slug( $post_link, $post, $leavename ) {

    if ( 'report' != $post->post_type || 'publish' != $post->post_status ) {
        return $post_link;
    }

    $post_link = str_replace( '/' . $post->post_type . '/', '/', $post_link );

    return $post_link;
}
add_filter( 'post_type_link', 'na_remove_slug', 10, 3 );

Note* Trong phần này bạn sẽ dung hàm na_remove_slug để filter vào hook post_type_link

2. Xữ lý lỗi 301 redirect khi chuyển:

Trong quá trình remove slug như bước 1 wp sẽ xuất hiện lỗi 301 không tìm thấy trang. Cách xữ lý.

function na_parse_request( $query ) {

    if ( ! $query->is_main_query() || 2 != count( $query->query ) || ! isset( $query->query['page'] ) ) {
        return;
    }

    if ( ! empty( $query->query['name'] ) ) {
        $query->set( 'post_type', array( 'post', 'report', 'page' ) );
    }
}
add_action( 'pre_get_posts', 'na_parse_request' );

Sau đó các bạn và Setting => Permalink và Save button lại để hoàn tất.

Chúc các bạn thành công !

The post Xóa slug trên custom post và custom taxonomy: Phần 1 appeared first on Hi You, I am Tade.

/**
 * Display time since post was published
 *
 * @uses	human_time_diff()  Return time difference in easy to read format
 * @uses	get_the_time()  Get the time the post was published
 * @uses	current_time()  Get the current time
 *
 * @return	string  Timestamp since post was published
 *
 * @author c.bavota
 */
function get_time_since_posted() {

	$time_since_posted = human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) . ' ago';

	return $time_since_posted;

}

Bây giờ các bạn có thể sử dụng hàm get_time_since_posted() để hiển thị thời gian từ ngày đăng bài cho đến hiện tại trong loop wordpress.
Tham khảo hàm human_time_diff() tại http://codex.wordpress.org/Function_Reference/human_time_diff

The post Hiển thị thời gian kể từ ngày đăng trong wordpress appeared first on Hi You, I am Tade.

Trước hết mình xin giới thiệu cách tạo custom post đơn giản nhất có thể dành cho người không chuyên về code đó là dùng plugin. Các plugin cho phép bạn tạo mọi thứ về custom post như taxonomy, field , post type,…

Custom post type UI

Type

Đây là 2 plugin mình đã sử dụng qua và theo đánh giá của mình thì rất đầy đủ.

Và cách thứ 2 mình muốn hướng dẫn đó là code. Các bạn có thể tích hợp trong plugin, hoặc theme.

Khởi tạo custom post type

<?php
 if( ! function_exists( 'Domain_create_post_type' ) ) :
 function Domain_create_post_type() {
 $labels = array(
 'name' => 'Domain',
 'singular_name' => 'Domain',
 'add_new' => 'Add Domain',
 'all_items' => 'All Domain',
 'add_new_item' => 'Add Domain',
 'edit_item' => 'Edit Domain',
 'new_item' => 'New Domain',
 'view_item' => 'View Domain',
 'search_items' => 'Search Domain',
 'not_found' => 'No Domain found',
 'not_found_in_trash' => 'No Domain found in trash',
 'parent_item_colon' => 'Parent Domain'
 //'menu_name' => default to 'name'
 );
 $args = array(
 'labels' => $labels,
 'public' => true,
 'has_archive' => true,
 'publicly_queryable' => true,
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'supports' => array(
 'title',
 'editor',
 ),
 'menu_position' => 5,
 'menu_icon' => 'dashicons-clipboard',
 'exclude_from_search' => false,
 'register_meta_box_cb' => 'domain_add_post_type_metabox'
 );
 register_post_type( 'domain', $args );

register_taxonomy( 'domain_category', // register custom taxonomy - category
 'domain',
 array(
 'hierarchical' => true,
 'labels' => array(
 'name' => 'Domain category',
 'singular_name' => 'Domain category',
 )
 )
 );
 register_taxonomy( 'domain_tag', // register custom taxonomy - tag
 'domain',
 array(
 'hierarchical' => false,
 'labels' => array(
 'name' => 'Domain tag',
 'singular_name' => 'Domain tag',
 )
 )
 );
 }
 add_action( 'init', 'Domain_create_post_type' );
endif;

 function domain_add_post_type_metabox() { 
 add_meta_box( 'domain_metabox', 'Information', 'domain_metabox', 'domain', 'normal' );
 }


 function domain_metabox() {
 global $post;
 $registrar = get_post_meta($post->ID, 'registrar', true);

echo '<div class="form-horizontal" > 
<div class="form-group"> 
<label for="inputEmail3" class="col-sm-2 control-label">Registrar</label> 
<div class="col-sm-10"> <input type="text" class="form-control" name="registrar" value="'.$registrar .'" > 
</div> </div>
</div>'; 

function domain_post_save_meta( $post_id, $post ) { 
 $domain_post_meta['registrar'] = strtotime($_POST['registrar']);
 foreach( $domain_post_meta as $key => $value ) { 
 $value = implode(',', (array)$value); 
 if( get_post_meta( $post->ID, $key, FALSE ) ) { 
 update_post_meta($post->ID, $key, $value);
 } else { 
 add_post_meta( $post->ID, $key, $value );
 }
 if( !$value ) { 
 delete_post_meta( $post->ID, $key );
 }
 }
 }
 add_action( 'save_post', 'domain_post_save_meta', 1, 2 ); 
?>

Trong đây mình có làm phần tích hợp meta box nếu các bạn thấy không cần thiết thì bỏ ra nhé.

Chúc các bạn thành công !

The post WordPress nâng cao 1: Custom post type appeared first on Hi You, I am Tade.

1.Khỏi tạo Meta Box 

function wpdocs_register_meta_boxes() {
add_meta_box( 'meta-box-id', __( 'INFO', 'WA' ), 'wpdocs_my_display_callback', 'post' );
}
add_action( 'add_meta_boxes', 'wpdocs_register_meta_boxes' );

ở đây ta chú ý post type là “post” nhé các bạn có thể tùy chỉnh theo từng loại post type ví dụ “page” cho trang.

2.Nội dung hàm hiển thị Meta box

function wpdocs_my_display_callback( ) {
global $post;
$meta_post_title = get_post_meta($post->ID, 'meta_post_title', true);
$post_desc = get_post_meta($post->ID, 'post_desc', true);
?>
<table class="form-table">
<tr>
<th>
<label>Title</label>
</th>
<td>
<textarea name="meta_post_title" class="large-text"><?php echo $meta_post_title; ?></textarea>
</td>
</tr>
<tr>
<th>
<label>Description</label>
</th>
<td>
<textarea name="post_desc" class="large-text"><?php echo $post_desc; ?></textarea>
</td>
</tr>
</table>
<?php
}

3. Hàm lưu lại giá trị

add_action( 'save_post', 'wpdocs_save_meta_box' );
function wpdocs_save_meta_box() {
global $post;
$quote_post_meta['meta_post_title'] = $_POST['meta_post_title'];
$quote_post_meta['post_desc'] = $_POST['post_desc'];

foreach( $quote_post_meta as $key => $value ) { // cycle through the $quote_post_meta array
$value = implode(',', (array)$value); // if $value is an array, make it a CSV (unlikely)
if( get_post_meta( $post->ID, $key, FALSE ) ) { // if the custom field already has a value
update_post_meta($post->ID, $key, $value);
} else {
add_post_meta( $post->ID, $key, $value );
}
if( !$value ) {
delete_post_meta( $post->ID, $key );
}
}
}

Chúc các bạn thành công nhé !

The post Cách tạo meta box trong custom post wordpress appeared first on Hi You, I am Tade.