Trang chủ Mã nguồn mởWordpress Hướng dẫn tạo plugin Series Post cho Wordpress

Hướng dẫn tạo plugin Series Post cho Wordpress

bởi Vi Nè

Một plugin WordPress Post Series cho phép bạn sắp xếp các bài đăng của mình theo thứ tự. Các plugin Series bài viết cũng có thể được sử dụng để chia một bài đăng dài thành nhiều phần.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo một plugin để hiển thị một loạt bài đăng. Bạn cũng có thể tích hợp cùng một mã vào một chủ đề, làm tăng sự tương tác đến chủ đề.

Trong WordPress, phân loại được sử dụng để nhóm hoặc sắp xếp các bài đăng tương tự với nhau. Nhưng WordPress không cung cấp cách hiển thị tất cả các bài đăng của một đơn vị phân loại cụ thể theo cách tùy chỉnh, nối tiếp. Các đơn vị phân loại trong WordPress được hiển thị bằng tệp archive.php, vì vậy chúng tôi không thể tạo một chuỗi bài đăng dưới dạng một bài đăng có thể lập chỉ mục. Vì vậy, chúng ta cần một chuỗi bài đăng (gọi là Series Post).

Lưu ý: Dưới đây tôi sẽ hướng dẫn chi tiết, bởi vì khi đọc bài bạn sẽ thắc mắc vì sao cùng 1 file mà không cho vào 1 lượt mà phải hướng dẫn từ từ.

1. Xây dựng nền cho Plugin

Chúng ta tạo thư mục chw-post-series trong thư mục cha plugins và tạo tiếp 2 file chw-post-series.php và chw-post-series.css trong thư mục vừa tạo.

Ta mở file sitepoint-post-series.php và chèn đoạn sau vào:

<?php
/*
Plugin Name: CHW Post Series
Plugin URI: https://cunghocweb.com/
Description: Plugin tao series cho bai viet trong Wordpress
Version: 1.0
Author: cunghocweb.com
*/

Tiếp tục đưa đoạn sau vào dưới, cũng trong file chw-post-series.php

function chw_post_series_custom_post_type()
{
	register_post_type("chw-postseries", array(
			"labels" => array("name" => __("Post Series"), "singular_name" => __("Post Series")),
			"public" => true, 
			"has_archive" => true,
			"rewrite" => array("slug"=> "post-series"),
			"supports" => array("editor", "title", "excerpt", "thumbnail", "comments"),
			"capability_type" => "post",
			"publicly_queryable" => true,
			"taxonomies" => array("category", "post_tag"),
		)
	);
}	
add_action("init", "chw_post_series_custom_post_type", 2);
/* Flush Rewrite Rules */
function chw_post_series_activation()
{
	chw_post_series_custom_post_type();
	flush_rewrite_rules();
}
register_activation_hook( __FILE__, "chw_post_series_activation");
register_deactivation_hook( __FILE__, "chw_post_series_activation");

Ở đây, tôi đã tạo một loại bài đăng tùy chỉnh với các phân loại giống nhau được sử dụng bởi các bài đăng WordPress. Điều này để bạn cũng có thể tạo một loạt bài đăng giống như danh mục.

Đây là loại bài đăng tùy chỉnh của chúng tôi hiển thị trên màn hình quản trị:

2. Xây dựng Meta Box vào mục đăng bài

Bây giờ chúng ta cần thêm các hộp meta vào giao diện quản trị Bài viết WordPress. Điều này là để các tác giả có thể đính kèm một bài đăng vào series bài viết và cung cấp một số ID để sắp xếp các bài đăng trong một chuỗi bài đăng.

Đây là mã để thêm một hộp meta để đăng loạt bài:

/* Add Custom Meta Boxes in WordPress Posts */
function chw_post_series_meta_box_markup($object)
{
	wp_nonce_field(basename(__FILE__), "chw-postseries");
	?>
            <div>
			<label for="chw-postseries-serial-number">Serial Number</label>
            <br>
            <input name="chw-postseries-serial-number" type="text" value="<?php echo get_post_meta($object->ID, "chw-postseries-serial-number", true); ?>">
            <br>
            <label for="chw-postseries-id">Name</label>
            <br>
            <select name="chw-postseries-id">
            	<option value="">-</option>
            	<?php
            		$posts = get_posts("post_type=chw-postseries");
            		$selected_series = get_post_meta($object->ID, "chw-postseries-id", true);
            		foreach($posts as $post) 
            		{
            			$id_post = $post->ID; 
            			if($id_post == $selected_series)
            			{
	            			?>
	            				<option selected value="<?php echo $post->ID; ?>"><?php echo $post->post_title; ?></option>	
	            			<?php
            			}
            			else
            			{
	            			?>
	            				<option value="<?php echo $post->ID; ?>"><?php echo $post->post_title; ?></option>	
	            			<?php	
            			}
		            }
            	?>	
            </select>
        </div>
	<?php
}
function chw_post_series_custom_meta_box()
{
	add_meta_box("chw-postseries", "Post Series", "chw_post_series_meta_box_markup", "post", "side", "low", null);
}
add_action("add_meta_boxes", "chw_post_series_custom_meta_box");

