在 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 中设置自定义字段，但最简单的方法是创建一个可以添加到帖子编辑器中的短代码。

在 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');

然后要在帖子/页面中显示热图，您只需将以下短代码放入帖子编辑器中即可：

[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');

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

[my_test_shortcode]

它应该打印“这是由我的测试短代码添加的！”作为帖子文本。

Answer 2

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

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