首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在WordPress中使用jQuery拉取随机横幅图像

的步骤如下:

  1. 首先,在WordPress的主题文件夹中找到functions.php文件。该文件通常位于wp-content/themes/your-theme目录下。
  2. 打开functions.php文件,并添加以下代码片段:
代码语言:txt
复制
function custom_scripts() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true );
    wp_localize_script( 'custom-script', 'custom_vars', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

function load_random_banner() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'posts_per_page' => 1,
        'orderby' => 'rand'
    );
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            $image_src = wp_get_attachment_image_src( get_the_ID(), 'full' );
            echo $image_src[0];
        }
    }
    wp_reset_postdata();
    die();
}
add_action( 'wp_ajax_load_random_banner', 'load_random_banner' );
add_action( 'wp_ajax_nopriv_load_random_banner', 'load_random_banner' );
  1. 在主题文件夹中创建一个名为js的文件夹,并在其中创建一个名为custom.js的文件。将以下代码粘贴到custom.js文件中:
代码语言:txt
复制
jQuery(document).ready(function($) {
    $.ajax({
        url: custom_vars.ajax_url,
        type: 'POST',
        data: {
            action: 'load_random_banner'
        },
        success: function(response) {
            $('.banner-container').html('<img src="' + response + '">');
        }
    });
});
  1. 确保你的WordPress主题中有一个包含横幅容器的HTML元素,例如:
代码语言:txt
复制
<div class="banner-container"></div>
  1. 保存所有文件,并在WordPress后台激活你的主题。

现在,当用户访问你的WordPress网站时,jQuery将通过AJAX请求调用load_random_banner函数,该函数将随机从媒体库中选择一张图片,并将其插入到横幅容器中显示。

该解决方案的优势是:

  1. 动态加载横幅图像:使用jQuery和AJAX可以实现动态加载横幅图像,无需每次刷新页面都显示相同的图像。
  2. 随机选择图像:通过使用WP_Query和'orderby'参数设置为'rand',我们可以随机选择媒体库中的图像作为横幅图像,增加网站的多样性和趣味性。
  3. 灵活性和易用性:这个解决方案易于实现和定制,无需过多的编码工作,并且不需要依赖其他第三方插件或服务。

适用场景:

该解决方案适用于需要在WordPress网站上展示随机横幅图像的情况,比如博客、新闻、展示等网站。通过动态加载横幅图像,可以为用户提供更好的视觉体验,并增加网站的吸引力。

腾讯云相关产品推荐:

腾讯云对象存储(COS):适用于存储和管理媒体文件,包括横幅图像。它提供高可靠性、低成本和可扩展的对象存储服务。了解更多:腾讯云对象存储(COS)

腾讯云CDN加速:用于加速网站内容分发,提高访问速度和用户体验。可以结合WordPress和jQuery使用CDN加速加载横幅图像,进一步优化网站性能。了解更多:腾讯云CDN加速

请注意,以上产品仅作为参考推荐,并非强制要求使用。你可以根据自己的需求和预算选择适合的云服务提供商和产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题

我们将它们称为“闪光”,并且每次触发动作时它们都会随机移动。此外,您可以使用GIF使这个滑块更加美观!为您的帖子添加徽章您可以标记自己的帖子。...可用的样式是:经典(特色图片)英雄与灯光标题黑暗标题的英雄没有特色图片画廊帖子将您的图库添加到帖子,然后选择“图库”帖子格式。它将显示帖子页面的最顶部,一个有用的滑块。...通过原生WordPress定制器将SEO文本添加到您的博客主页。动画Gliu Slider插件附带主题。控制/更改您在滑块中看到的闪光计数。Off-Canvas边栏您可以更改特色图像尺寸。...“英雄特色图像”选项可用于深色或浅色标题。上传您自己的徽标并更改其大小。您可以显示/隐藏大部分元素。排行榜横幅管理:10个不同的位置添加最多20个横幅。无需 .pot文件即可将主题翻译成您的语言。...只需从定制器执行此操作即可。页脚显示的19个社交帐户图标。使用联系表格7插件为您的联系表格。

8.6K20

怎么写一个超棒的README文档

有很多的贡献者、请求、频繁发布的更新版本,都有一个很棒的README。 新的开发人员将能够找到所有详细信息以开始使用,例如安装说明和贡献指南。...我个人使用Canva网站创建横幅图像。所有基本内容都是免费的(大多数情况下,你不需要专业版)。 标题下那些华丽的东西是什么? 看起来不错吧?...你也可以在上一节的演示添加产品说明。 这是一个随机GIF作为占位符。 目录 介绍了项目之后,添加目录是一个好主意。这将使人们可以更轻松地浏览你的README,并准确找到他们想要的内容。...你还可以为项目提交、发布或请求提供指导。...就个人和标准而言,你应该使用一个问题模板和请求模板,以便用户打开新问题时可以按照项目指南轻松地格式化它: https://github.com/navendu-pottekkat/nsfw-filter

