wordpress《不再显示》的功能实现

如下图所示,许多插件、主题,在第一次启用时,往往会提示用户该如何操作:

图片[1]-wordpress《不再显示》的功能实现 - KEKC博客-KEKC博客
下方代码与本图片不相同

那么,这样的功能是怎么实现的呢?

一、我的思路

其实,实现的方法有很多,大部分是通过ajax,点击即向数据库中存储一个值,然后再通过这个值来判断到底是不是点击过。

新建ajax

为wordpress添加ajax处理方法(之前有文章,但我们也重新写下):

后台ajax:

<?php
function nonotice(){
	$pointer = 'nonotice_id';

	if ( sanitize_key( $pointer ) != $pointer ) {
		wp_die( 0 );
	}

	$dismissed = array_filter( explode( ',', (string) get_user_meta( get_current_user_id(), 'nonotice', true ) ) );

	if ( in_array( $pointer, $dismissed, true ) ) {
		wp_die( 0 );
	}

	$dismissed[] = $pointer;
	$dismissed   = implode( ',', $dismissed );

	update_user_meta( get_current_user_id(), 'nonotice', $dismissed );
	wp_die( 1 );
}
add_action('wp_ajax_nonotice', 'nonotice');
?>

前台页面:

<?php
$dismissed = array_filter( explode( ',', (string) get_user_meta( get_current_user_id(), 'nonotice', true ) ) );
if ( !in_array( $pointer, $dismissed, true ) ) {

?>
<span id="random"><i id="nonotice"><?php echo random_str();?></i> [<a href="javascript:void();" onclick="nonotice();" rel="nofollow">不再显示</a>]</span>
<?php $admin_url=admin_url( 'admin-ajax.php' );?>
<script type="text/javascript">
function nonotice(){
    jQuery(document).ready(function($){
        var data={
            action:'nonotice'
        }
        $.post("<?php echo $admin_url;?>", data, function(response) {
            $("#nonotice").text(response);
        });
    });
}
</script>
<?php
}
?>

二、我朋友泽客的代码

下面,放上一段我朋友写的代码,也实现了不再显示,但感觉不太完美:

图片[2]-wordpress《不再显示》的功能实现 - KEKC博客-KEKC博客
这里关闭通知就对当前登录用户永远关闭,不再显示

他的代码是这样的(国外有人好像用他这个写法,一样的):

add_action('admin_notices', 'example_admin_notice');
function example_admin_notice() {
	global $current_user ;
        $user_id = $current_user->ID;
	if ( ! get_user_meta($user_id, 'chojiang_notices_5') ) {
	            $con = '<div class="notice notice-success is-dismissible">
            <h2 style="color:#f73d3f;">请配置抽奖插件</h2>
            <p>您的网站还未完成插件功能配置,感谢你的支持 </p><p>【温馨提示:请前往插件设置保存一下,页面自定义数组报错】</p>
            <p><a class="button button-primary" style="margin: 2px;" href="' . admin_url('/admin.php?page=RYtheme#tab=%e9%bb%98%e8%ae%a4%e9%85%8d%e7%bd%ae') . '">立即设置</a><a target="_blank" class="button" style="margin: 2px;" href="https://www.zibll.com/forum-post/9356.html">查看官网教程</a><p>创建抽奖自定义模板 【子比抽奖】</p><a target="_blank" class="button" style="margin: 2px;" href="' . admin_url('/edit.php?post_type=page') . '">创建抽奖页面</a><a target="_blank" class="button" style="margin: 2px;" href="?example_nag_ignore=0">我知道了 关闭通知</a></p>
        </div>';
         echo $con;
	}
}

add_action('admin_init', 'example_nag_ignore');
function example_nag_ignore() {
	global $current_user;
        $user_id = $current_user->ID;
        /* If user clicks to ignore the notice, add that to their user meta */
        if ( isset($_GET['example_nag_ignore']) && '0' == $_GET['example_nag_ignore'] ) {
             add_user_meta($user_id, 'chojiang_notices_5', 'true', true);
	}
}

为什么我评价不太完美,有两点原因:

1、没用ajax,点击页面直接跳转白页了。

图片[3]-wordpress《不再显示》的功能实现 - KEKC博客-KEKC博客
内容为白

2、将处理挂到了admin_init,我还是比较倾向于ajax,将处理挂到wp_ajax,这样系统不必每次加载都加载。

三、国外插件FileBird的代码提取

我又找了FileBird插件,写得比较好,关闭之后一定时间(三天)后再出现,作者是这样写的:

1、后台判断是否需要显示以及显示的内容(注意显示的内容和下方的js,其中的ID是njt-FileBird-review,需要对应):

