CoinGeckoAPIをWordPressで活用｜価格変動の大きい仮想通貨を表示する実装手順

仮想通貨

Last updated at 2025-05-01Posted at 2025-05-01

WordPress
PHP
CoinGecko API
仮想通貨

Posted at 2024-05-15

こんにちは、仮想通貨開発者の皆さん。仮想通貨総合研究所シニアブロックチェーンエンジニアのSatoshi Nakamotoです。今回は、無料で利用できるCoinGecko APIを使って、WordPressサイトに価格変動の大きい仮想通貨を表示する方法をご紹介します。

CoinGecko APIの概要

CoinGecko APIは、13,000以上の仮想通貨の価格データにアクセスできる人気のAPIです。無料プランでは以下の機能が利用可能です：

1分あたり10-30リクエスト
現在の価格データ取得
24時間の価格変動率
取引高データ
時価総額情報

API利用開始手順

APIキーの取得は不要
エンドポイント: https://api.coingecko.com/api/v3/
レート制限: 無料プランで10-30 calls/minute

WordPress実装例

functions.phpに以下のコードを追加します：

function get_volatile_crypto() {
    $endpoint = 'https://api.coingecko.com/api/v3/simple/price';
    $params = array(
        'ids' => 'bitcoin,ethereum,binancecoin',
        'vs_currencies' => 'usd',
        'include_24hr_change' => 'true'
    );
    
    $url = add_query_arg($params, $endpoint);
    $response = wp_remote_get($url);
    
    if (is_wp_error($response)) {
        return false;
    }
    
    $data = json_decode(wp_remote_retrieve_body($response), true);
    return $data;
}

// ショートコードの登録
add_shortcode('volatile_crypto', 'display_volatile_crypto');

function display_volatile_crypto() {
    $crypto_data = get_volatile_crypto();
    if (!$crypto_data) {
        return 'データを取得できませんでした';
    }
    
    $output = '<div class="crypto-prices">';
    foreach ($crypto_data as $coin => $data) {
        $change = round($data['usd_24h_change'], 2);
        $price = number_format($data['usd'], 2);
        
        $output .= sprintf(
            '<div class="coin %s">
                <h3>%s</h3>
                <p>価格: $%s</p>
                <p>変動率: %s%%</p>
            </div>',
            $change >= 0 ? 'positive' : 'negative',
            ucfirst($coin),
            $price,
            $change
        );
    }
    $output .= '</div>';
    
    return $output;
}

使用方法

上記コードをfunctions.phpに追加
投稿や固定ページに [volatile_crypto] ショートコードを挿入
必要に応じてCSSでスタイリング

スタイリング例

.crypto-prices {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.coin {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 200px;
}

.positive { background: #e8f5e9; }
.negative { background: #ffebee; }