为了能重复利用上一篇文章介绍的WordPress中实现弹窗效果的简单方法,本文介绍如何将其变为WordPress弹窗插件。简单的写法是利用shortcode产生弹窗,直接在编辑器中写弹窗的链接、按钮等。

插件功能概述

在编辑器里写一个a标签(或button等元素),写上data-target="弹窗HTML ID"就可以打开对应ID的弹窗。而该弹窗用shortcode rs_dialog来生成。

<a href="#" data-rstarget="myModal">Launch Demo Modal</a>
[rs_dialog name="myModal"]

弹窗内容

[/rs_dialog]

data-target – 指定要打开的弹窗ID,rs_dialog shortcode会在页脚产生弹窗的HTML代码,name指定的是弹窗ID,让data-target和name保持一致即可。

插件文件结构

插件主目录命名为rs-dialog,主文件名与目录名一致——rs-dialog.php。将主class单独存放到class-really-simple-dialog.php文件中。assets目录则用来存放js、css和图片等静态资源。

plugin-structure

插件主文件内容

rs-dialog.php是加载插件时第一个读取的文件,尽量让该文件的结构反应流程。

function rs_dialog_plugin_init(){

	load_plugin_textdomain( 'rs-dialog', false, dirname( plugin_basename( __FILE__ ) ) . '/lang' );

	if( !class_exists( 'Really_Simple_Dialog' ) ){
		if( !is_admin() ) include 'class-really-simple-dialog.php';
	}

}
add_action( 'init', 'rs_dialog_plugin_init' );

除了插件开头的标准声明外,该文件只做三项工作:

  1. 将所有代码放到一个function里,并让其和init action一起执行
  2. 是插件可翻译——加载textdomain
  3. 只在前台引入主class文件

主class文件结构

主class文件的内容与上一篇文章源代码simple-dialog/functions.php类似,区别是:

  • 增加了shortcode功能
  • shortcode产生的内容挪到页脚输出,而非通常的在写shortcode的位置输出,这也是为了提高与主题的兼容性。因为弹窗需要fixed position,若直接放在content里,可能会受到parent div的影响

class-really-simple-dialog.php内容如下,为了看清结构省略了功能具体内容

class Really_Simple_Dialog{
	
	var $dialogs = array();	

	public function __construct(){

		// Load css&js
		add_action( 'wp_enqueue_scripts', array( $this, 'load_dependencies' ) );

		// Create shortcode [rs_dialog title="" name=""]...[/rs_dialog]
		add_shortcode( 'rs_dialog', array( $this, 'new_rs_dialog' ) );

		add_action( 'wp_footer', array( $this, 'output_dialogs' ) );
	}

	function load_dependencies(){}

	function new_rs_dialog( $atts, $content = null ){}		

	function output_dialogs(){}
}
new Really_Simple_Dialog();

shortcode如何编写

对于HTML较多的shortcode,可以利用ob_start()和ob_get_clean()来避免写很多echo。

通常shortcode会return 生成的内容,即return ob_get_clean(),这里需要内容到页脚输出,于是将内容赋给class的对象$this->dialogs,它在class内部可任意访问,因此起到了全局变量的作用。

shortcode在内容区域执行,输出则在the_footer action处执行,前者比后者先执行,因此$this->dialogs将存储页内所有rs_dialog shortcode产生的弹窗HTML,在the_footer action处直接打印$this->dialogs,就将弹窗内容全部转移到了页脚。当然这个功能也可以用jquery实现。