$option = get_option( 'fbv_review', false );
if ( time() >= intval( $option ) && '0' !== $option ) {
	add_action( 'admin_notices','give_review');
}
function give_review() {
if ( function_exists( 'get_current_screen' ) ) {
	if ( get_current_screen()->id == 'upload' || get_current_screen()->id == 'plugins' ) {
		enqueue_scripts();
		?>
<div class="notice notice-success is-dismissible" id="njt-FileBird-review">
<h3><?php esc_html_e( 'Give FileBird a review', 'filebird' ); ?></h3>
<p>
		<?php esc_html_e( 'Thank you for choosing FileBird. We hope you love it. Could you take a couple of seconds posting a nice review to share your happy experience?', 'filebird' ); ?>
</p>
<p>
		<?php esc_html_e( 'We will be forever grateful. Thank you in advance ;)', 'filebird' ); ?>
</p>
<p>
<a href="javascript:;" data="rateNow"
	class="button button-primary"><?php esc_html_e( 'Rate now', 'filebird' ); ?></a>
<a href="javascript:;" data="later" class="button"><?php esc_html_e( 'Later', 'filebird' ); ?></a>
<a href="javascript:;" data="alreadyDid" class="button"><?php esc_html_e( 'No, thanks', 'filebird' ); ?></a>
</p>
</div>
		<?php
	}
}
}

2、前台js文件内容(注意ajax的url为window.ajaxurl中的fbv_save_review,是wp_ajax,其中还有些无用代码,没去除):

jQuery(document).ready(function () {
  jQuery("#njt-FileBird-review a, #njt-FileBird-review button.notice-dismiss").on("click", function () {
    var thisElement = this;
    var fieldValue = jQuery(thisElement).attr("data");
    var proLink = "https://codecanyon.net/item/media-folders-manager-for-wordpress/reviews/21715379?utf8=%E2%9C%93&reviews_controls%5Bsort%5D=ratings_descending";
    var freeLink = "https://wordpress.org/support/plugin/filebird/reviews/#new-post";
    var hidePopup = false;
    if (fieldValue == "rateNow") {
      window.open(freeLink, "_blank");
    } else {
      hidePopup = true;
    }

    if (jQuery(thisElement).hasClass('notice-dismiss')) {
      fieldValue = 'later'
    }

    jQuery
      .ajax({
        dataType: 'json',
        url: window.ajaxurl,
        type: "post",
        data: {
          action: "fbv_save_review",
          field: fieldValue,
          nonce: window.fbv_data.nonce,
        },
      })
      .done(function (result) {
        if (result.success) {
          if (hidePopup == true) {
            jQuery("#njt-FileBird-review").hide("slow");
          }
        } else {
          console.log("Error", result.message);
          if (hidePopup == true) {
            jQuery("#njt-FileBird-review").hide("slow");
          }
        }
      })
      .fail(function (res) {
        console.log(res.responseText);

        if (hidePopup == true) {
          jQuery("#njt-FileBird-review").hide("slow");
        }
      });

    jQuery
      .ajax({
        url: atob("aHR0cHM6Ly9wcmV2aWV3Lm5pbmphdGVhbS5vcmcvZmlsZWJpcmQvd3AtanNvbi9maWxlYmlyZC92NC9hZGRSZXZpZXc="),
        contentType: "application/json",
        type: "POST",
        dataType: "json",
        data: JSON.stringify({ field: fieldValue }),
      })
      .done(function (result) {
        if (!result.success) {
          console.log("Error", result.message);
        }
        // jQuery('#njt-FileBird-review').hide('slow')
      })
      .fail(function (res) {
        console.log(res.responseText);
        // jQuery('#njt-FileBird-review').hide('slow')
      });
  });
});

3、他加载js的方式(在1中使用到[enqueue_scripts],提一下,NJFB_PLUGIN_URL为插件url,NJFB_VERSION为插件版本)

function enqueue_scripts() {
	wp_enqueue_script( 'fbv-review', NJFB_PLUGIN_URL . 'assets/js/review.js', array( 'jquery' ), NJFB_VERSION, false );
}

4、后台wp_ajax(3天之后再次提醒,很烦):

function fbv_save_review() {
	if ( count( $_REQUEST ) ) {
		$nonce = isset( $_REQUEST[ 'nonce' ] ) ? sanitize_text_field( $_REQUEST[ 'nonce' ] ) : null;
		$nonce = $this->hasField( 'nonce', $_REQUEST );
		$field = isset( $_REQUEST[ 'field' ] ) ? sanitize_text_field( $_REQUEST[ 'field' ] ) : null;

		if ( ! wp_verify_nonce( $nonce, 'fbv_nonce' ) ) {
			wp_send_json_error( array( 'status' => 'Wrong nonce validate!' ) );
			exit();
		}

		if ( 'later' == $field ) {
			update_option( 'fbv_review', time() + 5 * 60 * 60 * 24 ); //After 3 days show
		} elseif ( 'alreadyDid' == $field || 'rateNow' == $field ) {
			update_option( 'fbv_review', 0 );
		}
		wp_send_json_success();
	}
	wp_send_json_error( array( 'message' => 'Update fail!' ) );
}
add_action( 'wp_ajax_fbv_save_review', 'fbv_save_review');

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容