Code giao diện cho từng Category trong WordPress

Hầu như theme WordPress nào cũng hiển thị mặc định category rất xấu. Còn phần bài viết thì cũng chỉ hiển thị đúng nội dung biên tập là xong. Nhưng nhu cầu của các bạn chưa bao giờ là đủ. Nhiều bạn không biết code nhưng lại muốn thiết kế ở header như thế này hady Footer như thế kia và kể cả các category cũng vậy.

Code giao diện cho từng Category trong WordPress
Code giao diện cho từng Category trong WordPress

Hướng dẫn Code giao diện cho từng Category trong WordPress

Tạo giao diện khác nhau cho từng Category:

Trong phần này WordPress đã tương trợ sẵn do đó, bạn hãy tạo File category.php theo ID hoặc Slug riêng cho Category đó. Bước này tùy vào nhu cầu code thiết kế giao diện category theo nhu cầu của bạn nhé.

Ví dụ :

Theo ID: Bạn sẽ tạo 1 file là : category-id.php (category-1.php,category-2.php,category-3.php, …)

Theo Slug: file category sẽ sở hữu dạng: category-slug.php (category-tin-tuc.php, category-du-an.php, category-review.php)

=> Dưới đây Tòn sẽ làm 1 ví dụ từ file category-review.php như sau.

Hướng dẫn Code giao diện cho chuyên mục Review từ file Category-review.php trong WordPress

Bước 1: Tạo file category-review.php trong thư theme

Bước 2: Đặt hàm hiển thị Header và Footer

<?php get_header();?>
<?php /* Template Name: Chuyên mục Review */ ?>

<!--Footer-->
<?php get_footer(); ?>

Bước 3: Hàm hiển thị Title của chuyên mục đó

<?php do_action( 'generate_after_archive_title' );?>

Bước 4: Hàm get nội dung chuyên mục Review

