วิธีสร้างการแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง

การสร้างการแบ่งหน้าสำหรับประเภทโพสต์ที่กำหนดเองไม่ควรเป็นเรื่องท้าทาย เนื่องจากคุณสามารถนำแนวคิดเดียวกันกับที่เราใช้มาใช้ใหม่ได้ – วิธีสร้างการแบ่งหน้าคิวรีแบบกำหนดเองใน WordPress เราจำเป็นต้องค้นหาประเภทโพสต์ที่กำหนดเองจากนั้นแสดงข้อความค้นหาที่อยู่ในประเภทโพสต์นั้นหรือในประเภทโพสต์หลายประเภท

ในบทความนี้ ฉันจะแสดงวิธีสร้างการแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง การแบ่งหน้าจะคล้ายกับการแบ่งหน้าที่เป็นตัวเลขนี้ เราจะสร้างข้อความค้นหาที่กำหนดเองซึ่งรับประเภทโพสต์ที่กำหนดเองทั้งหมด จากนั้นแสดงประเภทโพสต์ที่กำหนดเองพร้อมการวนซ้ำและการแบ่งหน้าตัวเลข

สร้างประเภทโพสต์ที่กำหนดเอง

ขั้นตอนแรกคือการ สร้างประเภทโพสต์ที่กำหนดเอง โดยใช้รหัสต่อไปนี้:

 /**
  * ประเภทโพสต์ที่กำหนดเอง - register_post_type()
  * @description- Njengah Tutorial ตัวอย่างประเภทโพสต์ที่กำหนดเอง 
  * @link -https://gist.github.com/Njengah/839466b773085ac2430772e081357cee
  *
  */ 


	add_action('init', "njengah_tutorial_cpt");
  
  
	ฟังก์ชัน njengah_tutorial_cpt(){
		
		$labels = อาร์เรย์ (
				'name' => _x('Tutorials', 'ประเภทโพสต์ชื่อทั่วไป'),
				'singular_name' => _x('Tutorial', 'โพสต์ชื่อเอกพจน์'),
				'menu_name' => _x('บทแนะนำ', 'เมนูผู้ดูแลระบบ'),
				'name_admin_bar' => _x('Tutorial', 'เพิ่มใหม่ในแถบผู้ดูแลระบบ'),
				'add_new' => _x('เพิ่มใหม่', ''),
				'add_new_item' => __('เพิ่มบทช่วยสอนใหม่'),
				'edit_item' => __('แก้ไขบทช่วยสอน'),
				'new_item' => __('บทแนะนำใหม่'),
				'all_items' => __('บทแนะนำทั้งหมด'),
				'view_item' => __('ดูบทช่วยสอน'),
				'search_items' => __('Search Tutorials'),
				'not_found' => __('ไม่พบบทช่วยสอน'),
				'not_found_in_trash' => __('ไม่พบบทช่วยสอนในถังขยะ'), 
				'parent_item_colon' => __('บทแนะนำสำหรับผู้ปกครอง:'),
				
		);

			$args = อาร์เรย์ (
				'ลำดับชั้น' => จริง     
				'labels' => $labels,
				'สาธารณะ' => จริง
				'publicly_queryable' => จริง  
				'คำอธิบาย' => __('คำอธิบาย.'),
				'show_ui' => จริง 
				'show_in_menu' => จริง,
				'show_in_nav_menus' => จริง			
				'query_var' => จริง
				'เขียนใหม่' => จริง
				'query_var' => จริง
				'rewrite' => array('slug' => 'tutorial'),
				'capability_type' => 'หน้า',
				'has_archive' => จริง 
				'menu_position' => 22,
				"show_in_rest" => จริง
				'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'comments', 'revisions', 'page-attributes', 'custom-fields' )
			); 

			register_post_type('บทช่วยสอน', $args);
		
		
	}

เพิ่มโค้ดนี้ลงในไฟล์ functions.php ของคุณ แล้วคุณจะเห็นประเภทโพสต์ที่กำหนดเอง ' บทช่วย สอน' ปรากฏบนแดชบอร์ด WordPress ของคุณ

รหัสนี้สามารถเปลี่ยนให้เหมาะกับประเภทโพสต์ที่คุณกำหนดเองได้ นอกจากนี้ยังสามารถสร้างประเภทโพสต์แบบกำหนดเองได้โดยใช้ปลั๊กอินการสร้างประเภทโพสต์แบบกำหนดเอง

สร้างเทมเพลตของเพจเพื่อแสดงประเภทโพสต์ที่กำหนดเอง

เราจำเป็นต้องสร้างเทมเพลตหน้าแบบกำหนดเองที่จะใช้เพื่อแสดงประเภทโพสต์ที่กำหนดเองโดยใช้วนรอบของ WordPress

ในการสร้างเทมเพลตเพจแบบกำหนดเอง คุณควรสร้างไฟล์ใหม่ในโฟลเดอร์รูทของธีมของคุณ

