时间戳

首页 > 解决方案 > 我得到了一个带有 JS、HTML 和 CSS3 的代码片段。如何将它插入到 wordpress html-widget？

javascript - 我得到了一个带有 JS、HTML 和 CSS3 的代码片段。如何将它插入到 wordpress html-widget？

问题描述

目前，我正在帮助创建一个使用 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。

标签： javascripthtmlcsswordpresswidget

解决方案

您的代码的正确结构应该是这样的：您忘记放置脚本和样式标签以供浏览器解释

    <!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>


    <script type="text/javascript">
          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))
    </script>


    <style type="text/css">
        /* CSS CODE in a seperate file */
        .feed-item {
          border: 1px black solid; 
          max-width: 600px;
          padding: 10px;
        }

        img{max-width:150px;}
    </style>

 <footer>
 </footer>

 </body>

 </html>

现在，您只需在任何接受 html 的小部件中添加以下代码：

     <div id='linkedin-feed'>
        <div id='linkedin-user'></div>
     </div>


    <script type="text/javascript">
          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))
    </script>


    <style type="text/css">
        /* CSS CODE in a seperate file */
        .feed-item {
          border: 1px black solid; 
          max-width: 600px;
          padding: 10px;
        }

        img{max-width:150px;}
    </style>

但是您可以将 css 添加到外部 css 文件并将 js 添加到 javascript 文件中，只需将 html 代码添加到也可以工作的小部件中

推荐阅读