Tự thiết kế theme WordPress với 960 Grid

Tự thiết kế theme WordPress 3 với 960 Grid

thiet-ke-theme-wordpress-960-grid-thumb

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à:

  1. Phần hiển thị 3 widget.
  2. Phần hiển thị copyright.

Và chúng ta có cấu trúc file HTML của footer.php như sau



<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>


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

Tự thiết kế theme WordPress

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

Tự thiết kế theme WordPress

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&nbsp;<?php the_author(); ?>&nbsp;ngày&nbsp;<?php the_date(); ?>&nbsp;trong&nbsp;<?php the_category( $separator=",") ;?> | <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
 </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="&laquo; %link", $link='%title', $in_same_cat = false, $excluded_categories="" );?> <?php next_post_link( $format="%link &raquo;", $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:&nbsp' );?></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&nbsp;<?php the_author(); ?>&nbsp;ngày&nbsp;<?php the_date(); ?>&nbsp;trong&nbsp;<?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é.

Nguồn: Tự thiết kế theme WordPress với 960 Grid | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Thiết kế theme WordPress cơ bản với 960 Grid
Sửa lỗi 404 cho WordPress trên NGINX
Tác giả

Bình luận

MarcosFeshy

tadalafil pills: https://tadalafilonline20.com/ generic tadalafil united states

Leave a Message

Registration isn't required.

NguyenLp LarTheme