WordPress短代码教程

wordpress短代码可以添加在任何地方,有强大的作用。

像画廊之类的,都是短代码,格式是 “

” 短代码函数会loop through theses ids.

比方说我们要创建subscriberlist的短代码。

[subscriberlist] , 添加attributes之后, [subscriberlist class=’form-group’ name=’formlister’ title=’add contact info here’ /]

我们要先定义shortcode.

wordpress任何修改都是基于action和filter的。action都是执行的动作,filter是修改和过滤内容。

我们这里用到add_shortcode() 函数。

在主题的include文件夹创建shortcode.php文件。然后在functions.php 里面引入。

require_once get_temlate_directory() . ‘/include/shortcode.php’;

require_once用在一次性引入比方说引入这些关键的文件上, require用在多次引用的文件上,比方说在某个部分或者函数内部引用另外的文件。

add_shortcode(‘subscriberlist’,’subscriberlist_html);

然后创建 subscriberlist_html 函数: subscriber_html 函数传递获取到的$atts 参数, 也就是我们在 [subscriberlist class=’form-group’ name=’formlister’ title=’add contact info here’ /] 里面定义的class,name,title 等参数。

var_dump $atts的参数,返回的是array, 当你在短代码设置参数的时候,返回的就是你设置短代码的参数。

当你创建shortcode时候的时候,首先通过shotcode_atts() 函数创建默认的参数。第一个参数是默认attributes的array, 第二个参数是用户在短代码使用区域传递的 attributes 也就是 $atts.

shortcode_atts( 
			//第一个传递的是默认的attributes,第二个是用户传递的atts。 
			array(
				'class' => 'form-group',
				'title'  => 'Add your info here',
				'row_name'  => 'Name',
				'name'	 => 'Telepone'	

		), $atts)

当var_dump shortcode函数时候可以看到打印出来的是参数的数组,当在使用页面传递了参数的时候打印的就是用户输入的参数,当用户没有设置参数时候打印的是默认的数值。

我们可以使用php的extract函数来使得shortcode函数传递的array变成php variabels, 方面在shortcode本身里面进行变量传递。 比方说上面的shortcode, 通过extarct函数,可以分解成$class,$title,$row_name,$name四个变量。当然你也可以使用$atts[‘class’] 这种形式。

要注意的是attribute 永远是小写的字母。

shortcode最终返回的结果是return的值。最终这个小的短代码形式是这样。

extract(shortcode_atts( 
			//第一个传递的是默认的attributes,第二个是用户传递的atts。 
			array(
				'class' => 'form-group',
				'title'  => 'Add your info here',
				'row_name'  => 'Name',
				'name'	 => 'Telepone'	

		), $atts));

		return '<button name='. $name .' class='. $class .'>' . $title  .'</button>';

上面说的shortocde都是self closing, 也就是自关闭。shortcode同时可以传递$content, 也就是手动关闭shortcode时候,可以传递中间的内容。如:

[dk_icon class=’fas fasearch’]$content[/dk_icon]

在短代码函数那里表示的方式:

function dk_icon_shortcode($atts = [],$content = null) {
	extract(shortcode_atts(array(
		'icon'  => ''
	),$atts));

	return '<i class="' . $icon . '" aria-hidden>' . $content . '</i>';
}

中间的$content就可以传递用户在短代码输入时候的content.

这个$content十分有用,比方说我们传递 do_shortcode() 到$content那里,就可以执行另一个shortcode.

比方说可以执行:

[dk_button class=btn’][dk_icon class=’fas fas-search’/][/dk_button]

在dk_button短代码函数里面,就要设置$content部分为, do_shortcode($content);

shortcode函数还可以传递第三个参数:$tags = ‘ ‘ ; 设置为 empty string. 同时传递到$atts 参数后面, 也就是:

function dk_icon_shortcode($atts = [],$content = null,$tag = '') {
	extract(shortcode_atts(array(
		'icon'  => ''
	),$atts,$tag));

	return '<i class="' . $icon . '" aria-hidden>' . $content . '</i>';
}

$tags允许你filtering shortcode的atts, 也就是可以过滤短代码的atts. 当短代码函数传递了$tag这个参数的时候, 可以添加add_filter(), filter名字是shortcode_atts_你的短代码的名字。

add_filter(‘shortcode_atts_dk_icon’,‘filter_dk_icon’);

function filter_dk_icon ($out,$paris,$atts,$shortcode) {

return [

‘color’ => ‘blue’

] }

原本shortcode_atts函数里的red color会过滤成了blue.

filter_dk_icon 函数传递的四个参数, $out,$paris,$atts,$shortcode ;

$paris是 shortcode_atts里面传递的参数, $atts是用户输入的参数,$shortcode是$shortcode的name, $out是 return之后的html.

Share :