Như mình đã giới thiệu, WordPress có hệ thống Custom Post khá là hay, và hôm nay mình sẽ chia sẻ cho các bạn cách tạo phần quảng cáo ngoài trang chủ, có sử dụng custom Post Type tags này nhé
Trong bài học này chúng ta sẽ học được:
- Cách đăng ký một Custom Post Type cho banner của chúng ta
- Tạo một function mới trong file Functions để hiển thị banner
- Sử dụng function vừa tạo để hiển thị ra ngoài trang chủ
- Cuối cùng là style banner
Nguyên liệu cần cho bài học
Để làm được bài tuts này, các bạn cần chuẩn bị
- Bộ mã nguồn WordPress
- Quyền truy cập vào thư mục chứa template của bạn
Ở đây tác giả dùng ngay theme twentytwelve để hướng dẫn các bạn.
Tạo mới Banner Post Type
Đầu tiên bạn có thể tham khảo cách tạo Custom Post Type trên WordPress. Đầu tiên, bạn mở file functions.php và thêm đoạn code sau. Trong đó chúng ta chú ý 2 biến $labels và $args. Biến $labels dùng để gán các giá trị hiển thị cho Custom Post. Biến $args dùng để đăng ký một Custom Post Type Tags cho wordpress của chúng ta bằng mục taxonomies
|
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 28 29 30 31 32 |
// register a custom post type called 'banner' function wptutsplus_create_post_type() { $labels = array( 'name' => __( 'Banners' ), 'singular_name' => __( 'banner' ), 'add_new' => __( 'New banner' ), 'add_new_item' => __( 'Add New banner' ), 'edit_item' => __( 'Edit banner' ), 'new_item' => __( 'New banner' ), 'view_item' => __( 'View banner' ), 'search_items' => __( 'Search banners' ), 'not_found' => __( 'No banners Found' ), 'not_found_in_trash' => __( 'No banners found in Trash' ), ); $args = array( 'labels' => $labels, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail', 'page-attributes' ), 'taxonomies' => array( 'post_tag', 'category'), ); register_post_type( 'banner', $args ); } add_action( 'init', 'wptutsplus_create_post_type' ); |
Với đoạn code trên, bạn đã đăng ký thêm một Menu nữa vào dãy menu bên tay trái của WordPress ở khu vực admin. Nút menu này bao gồm 4 menu con là Banners, New Banner, Categories, Tags
Lấy Banner Post Type
Bước tiếp theo chúng ta sẽ sử dụng WP_Query để lấy ra những bài viết có kiểu Banner Post Type để hiển thị ra ngoài. Vẫn trong file functions.php, bạn thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// function to show home page banner using query of banner post type function wptutsplus_home_page_banner() { // start by setting up the query $query = new WP_Query( array( 'post_type' => 'banner', )); // now check if the query has posts and if so, output their content in a banner-box div if ( $query->have_posts() ) { ?> <div class="banner-box"> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class( 'banner' ); ?>><?php the_content(); ?></div> <?php endwhile; ?> </div> <?php } wp_reset_postdata(); } |
Hàm trên sẽ kiểm tra xem có tồn tại một post nào thuộc dạng Banner Post Type không, nếu có thì hiển thị.
Hiển thị Banner
Bạn có thể sử dụng hàm bên trên vào những chỗ nào bạn muốn hiển thị quảng cáo. Ví dụ như có thể chọn các file header.php, page.php, front-page.php. Nếu bạn chỉ muốn hiển thị ra ngoài trang chủ thì có thể sử dụng hàm kiểm tra if( is_home_page() )
|
1 2 3 4 |
<?php if ( is_front_page() ) { wptutsplus_home_page_banner(); } ?> |
Lúc này banner sẽ xuất hiện ngoài trang chủ nhưng chưa có style gì cả
Bạn có thể copy style đơn giản như sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.home .banner-box { text-align: center; color: red; font-size: 1.2em; border: 1px solid red; padding: 1em; } .home .banner-box .category-highlight { background: red; color: #fff; margin: 0; padding: 0.5em; } |
Vậy là xong rồi đó, chúc bạn thành công
