Wordpress shortcode với ví dụ thuộc tính

Tạo mã ngắn trong WordPress cực kỳ dễ dàng. Nhưng trước đó bạn phải biết các loại shortcode để có thể tạo shortcode chính xác giúp công việc của bạn trở nên dễ dàng. WordPress shortcode có 3 loại

• Mã ngắn tự đóng
• Mã ngắn có thuộc tính/tham số
• Mã ngắn kèm theo

Tạo mã ngắn WordPress tùy chỉnh. add_shortcode()

Bạn có thể tạo shortcode WordPress bằng hàm add_shortcode(), hàm này đăng ký shortcode với WordPress

add_shortcode( 'shortcode_name' , 'callback_function' )

Hàm này chấp nhận hai tham số

• shortcode_name = Tên mã ngắn của bạn
• callback_function = chức năng sẽ được thực thi để hiển thị đầu ra

Bây giờ bạn đã sẵn sàng để tạo mã ngắn tùy chỉnh đầu tiên của mình. Hãy đi sâu vào vấn đề này

Tạo mã ngắn tự đóng

Mã ngắn tự đóng là dạng mã ngắn cơ bản. Loại mã ngắn này không có bất kỳ thẻ kết thúc nào và chúng tự động đóng. Nó chỉ chứa tên của shortcode

Nó sẽ trông giống như thế này

[shortcode_name]

Quảng cáo Tôi đã viết một bài viết về cách tạo mã ngắn để hiển thị bài đăng từ các loại bài đăng tùy chỉnh, trong đó tôi đã phác thảo việc sử dụng các mã ngắn tự đóng này.

Hãy lấy một ví dụ

Vì vậy, ở đây tôi đang lấy một ví dụ để tạo một mã ngắn tùy chỉnh cho các liên kết xã hội. Sao chép mã dưới đây và thêm nó vào các chức năng của chủ đề của bạn. tập tin php

function diwp_basic_shortcode_social_links(){
	
	$facebook = "Follow Us On facebook";
	$twitter = "Follow Us On Twitter";

	$output = $facebook.'
'.$twitter;	
	
	return $output;
}

add_shortcode( 'social_links', 'diwp_basic_shortcode_social_links' );

Sau khi thêm mã này vào chức năng. tập tin php. Chỉ cần sao chép mã ngắn bên dưới và thêm vào trang hoặc bài đăng của bạn

Usage : [social_links]

Mã ngắn này sẽ hiển thị cho bạn các liên kết xã hội dưới dạng đầu ra giống như trong hình bên dưới

Bây giờ hãy hiểu ví dụ trên. Trong đoạn mã trên, tôi đã làm hai việc

1. Tôi đã tạo một hàm diwp_basic_shortcode_social_links() đang trả về các liên kết xã hội dưới dạng đầu ra
2. Tôi đã đăng ký mã ngắn bằng hàm add_shortcode() và chuyển hàm gọi lại của mình vào đó

Tạo mã ngắn với nhiều tham số

Trong mã ngắn ở trên, Bạn đã học về cách tạo mã ngắn đơn giản hoặc cơ bản. Bây giờ, hãy đi trước một bước bằng cách truyền tham số và thêm thuộc tính vào đó. Nó sẽ trông giống như thế này. Quảng cáo

[shortcode_name name="myshortcode" color="red"]

Tôi đã viết một bài viết về việc tạo một mã ngắn để hiển thị các bài đăng từ các danh mục, trong đó tôi đã phác thảo việc sử dụng nhiều tham số và thuộc tính trong mã ngắn

Hãy hiểu bằng ví dụ

Vì vậy, một lần nữa, tôi đang lấy ví dụ về các liên kết xã hội ở trên để hiểu điều này. Bây giờ tôi muốn có một tùy chọn để đặt URL tùy chỉnh, màu sắc và có thể là cỡ chữ cho mã ngắn liên kết xã hội

Hãy sao chép đoạn mã dưới đây và thêm nó vào các chức năng của chủ đề của bạn. tập tin php

// Creating shortcode with multiple attributes
function diwp_social_link_with_parameter($attr){

	$args = shortcode_atts( array(
	
			'url' => '#',
			'color' => '#F0F',
			'textsize' => '16px'

		), $attr );

	$output = 'Check Out My Facebook Page';
	return $output;

}

add_shortcode( 'social_links_para' , 'diwp_social_link_with_parameter' );

