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

在单页面WordPress上发布两个ajax帖子

,可以通过以下步骤实现:

  1. 首先,确保你已经安装并激活了WordPress插件"WP REST API",该插件允许你通过REST API与WordPress进行通信。
  2. 创建一个自定义页面模板,用于展示这两个ajax帖子。在你的主题文件夹中创建一个新的PHP文件,命名为"custom-template.php"(可以根据你的需求自定义文件名)。
  3. 在"custom-template.php"文件中,使用以下代码创建一个自定义页面模板:
代码语言:txt
复制
<?php
/*
Template Name: Custom Template
*/

get_header(); ?>

<div id="ajax-posts-container">
    <div id="post1"></div>
    <div id="post2"></div>
</div>

<?php get_footer(); ?>

这个自定义页面模板定义了一个包含两个div容器的页面,用于展示两个ajax帖子。

  1. 在你的主题文件夹中创建一个新的JavaScript文件,命名为"custom-ajax.js"(可以根据你的需求自定义文件名)。
  2. 在"custom-ajax.js"文件中,使用以下代码实现通过AJAX加载帖子的功能:
代码语言:txt
复制
jQuery(document).ready(function($) {
    $.ajax({
        url: '/wp-json/wp/v2/posts', // 替换为你的WordPress站点URL
        type: 'GET',
        data: {
            per_page: 2 // 获取两篇帖子
        },
        success: function(posts) {
            // 加载第一个帖子
            $.ajax({
                url: '/wp-json/wp/v2/posts/' + posts[0].id, // 替换为你的WordPress站点URL和第一个帖子的ID
                type: 'GET',
                success: function(post1) {
                    $('#post1').html('<h2>' + post1.title.rendered + '</h2><p>' + post1.content.rendered + '</p>');
                }
            });

            // 加载第二个帖子
            $.ajax({
                url: '/wp-json/wp/v2/posts/' + posts[1].id, // 替换为你的WordPress站点URL和第二个帖子的ID
                type: 'GET',
                success: function(post2) {
                    $('#post2').html('<h2>' + post2.title.rendered + '</h2><p>' + post2.content.rendered + '</p>');
                }
            });
        }
    });
});

这段JavaScript代码使用了jQuery库来简化AJAX请求的处理。它首先通过GET请求获取最新的两篇帖子,然后分别加载这两篇帖子的标题和内容到页面上的对应div容器中。

  1. 在你的主题文件夹中的functions.php文件中,添加以下代码来加载自定义JavaScript文件:
代码语言:txt
复制
function custom_enqueue_scripts() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/custom-ajax.js', array('jquery'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

这段代码使用了WordPress的wp_enqueue_script函数来加载自定义JavaScript文件。

  1. 在WordPress后台创建一个新页面,并选择刚才创建的自定义页面模板"Custom Template"。
  2. 保存并发布这个页面。

现在,当你访问这个新创建的页面时,它将会通过AJAX加载最新的两篇帖子,并将它们展示在页面上的两个div容器中。

请注意,以上代码仅为示例,你可能需要根据你的具体需求进行修改和调整。此外,为了使这个功能正常工作,你需要确保你的WordPress站点已经正确配置并且具有足够的权限来访问REST API。

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

相关·内容

如何在 wordpress 文章页和页面隐藏作者发布

wordpress 文章页会显示出发布者的名字,而默认的也是 wp 后台登陆名,这个就有安全性隐患。...如何在wordpress 文章页和页面隐藏作者/发布者呢,下面魏艾斯博客来详细说一下操作步骤。...进入 wordpress 后台,点击外观-编辑,右侧找到并点击 single.php,进入编辑页面,每个人使用的模板不同,只要找到包含“author”的代码就对了,要包括前后的 css 样式。...现在去博客前台刷新一下文章页面,作者就被隐藏看不到了。 同样的方法页面 page.php 里面找到 author 这段代码删除后保存,这样在前台的页面也隐藏了作者名字了。...经过这两步操作后,前台看不到作者名字对提高 wordpress 的安全性有一定帮助了。

