在wordpress页面中嵌入Tradingview小部件

Question

I am an extremely beginner of Wordpress. I need to add a tradingview widget on my Wordpress page. Code as below.

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

The script part is usually suppressed by Wordpress. Please let me know if I can directly add widgets on Wordpress page. If by hooking in function.php if it could be done a sample code would be very useful. My given code works fine in plain html.

</div>

Answer 1

If you just want to insert that script into a page, you could use a plugin or set up a custom field in ACF, but the easiest way is to create a shortcode that you can add into the post editor.

Create a function in functions.php to display the script, and then use add_shortcode to define the shortcode to use. e.g.:

/* 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');

Then to display the heat map in a post/page, your just need to put the following shortcode into the post editor:

[tradingview_heatmap]

UPDATE:

It might help to get a very simple shortcode to work first, so we can rule out anything with it.

Add this to your 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');

Type the following into the post editor for a new, empty post, save it and view the post in your browser:

[my_test_shortcode]

It should print "This is added by my test shortcode!" as the post text.