Sau khi thêm mã ngắn này vào chức năng. tập tin php. Thêm mã ngắn bên dưới vào trang hoặc bài đăng của bạn

Usage: [social_links_para url="https://facebook.com/page-name" color="#446ade" textsize="25px"]

Và mã ngắn này sẽ hiển thị cho bạn đầu ra như trong hình bên dưới

Bây giờ hãy hiểu mã này, Vì vậy, nếu bạn thấy mã tôi đã làm điều tương tự. Tôi đã tạo chức năng gọi lại và đăng ký mã ngắn của mình

Nhưng trong hàm gọi lại, tôi đã truyền tham số $attr và cũng sử dụng hàm shortcode_atts(). Quảng cáo

• $attr = nó là một mảng các thuộc tính hoặc nó có thể là chuỗi rỗng nếu không có thuộc tính nào được cung cấp
• shortcode_atts( $defalt_array, $attr ) = Hàm này được sử dụng để xác định các thuộc tính và giá trị mặc định của chúng cho mã ngắn. Phải mất 2 tham số và cả hai đều được yêu cầu
  • $defalt_array – một mảng với các thuộc tính và giá trị của chúng
  • $attr – một mảng các thuộc tính mà chúng ta chuyển qua shortcode

Sau đó, trong chuỗi đầu ra của chúng tôi, tôi đã chuyển các giá trị cho thuộc tính của chúng và trả về đầu ra

Tạo mã ngắn kèm theo

Mã ngắn kèm theo, là loại mã ngắn có thẻ bắt đầu và thẻ kết thúc, giống như thẻ HTML. Các mã ngắn này cho phép bạn nhúng nội dung của mình vào các mã ngắn

Nó sẽ trông giống như thế này

[shortcode_name] Your Content to be displayed [/shortcode_name]

Hoặc

Với sự trợ giúp của các mã ngắn kèm theo, bạn có thể dễ dàng tạo các mã ngắn lồng nhau. Quảng cáo

Tôi đã viết một bài viết về cách tạo mã ngắn lồng nhau, nơi tôi đã phác thảo, tạo mã ngắn bên trong mã ngắn bằng cách sử dụng mã ngắn kèm theo

Hãy hiểu bằng ví dụ

Trong ví dụ trên, bạn đã học về cách tạo Mã ngắn với các thuộc tính. Bây giờ tôi muốn đi trước một bước bằng cách chuyển nội dung trong đó. giả sử, tôi muốn thêm văn bản tùy chỉnh cho các liên kết này một cách linh hoạt. Quảng cáo

Để làm điều đó, hãy sao chép mã bên dưới và thêm nó vào chức năng của chủ đề của bạn. tập tin php

// Creating enclosing shortcode with parameters
function diwp_enclosed_shortcode_social_links($attr, $content){

	$args = shortcode_atts( array(
	
			'url' => '#',
			'color' => '#F0F',
			'textsize' => '16px'

		), $attr );

	$output = ''.$content.'';
	return $output;

}

add_shortcode( 'enclosed_social_links', 'diwp_enclosed_shortcode_social_links' );

Sau khi thêm mã này vào chức năng. php, hãy thêm mã ngắn bên dưới vào trang hoặc bài đăng của bạn

[shortcode_name]

Như bạn có thể thấy trong mã ngắn ở trên, tôi có thẻ bắt đầu, thẻ kết thúc và nội dung giữa chúng. Mã ngắn này sẽ được xuất ra như trong hình bên dưới. Quảng cáo

Bây giờ hãy hiểu điều này, vì vậy ở đây một lần nữa, tôi đã sử dụng chức năng gọi lại, chuyển tham số $attr vào đó và đăng ký mã ngắn của mình

Chỉ khác là, tôi đã truyền một tham số khác $content trong hàm của mình. Đây là tham số giữ giá trị cho nội dung. Và tôi chỉ hiển thị nó trong nội dung shortcode của mình

Hy vọng bài viết này sẽ giúp bạn tìm hiểu cách tạo các loại mã ngắn khác nhau trong WordPress

Bhuvnesh Shrivastava

Chủ sở hữu của Diveinwp. com, chịu trách nhiệm duy nhất về việc tạo nội dung hữu ích, nhiều thông tin về WordPress, nhà phát triển WordPress toàn thời gian với hơn 8 năm kinh nghiệm thực tế trong thiết kế và phát triển WordPress

$atts trong WordPress là gì?

Có bao nhiêu tham số có thể truyền vào Add_shortcode()?

Add_shortcode trong WordPress là gì?