1.7K30
  • 全球N个WordPress网站感染了……

    回顾: 2017年12月发生的事件: 将近5500个受感染的WordPress网站上发现了键盘记录器 将近5500个WordPress站点被恶意脚本所感染,这些脚本记录键盘敲击,有时还会使浏览器加载加密的程序...大多数WordPress网站上,唯一可以窃取用户数据的地方是评论栏,一些WordPress网站被配置为应用商店上配置,在这些实例,攻击者可以记录信用卡数据和个人用户详细信息。...不法分子找到不安全的WordPress网站 - 通常运行较老的WordPress版本或较旧的主题和插件 - 并利用这些网站的漏洞将恶意代码注入到CMS的源代码。 恶意代码包括两部分。...对于该网站的前端,骗子使用访问该网站的人员的CPU加载Coinhive浏览器自动挖矿、 骗子迁移到新的域名 对于2017年末的活动,骗子从“cloudflare.solutions”域名中加载了他们的键盘记录...攻击者从2017年4月开始活跃 如前所述,这个活动自2017年4月以来一直进行,到2017年的大部分时间里,黑客正忙于在被黑网站上嵌入横幅广告,并加载伪装成假jQuery和Google Analytics

    1.5K90

    TwentyTwenty:一个图片特效Jquery 插件

    这个Jquery 插件值得推荐——虽然我不清楚什么情况下适用,但你知道有这个东西,需要的时候就能用上了——收集多点资源总不是坏事。插件的效果具体我也不会说,直接看官网demo吧。...简介 官方网站& demo:http://zurb.com/playground/twentytwenty 运行必备:jqueryjquery.event.move(一个用于移动设备上支持触摸事件的类...当滑块整个图像移动,它使CSS的使用剪辑属性来裁剪图像左侧,这允许右侧的图像通过容器来显示。 我们正在使用的自定义运动事件jquery.event.move库,以支持移动设备上1:1滑块运动。...: $(window).load(function() { $("#container1").twentytwenty(); }); WordPress 插件 这里有个TwentyTwenty...基础上开发的WordPress 插件,通过短代码 [TwentyTwenty][/TwentyTwenty] 就可以直接在后台的编辑器中使用

    4.8K80

    HTML5 简介(三):利用 History API 无刷新更改地址栏

    例如,我们的例子,有: e.state.id == 2; e.state.name == "profile"; replaceState 方法 有时,你希望不添加一个新记录,而是替换当前的记录(比如对网站的...这时我们可以使用 AJAX 来右面的数据。但是如果仅仅这样,地址栏是不会改变的,用户无法前进、后退,也无法收藏当前页面或者把当前页面分享给他人;搜索引擎抓取也有困难。...塞入浏览器历史记录,再利用 AJAX 技术(如果有 jQuery,可以使用$.get方法)这个地址真正的内容,同时替换当前网页的内容。...事件处理函数,我们根据当前的地址抓取相应的内容,然后利用 AJAX 这个地址的真正内容,呈现,即可。...但是,URL 允许使用 query string 的形式。例如: window.history.pushState(null, null, "?id=1"); 某些情况下可能比较方便。

    2.3K10

    删除或失效WordPress文章图像大小属性

    认情况下,WordPress会将图像元素width和height属性添加到图像元素。...add_filter( 'post_thumbnail_html', 'salong_remove_image_size_attributes' ); // 从添加到WordPress文章的图像删除图像大小属性...通过 jQuery 删除width和height属性 对于已经添加到文章的图像,必须手动删除width和height属性,或者也可以使用一些jQuery代码来解决问题,以下代码添加到主题 js 文件:...('height'); }); 使用 jQuery 代码删除图像大小属性更加方便,对于已经添加或者将来要添加的图片都适用。...使用 CSS 使图像大小属性失效 对于响应式图片或者延迟加载时的默认图片都是较好的解决方法,将以下代码添加到主题 CSS 样式文件: img { width: initial !

    2.5K40

    WordPress 插件 Learnpress 4.1.4.1 - 任意图像重命名

    此 LMS 的用户可以注册后上传图像作为个人资料头像。在此过程之后,用户裁剪并保存图像。然后将包含用户提供的图像名称的“POST”请求发送到服务器以重命名和裁剪图像。...恶意行为的一些示例: - 销毁网站的横幅 - 销毁用户头像 - 销毁帖子图片 - 销毁按钮/应用程序图像等。 # 重现步骤 1.注册并登录learnpress系统。 2....进入个人资料页面并上传头像图片:https:///lp-profile//settings/avatar/ 3、保存图片的同时,通过...将 `lp-user-avatar-crop[name]` 参数的值更改为网站的任意图像文件路径(例如 /2021/01/image.png 或 /../../图像.png)。...5.转发截获的请求,检查步骤4给出的图像文件是否存在。 6. 你会看到图片找不到。因为它的名字改名了。

    53250

    WordPress 5.7 发布,更好用的古腾堡编辑器

    WordPress 5.7 发布,新版本改善了古腾堡编辑器的编辑体验,并使用户能够轻松创建更多高级块,并为块编辑器添加更强大的自定义项,还有 HTTPS 切换等其他功能改进​。...更简单的默认调色板 全新简化的调色板参照 WCAG 2.0 AA 推荐的白色或黑色对比度将 WordPress 源代码的所有颜色分解为 7 种核心颜色和 56 种阴影。...可以 WordPress 默认仪表盘的配色方案找到新的调色板,主题,插件或任何其他组件,开发的时候可以参考使用,更多这方面的信息,请参考调色板开发说明。...一键切换 HTTP 到 HTTPS 从现在开始,将站点从 HTTP 切换到 HTTPS,只需一次点击,WordPress 会自动更新数据库的 URL,无需自己去做更多的处理了。...jQuery 升级到 3.5.1 WordPress 还是会一直支持 jQuery,因为太多的插件和主题是基于 jQuery 做的交互,WordPressjQuery 升级到最新版,并移除 jQuery

    73420

    Display Posts : 按条件显示WordPress文章的最强插件

    使用的方法主要有两种: 可以通过WordPress编辑器插入短码的形式。...比如 用 jQuery 和 Bootstrap WordPress 添加进度条 这里介绍的用法 也可以通过主题文件中使用函数do_shortcode() 。...比如这篇文章中介绍过的:WordPress添加简书风格的连载目录和文章导航 Display Post支持的参数特别全面。...jQuery的最佳方法 WordPress免费插件的选择指南 WP Plugin Info Card : 用于展示WordPress插件信息的最佳插件 使用Vue.jsWordPress创建单页面应用...举几个例子: orderby=”author” -按作者排序 orderby=”rand” – 随机排序 orderby=”comment_count” – 按评论数量排序 在上面的短码我还加入了其他几个参数

    3.5K10

    Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章

    只需要把想修改的主题模板文件拷贝到根目录下同样的目录并进行修改,这样就可以不改动原本的主题文件的情况下实现主题美化。...md文件中使用 md文件可以用内置的shortcodes来使用该变量: 1 2 3 {{}} !...cdn := .Site.Params.cdnPrefix -}} /* 使用局部变量 */ {{ $cdn }} JavaScript文件中使用 由于JavaScript文件不能使用上述的shortcodes...Site.Params.cdnPrefix }}/js/custom.js"> 主题自带的admonition样式 LoveIt提供了admonition shortcode,支持 12 种样式,可以页面插入提示的横幅.../jquery-backstretch@2.1.18/jquery.backstretch.min.js"> 然后custom.js里添加如下代码,具体想要轮播哪些图片可以自行修改

    2.4K21

    “粽”情过端午—端午节暖情营销方案

    商家想在众多的竞争者吸引消费者的目光,就要有好的活动方案。线上线下结合效果最佳,线下气氛渲染,线上裂变传播。下面集锦了端午节活动方案,相信能带给大家启发。 ?...优惠券消费限制: 1)端午前后3-4天均可消费 2)最低消费满200元(可更改)才可使用。...2.端午节包粽子微信小游戏 游戏方式:用户参与活动(可自定义关注、收集信息等),可默认获得包粽子材料,分享给好友,好友翻牌的形式,为你翻出材料,同时好友也可以随机获得一份材料,大大提高助力好友的参与热度...2、横幅! 3、微信软文:编辑美观的图文结合的微信软文进行发送! 4、微信包粽子游戏参与者自发宣传 ?...2、横幅! 3、微信软文:编辑美观的图文结合的微信软文进行发送! 4、微信包粽子游戏参与者自发宣传 ?

    1.3K40

    JavaScript的注入引出技术诈骗

    0×01 前言 最近的恶意软件的调查,我们发现了一些有趣的混淆JavaScript代码。...此代码伪装成现在流行的插件AddThis social sharing的一部分,URL命名约定和图像文件中使用它。...0×02 混淆的恶意图像文件 恶意代码嵌入WordPress核心文件的末尾 wp-includes/js/jquery/ui/datepicker.min.js ?...这是通过字符串随机位置添加0到5的数字来编码的,如下所示: 22c1n4d41.3s27-44a2d11d1t0hi4s3.0t1o2p001 在从字符串删除0-5之间的所有数字后,我们看到它从以下位置的...隐藏在图像文件的恶意代码恶意软件业务并不是什么新东西 – 我们已经看到了这些年来不同的技术。PNG文件的END部分之后添加的恶意代码不会破坏图像

    1.2K50

    非常适合个人搭建博客—WordPress开源免费主题汇总

    加上这些Wordpress主题都是开源的,基本上可以Github上找得到源码,安全性是没有问题,主题的作者也不断更新当中。...主题特性: 1、随机封面图 内带了一个返回随机图片的 API,把想要展示的图放到 /cover/gallery 即可。...2、Lazyload 使用了开源库 jQuery-Lazyload,按需加载图片,优先加载缩略图或占位图,当图片显示 viewport 上时才加载原图,提升网页加载速度。...6、QQ/Gravatar 头像 如果输入了 QQ 号,留言将 QQ 头像,如果 QQ 号不存在或者是输入了邮箱,将 Gravatar 头像。...回复时邮件通知、查看编辑记录、无限加载等功能 诸多功能 – 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等丰富的短代码 – 支持通过短代码文章插入

    19.1K48

    2019的10个最佳WordPress画廊插件

    这很有意义,因为大多数人都以视觉为导向,而我们的大脑视觉上比文本更快地处理和理解事物。 不仅如此,大多数人都可以带有图像的情况下更好地处理和理解文本。...明智地使用颜色可以影响访问者以最佳方式响应您的Web内容。 关于WordPress画廊插件 视觉库插件可让您最好地WordPress网站上呈现图像或视频。...为了优化您网站上的图像,图库插件需要提供功能,使其能够使用用户可能会搜索的适当标题或关键字来标记图像。 这将使您的内容同时显示在网络和图像搜索结果。...合理的图像网格 使用Justified Image Grid Gallery以最美丽,真实的方式展示您的图像,而无需更改其原始大小。 没有随机裁剪,它可以保持照片的完整性。...由于使用了自定义的轻量级jQuery脚本,它可以快速加载 。 它具有自定义的缓存系统以提高性能 。 用户tranmautritam说: 编码精美,易于使用,支持快速回复。

    4.7K51

    XSS平台模块拓展 | 内附42个js脚本源码

    捕获的数据存储在数据库,其中包含与用户会话相关的信息,源URL等。 04.JQuery键盘记录键盘 一旦加载jQuery,一行(长)会写一个键盘记录器。...这个有效载荷的目的是做一个截图,并悄悄地发送到一个PHP文件(档案可用),将其存储到一个不错的PNG文件。...说明 https://github.com/diafygi/webrtc-ips 16.XHR DDoS 使用XHR以及Websockets(如果受害者不运行IE),只需使用稍微随机的参数来洪泛目标。...23.截取密码 三种脚本展示了从Web表单窃取密码的不同方式。一个基本的脚本,它使用Javascript“form”对象的“onsubmit”属性来拦截和使用表单设置的值。...30.地址欺骗 一小段JavaScript代码,可以Chrome中使用欺骗地址栏打开网页。

    12.5K80

    求超大文件上传方案( BS )

    第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,项目使用的jslib项目中找到了BJUI框架集成jQuery...Uploadify的部分,这部分代码封装在bjui-all.js文件bjui-all.js文件的全局变量定义中有以下部分代码,这就是定义的有关于上传的Uploadify控件的重要变量: //...属性的限制,我们jsp文件可以这样进行替换,这里使用的是覆盖原则,重新定义uploadLimit属性和fileSizeLimit属性,覆盖bjui-all.js文件的默认值设置。...git上最新的代码和部署发布,重新启动脚本即可完成修改,再次尝试大文件上传,功能基本实现。...以上需要注意的是maxPostSize属性各个Tomcat版本的不同,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上传与下载

    1.3K20

    WordPress 初学者词汇表(术语解释)

    WordPress 为撰写博客文章的作者、发表评论的读者、您的产品上发表评论的客户等使用头像。 可以 WordPress 仪表板的设置 > 讨论下启用头像。... WordPress ,您可以非常轻松地创建菜单,并且有内置设置可以将菜单分配到特定位置(例如,主菜单、侧边栏菜单、页脚菜单等)。... WordPress ,小部件用于向Widget Areas(小部件区域)添加内容和功能,例如侧边栏、页脚或启用小部件的任何其他位置。... WordPress 博客,一些主题包含可用于格式化内容的简码,例如,添加按钮。而一些插件使用简码插入特殊内容,例如使用插件构建的联系表单。...基本上,搜索引擎优化确保您的网站出现在搜索结果,而不是消失以太网——这意味着更多的网站访问者。

    7.2K20
    领券