Ở đây chúng tôi thêm hai trường dữ liệu vào hộp meta. Trường văn bản được tác giả sử dụng để nhập số ID và trình đơn thả xuống được sử dụng để chọn tên series bài đăng mà bài viết thuộc về. Nếu bạn không muốn thêm một bài đăng vào một chuỗi bài đăng, thì một hoặc cả hai trường nên để trống.

Bây giờ chúng ta cần lưu các trường meta khi biểu mẫu được lưu với đoạn mã sau:

/* Callback to Save Meta Data */

function chw_post_series_save_custom_meta_box($post_id, $post, $update)
{
	if(!isset($_POST["chw-postseries"]) || !wp_verify_nonce($_POST["chw-postseries"], basename(__FILE__)))
		return $post_id;
	if(!current_user_can("edit_post", $post_id))
		return $post_id;
	if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE)
		return $post_id;
	$slug = "post";
	if($slug != $post->post_type)
        return;
	$serial_number = null;
	if(isset($_POST["chw-postseries-serial-number"]))
    {
        $serial_number = $_POST["chw-postseries-serial-number"];
    }
    else
    {
    	$serial_number = "";
    }
    update_post_meta($post_id, "chw-postseries-serial-number", $serial_number);
	$series_id = null;
	if(isset($_POST["chw-postseries-id"]))
    {
        $series_id = $_POST["chw-postseries-id"];
    }
    else
    {
    	$series_id = "";
    }
    $previous_series_id = get_post_meta($post_id, "chw-postseries-id", true);
    update_post_meta($post_id, "chw-postseries-id", $series_id);
    //no series, removing series, adding new series or changing series
    if($previous_series_id == "" && $series_id == "")
    {
    	chw_post_series_save_settings($series_id, $serial_number, $post_id);
    }
    else if($previous_series_id != "" && $series_id == "")
    {
    	chw_post_series_save_settings($previous_series_id, "", $post_id);	
    }
    else if($previous_series_id == "" && $series_id != "")
    {
    	chw_post_series_save_settings($series_id, $serial_number, $post_id);
    }
    else if($previous_series_id != "" && $series_id != "")
    {
    	chw_post_series_save_settings($previous_series_id, "", $post_id);
    	chw_post_series_save_settings($series_id, $serial_number, $post_id);	
    }    
}
add_action("save_post", "chw_post_series_save_custom_meta_box", 10, 3);

Ở đây chúng tôi đang lưu nội dung meta và sau đó gọi hàm chw_post_series_save_settings với các giá trị đối số khác nhau tùy thuộc vào việc người dùng xóa một chuỗi, thêm một chuỗi hay thay đổi một chuỗi.

Đây là mã cho hàm chw_post_series_save_settings

/* Store WordPress posts and Post Series CTY relations as WordPress Settings. */
function chw_post_series_save_settings($series_id, $serial_number, $post_id)
{
    if($series_id != "" && $serial_number != "")
    {
	    $post_series_list = get_option("post_series_" . $series_id . "_ids", "");

	    if($post_series_list == "")
	    {
	    	$post_series_list_array = array($post_id);
	    	$post_series_list = implode (", ", $post_series_list_array);

	    	update_option("post_series_" . $series_id . "_ids", $post_series_list);
	    }
	    else
	    {
	    	$post_series_list_array = explode(',', $post_series_list);

	    	if(in_array($post_id, $post_series_list_array))
	    	{
	    		//do nothing
	    	}
	    	else
	    	{
	    		$post_series_list_array[] = $post_id;
	    		$post_series_list = implode (", ", $post_series_list_array);
	    		update_option("post_series_" . $series_id . "_ids", $post_series_list);
	    	}
	    }
    }
    else if($series_id == "" || $serial_number == "")
    {
    	$post_series_list = get_option("post_series_" . $series_id . "_ids", "");

    	if($post_series_list == "")
    	{
    	}
    	else
    	{
    		$post_series_list_array = explode(',', $post_series_list);

    		if(in_array($post_id, $post_series_list_array))
    		{
    			//here remove the post id from array.
    			if(($key = array_search($post_id, $post_series_list_array)) !== false) {
				    unset($post_series_list_array[$key]);
				}
    			$post_series_list = implode (", ", $post_series_list_array);
	    		update_option("post_series_" . $series_id . "_ids", $post_series_list);
	    	}
    		else
    		{
    		}
    	}
    }
}

