如何使用 WordPress Shortcode 顯示 Binance 即時加密貨幣價格

作者:

如果你經營 WordPress 網站並希望在頁面上顯示 Binance 即時加密貨幣價格，這篇文章將教你如何使用 Shortcode 來實現。透過簡單的 PHP 和 JavaScript 程式碼，你可以輕鬆嵌入即時的 Binance 貨幣價格資訊。

第一步：建立 Shortcode

在 WordPress 主題的 functions.php 或者自訂外掛的 PHP 檔案中，新增以下程式碼：

function ks_binance_stock_price_shortcode($atts) {
    static $counter = 0;
    $counter++;
    $atts = shortcode_atts([
        'symbol' => 'BTCJPY',
        'currency_symbol' => '¥' // 預設為日圓
    ], $atts);
    $unique_id = "binance-stock-price-" . $counter;

    ob_start();
    ?>
    <div id="<?php echo esc_attr($unique_id); ?>"
        style="
        display: flex;
        justify-content: center;
        color: #fff;"
        class="stock-price"
        data-symbol="<?php echo esc_attr($atts['symbol']); ?>"
        data-currency-symbol="<?php echo esc_attr($atts['currency_symbol']); ?>">Loading...</div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            function fetchStockPrice(elementId, symbol, currencySymbol) {
                const url = `https://api.binance.com/api/v3/ticker/price?symbol=${encodeURIComponent(symbol)}`;

                fetch(url)
                    .then(response => response.json())
                    .then(result => {
                        if (!result.price) throw new Error("請求失敗");

                        // 格式化數字為千分位
                        const formattedPrice = Math.floor(result.price).toLocaleString();

                        document.getElementById(elementId).innerHTML = `${currencySymbol}${formattedPrice}`;
                    })
                    .catch(error => {
                        document.getElementById(elementId).innerHTML = "無法獲取股價";
                        console.error("錯誤:", error);
                    });
            }

            const elementId = "<?php echo esc_attr($unique_id); ?>";
            const symbol = document.getElementById(elementId).getAttribute("data-symbol");
            const currencySymbol = document.getElementById(elementId).getAttribute("data-currency-symbol");

            // 初始載入價格
            fetchStockPrice(elementId, symbol, currencySymbol);

            // 設定每 10 秒更新一次價格
            setInterval(() => {
                fetchStockPrice(elementId, symbol, currencySymbol);
            }, 10000);
        });
    </script>
    <?php
    return ob_get_clean();
}

// 註冊 Shortcode
add_shortcode('binance_stock_price', 'ks_binance_stock_price_shortcode');

第二步：使用 Shortcode

當這段程式碼加入到 functions.php 或外掛後，你可以使用以下 Shortcode 在任何文章或頁面上顯示 Binance 即時價格：

[binance_stock_price symbol="BTCUSDT" currency_symbol="$"]

這樣，你的網站將會自動顯示 BTC/USDT 的最新價格，並且每 10 秒更新一次。

第三步：客製化顯示樣式

如果你希望調整顯示樣式，可以透過 CSS 來修改 .stock-price 類別，例如：

.stock-price {
    font-size: 24px;
    font-weight: bold;
    background: #222;
    padding: 10px;
    border-radius: 5px;
}

將這段 CSS 添加到 WordPress 的 style.css 或自訂 CSS 區塊，即可修改外觀。

結論

這篇文章教你如何透過 WordPress Shortcode 在網站上顯示 Binance 即時加密貨幣價格，並且自動更新。這樣的功能適合交易網站、金融部落格或任何想要展示即時幣價的 WordPress 網站。

發佈留言