ตั้งชื่อไฟล์ – กำหนดเอง -page.php หรือชื่ออื่นใดที่อธิบายประเภทโพสต์ที่กำหนดเอง ตัวอย่างเช่น สำหรับประเภทโพสต์ที่กำหนดเองซึ่งสร้างเหนือชื่ออาจเป็น tutorials-page.php

ในไฟล์นี้ เพิ่มส่วนหัวของเทมเพลตหน้าแบบกำหนดเองโดยใช้รหัสต่อไปนี้และบันทึกการเปลี่ยนแปลง:

 <?php
/**
 * ชื่อเทมเพลต: เทมเพลตบทช่วยสอน
 */
 
 get_header(); 

ตอนนี้คุณควรเห็นเทมเพลตของเพจแบบกำหนดเองปรากฏในตัวเลือกเทมเพลตแอตทริบิวต์ของเพจดังที่แสดงด้านล่าง:

สร้างประเภทโพสต์แบบกำหนดเอง แบบสอบถามที่กำหนดเอง

การสืบค้นข้อมูลแบบกำหนดเองเป็นขั้นตอนแรกที่จะช่วยให้เราสามารถค้นหาประเภทโพสต์แบบกำหนดเองที่มีอยู่และแสดงบนเทมเพลตของเพจแบบกำหนดเองที่เราสร้างขึ้นในขั้นตอนก่อนหน้า

ต่อไปนี้คือรหัสที่จะค้นหาประเภทโพสต์ที่กำหนดเองของบทช่วยสอนและดึงข้อมูลสองโพสต์แรกจากนั้นแสดงบนเทมเพลตของหน้าแบบกำหนดเองที่เราสร้างไว้ด้านบน

 <?php
/**
 * ชื่อเทมเพลต: เทมเพลตบทช่วยสอน
 */
 
 get_header(); 
 
 
 // ขั้นตอนที่ 1: สร้างคิวรีแบบกำหนดเอง 
 
 $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1;
 
  $args = อาร์เรย์ (
               'posts_per_page' => 2,// สืบค้น 2 โพสต์ล่าสุด  
			   'post_type' => 'บทช่วยสอน', 
               'paged' => $paged
             );
			 
$customPostQuery = ใหม่ WP_Query($args);


?>

แสดงบทช่วยสอน โพสต์ที่กำหนดเองในเทมเพลตของเพจที่กำหนดเอง

ต่อไปนี้คือรหัสที่จะสืบค้นประเภทโพสต์ที่กำหนดเองและแสดงในเทมเพลตของเพจที่กำหนดเอง :

 <?php
/**
 * ชื่อเทมเพลต: เทมเพลตบทช่วยสอน
 */
 
 get_header(); 
 
 
 // ขั้นตอนที่ 1: สร้างคิวรีแบบกำหนดเอง 
 
 $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'เพจ' ) : 1;
 
  $args = อาร์เรย์ (
               'posts_per_page' => 2,// สืบค้น 2 โพสต์ล่าสุด  
			   'post_type' => 'บทช่วยสอน', 
               'paged' => $paged
             );
			 
$customPostQuery = ใหม่ WP_Query($args);


?> 

<!-- ขั้นตอนที่ 2: แสดงโพสต์ที่เราสอบถามในขั้นตอนที่ 1 -->

<div class="wrap">
 
	<div id="primary" class="content-area">
		
		<main id="main" class="site-main" role="main">
		
			<?php
			
			if($customPostQuery->have_posts() ): 
			
               ในขณะที่($customPostQuery->have_posts()):
                   
				       $customPostQuery->the_post();
					   
					     โพสต์ $ ทั่วโลก;
                ?>
		
		          <div class ="inner-content-wrap">
				  
						<ul class ="cq-posts-list">
						
						 <li>
						   <h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
								<div>
								  <ul>
									<div>
											<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
									</div>
								  </ul>
								  
								  <ul>
											<p><?php echo the_content(); ?></p>
								  </ul>
								
								</div>
						  </li>
						</ul>
				</div> <!-- สิ้นสุดการโพสต์บล็อก -->
						  
			<?php เมื่อสิ้นสุด; 
			
	     เอนดิฟ; 
	 
			 wp_reset_query();

สร้างฟังก์ชันการแบ่งหน้าโพสต์แบบกำหนดเองของ WordPress

ในขั้นตอนนี้ เราควรสร้างฟังก์ชันการแบ่งหน้าประเภทโพสต์ที่กำหนดเองซึ่งจะถูกเพิ่มไปยังฟังก์ชันของธีมและจะถูกเรียกหลังจากที่ลูปแสดงประเภทโพสต์ที่กำหนดเอง