function new_rs_dialog( $atts, $content = null ){
	extract( shortcode_atts( array(
		'name'  => '',
		'title'	=> ''
	), $atts ) );
	$name 		= sanitize_text_field( $name );
	$title		= sanitize_text_field( $title );
	$content 	= wp_kses_post( $content );

	if( empty( $name ) ){
		if( current_user_can( 'manage_options' ) ){
			return '<p style="color:red"><strong>' . __( 'Please specify the name for re_dialog shortcode.', 'rs-dialog' ) . '</strong></p>';
		}
	}

	if( empty( $content ) ) {
		$content = '<p>' . __( 'The example content of dialog box', 'rs-dialog' ) . '</p>';
	}
	ob_start();
?>
	<div class="rs-dialog" id="<?php echo $name; ?>">
		<div class="rs-dialog-box">
			<a class="rs-close" href="#">&times;</a>
			<?php if( !empty( $title ) ) : ?>
			<div class="rs-dialog-header">
				<h3><?php echo $title; ?></h3>
			</div>
			<?php endif; ?>
			<div class="rs-dialog-body">
				<?php echo $content; ?>
			</div>
			<div class="rs-dialog-footer">
				<input type="button" class="rs-close" value="<?php _e( 'Close', 'rs-dialog'); ?>" style="float:right">
			</div>		
		</div>		
	</div>
<?php
	$this->dialogs[] = ob_get_clean();
	return;
}

插件源代码

其他功能不在赘述,感兴趣的朋友可以下载插件源代码,欢迎指正。

rs-dialog插件源代码 已下载 437 次

15条留言

  1. 这个插件好像不支持弹出youku

    1. 这个插件只是介绍了一种弹窗写法,至于弹出优酷还是youtube视频,可以自行扩展。比如弹出优酷视频,可以在内容里填上优酷视频地址,用php输出内容时通过正则表达式提取优酷视频地址,并替换成embed代码。这个替换过程也可以用javascript实现,比如点击弹窗按钮时动态替换。更简单的方式是你直接把优酷embed代码写进内容里就行了。

  2. 你好,sola。
    对于这个插件,很不错。使用之后,我以下几点问题:
    1. 嵌入视频代码,弹窗不显示内容
    2. 另外,在电脑或者手机第一屏之下位置时(如第二屏或者第三屏…),点击触发锚文本不出现弹窗,而是跳至第一屏。

    1. 而在第一屏的时候,使用是正常的

  3. 您好,请问这个插件可以用来 弹窗一些视频吗?这类的,我刚刚试了一下嵌入这段,弹窗的空白的。

    1. 这个插件只是弹窗功能,你放什么内容它就显示什么内容,前提是没有js错误。
      你嵌入了什么视频?把视频的embed 代码放在内容区域应该可以显示。
      比如这种

      <iframe height=498 width=510 src="http://player.youku.com/embed/XOTM2OTQ5NzQ0" frameborder=0 allowfullscreen></iframe>
      
      1. <a href="#" rel="nofollow">Launch Demo Modal</a>

        [rs_dialog name=”myModal”] [/rs_dialog] 我在我的网站上,新建了一个test page,文本状态下写入了上面的代码。 点击锚文本“Launch Demo Modal”后,出来的弹窗为空白。查看代码:

        1. 你是这样在编辑器里写的吗

          <a href="#" data-target="myModal">Launch Demo Modal</a>
          [rs_dialog name="myModal"]
          弹窗内容
          [/rs_dialog]
          

          注意a标签要有data-target,用来指定要打开的弹窗的ID(myModal),然后shortcode里的name也必须是myModal,即ID保持一致。
          弹窗内容也要写在shortcode里。

          这个插件只是提供一种解决问题的思路,还没达到可以发行的水平,所以你要用的话只能当作参考资料。

          还有,如果主题是基于bootstrap的,那data-target这个参数可能导致js错误,得改名字。

      2. 你好,我在使用过程中还发现一个问题。就是在手机访问网站后,如果这个触发弹窗的点在手机第二屏,点击之后窗口出不来,只会到: URL/#

  4. 姑娘,我的博主Aiwill 爱微博客被墙了,现在换成了www.cwctv.com,能帮改一下友链吗,谢谢了

发表评论

电子邮件地址不会被公开。 必填项已用*标注