[WordPress教程] 给wordpress增加一个随机文章按钮 -静鱼客栈

2021-09-29 0 160
请勿商业运营,违法使用和传播!资源仅供研究学习使用!解压密码为:www.52jyu.cn

不少网站都有随机文章的功能,包括之前我的写过一个,但是那个实现方法比较蛋疼,这次的实现方式更先进一些,样式还可以。按钮你可以随便放在哪,只要注意给dom绑定事件就可以了。

把下面的代码放到functions.php中


wp_enqueue_script( 'base', true);
wp_localize_script('base', 'Bigfa', array(
     "ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
    $posts = get_posts('post_type=post&orderby=rand&numberposts=1');
    foreach($posts as $post) {
        $link = get_permalink($post);
    }
    echo $link;
    exit;
}
//JS代码,需要1.7以上版本的JQ库

jQuery('.random_post').on('click', function(e) {
            e.preventDefault();
            jQuery.post(Bigfa.ajaxurl, {
                action : 'random_post',
                }, function(data) {
                    window.location.href = data;
            });
        });

在你想使用的地方放上按钮,我是直接仍在了footer.php中


<?php if(!wp_is_mobile()) echo '<a href="javascript:void(0)" rel="external nofollow" > </a>';?>

//css参考样式

.random_post {background-color: #E8E8E8;background-image: url("img/random_icon_normal.png");background-position: center center;background-repeat: no-repeat;height: 16px;margin-top: -60px;padding: 20px 10px;position: fixed;right: 0;top: 50%;width: 19px;}
.random_post:hover{background-color:#F36639;background-image: url("img/random_icon_hover.png");}

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!305582964@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有U点奖励和额外收入!

静鱼客栈 学习中心 [WordPress教程] 给wordpress增加一个随机文章按钮 -静鱼客栈 https://www.52jyu.cn/9535.html

静鱼客栈的帅逼站长~

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP贵宾介绍。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器没有下载完整造成的,可以重新进行下载即可~
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务