Hàm này tạo một chuỗi lưu trữ ID bài đăng WordPress thuộc về một chuỗi cụ thể. Và sau đó nó lưu trữ các chuỗi dưới dạng cài đặt WordPress.

Bây giờ chúng ta đã hoàn tất với tất cả tùy biến ở vùng quản trị. Bây giờ bạn có thể tạo các bài đăng và gán chúng vào một chuỗi và cũng chỉ định danh mục (category) và thẻ (tags) cho mỗi loạt.

3. Hiển thị series ra FrontEnd

Loại bài đăng tùy chỉnh vẫn chưa hiển thị trong các trang chỉ mục và lưu trữ (archive). Để hiển thị nó trên các trang này, bạn chỉ cần thêm mã bên dưới:

/* Displaying Custom Post Types on Index Page */

function chw_post_series_pre_posts($q)
{
	if(is_admin() || !$q->is_main_query() || is_page())
        return;

    $q->set("post_type", array("post", "chw-postseries"));
}

add_action("pre_get_posts", "chw_post_series_pre_posts");

Ta sử dụng hàm pre_get_posts để thêm một loạt bài vào biến $q, được sử dụng bởi vòng lặp chính để hiển thị các bài đăng.

4. Hiển thị chuổi bài đăng

Chúng ta cần lọc nội dung của loại bài đăng và thêm các bài đăng thuộc series.

function chw_post_series_content_filter($content)
{	
	$slug = "chw-postseries";
	if($slug != get_post_type())
        return $content;

	$post_series_list = get_option("post_series_" . get_the_ID() . "_ids", "");
	$post_series_list_array = explode(',', $post_series_list);

	$post_series_serial_number = array();

	foreach($post_series_list_array as $key => $value)
	{
		$serial_number = get_post_meta($value, "chw-postseries-serial-number", true);
		$post_series_serial_number[$value] = $serial_number;
	}

	asort($post_series_serial_number);

	$html = "<ul class='chw-post-series'>";

	foreach($post_series_serial_number as $key => $value) 
	{

		$post = get_post($key);
		
		$title = $post->post_title;
		
		$excerpt = $post->post_content;
		$shortcode_pattern = get_shortcode_regex();
        $excerpt = preg_replace('/' . $shortcode_pattern . '/', '', $excerpt);
        $excerpt = strip_tags($excerpt); 
        $excerpt = esc_attr(substr($excerpt, 0, 150));

        $img = "";

        if(has_post_thumbnail($key))
        {
        	$temp = wp_get_attachment_image_src(get_post_thumbnail_id($key), array(150, 150));
        	$img = $temp[0];
        }
        else
        {
        	$img = "https://lorempixel.com/150/150/abstract";
        }

        $html = $html . "<li><h3><a href='" . get_permalink($key) . "'>" . $title . "</a></h3><div><div class='chw-post-series-box1'><img src='" . $img . "' /></div><div class='chw-post-series-box2'><p>" . $excerpt . " ...</p></div></div><div class='clear'></div></li>";
	} 

	$html = $html . "</ul>";

	return $content . $html;
}

add_filter("the_content", "chw_post_series_content_filter");

Điều này hiển thị các bài đăng sử dụng thẻ danh sách không có thứ tự HTML. Đối với các bài đăng không có hình ảnh, tôi đang tải hình ảnh từ dịch vụ đám mây Lorempixel để tạo hình ảnh màu ngẫu nhiên.

Tôi đang truy xuất các bài đăng của một chuỗi bài đăng từ chuỗi cài đặt mà chúng tôi đã lưu trong quá trình lưu dữ liệu meta.

5. Thêm bài viết vào Series

Tôi cũng có thể thêm một chuỗi bài đăng trên các bài đăng thuộc chuỗi đó để cho người đọc biết rằng bài đăng đó thuộc chuỗi đó. 

/* Adding Content to WordPress Posts which belong to a Series */

