Ở phần 2 chúng ta đã cùng nhau xây dựng 2 file quan trọng nhất trong một theme đó là header.php và index.php, do 2 phần đó mình giải thích khá dài nên không thể gộp chung một bài được nên mình sẽ hướng dẫn các bạn viết code cho những file còn lại trong bài này, chủ yếu là copy và paste từ file index.php ra mà thôi. Cụ thể những file mà chúng ta sẽ làm trong bài này gồm:
- footer.php – hiển thị phần chân trang.
- single.php – hiển thị nội dung bài viết.
- page.php – hiển thị nội dung của một page.
- archive.php – hiển thị các trang lưu trữ, như tag chẳng hạn.
- category.php – hiển thị danh sách các bài viết trong một category.
1. Tạo file footer.php
Xem lại ảnh mẫu, bạn có thể thấy phần footer bao gồm 3 widget. Thực ra mình sẽ làm thêm phần copyright nữa nhưng do cái này cũng đơn giản nên mình không đưa nó vào bản thiết kế mẫu kia.
Như vậy, chúng ta có thể chia footer ra 2 phần là:
- Phần hiển thị 3 widget.
- Phần hiển thị copyright.
Và chúng ta có cấu trúc file HTML của footer.php như sau
[html]
<div class="clear"></div>
<div id="footer-widget" class="container_12">
<div id="footer-widget-1" class="grid_4">
//CHÈN CODE WIDGET 1
</div>
<div id="footer-widget-2" class="grid_4">
//CHÈN CODE WIDGET 2
</div>
<div id="footer-widget-3" class="grid_4">
//CHÈN CODE WIDGET 3
</div>
</div><!–End footer-widget–>
<div class="clear"></div>
<div id="copyright" class="container_12">
<p class="grid_12">Copyright© 2013 ThachPham dot Com.</p>
</div><!–End copyright–>
</body>
</html>
[/html]
Bây giờ để có 3 widget khác nhau mà chèn vào 3 cái khung vào footer thì bạn cần viết code trong file functions.php để tạo 3 widget mới. Đây là code
//Tao sidebar
register_sidebar( array(
‘name’ =>’Footer Widget 1′,
‘id’ => ‘footer-widget-1’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4 class="widget-title">’,
‘after_title’ => ‘</h4>’,
) );
register_sidebar( array(
‘name’ =>’Footer Widget 2′,
‘id’ => ‘footer-widget-2’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4 class="widget-title">’,
‘after_title’ => ‘</h4>’,
) );
register_sidebar( array(
‘name’ =>’Footer Widget 3′,
‘id’ => ‘footer-widget-3’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h4 class="widget-title">’,
‘after_title’ => ‘</h4>’,
) );
Nếu bạn không hiểu các thành phần trong đoạn code tạo widget thì có thể tham khảo ở phần 2, mình đã giải thích ở đó. Sau khi thêm code vào thì bạn vào Appearance -> Widget sẽ thấy 3 widget hiển thị ra thế này
Bây giờ việc còn lại là viết code cho nó hiển thị ra ngoài theme thôi, để chèn một custom widget mình có code như sau
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘id-của-widget’) ) : ?> <?php endif; ?>
Bây giờ bạn chỉ việc thay id-của-widget thành tên id của từng widget mà bạn đã tạo ở trên vào 3 khung mà mình đã đặt comment sẵn trong đoạn HTML ở trên, ta sẽ có code đầy đủ như sau
<div class="clear"></div>
<div id="footer-widget" class="container_12">
<div id="footer-widget-1" class="grid_4">
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer-widget-1’) ) : ?><?php endif; ?>
</div>
<div id="footer-widget-2" class="grid_4">
<?php if ( !function_exists (‘dynamic_sidebar’)|| !dynamic_sidebar(‘footer-widget-2’)) : ?><?php endif; ?>
</div>
<div id="footer-widget-3" class="grid_4">
<?php if ( !function_exists (‘dynamic_sidebar’)|| !dynamic_sidebar(‘footer-widget-3’)) : ?><?php endif; ?>
</div>
</div><!–End footer-widget–>
<div class="clear"></div>
<div id="copyright" class="container_12">
<p>Copyright© 2013 ThachPham dot Com.</p>
</div><!–End copyright–>
</body>
</html>
Bạn hãy thử thêm 1 vài widget vào 3 cái khung widget này và xem nó có hiển thị đúng không nhé. Nếu đúng thì nó sẽ như thế này
Thế là xong phần footer.
2. Tạo file single.php và page.php
Sở dĩ mình đưa nó vào một là vì do đây là theme đơn giản nên mình cho 2 file này có cấu trúc giống nhau luôn, tức là hiển thị nội dung của page cũng như của post mà thôi.
Nếu như bạn muốn khi xem page và post nó có hiển thị sidebar như ngoài trang chủ thì bạn sẽ có cấu trúc file single.php và page.php như sau
<?php get_header(); ?>
<div id="blog" class="container_12">
<div id="main-content" class="grid_8">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<h3 class="post-single-title"><?php the_title(); ?></h3>
<p class="meta-data">
Đăng bởi <?php the_author(); ?> ngày <?php the_date(); ?> trong <?php the_category( $separator = ‘,’) ;?> | <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> <?php edit_post_link(‘Edit’, ‘ | ‘, ”); ?>
</p>
<div class="entry">
<?php the_content(); ?>
</div>
<div class="comment">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php previous_post_link( $format=’« %link’, $link=’%title’, $in_same_cat = false, $excluded_categories = ” );?> <?php next_post_link( $format=’%link »’, $link=’%title’, $in_same_cat = false, $excluded_categories = ” );?>
</div>
<?php endif; ?>
<div class="grid_4" id="sidebar">
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘sidebar’) ) : ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
Nhìn chung thì nó cũng không giống file index.php là mấy đúng không nào ^^.
3. Tạo file archive.php và category.php
Nhìn chung thì 2 trang này cũng chẳng khác gì file index.php cho lắm vì nó cũng chỉ là hiển thị các bài viết, chỉ khác mỗi cái là nó sẽ hiển thị các bài viết trong một category nào đó mà thôi, nhưng bạn không cần quan tâm đến nó vì các hàm cơ bản của WordPress để lấy tên bài viết, nội dung bài viết,…đều có thể xử lý cho bạn, tức là tùy thuộc vào tên file của nó mà nó sẽ hiển thị chính xác các bài viết. Ví dụ như cùng một code, nếu bạn đặt ngoài file index.php thì nó sẽ hiển thị bài mới nhất, còn đặt trong category.php thì nó chỉ hiển thị các bài viết trong 1 category nào đó mà thôi. Trường hợp muốn custom nhiều hơn thì có thể sử dụng class WP_Query nhưng mình sẽ chưa đề cập trong loạt bài này.
Vậy bây giờ ta sẽ có nội dung của 2 file này như sau
<?php get_header() ?>
<div id="blog" class="container_12">
<div class="grid_12 omega" id="main-menu">
<?php
wp_nav_menu(array(
‘theme_location’ => ‘main-menu’
));
?>
</div><!–End main-menu–>
<div id="main-content" class="grid_8 alpha">
<div class="category-description">
<h2><?php single_cat_title( $prefix = ‘Chuyên mục: ’ );?></h2>
<?php echo category_description(); ?>
</div>
<div class="post">
<?php if(have_posts()): ?><?php while (have_posts()): the_post(); ?>
<div class="entry"><div class="post_info">
<?php the_post_thumbnail( $size = ‘thumbnail’, array (
‘class’ => "homepage-thumbnail",) );?>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p class="meta-data">
Đăng bởi <?php the_author(); ?> ngày <?php the_date(); ?> trong <?php the_category( $separator = ‘,’) ;?>
</p>
<?php the_excerpt();?>
</div><!–End post-info–>
<?php endwhile; ?>
</div><!–End entry–>
<div id="navigation">
<?php posts_nav_link( $sep = ”, $prelabel = ‘Trang trước’, $nxtlabel = ‘Trang sau’ );?>
</div>
<?php endif;?>
</div><!–end post–>
</div><!–End main-content–>
<div class="grid_4" id="sidebar">
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘sidebar’) ) : ?>
<?php endif; ?>
</div>
</div>
<?php get_footer( );?>
Xong rồi đấy, bây giờ bạn đã có một khung theme WordPress khá hoàn chỉnh rồi và chúng ta sẽ bắt đầu bước cuối đó là thêm CSS cho theme ở phần 4 nhé.
