Tự tạo shortcode đưa vào trình biên tập WordPress

Bước 2

Như bạn đã biết, shortcode có 2 phần là cú pháp và cấu trúc. Trong danh sách “Thêm Shortcode”, mình để sẵn một shortcode với cú pháp là: [bangnguyeñ_space]

cấu trúc html của shortcode này là:

<p style="border-bottom: 1px solid #E1E1E1">

Để tạo thêm shortcode bạn cần tạo cấu trúc html của shortcode đó trong file bangnguyen-shortcode-elements.php rồi tạo cú pháp shortcode này trong file bangnguyen-shortcode.php.

Ví dụ minh họa:

Để tạo shortcode cho phép chèn một box download như thế này:

Hướng dẫn tạo shortcode

Download

Ta lần lượt thực hiện các bước sau:

Bước 1: Đăng ký một shortcode trong file bangnguyen-shortcode-elements.php

	add_shortcode('box_download', 'box_download_shortcode');
	function box_download_shortcode( $atts, $content = null ){
		extract( shortcode_atts(array('href'=>'#'), $atts) );

		$ret  = '<div style="border:1px solid #FF9800;background: #f9f9f9;">';
		$ret .= '<p><h3 style="text-align: center">' . do_shortcode($content) . '</h3></p>';
		$ret .= '<p style="text-align: center;"><a class="btn btn-default btn-success" href="' . $href . '">Dowload</a></p>';
		$ret .= '</div>';
	
		return $ret;
	}

*Chú ý: class của nút download các bạn tự tạo trong stylesheet, trong ví dụ này mình sử dụng class “btn” đã được định sẵn trong style.css của mình.

Bước 2: Chèn cú pháp của shortcode vừa tạo vào bangnguyen-shortcode.php

	{title: 'Box download', 
	value: '[box_download href="#"]Tiêu đề hộp download[/box_download]'
	}

Bước 3: Sử dụng shortcode

Bây giờ khi vào trình soạn nội dung tinyMCE chúng ta thấy xuất hiện trong danh sách “Thêm Shortcode” một lựa chọn mới mang tên “Box download”. Vậy là thành công rồi 😀

Cú pháp shortcode sẽ là: [box_download href="#"]Tiêu đề hộp download[/box_download]. Trong đó “#” là url đích của nút download, phần text ở giữa là tiêu đề cho hộp download của bạn.

Chúc bạn thành công 😉

Trang: 1 2

Cập nhật 31 Tháng Ba, 2016

Bạn muốn tạo ra nhiều nguồn thu nhập nhưng chưa biết bắt đầu từ đâu? Hãy mời tôi một ly cà phê.

Bình luận