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

【问题标题】：I got a code snippet with JS, HTML and CSS3. How do I insert it into a wordpress html-widget?我得到了一个带有 JS、HTML 和 CSS3 的代码片段。如何将它插入到 wordpress html-widget？
【发布时间】：2020-03-02 16:51:45
【问题描述】：

目前，我正在帮助使用 WordPress 创建一个网站。我从开发人员那里得到了一个代码 sn-p，它将显示 WordPress 网站上用户的 LinkedIn 帖子。现在我得到了一个包含 JS、HTML 和 CSS3 的代码 sn-p，并希望将它从 Wordpress 上的站点构建器插件插入到 HTML 小部件中。

我尝试在 HTML 正文部分的末尾插入 JS 代码。就像 JS 代码一样。然后我将整个 sn-p 插入到站点构建器的 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 提要。

【问题讨论】：

标签： javascript html css wordpress widget

【解决方案1】：

将 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 module 的代码应该是这样的：

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

【讨论】：

【解决方案2】：

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

    <!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 代码添加到也可以工作的小部件中

【讨论】：