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.

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.

Nhưng đối với những trang single khi tạo loop và phân trang thì thường xuất hiện 1 lỗi đó chính lỗi redirect. Nó sẽ chuyển về trang đầu tiên khi bạn nhấn vào trang 2 3 hoặc trang nào không phải trang là 1.

Đây là do wordpress nó mặc định như vậy. Cách fix là cách bạn sẽ fix hook redirect_canonical trả redirect về giá trị false khi vào  single. Bằng đoạn code sau:

add_filter('redirect_canonical','pif_disable_redirect_canonical');

function pif_disable_redirect_canonical($redirect_url) {
if (is_singular()) $redirect_url = false;
return $redirect_url;
}

Các bạn có thể đặt đoạn code sau vào function.php hoặc file nào có thể sử dụng dc function trong wordpress.

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

The post Lỗi redirect khi phân trang trong single wordpress 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.

Slideshow ảnh

Cách thức hoạt động

Các bạn sẽ tạo 1 page và copy shortcode plugin vào content pages.

Plugin sẽ tạo ra 1 album ảnh với 2 bộ lọc là category và tag. Khi bạn click vào ảnh sẽ hiễn thị slideshow xem ảnh.

Plugin được viết trên dựa theo Custom post nên các bạn có thể yên tâm quản lý 1 cách vô cùng đơn giản.

Màn khoe hàng của  mình đến đây là kết thúc nếu bạn nào thấy thích hãy liên hệ với mình nhé đừng ngại ngùng. Chúc các bạn 1 ngày đẹp trời!  Vô xem là vui rồi không cần phải share và like gì đâu. =))

The post Plugin furniture images tạo album, slideshow theo danh mục, tag appeared first on Hi You, I am Tade.

1.Cài đặt tiếng việt

Vào Setting >> General . Chọn ngôn ngữ và múi giờ

Cũng trong phần đó ta cài đặt phần người dùng đăng ký

2. Cài đặt hình ảnh

Vào Setting >> Media. Cài đặt thông số như sau

3. Cài đặt liên kết

Vào Setting >> Permalink. Chọn như hình

4. Cài đặt phần bình luận

Vào Setting >> Discussion. Làm như hình

Đến đây các bạn cấu hình xong cơ bản cho wordpress. Bài tiếp theo mình sẽ hướng dẫn các bạn cài theme và plugin.

Chúc các bạn buổi tối vui vẻ !

The post WordPress căn bản 2 – Cấu hình wordpress appeared first on Hi You, I am Tade.

Đầu tiên bạn cần phải có :

1. Database.

2. Source wordpress

Database – ở đây mình sữ dụng là wampserver thì các bạn sẽ vào đường dẫn localhost/phpmyadmin sau đó tạo 1 database mới và không làm gì cả.

Source wordpress – bạn có thể tại trên trang wordpress.org, tải về và giải nén ra. Bạn sẽ có 1 thư mục là wordpress , sau đó bạn sẽ chép thư mục này vào theo đường dẫn D:wampwww (ở đây mình cài wamp ổ D). chú ý : tên thư mục wordpress chính là tên dường dẫn site của bạn.

Xong bước chuẩn bị. Bắt đầu cài chúng ta sẽ vào đường dẫn site cần cài ở đây là localhost/wordpress

Chọn ngôn ngữ và continue => let’s go => bạn sẽ được giao diện như vầy.

Ta sẽ chỉnh các thông số

database name: tên database bạn đã tạo.

user name: dưới localhost là root nhé.

password: dưới localhost để  trống ko nhập gì.

database host: để nguyên localhost nhé.

Table prefix: Tiền tố table database bạn cứ để mặc định wp_

Sau khi submit => install wordpress => cài đặt thông tin site (tên site, tài khoản đăng nhập , mật khẩu đăng nhập, email) sau đó bấm install wordpress. Sau nó sẽ yêu cầu bạn đăng nhập tài khoản lúc nãy bạn nhập vào thế là xong. bạn đã cài đặt xong wordpress.

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

The post WordPress căn bản 1 – hướng dẫn cài đặt appeared first on Hi You, I am Tade.

Đầu tiên và cũng nhanh nhất là sữ dụng plugin. Một vài plugin có thể dùng như là:

CPT Custom Icon bạn chỉ cần vào cài đặt và chọn thôi.

Custom Post Type UI  Bạn có thể dùng plugin này tạo và quản lý custom post types.

Wordpress hỗ trợ 1 thư viện icon cho bạn lựa chọn bạn có thể vào link Dashicons website để tìm.

Cách 2 dùng code thêm vào trong custom post. Bạn sẽ dùng đoạn code sau:

	'menu_icon'           => 'dashicons-cart',

Bạn cũng có thể sử dung đoạn url icon

'menu_icon'           => 'http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png',

Đoạn code tạo custom post với menu icon

// Register Custom Post Type
function custom_post_type() {

	$labels = array(
		'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
		'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'           => __( 'Products', 'text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
		'all_items'           => __( 'All Items', 'text_domain' ),
		'view_item'           => __( 'View Item', 'text_domain' ),
		'add_new_item'        => __( 'Add New Item', 'text_domain' ),
		'add_new'             => __( 'Add New', 'text_domain' ),
		'edit_item'           => __( 'Edit Item', 'text_domain' ),
		'update_item'         => __( 'Update Item', 'text_domain' ),
		'search_items'        => __( 'Search Item', 'text_domain' ),
		'not_found'           => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
	);
	$args = array(
		'label'               => __( 'Products', 'text_domain' ),
		'description'         => __( 'Post Type Description', 'text_domain' ),
		'labels'              => $labels,
		'supports'            => array( ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-cart'
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	register_post_type( 'Products', $args );

}

// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

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

The post Thêm icon khi tạo custom post types trong wordpress appeared first on Hi You, I am Tade.