在 wordpress 页面中嵌入 Tradingview 小部件

Question

我是 Wordpress 的初学者。我需要在我的 Wordpress 页面上添加一个交易视图小部件。代码如下。

<!-- TradingView Widget BEGIN -->
 <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style="color: rgb(173, 174, 176); font-family: &quot;Trebuchet MS&quot;,Tahoma,Arial,sans-serif; font-size: 13px;">Forex Heat Map by <span style="color: #3BB3E4">TradingView</span></a></span>
 <script src="https://s3.tradingview.com/external-embedding/embed-widget-forex-heat-map.js">{
   "currencies": [
     "EUR",
     "USD",
     "JPY",
     "GBP",
     "INR"
   ],
   "width": "450",
   "height": "500",
   "locale": "en"
 }</script>
<!-- TradingView Widget END -->

脚本部分通常被 Wordpress 抑制。如果我可以直接在 Wordpress 页面上添加小部件，请告诉我。如果通过挂钩 function.php 如果可以的话，示例代码将非常有用。我给定的代码在普通 html.

中运行良好

Answer 1

如果您只想将该脚本插入页面，您可以使用插件或在 ACF 中设置自定义字段，但最简单的方法是创建一个简码您可以将其添加到 post 编辑器中。

在functions.php中创建一个函数来显示脚本，然后使用add_shortcode定义要使用的简码。例如：

/* function that just displays the script */
function insert_tradingview_heatmap_shortcode() { ?>
    <!-- TradingView Widget BEGIN -->
    <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style="color: rgb(173, 174, 176); font-family: &quot;Trebuchet MS&quot;,Tahoma,Arial,sans-serif; font-size: 13px;">Forex Heat Map by <span style="color: #3BB3E4">TradingView</span></a></span>
    <script src="https://s3.tradingview.com/external-embedding/embed-widget-forex-heat-map.js">{
      "currencies": [
        "EUR",
        "USD",
        "JPY",
        "GBP",
        "INR"
      ],
      "width": "450",
      "height": "500",
      "locale": "en"
    }</script>
<!-- TradingView Widget END -->
<?php
}
/* create a shortcode called tradingview_heatmap that will run the function */
add_shortcode('tradingview_heatmap', 'insert_tradingview_heatmap_shortcode');

然后要在 post/page 中显示热图，您只需将以下简码放入 post 编辑器：

[tradingview_heatmap]

更新：

首先让一个非常简单的短代码起作用可能会有所帮助，这样我们就可以用它排除任何问题。

将此添加到您的 functions.php：

/* function to display a test message */
function my_test_shortcode() { ?>
    <p>This is added by my test shortcode!</p>
<?php
}
add_shortcode('my_test_shortcode', 'my_test_shortcode');

在 post 编辑器中输入以下内容，创建一个新的空 post，保存并在浏览器中查看 post：

[my_test_shortcode]

它应该打印 "This is added by my test shortcode!" 作为 post 文本。

在 wordpress 页面中嵌入 Tradingview 小部件

Embedding Tradingview widget in wordpress page

javascript

php

wordpress

widget