目前，我正在帮助使用 WordPress 创建一个网站。我从开发人员那里得到了一个代码片段，它将显示 WordPress 网站上用户的 LinkedIn 帖子。现在我得到了一个包含 JS、HTML 和 CSS3 的代码片段，我想将它从 Wordpress 上的站点构建器插件插入到 HTML 小部件中。
我尝试在 HTML 正文部分的末尾插入 JS 代码。喜欢 JS 代码。然后我将整个片段插入网站构建器的 HTML 小部件中。但到目前为止还没有奏效。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id='linkedin-feed'>
<div id='linkedin-user'></div>
</div>
<footer>
</footer>
</body>
</html>
const url = 'https://linkedin-feed.richdevelops.com'
const proxyurl = "https://cors-anywhere.herokuapp.com/";
fetch(proxyurl + url)
.then(response => response.json())
.then(data => {
// console.log(data) // Heres the feed array
let userImage = data[0].profileImageSource
let userDescription = data[0].profileDescription
let userName = data[0].profileName
let user = `
<div>
<img src='${userImage}'></img>
<p>${userName}</p>
<p>${userDescription}</p>
</div>
`
let linkedinUser = document.querySelector('#linkedin-user')
linkedinUser.innerHTML = user
let feed = ''
for (item of data){ //Itterate through each post.
let title = item.title
let subTitle = item.subTitle
let imageSource = item.imageSource
let postUrl = item.postUrl
let postedUrl = item.postedUrl
let body = item.body
if (item.type==='link'){
feed = `
<h3 class='title'>${title}</h3>
<h4 class='subtitle'>${subTitle}</h4>
<div class='image'>
<img src='${imageSource}'></img></div>
<a href='${postUrl}'><p>Linkedin Post Link</p></a>
<a href='${postedUrl}'><p>Posted Url</p></a>
`
} else if (item.type==='post'){
feed = `
<div class='subtitle'>${body}</div>
<a href='${postUrl}'><p>Linkedin Post Link</p></a>
`
}
let div = document.createElement('div')
div.classList.add('feed-item')
div.innerHTML = feed
let linkedinFeed = document.querySelector('#linkedin-feed')
linkedinFeed.appendChild(div)
}
})
.catch(error => console.error(error))
// CSS CODE in a seperate file
.feed-item {
border: 1px black solid;
max-width: 600px;
padding: 10px;
}
img{max-width:150px;}
我希望输出应该显示 Wordpress 站点上用户的 LinkedIn Feed。
最佳答案
将 CSS 文件上传到您的服务器并包含它:
<link rel="stylesheet" type="text/css" href="https://your-site.com/css/mycss.css">
然后将 JS 文件上传到您的服务器并包含它:
<script type="text/javascript" src="https://your-site.com/js/myjs.js"></script>
所以最后 HTML 模块 的代码应该是这样的:
<link rel="stylesheet" type="text/css" href="https://your-site.com/css/mycss.css">
<script type="text/javascript" src="https://your-site.com/js/myjs.js"></script>
<div id='linkedin-feed'>
<div id='linkedin-user'></div>
</div>
关于javascript - 我得到了一个包含 JS、HTML 和 CSS3 的代码片段。我如何将它插入到 wordpress html-widget 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58726176/