Ở WordPress trang chủ chỉ thể hiện bài viết mới nhất, đôi lúc mình không thích điều đó vì nó quá BLOG. Hôm nay mình muốn chia sẻ cách mà ta qui định cách trình bày cho trang chủ wordpress sử dụng Custom Page Template ta sẽ tạo ra giao diện business hơn!
Bạn sẽ hình dung trước trong đầu những gì mình sẽ làm trong bài hôm nay: đầu tiên tạp ra một page sau đó tùy chỉnh cho page vừa tạo thành Front page mọi việc sẽ trở nên dễ dàng hơn mình thay đổi trong page vừa tạo sẽ có thay đổi ở trang chủ.
Page Template WordPress
Đầu tiên bạn tạo admin tạo một page với tiêu đề là Home hay là gì đó tùy bạn, page này mình sẽ làm trang chủ thay cho BLOG mặc định của theme wordpress đã nói như trên.
Sau đó bạn vào menu Reading Settings click vào A static page (select below) và chọn Front page là page Home vừa tạo giống như hình sau:
Giờ bạn Save lại và ra trang chủ F5 lại là có kết quả khác rồi đó! Thú vị đúng không nào tiếp đến chúng ta sẽ làm phần quan trọng hơn nhiều đó là Custom nó lại theo ý muốn của chúng ta!
Custom Page Template trong WordPress
Ở đây mình sẽ tạo ra một Page template trong thư mục gốc của theme và gán nó vào trong page Home mà ta vừa tạo khi nảy, mục đích của việc này là cho phép chúng ta custom lại hoàn toàn giao diện của trang page này thay vì kế thừa page của theme qui định, có lẻ hơi lu bu tuy nhiên các bạn thực hiện sẽ rõ thôi!Vào trong thư mục gốc của theme tạo ra file có tên là template-index.php hay tên gì tùy bạn trong đó bạn khai báo các thành phần bạn muốn hiển thị hay nói cách khác là bạn có thể tùy chỉnh giao diện riêng trong file này như: 1 cột, 2 cột, 3 cột ….
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!--<?php/*Template Name: Template Index*/?><?php get_header(); ?> <div id="bcdonline" class="container_12"> <div id="breadcrumb" class="container_12 breadcrumb"> <?php bcd_breadcrumbs(); ?> </div> <div id="content" class="grid_8"> <?php get_template_part( 'loop', 'template-index' ); ?> </div><!-- #content --> <div id="sidebar" class="grid_4"> <?php get_sidebar(); ?> </div><!-- #sidebar --> <div class="clear"></div> </div><!-- #bcdonline --><div class="clear"></div><?php get_footer(); ?>--> |
Sau đó tiến hành vào trong page home lúc nảy đã tạo để chọn sử dụng file template-index.php.
Set page template cho page
Bạn dễ dang nhìn thấy được với khai báo1 | /* Template Name: Template Index */ |
1 | get_template_part( 'loop', 'template-index' ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!--<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-content"> <div class="entry-content"> <?php the_content(); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php endwhile; // end of the loop. ?>--> |
Mình minh họa cách lấy một bài viết mới ra. Bạn tạo một div ở vị trí muốn hiển thị trong page index và khai báo như sau.
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- <div class="homeInfo"> <h2>Blog Posts</h2> <?php $blogPost = new WP_query(); $blogPost->query('showposts=1'); while($blogPost->have_posts()) : $blogPost->the_post(); ?> <p><?php the_content_rss('…', false, '', 40);?></p> <a href="<?php the_permalink(); ?>">Read More …</a> <?php endwhile;?> </div>--> |
Kết luận: Đây là một cách làm rất hay cho phép bạn custom lại trang chủ WordPress theo ý của mình, trên là cách làm của mình demo, bạn phải hiểu rõ bản chất của nó để có tùy chỉnh cho hợp lý, khi bạn thay đổi nội dung trong page Home thì index cũng sẽ thay đổi. Còn phần bạn tùy chỉnh trong file loop thì là lấy động cố định từ cơ sở dữ liệu. Nói chung rất lu bu với các bạn mới học WordPress mình cũng không có cách diễn đạt nào tốt hơn hii… Nếu cảm giác khó khăn có thể xem bài Thiết kế WordPress để hiểu rõ hơn! Chúc mọi người thành công!
( Nguồn: http://bcdonline.net)