<?php
    	if (have_posts()){
    		while (have_posts()) : the_post();
    ?>

Giải thích: Hàm trên sẽ lấy dữ liệu được khi đặt tên ở bước 1.

<?php
      $argsProduct = array('orderby' => 'ASC','posts_per_page' => 10,'category_name' => "review");
      $postsProduct = get_posts($argsProduct);
      foreach ($postsProduct as $post) {
?>

Giải thích: Hàm trên sẽ lấy dữ liệu được khi đặt tên category_name (Hàm này thường dùng khi hiển thị chuyên mục ở trang chủ)

Posts_per_page => 10 (Số lượng bài viết hiển thị ở chuyên mục)

Bước 5: Hàm hiển thị hình ảnh + tiêu đề + mô tải bài viết

<!--Hiển thị hình ảnh bài viết-->
<div class="product-image">
   <a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail() ?></a>
</div>

<!--Hiển thị tiêu đề bài viết-->            			
<h2 class="home-h2"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<!--Hiển thị mô tả bài viết-->            				
<div class="excerpt">
    <?php
        $excerpt = get_the_excerpt();
        $excerpt = substr($excerpt, 0, 260);
        $result = substr($excerpt, 0, strrpos($excerpt, ' '));
        echo $result;
    ?>
</div>

Tổng code thiết kế giao diện category-review.php

<?php get_header();?>
<?php /* Template Name: Chuyên mục Review */ ?>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700&display=swap&subset=vietnamese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">

<!--Nội dung Chuyên mục-->
<?php do_action( 'generate_after_archive_title' );?>

<!--Chuyên mục-->
<div class="home-1">
<div class="grid-container">
    <?php
        if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb( '<p id="breadcrumbs" style="margin-bottom: 0em;padding: 10px;background: white;color: black;">','</p>' );
        }
    ?>
    		
    <div id="primary" class="content-area grid-parent mobile-grid-100 grid-75 tablet-grid-75">
        <div class="home-content">
            <header class="page-header<?php echo $clearfix; // WPCS: XSS ok, sanitization ok. ?>" style="padding: 20px 0 0 0;">
    			<?php
    			/**
    			 * generate_before_archive_title hook.
    			 *
    			 * @since 0.1
    			 */
    			do_action( 'generate_before_archive_title' );
    			?>
    
    			<h1 class="page-title" style="font-size: 177%;line-height: 1;margin-top: 0;margin-bottom: 26px;border-bottom: 2px solid #af1b23;">
    				<span itemprop="name" data-field="headline" data-title="<?php the_archive_title(); ?>" style="background-color: #af1b23;display: inline-block;padding: 7px 12px 4px 12px;color: #fff;text-transform: capitalize;"><?php the_archive_title(); ?></sapn>
    			</h1>
    	    </header><!-- .page-header -->
        
        	<div class="category-home row">
                <?php
        			$argsProduct = array('orderby' => 'ASC','posts_per_page' => 10,'category_name' => "review");
        			$postsProduct = get_posts($argsProduct);
        			foreach ($postsProduct as $post) {
        		?>
            <div class="col-1">
            	<div class="post-tin-tuc">
            		<div class="item product">
            		    
            			<div class="product-image">
            				<a href="<?php the_permalink() ?>"><?php echo the_post_thumbnail() ?></a>
            			</div>
            			
            			<div class="product-title home-nen">
            				<h2 class="home-h2"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
            				<div class="entry-meta">
            				    <span class="view" style="color: #837b7b;">
                                <?php echo getPostViews(get_the_ID()); ?> -
                                </span>
                                <?php generate_entry_meta(); ?>
            				</div>
            				<div class="excerpt">
            				    <?php
                                    $excerpt = get_the_excerpt();
                                    $excerpt = substr($excerpt, 0, 260);
                                    $result = substr($excerpt, 0, strrpos($excerpt, ' '));
                                    echo $result;
                                    ?>
                            </div>
            			</div>
            		</div>
            	</div>
            </div>
            	
            <?php
            }
            ?>
            </div>
        </div>
    </div>
    
    <!--Right Sidebar-->
    <?php generate_construct_sidebars();?>
    
</div>
</div>
<!--End Chuyên-->

<style>
.home-nen{
    border: 1px solid #eef1fd;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    -ms-box-shadow: 0 1px 1px rgba(0,0,0,.04);
    box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
    background: white;
    padding: 44px 10px 44px;
}
.home-content{padding-right: 20px}

.home-1 .product-image{
    float: left;
    width: 25%;
    padding-right: 20px;
}

.home-h2{font-size: 130%;}
   
.col-1{margin-bottom: 20px;}
    
/* CSS Mobile */
@media all and (max-width: 480px) {
.home-1 .product-image{
    float: none;
    width: 100%;
    padding-right: 0px;
    }

.home-content{padding-right: 0px}

}
 
/* CSS Desktop */
@media all and (max-width: 1024px) {
 
}
</style>

<!--Footer-->
<?php get_footer(); ?>

Xem Kết Quả Nào 🙂

Thông tin liên hệ thiết kế web Toancr

Hy vong, qua bài viết hướng dẫn này của Tòn, bạn có thể tự code thiết kế cho mình một trang giao diện chuyên mục hoàn toàn như ý. Toancr mang đến cho bạn những thông tin mới nhất về mua hàng Online. Cập nhật, chia sẻ, review những sản phẩm và đời sống giúp người mua hàng tốt hơn

  • Địa chỉ: 40/31 Phạm Văn Đồng, Cam Ranh, Khánh Hòa
  • Điện thoại: 0935.961.044 – Zalo: 0346.260.994 Mr.Toàn
  • Email: info@camranhmedia.com | dungtoan96@gmail.com
  • Website: toancr.com | camranhmedia.com
  • Fanpage: fb.com/camranhmedia

Bình luận

BÀI VIẾT LIÊN QUAN

THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Quảng cáo