ควรเพิ่มโค้ดต่อไปนี้ใน functions.php เพื่อสร้างฟังก์ชันการแบ่งหน้าประเภทโพสต์ที่กำหนดเอง

 // ฟังก์ชั่นการแบ่งหน้าประเภทโพสต์ที่กำหนดเอง 
	
    ฟังก์ชั่น cpt_pagination($pages = '', $range = 4)
    {
        $showitems = ($ช่วง * 2)+1;
        เพจ $ ทั่วโลก;
        ถ้า(ว่าง($เพจ)) $เพจ = 1;
        ถ้า($หน้า == '')
        {
            โกลบอล $wp_query;
            $pages = $wp_query->max_num_pages;
            ถ้า(!$หน้า)
            {
                $pages = 1;
            }
        }
        ถ้า (1 != $pages)
        {
            echo "<nav aria-label='Page navigation example'> <ul class='pagination'> <span>Page ".$paged." of ".$pages."</span>";
            if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
            if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
            สำหรับ ($i=1; $i <= $pages; $i++)
            {
                if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
                {
                    เสียงสะท้อน ($paged == $i)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
                }
            }
            if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)" \">i class='flaticon flaticon-back'></i></a></li>";
            if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>";
            echo </ul></nav>\n";
        }
  }

เรียกใช้ฟังก์ชันการแบ่งหน้าประเภทโพสต์แบบกำหนดเองในเทมเพลตหน้า

เนื่องจากเราได้สร้างฟังก์ชันการแบ่งหน้าประเภทโพสต์แบบกำหนดเอง และเราได้เรียกใช้การวนซ้ำและแสดงประเภทโพสต์ที่กำหนดเองแล้ว ตอนนี้เราจึงต้องเพิ่มฟังก์ชันการแบ่งหน้าที่ด้านล่างของเทมเพลตของหน้าแบบกำหนดเองเพื่อให้แสดงการแบ่งหน้า

ต่อไปนี้เป็นรหัสที่ควรใช้ในการตรวจสอบว่ามีฟังก์ชันการแบ่งหน้าแบบกำหนดเองหรือไม่ และถ้าเป็นเช่นนั้น เราควรเรียกให้แสดงการแบ่งหน้า

 // ขั้นตอนที่ 3: เรียกฟังก์ชันการแบ่งหน้าที่นี่  
			 
  ถ้า (function_exists("cpt_pagination")) {
				
   cpt_pagination($customPostQuery->max_num_pages); 
			 
}

เราได้สร้างประเภทโพสต์แบบกำหนดเอง เทมเพลตหน้าแบบกำหนดเอง เพิ่มฟังก์ชันการแบ่งหน้าประเภทโพสต์แบบกำหนดเอง และแสดงทั้งประเภทโพสต์แบบกำหนดเองพร้อมข้อความค้นหาและฟังก์ชันการแบ่งหน้าประเภทโพสต์แบบกำหนดเอง

รูปแบบการแบ่งหน้าประเภทโพสต์แบบกำหนดเอง

คุณต้องเพิ่มสไตล์ให้กับการแบ่งหน้าประเภทโพสต์ที่กำหนดเองโดยใช้รหัสต่อไปนี้:

 /**
 * รูปแบบการแบ่งหน้าประเภทโพสต์ที่กำหนดเอง
 * @ผู้เขียน Joe Njenga
 */ 

.การแบ่งหน้า {
   ชัดเจน:ทั้งสอง;
   ตำแหน่ง:ญาติ;
   ขนาดตัวอักษร:16px; 
   ความสูงของบรรทัด:13px;
   ลอย:ขวา; 
	รายการสไตล์ประเภท:ไม่มี;
	ความกว้าง:100%
}
.pagination span, .pagination a {
   แสดง:บล็อก;
   ลอย:ซ้าย;
   ระยะขอบ: 2px 2px 2px 0;
   ช่องว่างภายใน:6px 9px 5px 9px;
   ข้อความตกแต่ง:ไม่มี;
   ความกว้าง:อัตโนมัติ;
   สี:#fff; 
   พื้นหลัง: #237697; 
}
.pagination a: โฮเวอร์{
   สี:#fff;
   พื้นหลัง: #000; 
}
.การแบ่งหน้า .current{
   ช่องว่างภายใน:6px 9px 5px 9px;
   พื้นหลัง: #999; 
   สี:#fff;

เราพร้อมที่จะดูผลลัพธ์ของรหัสนี้ หากต้องการดูการแบ่งหน้าประเภทโพสต์ที่กำหนดเอง คุณต้องสร้างหน้าใหม่ด้วยเทมเพลตหน้าแบบกำหนดเองที่เราสร้างขึ้นในขั้นตอนที่ 2

หลังจากสร้างเพจนี้ คุณจะเห็นหน้าแสดงประเภทโพสต์ที่กำหนดเองที่เราสอบถามและการแบ่งหน้าที่เราสร้างดังแสดงในภาพด้านล่าง:

ความคิดสุดท้าย

ในการสร้างการแบ่งหน้าประเภทโพสต์แบบกำหนดเอง คุณต้องสร้างเทมเพลตหน้าแบบกำหนดเอง เพิ่มการสืบค้นข้อมูลแบบกำหนดเองเพื่อรับโพสต์แบบกำหนดเองทั้งหมดที่คุณต้องการแสดง และเรียกใช้ฟังก์ชันการแบ่งหน้าแบบกำหนดเองที่คุณเพิ่มลงใน functions.php ในการรับโค้ดแบบเต็มนี้ ฉันได้เพิ่มลงใน git repo และคุณสามารถเข้าถึงได้ที่นี่ – WordPress Custom Post Type Pagination