网站优化

网站优化

Products

当前位置:首页 > 网站优化 >

在zblog站点内容页面调用wordpress站点的相关外链

GG网络技术分享 2025-03-18 16:16 1


在zblog站点内容页中以标题第一个标点前内容,利用wp rest api 调用wordpress站点相关外链。

zblog的tpure主题为例,

在主题文件single.php的body中添加以下代码:

                <script>

//网页中以标题第一个标点前内容,调用wordpress站点相关外链

document.addEventListener('DOMContentLoaded', function() {

var pageTitle = document.title;

console.log('Page Title:', pageTitle);

// 寻找标题中的第一个标点符号的索引

var firstPunctuationIndex = pageTitle.search(/[.,\/#!$%^&*;:{=\-_`~(,。、?!;:“‘【《〈( ]/);

// 如果标题中有标点符号,则截取标点符号之前的内容作为搜索词;否则使用完整的标题作为搜索词

var searchWord;

if (firstPunctuationIndex !== -1) {

searchWord = pageTitle.slice(0, firstPunctuationIndex).trim();

} else {

searchWord = pageTitle;

}

console.log('Search Word:', searchWord);

fetch('https://www.ystcw.com/wp-json/wp/v2/posts?search=' + encodeURIComponent(searchWord))

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

.then(data => {

// 处理数据并渲染到 HTML 中

const linksContainer = document.getElementById('links-container');

// 截取前10个结果

const first10Results = data.slice(0, 10);

first10Results.forEach(post => {

const link = post.link.replace(/\\/g, '/'); // 替换转义字符为正常斜杠

const title = post.title.rendered;

const linkElement = document.createElement('a');

linkElement.classList.add('link');

linkElement.href = link;

linkElement.target = "_blank"; // 添加 _blank 属性

linkElement.textContent = title;

linksContainer.appendChild(linkElement);

// 添加换行

linksContainer.appendChild(document.createElement('br'));

});

})

.catch(error => {

console.error('Error fetching data:', error);

});

});

</script>

在post-single.php中的文章正文{$article.Content}下,添加以下代码用于显示前端:

<div id="links-container"></div>

效果截图

zblog站点启用API及调用

插件名称:文章列表站外调用

作者: 沉冰浮水

使用说明:

最新的10篇发布文章

<script type="text/javascript" src="https://www.n305.com/?Api&keyword=10,null,null,null,null,null,null,new"></script>

调用某个分类下的前N篇文章

(右侧案例为分类目录1下面的前10篇文章)

<script type="text/javascript" src="https://www.n305.com/?Api&keyword=10,1,null,null,null,null,null,new"></script>

参数说明:?Api&keyword=10,1,null,null,null,null,null,new分别对应

$count(条数),$cate(分类),$auth(作者id),null,$tags(标签id),null,null,$order(排序:new最新、hot最热、comm热评、rand随机)

例如: 调用分类ID为2,作者id为1的最近发布的前3篇文章。

<script type="text/javascript" src="https://www.n305.com/?Api&keyword=3,2,1,null,null,null,null,new"></script>

效果图

Wordpress调用另一个wordpress站点的API数据,随机显示10条数据,search关键词可能无效。

/body前添加代码:

  <script>

document.addEventListener('DOMContentLoaded', function() {

// 获取JSON数据

fetch('https://www.penglaipavilion.com/wp-json/wp/v2/posts?categories=7868&search=旅游&doing_wp_cron=')

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

.then(data => {

// 随机选择10条数据

const randomResults = [];

while (randomResults.length < 10) {

const randomIndex = Math.floor(Math.random() * data.length);

randomResults.push(data[randomIndex]);

}

// 提取链接并渲染到 HTML 中

const linksContainer = document.getElementById('links-container');

randomResults.forEach(post => {

const link = post.link.replace(/\\/g, '/'); // 替换转义字符为正常斜杠

const title = post.title.rendered;

const linkElement = document.createElement('a');

linkElement.classList.add('link');

linkElement.href = link;

linkElement.target = "_blank"; // 添加 _blank 属性

linkElement.textContent = title;

linksContainer.appendChild(linkElement);

// 添加换行

linksContainer.appendChild(document.createElement('br'));

});

})

.catch(error => {

console.error('Error fetching data:', error);

});

});

</script>
特别注意:有些wordpress站点必须要加上&doing_wp_cron=,因为站点启用定时功能的话,没有&doing_wp_cron=不会显示数据。

标签: zblog

提交需求或反馈

Demand feedback