Home » Thủ thuật » Hướng dẫn làm plugin metabox nhập phim nâng cao

Hướng dẫn làm plugin metabox nhập phim nâng cao

Tiếp tục bài hướng dẫn làm web phim wordpress, hôm nay mình sẽ tiếp tục bài 2 cho series: “Chuyển một theme wordpress thành theme phim”.

Bài viết này không phải mình là tác giả mà mình copy của bác Hoangxanh trên blog blog-hxplugin, hiện blog và link fb (đã die) nên không liên lạc được nên mình copy lại để dùng khi cần và chia sẻ cho anh em có nhu cầu.

Ở phần trước mình đã hướng dẫn các bạn tạo một input để nhập link nhưng chưa có tên server và thêm link phải không, hôm nay chúng ta sẽ tiếp tục nâng cấp lên nhé.

Vì sử dụng để nhập link phim nên nếu dùng input để nhập mấy link kiểu phim One Piece thì sẽ không đẹp mắt và còn bị treo nữa, nên chúng ta sẽ sử dụng textarea thay cho input.

<?php   

// Khai báo meta box

function phimmetabox() {
    add_meta_box( 'phim-metabox', 'Nhập link phim', 'creat_metabox', 'post' );
}
add_action( 'add_meta_boxes', 'phimmetabox' );

// Khai báo callback

function creat_metabox($post) {
	$link = get_post_meta(get_the_ID(), 'hx-phimurl', true);
	echo '<h4>Post link dạng: link1|tên;link2|tên. (Phân cách với tên bằng dấu "|" xược thẳng và các link với nhau bằng dấu ";" chấm phẩy)</h4><div id="list_server">';
	if(is_array($link) && count($link) > 0){
		foreach($link as $k => $l){
			echo '<div id="server-'.$k.'" class="server2">';
			echo 'Tên server <input type="text" name="sername-'.$k.'" value="'.$l['name'].'" placeholder="Picasa"/><a style="float:right;" onclick="remove_server('.$k.');" class="button button-small">Xóa</a><hr>';
			echo '<div class="sub-item"><textarea placeholder="Link1|Tập1;,Link2|Tập2;Link3|Tập3" name="datalink-'.$k.'" id="datalink-'.$k.'">';
			echo implode(";",$l['list']);
			echo '</textarea></div></div>';
		    $max = $k+1;
		}		
	}
}
?>

Bây giờ thì đã có một metabox, trong đó là một textarea để nhập link vào, link nhập theo dạng “Link1|Tập1;,Link2|Tập2;Link3|Tập3” giữa link và tên tập phân cách nhau bằng dấu “|” xược thẳng, còn giữ các tập với nhau thì sử dụng dấu “;” chấm phẩy. Tiếp đến là một đoạn javascript để thêm server nhập link.

<?php   

// Khai báo meta box

function phimmetabox() {
    add_meta_box( 'phim-metabox', 'Nhập link phim', 'creat_metabox', 'post' );
}
add_action( 'add_meta_boxes', 'phimmetabox' );

// Khai báo callback

function creat_metabox($post) {
	$link = get_post_meta(get_the_ID(), 'hx-phimurl', true);
	echo '<h4>Post link dạng: link1|tên;link2|tên. (Phân cách với tên bằng dấu "|" xược thẳng và các link với nhau bằng dấu ";" chấm phẩy)</h4><div id="list_server">';
	if(is_array($link) && count($link) > 0){
		foreach($link as $k => $l){
			echo '<div id="server-'.$k.'" class="server2">';
			echo 'Tên server <input type="text" name="sername-'.$k.'" value="'.$l['name'].'" placeholder="Picasa"/><a style="float:right;" onclick="remove_server('.$k.');" class="button button-small">Xóa</a><hr>';
			echo '<div class="sub-item"><textarea placeholder="Link1|Tập1;,Link2|Tập2;Link3|Tập3" name="datalink-'.$k.'" id="datalink-'.$k.'">';
			echo implode(";",$l['list']);
			echo '</textarea></div></div>';
		    $max = $k+1;
		}		
	}
	    if(!$max)
	    	$max = 0;
		echo '</div><a onclick="add_server();" class="button button-small">Thêm server</a></div>';
		?>
        <script>
        var new_id = <?php echo $max?>;
        function remove_server(id){
            document.getElementById("server-" + id).remove();
        }
        function add_server() {
            var content = document.getElementById("list_server");
            var div_item = document.createElement("div");
            div_item.id = "server-" + new_id;
            div_item.className = "server";
            div_item.innerHTML = 'Tên server <input type="text" name="sername-'+new_id+'" placeholder="Picasa"/><a style="float:right;" onclick="remove_server('+ new_id +');" class="button button-small">Xóa</a><hr><div class="sub-item"><lable for="datalink-'+new_id+'"></lable><textarea placeholder="Link1|Tập1;Link2|Tập2;Link3|Tập3" name="datalink-'+new_id+'" id="datalink-'+new_id+'"></textarea></div>';
            content.appendChild(div_item);
            new_id++;
        }</script>

<style>
        .server{overflow:auto;max-height:500px;padding:5px;margin-top:5px;border: 1px solid #DFDFDF;background-color: #FDFDFD;}
        .sub-item textarea{width:100%;height:150px;}
        table input,table select{float:right;}
        </style>

<?php } ?>

Phần metabox bây giờ có thêm một button nhỏ để thêm server, mỗi khi click vào thì sẽ tạo thêm một textarea mới để nhập link phim. Để lưu dữ liệu link và tên server vào database, chúng ta sẽ tách dữ liệu từ các id “sername” và “datalink”.

<?php 

// Lưu dữ liệu meta box 
function save_meta_link($post_id) { $arr = array(); foreach($_POST as $k => $l){
		preg_match('/sername-(.*)/is', $k, $s);
		preg_match('/datalink-(.*)/is', $k, $e);
		if($s[0]):
			$arr[$s[1]]['name'] = $_POST[$s[0]];
		endif;
		if($e[0]):
			$list = explode(';', $_POST[$e[0]]);
			if(!$list == ''||!$list == null) $arr[$e[1]]['list'] = $list;
		endif;
	}
	update_post_meta( $post_id, 'hx-phimurl', $arr );
}
add_action('save_post', 'save_meta_link');
?>

Xong rồi, bây giờ các bạn thử bật plugin lên xem, tạo một vài server để nhập link thử:
hướng dẫn làm web phim wordpress
Ngon rồi đấy 😀

Các hàm sử dụng trong bài các bạn có thể tham khảo ở đây: https://codex.wordpress.org/Function_Reference
Phần này kết thúc tại đây, phần sau mình sẽ hướng dẫn cách lấy dữ liệu từ metabox để echo ra ngoài bài post

Comment Facebook

Bình luận Google +