3.4K30

Sticky Posts Switch插件教程WordPress中为分类添加置顶文章

当您将新内容发布到您的网站时,之前的帖子会关闭并最终移动到存档页面。粘性帖子允许您在WordPress中添加精选帖子,并在您的网站主页以不同的方式显示它们。...你想在您的WordPress类别页面顶部添加置顶帖/文章吗?通过类别页面上添加粘性帖子,您可以显示该特定类别的特色帖子。...无论何时发布,您都希望它们处于开头。这些帖子被称为粘性帖子,因为它们总是在网站的首页WordPress CMS中称之为粘性帖子,因为您将帖子放在页面顶部。  ...这些文章可能会隐藏在您在网站上发布的其他博客文章中。类别页面上放置粘性帖子对于突出显示WordPress网站上最重要的内容非常有用。这样做将提高他们的知名度和点击率 CTR。  ...Sticky Posts Switch插件教程WordPress中为分类添加置顶文章  此外还可以选择主页、帖子存档页面或分类页面(如类别和标签)显示粘性帖子的位置。

5.5K20
  • WordPress 精品插件大全页面的开发小记

    昨天发布了一个Page页面WordPress 精品插件大全。有些朋友比较感兴趣是如何做的,本篇简单写一下整个开发过程,作一个小结,也顺便整理一下代码,本地开发环境里写的比较脏乱差。...本地开发好这个数据表格之后,就要解决怎么将它和WordPress融合起来的问题,这是一个已经解决的问题,本博客开站的第一篇文章里就已经详细的讲解过了:使用Vue.jsWordPress中创建页面应用...第一步:新建一个WordPress页面 页面(Page)和文章(Post)都是WordPress的信息发布形式。官网给出的关于页面的解释: 你可以WordPress中撰写日志(文章)或是页面。...4.0,打分人数不低于100 技术支持帖子帖子数和解决数都不低于0 过滤的方法仍然是使用Python结合pandas,代码如下: 插件的描述信息 这样基本就能得到了所有需要用来呈现的数据。...第三步:动态数据表格的开发 本质这个数据表也可以看做是一个页面应用,详细的Vue项目的开发步骤之前的文章里有介绍:使用Vue.jsWordPress中创建页面应用SPA,如果不熟悉Vue开发流程的童鞋可以再看一下

    1.6K20

    优化WordPress性能的高级指南

    WordPress可能很慢,那么你如何优化呢? 有关如何调整和优化WordPress的文章有很多。事实WordPress本身提供了一个强大的WordPress优化指南。...事实,官方文档中有一个建议不要使用此功能的注释,因为你需要调用附加方法来恢复原始查询。而且,替换主查询会对页面加载时间产生负面影响。  ...这可能会导致不一致,特别是如果我们代码中使用查询相关的过滤器,因为你页面中不期望的帖子可能会被该函数返回。 使用WP_Query类 在我看来,这是从数据库中检索帖子的最佳方式。...AJAXing the Fastest Way 如果我们需要通过AJAX与我们的网站沟通,WordPress处理服务器端的请求时提供一些abstraction( offers some abstraction...大多数(如果不是全部)WordPress全页缓存插件既不缓存发布请求也不调用管理员文件(administrator files)。

    7.1K20

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

    Content(内容) 您的内容包括您网站上的所有帖子页面。这可以是文本、表格、图像或您添加到站点的任何其他内容。它基本是平面设计之外的所有信息。...因此,使用相同的示例,新闻博客,您可能会找到“加拿大”或“美国”以及“iPhone”或“Android”的标签。 Exceprt(摘录) 摘录是描述您的帖子(或页面)的简短说明。...它通常用于您的主博客页面,其中显示了您最近发布的所有帖子的列表,并向读者提示您的帖子是关于什么的。...WordPress 为撰写博客文章的作者、发表评论的读者、您的产品发表评论的客户等使用头像。 可以 WordPress 仪表板的设置 > 讨论下启用头像。...根据您的 WordPress 主题(或页面构建器),侧边栏通常是左侧或右侧的垂直列,尽管根据帖子类型或页面,某些设计可能具有两个侧边栏甚至自定义侧边栏。

    7.2K20

    CVE-2022-21661:通过 WORDPRESS SQL 注入暴露数据库信息

    插件和主题使用此对象来创建他们的自定义帖子显示。  当插件使用易受攻击的类时,就会出现该漏洞。一个这样的插件是Elementor Custom Skin 。...is called } 图 2 - wordpress/wp-admin/admin-ajax.php admin-ajax.php页面检查请求是否由经过身份验证的用户发出。...在这里,请求是没有身份验证的情况下发送的,因此会调用未经身份验证的 Ajax 操作,即wp_ajax_nopriv_ecsload。...搜索字符串“wp_ajax_nopriv_ecsload”表明它是一个存在于ajax-pagination.php页面中的钩子名称: public function init_ajax(){ //add_action...查看完整尺寸 图 7 - wordpress/wp-includes/class-wp-tax-query.php 的 clean_query 方法 结论 对 WordPress 网站的主动攻击通常集中可选插件

    4.3K10

    WordPress 6.1 正式版已发布,最全新功能图文介绍

    块编辑器改进 WordPress 用户大部分时间都在使用块编辑器为他们的网站创建帖子页面。 每个 WordPress 版本都对编辑器进行了大量改进。...摘要面板下的永久链接和模板选项 固定链接和模板选项帖子设置下有自己的面板。 WordPress 6.1 中,这些面板合并在摘要面板下。...站点图标将替换 WordPress 徽标 如果您为您的网站设置了站点图标,那么它将用作屏幕左上角的查看帖子按钮。 新的首选项 首选项面板现在包括两个新选项。...首先,“始终打开列表视图”允许您在编辑帖子时显示列表视图。 第二个新选项是“显示按钮文本标签”,它显示文本而不是按钮的图标。...单个页面 单个文章 分类法中的单个分类 单个类别 自定义模板(可用于任何帖子页面) 只需转到外观»编辑器,然后从左侧边栏中选择模板。之后单击添加新按钮以查看可用选项。

    4.7K30

    WordPress主题制作(一):主题文件结构

    它还用于主页显示博客文章。 index.php:如果front-page.php和home.php都不存在,那么WordPress会回退到index.php模板来显示首页。...(非文章) 自定义模板——WordPress后台创建页面的地方,右侧边栏可以选择页面的自定义模板 page-{slug}.php——如果页面的缩略名是news,WordPress将会查找 page-news.php...embed- {post-type} – {post_format} .php——WordPress将首先查找帖子类型和帖子格式模板。...embed- {post-type} .php——如果帖子类型是review,WordPress会寻找embed-review.php。 embed.php——所有嵌入的默认回退。...Index.php WordPress主题制作(八):制作文章页模板single.php 计划: WordPress主题制作(九):制作评论区模板comments.php 计划: WordPress主题制作

    1.9K30

    WordPress 5.6 发布,新的 2021 主题和古腾堡编辑器大更新

    WordPress 5.6 发布,这个版本发布了新的默认主题 2021,然后给古腾堡增加大量的模块,让你更加方便插入图片,声音和视频。...古腾堡编辑器更新 更灵活的布局:古腾堡编辑器更加方便设置布局,支持栏或者多栏,支持固定宽度,全屏头部,背景图支持渐变。...更多块模式:某些主题中,预配置的块模式让站点创建页面变得轻而易举,所以更多的块模式让你创建页面的时候变得更加方便快捷。...更好的视频字幕:为了帮助大家想视频中添加字幕,您现在可以帖子页面中上传字幕。这样,比以往任何时候都更容易使需要或喜欢使用字幕的任何人都可以访问您的视频。...现在,WordPress 允许用户在网站后台的控制台 > 更新页面 自动更新。启用自动更新后,用户不再需要在 WordPress管理控制台的“更新”页面上进行手动更新。

    85240

    三分钟让你了解什么是Web开发?

    如果你可以一个感兴趣的地方发布信息并阅读这些信息,那该怎么办?这正是网络所做的。您将信息保存在web服务器,人们可以使用客户机(浏览器)读取该信息。这种架构称为“服务器-客户端架构”。...web存储信息的最基本和最长久的方式是HTML文件中。为了更好的理解,让我们举一个公司发布价格信息的简单例子,这样它的供应商就可以下载并查看这个列表,它包含有价格和生效日期的产品。...通过认证用户创建新的博客 为此,我们需要一个带有两个输入字段(标题、内容)的HTML表单,用户可以通过该表单创建一个博客帖子。...ajax网站中,每个用户操作都需要从服务器加载完整的完整页面。这个过程是低效的,并且创建了一个糟糕的用户体验。所有的页面内容都消失了,然后重新出现。...Ajax是构建页应用程序(SPAs)的技术之一。顾名思义,整个应用程序一个页面中,所有内容都是动态加载的。

    5.8K30

    使WordPress达到最佳运行状态的13个技巧

    [转]使WordPress达到最佳运行状态的13个技巧 作者:matrix 被围观: 1,094 次 发布时间:2011-10-03 分类:Wordpress 兼容并蓄 | 无评论 » 这是一个创建于...升级到WordPress发布的最新版本 WordPress 2.7在运行方面比以往有了很大进步。 升级wordpress到最新版本之后你就可以体验到这一点了。 2....8.PHP Speedy WP PHP Speedy WP能够用简单快捷的方法加速你的WordPress网站运行并提高网站的反应时间,而你只需要允许它将所有JS和CSS文件单独整理成两个文件——这会大幅度减少页面加载时间...你也可以指定页面或文章中添加CSS文件,然后将所有CSS文件放进同一个文件。 10.DB Cache 这款插件按给定时间缓存每个数据库查询。 插件运行速度快,缓存占据的硬盘空间也很小。...12.显示页面加载次数和查询次数 将下面的代码添加到你的模板就可以显示加载你的页面需要的时间和执行的sql查询次数了。 这个方法可以快速了解你的WordPress博客优化程度。

    1K30

    WordPress日志、编辑类插件

    两个插件虽然都涉及到字数统计, 但实质的字数判断应该是不同的. Category Icons 非常好用的WordPress文章分类图标插件. 可以让你为每个分类指定一个不同的图标....然后文章Loop里面显示. 插件主页 Excerpt Editor 快速编辑和创建文章或页面摘要的WordPress插件. 可以为页面自定义摘要, 自动生成摘要等等....插件主页 Ajax Post Save 可以让你在保存WordPress文章或页面的时候使用Ajax. 插件主页 wp-orderposts 文章排序插件....Include It 这个WordPress插件可以来文章或页面中包其它内容. 具体还没有试过, 不过应该挺有用的, 抽空试试. No Flash Uploader 去除Flash上传功能....WordPress默认的形式是显示一篇和下一篇文章的标题和链接. 而这个插件可以让你显示成”一页”和”下一页”或是你的自定义自符. 没什么特点, 主要是为了页面美观.

    1.6K30

    10 个扁平化设计风格的 WordPress 主题

    Nemo Nemo 源自 metro 风格的 WordPress 主题,完全 AJAX 化,黑色系,最简化设计,非常适合设计师或者摄影师,或者艺术家去展示自己的作品。...并且 Nemo 是一个响应式 WordPress 主题,兼容桌面电脑和移动设备所有主流浏览器。...详细功能及演示 » Argo Argo 是一个现代设计风格的页主题,通过它可以实现页浏览效果,非常酷的页扁平设计风格。...详细功能及演示 » MetroStyle MetroStyle 是功能强大的 Metro 风格的 WordPress 主题,无论 PC 还是移动设备,载入速度都非常快,并且还有25种皮肤可供选择。...详细功能及演示 » Metrofy WP 最大的功能是它可以作为多页面站点工作,也可以像上面的 Argo 主题一样作为页面主题使用,全新创意的主题,但是功能同样强大,推荐。

    76020

    WPJAM Basic 详细介绍:一键优化 WordPress 文章设置和操作

    WPJAM Basic 首先让用户选择 WordPress 后台的文章列表页是否全面实现AJAX操作,然后还支持显示和设置文章缩略图, 显示和修改文章浏览数,显示排序下拉选择框,支持通过作者进行过滤和支持上传外部图片这...全面AJAX操作 WordPress 后台文章列表页全面实现AJAX操作之后,列表页点击导航,进行搜索,点击分类筛选等这些查询操作,都不再重新加载页面,而是会首先显示加载效果的 loading 的图片...如上图所示,箭头所指的部分,从上到下,这些都实现了 AJAX 操作。 文章状态栏切换:比如从全部到已发布,无需刷新页面,直接切换。 文章搜索功能:无需刷新页面,直接返回搜索结果。...这里的对标题,摘要和头图的设置和文章编辑器详情页的设置是一样的,模板也是生效的,所以这个操作非常快捷方便。...404跳转:增强404页面跳转到文章页面能力,这个应用于比较多 post_type 的情况。 除此之后,文章快捷管理方面,我还提供两个扩展:

    62620

    5个最佳WordPress广告插件

    5个最佳WordPress广告插件  大多数这些插件还将包括广告小部件。您可以使用这些小部件侧边栏、页面、页脚、页眉和WordPress主题提供的任何其他小部件区域中显示广告。  ...5个最佳WordPress广告插件  它带有一个易于使用的设置页面,您可以在其中管理您的广告代码并选择您想要显示它们的方式和位置。该插件可以文章之前或之后、内部帖子内容、摘录之后等自动显示广告。  ...一个页面上最多显示10个广告。Google允许发布一个页面上最多放置3个Adsense for Content。如果您正在使用其他广告,则最多可以显示10个广告。...边栏小部件最多支持10个广告代码。最多支持10个广告代码,用于帖子中的特定位置和随机化。地理定位:将广告限制特定国家。设备定位:将广告限制特定设备。...您所做的就是将您的广告添加到插件中,然后将该广告的短代码或块包含在您要显示广告的帖子中。如何在WordPress帖子之间放置广告?

    8.5K20

    如何搭建 WordPress 博客

    WordPress是使用PHP语言开发的博客平台,用户可以支持PHP和MySQL数据库的服务器架设属于自己的网站。也可以把 WordPress当作一个内容管理系统(CMS)来使用。...用户可以支持 PHP 和 MySQL数据库的服务器使用自己的博客。WordPress有许多第三方开发的免费模板,安装方式简单易用。所以,对于初学者来说,我强烈建议使用WordPress来搭建网站。...添加内容并创建新的页面 安装主题后,您就可以开始创建内容了。 添加和编辑页面 WordPress仪表板的侧边栏中查找“页面->添加”。...禁用帖子页面的评论 您可能不希望您的访问者对网页发表评论。以下是关闭WordPress页面评论的方法。 在编写新页面时,单击右上角的“屏幕选项”。 单击“讨论”框。底部将显示“允许评论”框。...“帖子页面”是您博客的首页(如果您的整个网站不是博客)。如果您没有自己选择静态页面WordPress将收集您的最新帖子并开始您的主页显示它们。

    7.5K3330
    领券