目前，我正在帮助使用WordPress创建网站。我从开发人员那里获得了一个代码片段，该片段将显示WordPress网站上用户的LinkedIn帖子。现在，我有了JS，HTML和CSS3的代码片段，并希望将其从Wordpress上的网站构建器插件插入HTML窗口小部件中。
我尝试将JS代码插入HTML正文部分的末尾。就像JS Code一样。然后，我将整个代码段插入到网站构建器的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提要。