"...">
Js调用wordpress随机文章
时间 : 2023-12-13 16:26:02声明: : 文章内容来自网络,不保证准确性,请自行甄别信息有效性

最佳答案

要实现在JavaScript中调用WordPress随机文章,你可以使用WordPress的REST API。以下是一种实现方式:

首先,确保你的WordPress网站已经启用了REST API功能。进入WordPress后台,依次点击"设置" -> "阅读",找到"站点条款"选项。勾选“对站点启用机器人访问权限”,并点击保存更改。

接下来,你可以使用 JavaScript 的 fetch 函数来获取随机文章。使用以下代码示例:

```javascript

// 获取随机文章

function getRandomPost() {

// 发起GET请求,获取随机文章

fetch('https://your-wordpress-site/wp-json/wp/v2/posts?orderby=rand&per_page=1')

.then(response => response.json())

.then(data => {

// 处理随机文章数据

const randomPost = data[0];

console.log(randomPost);

// 在页面中显示随机文章标题和内容

const postTitle = document.getElementById('post-title');

const postContent = document.getElementById('post-content');

postTitle.innerHTML = randomPost.title.rendered;

postContent.innerHTML = randomPost.content.rendered;

})

.catch(error => {

console.log('Error:', error);

});

}

在上面的代码中,我们使用了REST API的`orderby=rand`参数来获取随机文章。我们只请求了一篇文章,使用了`per_page=1`参数。你需要将上面的代码中的`your-wordpress-site`替换为你自己的WordPress网站的域名。

然后,你可以在HTML页面中创建一个显示随机文章的区域:

最后,在页面加载完毕后或是在某个事件中调用 `getRandomPost` 函数来获取并显示随机文章:

```javascript

document.addEventListener('DOMContentLoaded', () => {

getRandomPost();

});

通过上述代码,你可以在JavaScript中调用WordPress的REST API,获取随机文章,并将其显示在你的网页中。

其他答案

在JavaScript中,你可以通过WordPress的REST API来调用随机文章。首先,确保你的WordPress网站启用了REST API功能。

然后,你可以使用以下代码来获取随机文章:

```javascript

fetch('https://your-wordpress-site/wp-json/wp/v2/posts?orderby=rand&per_page=1')

.then(response => response.json())

.then(data => {

// 获取第一篇随机文章

const post = data[0];

// 输出文章标题和内容

console.log('随机文章标题:', post.title.rendered);

console.log('随机文章内容:', post.content.rendered);

})

.catch(error => console.log(error));

请将上述代码中的 `https://your-wordpress-site` 替换为你的WordPress网站的URL。

上述代码使用了`fetch`函数来发送GET请求到WordPress的REST API的`/wp/v2/posts`端点,并且使用`orderby=rand`参数来获取随机文章。 `per_page=1`参数用于限制结果只返回一篇文章。

当请求成功时,代码将获取到的数据转换为JSON格式,并提取第一篇随机文章的标题和内容。你可以根据自己的需求将这些数据输出到控制台或者呈现在网页上。

请注意,为了使用此代码,你需要将它放置在能够运行JavaScript的环境中,比如将它放置在网页的`<script>`标签中或者在Node.js环境中运行。如果你将代码放置在网页中,你可能需要在HTML文件中引入`fetch`的polyfill来支持旧版浏览器。

希望以上代码能够帮助到你!