Post Formats – Hỗ trợ định dạng bài viết trong WordPress 3.6

Như đã biết, WordPress có hỗ trợ và cho phép custom để sử dụng, sẽ thay đổi lại vị trí hiển thị thành phần này trong giao diện soạn thảo nội dung để được chú ý hơn.

 Post Formats   Hỗ trợ định dạng bài viết trong WordPress 3.6

Tuy nhiên theo thông tin mới nhất mà mình cập nhật được thì tính năng này đã được tách ra thành một plugin riêng, một phần lý do mà mình biết được đó là do số lượng người sử dụng WordPress đại đa phần chưa thực sự quan tâm lắm tới việc của mình như thế nào và việc để toàn bộ Icon post format rất to như hình ở trên sẽ không hợp lý thay bằng những thành phần khác mà được đại đa số người dùng quan tâm. Chúng ta chờ đợi thêm một thời gian để trải nghiệm một phiên bản 3.6 WordPress  tung ra phiên bản chính thức  sẽ có gì nổi bật hơn nhé.  Với chủ đề này mình sẽ tách ra từng phần để việc tìm hiểu sẽ dễ dàng hơn, dưới đây là bài viết mà mình cảm thấy rất hay từ website:  http://bcdonline.net

Hôm nay mình muốn giới thiệu một tính năng cũng khá hay của WordPress được phát triển từ phiên bản 3.1  tuy nhiên về phần này ít được mọi người chú ý đến, thường sẽ sử dụng cho một theme blog cá nhân, chia sẽ kinh nghiệm và cho doanh nghiệp… đó là Post Formats trong WordPress.

Sử dụng Post Formats

Trong lúc trình bày bài viết, ở mỗi định dạng, kiểu bài viết ta có thể sử dụng được icon khác nhau tạo được sự đa dạng, sáng tạo cũng như làm cho theme của chúng ta thêm sinh động và hấp dẫn người xem hơn.

Demo Post Formats trong WordPress Post Formats   Hỗ trợ định dạng bài viết trong WordPress 3.6

Demo Post Formats trong WordPress

Như hình trên bạn có thể thấy, nếu bài viết chia sẻ về photo thì là biểu tượng icon photo, bài viết chia sẻ audio thì biểu tượng là một audio… rất nhiều kiểu khác nữa cho bạn định dạng, đó là Post Formats trong WordPress, nó tạo cho một sự đặc sắc riêng cho theme của bạn.

Post Formats được tích hợp sẵn trong WordPress, và bạn khai báo, sử dụng bằng cách vào file functions.php của theme đang sử dụng, gõ đoạn code sau vào:

add_theme_support('post-formats', array( 'aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio'));

Bao gồm các dạng: Standard, Gallery, Aside, Image, Status, Quote, Video, Audio, Chat. Chắc các bạn cũng hình dung ra các kiều và cách đặt tên của nó.

Đây là nói với WordPress là chúng ta đã sử dụng tính năng Post Formats, việc này cũng sẽ làm cho trong phần soạn bài viết cho một tùy chọn cho bạn với tất cả các thuộc tính trên.

Menu option Post Formats trong admin Post Formats   Hỗ trợ định dạng bài viết trong WordPress 3.6

Menu option Post Formats trong admin

Đến đây bạn vào post thử vài bài để test chức năng này, sau đó bạn debug trong firebug của firefox ta thấy được, phát sinh nhiều class tương ứng.

Cac class CSS trong Post Formats WordPress Post Formats   Hỗ trợ định dạng bài viết trong WordPress 3.6

Các class CSS trong Post Formats WordPress

Áp dụng điều này thì các bạn dễ dàng qui định cho nó một kiểu trình bày tương ưng với những gì mình đã khai báo! Bạn có thể qui định mà khác nhau, tạo các icon khác nhau… bằng CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.format-audio .post-icon  {
    background-image: url(images/icon-audio.png);
}
.format-gallery .post-icon {
    background-image: url(images/icon-gallery.png);
}
.format-link .post-icon {
    background-image: url(images/icon-link.png);
}
.format-quote .post-icon {
    background-image: url(images/icon-quote.png);
}
.format-status .post-icon {
    background-image: url(images/icon-status.png);
}
.format-aside .post-icon {
    background-image: url(images/icon-aside.png);
}
.format-video .post-icon {
    background-image: url(images/icon-video.png);
}
.format-image .post-icon {
    background-image: url(images/icon-image.png);
}
.format-chat .post-icon {
    background-image: url(images/icon-chat.png);
}

Cách trình bày Post Formats

Trên là một ví dụ về qui định cách thể hiện Icon bạn có thể phát triển ra nhiều sự khác biệt khác nữa! Lúc này mở rộng thêm về cách bạn bạn tùy chỉnh sự trình bày phân loại theo Post Formats

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (has_post_format('aside')) {
     //display aside post
} elseif (has_post_format('chat')) {
     //display chat post
} elseif (has_post_format('gallery')) {
     //display gallery post
} elseif (has_post_format('image')) {
     //display image post
} elseif (has_post_format('link')) {
     //display link post
} elseif (has_post_format('quote')) {
     //display quote post
} elseif (has_post_format('status')) {
     //display status post
} elseif (has_post_format('video')) {
         //display video post
} else {
     //display standard post
}

Sử dụng vòng lặp loop WordPress có sử dụng Post Formats

1
2
3
4
5
6
7
8
9
if (have_posts()) :
    while (have_posts()) : the_post();
        if(!get_post_format()) {
            get_template_part('format', 'standard');
        } else {
            get_template_part('format', get_post_format());
        }
    endwhile;
endif;

Trong mỗi phần có nét đặc trưng riêng, ví dụ ở audio thì hiển nhiên có phần nhúng file âm thanh, video cũng vậy, thế bạn sẽ tạo ra các Custom Fields WordPress cho việc nhập file nguồn.

Sau đó qui định về các vòng loop cho nó chuyên nghiệp hơn tí chẳng hạn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
        <?php $post_format = bcdonline_get('post_format'); ?>
     
    <?php if($post_format == 'quote' || has_post_format( 'quote' )) {
        get_template_part( 'includes/loop-quote');
    } elseif($post_format == 'audio' || has_post_format( 'audio' )) {
        get_template_part( 'includes/loop-audio');
    } elseif($post_format == 'video' || has_post_format( 'video' )) {
        get_template_part( 'includes/loop-video');
    } elseif($post_format == 'image' || has_post_format( 'image' )) {
        get_template_part( 'includes/loop-image');
    } else {
        get_template_part( 'includes/loop-default');
    } ?>
 
-->

Wordpress Post Formats Post Formats   Hỗ trợ định dạng bài viết trong WordPress 3.6

Nguồn: thuthuatwordpress.org

 

Cùng Danh Mục

Liên Quan Khác

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>