function chw_post_series_post_content_filter($content)
{	
	$slug = "post";
	if($slug != get_post_type())
        return $content;

	$serial_number = get_post_meta(get_the_ID(), "chw-postseries-serial-number", true);    
	$series_id = get_post_meta(get_the_ID(), "chw-postseries-id", true);

    if(get_post_status($series_id) == "publish")
    {
        $html = "";
        
        if($series_id != "" || $serial_number != "")
        {
            $html = "<div class='chw-post-series-post-content'><div>This post is a part " . $serial_number . " of <a href='" . get_permalink($series_id) . "'>" . get_the_title($series_id) . "</a> post series.</div></div>";    
        }

        $content = $html . $content; 
    }

    return $content;
}

Ở đây chúng tôi chỉ hiển thị tên series bài đăng và phần của bài đăng từ series.

Bạn cũng có thể thêm bài đăng tiếp theo và bài trước của loạt bài bằng cách sử dụng cách triển khai bên dưới của hàm chw_post_series_post_content_filter

function chw_post_series_post_content_filter($content)
{	
	$slug = "post";
	if($slug != get_post_type())
        return $content;

	$serial_number = get_post_meta(get_the_ID(), "chw-postseries-serial-number", true);    
	$series_id = get_post_meta(get_the_ID(), "chw-postseries-id", true);

	if($serial_number != "" && $series_id != "")
	{
		//find next and previous post too.

		$post_series_list = get_option("post_series_" . $series_id . "_ids", "");
		$post_series_list_array = explode(',', $post_series_list);

		$post_series_serial_number = array();

		foreach($post_series_list_array as $key => $value)
		{
			$serial_number = get_post_meta($value, "chw-postseries-serial-number", true);
			$post_series_serial_number[$value] = $serial_number;
		}

		asort($post_series_serial_number);

		$post_series_serial_number_reverse = array();

		$iii = 1;

		foreach($post_series_serial_number as $key => $value) 
		{
			$post_series_serial_number_reverse[$iii] = $key;
			$iii++;
		}

		$index = array_search(get_the_ID(), $post_series_serial_number_reverse);

		if($index == 1)
		{
			$html = "<div class='chw-post-series-post-content'><div>This post is a part of <a href='" . get_permalink($series_id) . "'>" . get_the_title($series_id) . "</a> post series.</div><div>&#9112; Next: <a href='" . get_permalink($post_series_serial_number_reverse[$index + 1]) . "'>" . get_the_title($post_series_serial_number_reverse[$index + 1]) . "</a></div></div>";
			$content = $html . $content;
		}
		else if($index > 1 && $index < sizeof($post_series_serial_number_reverse))
		{
			$html = "<div class='chw-post-series-post-content'><div>This post is a part of <a href='" . get_permalink($series_id) . "'>" . get_the_title($series_id) . "</a> post series.</div><div>&#9112; Next post in the series is <a href='" . get_permalink($post_series_serial_number_reverse[$index + 1]) . "'>" . get_the_title($post_series_serial_number_reverse[$index + 1]) . "</a></div><div>&#9111; Previous post in the series is <a href='" . get_permalink($post_series_serial_number_reverse[$index - 1]) . "'>" . get_the_title($post_series_serial_number_reverse[$index - 1]) . "</a></div></div>";
			$content = $html . $content;
		}
		else if($index == sizeof($post_series_serial_number_reverse))
		{
			$html = "<div class='chw-post-series-post-content'><div>This post is a part of <a href='" . get_permalink($series_id) . "'>" . get_the_title($series_id) . "</a> post series.</div><div>&#9111; Previous: <a href='" . get_permalink($post_series_serial_number_reverse[$index - 1]) . "'>" . get_the_title($post_series_serial_number_reverse[$index - 1]) . "</a></div></div>";
			$content = $html . $content;
		}
	}

	return $content;

}

6. Chốt

Nếu bạn sở hữu một blog đang phát triển, thì bạn có thể sử dụng plugin này để tạo chuỗi bài đăng của riêng mình, điều này có thể tăng tỷ lệ tương tác của bạn. Bạn thậm chí có thể sử dụng nó để chia các bài đăng lớn của mình thành nhiều bài đăng nhỏ.

Cám ơn bạn đã theo dõi hết bài đăng, rất mong gặp bạn ở các bài tiếp theo, xin chào hẹn gặp lại bạn!

Bài viết liên quan

Làm sao để bài viết tự cập nhật...

Làm sao để dùng AWS S3 trên mã...

Hướng dẫn sử dụng trường tùy biến (custom...

Fix Wordpress bị hỏi FTP mỗi khi cài...

Hướng dẫn tạo Dark Mode cho website dễ...

DOM là gì? Cách giảm kích thước DOM...

Hướng dẫn giảm Request HTTP cho website

Hướng dẫn cài đặt SSL miễn phí từ...

Chặn index subpages trong Wordpress

Xây dựng FAQ Schema cho Wordpress trong kết...