如何在WordPress侧边栏小工具区域添加JS代码展示实时燃油价格

Getting that live fuel price widget up in your WordPress sidebar is totally straightforward—here are three reliable methods, starting with the simplest option for most users:

Method 1: Use the Custom HTML Widget (No Coding Experience Required) #

This is the go-to approach for beginners:

• Log into your WordPress dashboard, then navigate to Appearance > Widgets.
• From the list of available widgets, grab the Custom HTML widget and drag it to the sidebar area where you want the fuel prices to display.
• Paste your JavaScript code directly into the widget’s content field:

  <script src="http://blocks.degalu-kainos.lt/today-avg.js" type="text/javascript" charset="UTF-8"></script>
  

• Click Save on the widget, then open your website’s frontend to confirm the fuel prices load correctly.

Note: Some WordPress setups (especially with strict security plugins or theme settings) might strip script tags from widgets. If that happens, try the next method.

Method 2: Use a Plugin to Safely Add Scripts to Widgets #

If the Custom HTML widget doesn’t work, use a plugin designed to handle custom code without restrictions:

• Install and activate a plugin like Code Snippets or Custom CSS & JS (choose one that supports shortcode creation or widget code injection).
• For example, with Code Snippets:
  1. Go to Snippets > Add New and name your snippet something like "Real-Time Fuel Prices".
  2. Paste this code into the snippet editor:

     function fuel_price_shortcode() {
         // Enqueue the fuel price script
         wp_enqueue_script('fuel-prices', 'http://blocks.degalu-kainos.lt/today-avg.js', array(), null, true);
         // Some scripts need a container to inject content—adjust if needed
         return '<div class="fuel-price-widget"></div>';
     }
     add_shortcode('show_fuel_prices', 'fuel_price_shortcode');
     

  3. Save and activate the snippet.
  4. Return to Appearance > Widgets, add a Shortcode widget to your sidebar, and paste [show_fuel_prices] into it.
• Save the widget and check your frontend to see the live prices.

Method 3: Add Directly to Your Theme’s functions.php (Advanced) #

If you’re comfortable editing theme files, you can enqueue the script globally and add it to your sidebar via a custom widget or template edit:

• Go to Appearance > Theme File Editor, then select functions.php from the right-hand file list.
• Add this code at the bottom (always back up your theme first to avoid breaking your site!):

  function enqueue_fuel_price_script() {
      // Load the script only on the frontend (not in the dashboard)
      if (!is_admin()) {
          wp_enqueue_script('fuel-prices', 'http://blocks.degalu-kainos.lt/today-avg.js', array(), null, true);
      }
  }
  add_action('wp_enqueue_scripts', 'enqueue_fuel_price_script');
  

• Save the changes, then add a Custom HTML widget to your sidebar (you may need to include a container div if the script requires it) or edit your theme’s sidebar template file to add the necessary markup.

Pro Tip: Always test changes on a staging site first if you can—this way you won’t risk breaking your live website.

内容的提问来源于stack exchange，提问作者Yasir Altaf